Merge branch 'components/vote-choice' into 'styles'

Finalisation composant de vote

See merge request framasoft/framadate/funky-framadate-front!10
This commit is contained in:
ty kayn 2019-10-28 10:22:49 +01:00
commit 55719f59b5
2 changed files with 59 additions and 15 deletions

View File

@ -1,14 +1,31 @@
<div class="choicebox choicebox--active">
<div class="choicebox__time">
<div class="choicebox"><!-- add .choicebox--active to most voted -->
<div class="choicebox__subject">
<!-- TEXT CASE --><!--
<p class="choicebox__txt">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla nobis nam culpa !
</p>
--><!-- TEXT CASE -->
<!-- IMG CASE --><!--
<img class="choicebox__img" src="https://picsum.photos/200" alt="">
--><!-- IMG CASE -->
<!-- DATE CASE -->
<div class="choicebox__date" *ngIf="choice.date">
{{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
</div>
<div class="choicebox__hour">
08:00
</div>
<!-- DATE CASE -->
</div>
<div class="choicebox__actions">
<!-- show only the yes check if the config is set to simpleAnswer -->
<!-- add .choicebox__btn--active to selected <button> -->
<button class="choicebox__btn choicebox__btn--yes" type="button">
<img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
</button>
@ -19,6 +36,7 @@
<img src="../../assets/img/croix.svg" (click)="setAnswserTo('no')" alt="" *ngIf="!choice.simpleAnswer">
</button>
</div>
<div class="choicebox__count">
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes">
<div class="choicebox__vote">

View File

@ -18,6 +18,7 @@ $btn-size : 5rem;
$btn-margin-x : 1rem;
$btn-margin-y : 1.5rem;
$btn-wrap-size : calc(2 * #{$btn-size} + 4 * #{$btn-margin-x});
$img-maxheight : 12rem;
$breakpoint-responsive : 640px; // à définir
@ -28,6 +29,7 @@ $breakpoint-responsive : 640px; // à définir
.choicebox {
position: relative;
min-width: 32rem;
min-height: 16rem;
padding: $box-padding $box-padding $box-padding calc(#{$box-padding} - #{$box-border-width});
border-left: $box-border-width solid transparent;
background-color: $white;
@ -41,27 +43,27 @@ $breakpoint-responsive : 640px; // à définir
display: flex;
align-items: center;
justify-content: space-between;
min-height: auto;
}
}
.choicebox__subject {
margin-bottom: 3rem;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
padding-right: 0;
}
}
// -- DATE
// ----------------------------
.choicebox__time {
margin-bottom: 3rem;
padding-right: $btn-wrap-size;
font-size: 1.8rem;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
padding-right: 0;
}
}
.choicebox__date {
font-size: 1.8rem;
margin-bottom: .5rem;
white-space: nowrap;
text-transform: capitalize;
@ -78,6 +80,26 @@ $breakpoint-responsive : 640px; // à définir
// -- IMG
// ----------------------------
.choicebox__img {
max-width: 100%;
max-height: $img-maxheight;
}
// -- TXT
// ----------------------------
.choicebox__txt {
margin: 0;
font-size: 1.8rem;
}
// -- VOTE BTNS
// ----------------------------
@ -96,6 +118,7 @@ $breakpoint-responsive : 640px; // à définir
max-width: none;
flex-flow: row nowrap;
transform: none;
margin: 0 1.5rem;
}
}
@ -107,6 +130,7 @@ $breakpoint-responsive : 640px; // à définir
justify-content: center;
margin: $btn-margin-y $btn-margin-x;
border: .1rem solid $primary_color;
background-color: transparent;
border-radius: 50%;
@media (min-width: $breakpoint-responsive) {
@ -145,6 +169,7 @@ $breakpoint-responsive : 640px; // à définir
position: relative;
padding-right: $btn-wrap-size;
@media (min-width: $breakpoint-responsive) {
flex-shrink: 0;
text-align: right;
padding-right: 0;
}
@ -154,6 +179,7 @@ $breakpoint-responsive : 640px; // à définir
border: 0;
padding: 0;
line-height: normal;
background-color: transparent;
@media (min-width: $breakpoint-responsive) {
padding: 1.5rem;
&:focus,
@ -240,8 +266,8 @@ $breakpoint-responsive : 640px; // à définir
padding-left: 3rem;
}
ul {
max-height: 15rem;
overflow: scroll;
max-height: 11rem;
overflow: auto;
}
}