[front] component : vote choice
This commit is contained in:
parent
3e29117ea6
commit
6ee9f742fa
|
@ -1,5 +1,4 @@
|
||||||
<div class="choicebox choicebox--active">
|
<div class="choicebox choicebox--active">
|
||||||
|
|
||||||
<div class="choicebox__time">
|
<div class="choicebox__time">
|
||||||
<div class="choicebox__date" *ngIf="choice.date">
|
<div class="choicebox__date" *ngIf="choice.date">
|
||||||
{{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
|
{{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
|
||||||
|
@ -21,22 +20,48 @@
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="choicebox__count">
|
<div class="choicebox__count">
|
||||||
<div class="choicebox__votes">
|
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes">
|
||||||
<div class="choicebox__vote choicebox__vote--yes">
|
<div class="choicebox__vote">
|
||||||
{{choice.votesCount.yes}}
|
{{choice.votesCount.yes}}
|
||||||
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
|
<img width="20px" height="21px" src="../../assets/img/votant-sur.svg" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div class="choicebox__vote choicebox__vote--maybe">
|
<div class="choicebox__vote">
|
||||||
{{choice.votesCount.maybe}}
|
{{choice.votesCount.maybe}}
|
||||||
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
|
<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>
|
</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">
|
<div class="choicebox__countxt">
|
||||||
Choix ayant reçu le plus de votes
|
Choix ayant reçu le plus de votes
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<br><!-- à virer -->
|
|
|
@ -12,13 +12,13 @@
|
||||||
// -- VARIABLES
|
// -- VARIABLES
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
|
|
||||||
$box-padding: 2rem;
|
$box-padding : 2rem;
|
||||||
$box-border-width: .6rem;
|
$box-border-width : .6rem;
|
||||||
$btn-size: 5rem;
|
$btn-size : 5rem;
|
||||||
$btn-margin-x: 1rem;
|
$btn-margin-x : 1rem;
|
||||||
$btn-margin-y: 1.5rem;
|
$btn-margin-y : 1.5rem;
|
||||||
$btn-wrap-size: calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
|
$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
|
||||||
$breakpoint-responsive: 640px; // à définir
|
$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});
|
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
|
||||||
border-left: $box-border-width solid transparent;
|
border-left: $box-border-width solid transparent;
|
||||||
background-color: $white;
|
background-color: $white;
|
||||||
box-shadow: 0 .3rem .6rem 0 rgba($black, .2);
|
box-shadow: 0 0 .6rem 0 rgba($black, .2);
|
||||||
&--active {
|
&--active {
|
||||||
padding-left: $box-padding;
|
padding-left: $box-padding;
|
||||||
border-left-color: $primary_color;
|
border-left-color: $primary_color;
|
||||||
|
@ -83,6 +83,7 @@ $breakpoint-responsive: 640px; // à définir
|
||||||
|
|
||||||
.choicebox__actions {
|
.choicebox__actions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
max-width: $btn-wrap-size;
|
max-width: $btn-wrap-size;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
|
@ -141,24 +142,121 @@ $breakpoint-responsive: 640px; // à définir
|
||||||
// ----------------------------
|
// ----------------------------
|
||||||
|
|
||||||
.choicebox__count {
|
.choicebox__count {
|
||||||
|
position: relative;
|
||||||
padding-right: $btn-wrap-size;
|
padding-right: $btn-wrap-size;
|
||||||
|
|
||||||
@media (min-width: $breakpoint-responsive) {
|
@media (min-width: $breakpoint-responsive) {
|
||||||
|
text-align: right;
|
||||||
padding-right: 0;
|
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 {
|
.choicebox__vote {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 3rem;
|
& + .choicebox__vote {
|
||||||
|
margin-left: 1.5rem;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.choicebox__countxt {
|
.choicebox__countxt {
|
||||||
display: none;
|
display: none;
|
||||||
margin-top: .5rem;
|
margin-top: .5rem;
|
||||||
color: $primary_color;
|
|
||||||
.choicebox--active & {
|
.choicebox--active & {
|
||||||
display: block;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue