tykayn
/
funky-framadate-front
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git
1
1
Fork 0
Code Issues Projects Releases Wiki Activity

[front] component : vote choice

This commit is contained in:
22px 2019-10-23 18:08:35 +02:00
parent 3e29117ea6
commit 6ee9f742fa
2 changed files with 145 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
src/app/vote-choice/vote-choice.component.html
View File

@ -1,5 +1,4 @@
<div class="choicebox choicebox--active">
<div class="choicebox__time">
<div class="choicebox__date" *ngIf="choice.date">
{{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
@ -21,22 +20,48 @@
</button>
</div>
<div class="choicebox__count">
<div class="choicebox__votes">
<div class="choicebox__vote choicebox__vote--yes">
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes">
<div class="choicebox__vote">
{{choice.votesCount.yes}}
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
</div>
<div class="choicebox__vote choicebox__vote--maybe">
<div class="choicebox__vote">
{{choice.votesCount.maybe}}
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
</div>
</div>
<div class="choicebox__tooltip" id="choicebox-tooltip">
<div class="choicebox__tooltiplist">
<div class="choicebox__tooltipttl">
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
{{choice.votesCount.yes}} "Oui"
</div>
<ul>
<li>Lorem</li>
<li>Ipsum dolor</li>
<li>Sit amet</li>
<li>Consectetur</li>
</ul>
</div>
<div class="choicebox__tooltiplist">
<div class="choicebox__tooltipttl">
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
{{choice.votesCount.maybe}} "Peut-être"
</div>
<ul>
<li>Lorem</li>
<li>Ipsum dolor</li>
<li>Sit amet</li>
<li>Consectetur</li>
<li>Lorem</li>
<li>Ipsum dolor</li>
<li>Sit amet</li>
<li>Consectetur</li>
</ul>
</div>
</div>
</button>
<div class="choicebox__countxt">
Choix ayant reçu le plus de votes
</div>
</div>
</div>
<br><!-- à virer -->
</div>

122
src/app/vote-choice/vote-choice.component.scss
View File

@ -12,13 +12,13 @@
// -- VARIABLES
// ----------------------------
$box-padding: 2rem;
$box-border-width: .6rem;
$btn-size: 5rem;
$btn-margin-x: 1rem;
$btn-margin-y: 1.5rem;
$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
$breakpoint-responsive: 640px; // à définir
$box-padding : 2rem;
$box-border-width : .6rem;
$btn-size : 5rem;
$btn-margin-x : 1rem;
$btn-margin-y : 1.5rem;
$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
$breakpoint-responsive : 640px; // à définir
@ -31,7 +31,7 @@ $breakpoint-responsive: 640px; // à définir
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent;
background-color: $white;
box-shadow: 0 .3rem .6rem 0 rgba($black, .2);
box-shadow: 0 0 .6rem 0 rgba($black, .2);
&--active {
padding-left: $box-padding;
border-left-color: $primary_color;
@ -83,6 +83,7 @@ $breakpoint-responsive: 640px; // à définir
.choicebox__actions {
position: absolute;
z-index: 1;
display: flex;
max-width: $btn-wrap-size;
top: 50%;
@ -141,24 +142,121 @@ $breakpoint-responsive: 640px; // à définir
// ----------------------------
.choicebox__count {
position: relative;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
text-align: right;
padding-right: 0;
}
}
.choicebox__votes {
border: 0;
padding: 0;
line-height: normal;
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
&:focus,
&:hover,
&:active {
& .choicebox__tooltip {
display: flex;
}
}
}
}
.choicebox__vote {
display: inline-block;
vertical-align: middle;
margin-right: 3rem;
& + .choicebox__vote {
margin-left: 1.5rem;
}
}
.choicebox__countxt {
display: none;
margin-top: .5rem;
color: $primary_color;
.choicebox--active & {
display: block;
@media (min-width: $breakpoint-responsive) {
display: none;
}
}
}
}
// -- TOOLTIP
// ----------------------------
.choicebox__tooltip {
display: none;
@media (min-width: $breakpoint-responsive) {
position: absolute;
min-width: 18rem;
font-weight: normal;
top: 5rem;
left: 50%;
z-index: 1;
padding: 2rem;
border: .1rem solid rgba($black, .1);
background-color: $white;
text-align: left;
transform: translateX(-50%);
&::after,
&::before {
position: absolute;
width: 0;
height: 0;
bottom: 100%;
left: 50%;
content: " ";
pointer-events: none;
border: solid transparent;
}
&::after {
margin-left: -1.5rem;
border-width: 1.5rem;
border-color: rgba($white, 0);
border-bottom-color: #fff;
}
&::before {
margin-left: -1.6rem;
border-width: 1.6rem;
border-color: rgba($black, 0);
border-bottom-color: rgba($black, .1);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
}
}
.choicebox__tooltiplist {
& + .choicebox__tooltiplist {
padding-left: 3rem;
}
ul {
max-height: 15rem;
overflow: scroll;
}
}
.choicebox__tooltipttl {
@media (min-width: $breakpoint-responsive) {
margin-bottom: 1rem;
font-size: 1.6rem;
font-weight: bold;
white-space: nowrap;
img {
margin-right: .5rem;
vertical-align: sub;
}
& ~ .choicebox__tooltipttl {
margin-top: 3rem;
}
}
}