tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

[front] vote choice : add image and text cases

Browse Source
This commit is contained in:
22px 2019-10-24 20:51:41 +02:00
parent 28b3334d3e
commit 6f8b180d1f
2 changed files with 55 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/vote-choice/vote-choice.component.html
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">

46
src/app/vote-choice/vote-choice.component.scss
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;
}
}
@ -146,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;
}