mirror of
https://framagit.org/framasoft/framadate/funky-framadate-front.git
synced 2023-08-25 13:53:14 +02:00
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:
commit
55719f59b5
@ -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">
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user