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

Component : vote choice

See merge request framasoft/framadate/funky-framadate-front!8
This commit is contained in:
ty kayn 2019-10-24 17:06:05 +02:00
commit 36ed7dd4cb
3 changed files with 319 additions and 107 deletions

View File

@ -1,52 +1,67 @@
<div class="choice_container"> <div class="choicebox choicebox--active">
<div class="info"> <div class="choicebox__time">
<div class="date" *ngIf="choice.date"> <div class="choicebox__date" *ngIf="choice.date">
<div class="date-day"> {{choice.date | date:'EEE'}} <span class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
{{choice.date | date:'EEEE'}}
</div> </div>
<div class="date-month-number"> <div class="choicebox__hour">
{{choice.date | date:'dd'}} 08:00
</div> </div>
<div class="date-month">
{{choice.date | date:'LLLL'}}
</div> </div>
<div class="date-hour"> <div class="choicebox__actions">
{{choice.date | date:'H:m'}}
</div>
<div class="description">
{{choice.text}}
</div>
<h3>{{choice.date | date:'EEEE'}} <span>{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLLL'}} </h3>
<h3>08:00</h3>
</div>
<div class="nombre_vote">
<span class="count-yes">
<p>{{choice.votesCount.yes}}</p><img width="20px" height="21px" src="../../assets/img/votant-sur.svg">
</span>
<span class="count-maybe">
<p>{{choice.votesCount.maybe}}</p><img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg">
</span>
</div>
<div class="vote">
<!-- show only the yes check if the config is set to simpleAnswer --> <!-- show only the yes check if the config is set to simpleAnswer -->
<button> <button class="choicebox__btn choicebox__btn--yes" type="button">
<img width="16px" height="12px" <img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
src="../../assets/img/check.svg"
(click)="setAnswserTo('yes')">
</button> </button>
<button> <button class="choicebox__btn choicebox__btn--maybe" type="button">
<img width="19px" height="15px" <img src="../../assets/img/check-2.svg" (click)="setAnswserTo('maybe')" alt="" *ngIf="!choice.simpleAnswer">
src="../../assets/img/check-2.svg"
(click)="setAnswserTo('maybe')"
*ngIf="!choice.simpleAnswer">
</button> </button>
<button> <button class="choicebox__btn choicebox__btn--no" type="button">
<img width="12px" height="12px" <img src="../../assets/img/croix.svg" (click)="setAnswserTo('no')" alt="" *ngIf="!choice.simpleAnswer">
src="../../assets/img/croix.svg"
(click)="setAnswserTo('no')"
*ngIf="!choice.simpleAnswer">
</button> </button>
</div> </div>
<div class="choicebox__count">
<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">
{{choice.votesCount.maybe}}
<img width="22px" height="24px" src="../../assets/img/votant-pas-sur.svg" alt="">
</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>
</div> </div>

View File

@ -1,67 +1,262 @@
.choice_container { // ---------------------------------------------------------
width: 320px; // -- VOTE CHOICE COMPONENT
height: 172px; // ---------------------------------------------------------
box-shadow: 0 3px 6px 0 rgba(black, 0.2);
overflow: auto; // -- IMPORTS
// ----------------------------
@import "../../assets/scss/variables";
// -- 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
// -- GLOBAL
// ----------------------------
.choicebox {
position: relative;
min-width: 32rem;
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 0 .6rem 0 rgba($black, .2);
&--active {
padding-left: $box-padding;
border-left-color: $primary_color;
}
@media (min-width: $breakpoint-responsive) {
display: flex; display: flex;
align-items: center; align-items: center;
flex-direction: row; justify-content: space-between;
} }
.vote img{
vertical-align: middle;
display: block;
margin-left: auto;
margin-right: auto;
} }
h2, h3 {
font-weight: normal;
// -- 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;
}
} }
span { .choicebox__date {
margin-bottom: .5rem;
white-space: nowrap;
text-transform: capitalize;
@media (min-width: $breakpoint-responsive) {
margin-bottom: 0;
}
}
.choicebox__day {
font-size: 2.4rem;
font-weight: bold; font-weight: bold;
font-size: 24px;
} }
.nombre_vote {
vertical-align: middle;
float: left;
}
.nombre_vote span{ // -- VOTE BTNS
// ----------------------------
.choicebox__actions {
position: absolute;
z-index: 1;
display: flex; display: flex;
max-width: $btn-wrap-size;
top: 50%;
right: $box-padding;
flex-flow: row-reverse wrap;
transform: translateY(-50%);
@media (min-width: $breakpoint-responsive) {
position: static;
max-width: none;
flex-flow: row nowrap;
transform: none;
}
}
.choicebox__btn {
display: flex;
width: $btn-size;
height: $btn-size;
align-items: center; align-items: center;
} justify-content: center;
// TODO intricate selectors margin: $btn-margin-y $btn-margin-x;
.nombre_vote p { border: .1rem solid $primary_color;
font-weight: normal;
font-size: 16px;
}
.vote{
justify-content: flex-end;
align-items: flex-end;
}
.vote button{
border: 1px solid #aeafb1;;
border-radius: 50%; border-radius: 50%;
width:48px;
height: 48px; @media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
&:focus,
&:hover,
&:active {
border-color: #ccc9c9;
background-color: #f7f7f7;
}
&--maybe {
position: relative;
top: calc( (#{$btn-size} + 2 * #{$btn-margin-y}) / 2 );
@media (min-width: $breakpoint-responsive) {
top: auto;
left: auto;
}
}
&--active {
border-width: .3rem;
border-color: #bf83c2;
}
}
// -- VOTE COUNT
// ----------------------------
.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; display: flex;
align-items: center;
} }
.vote button:hover{
border-color: #807e7e;
transition:0,5s;
} }
.vote button:focus{
border:3px solid #bf83c2;
outline:0;
} }
.nombre_vote img{ }
/* vertical-align: middle;
display:inline;*/ .choicebox__vote {
display: inline-block;
vertical-align: middle;
& + .choicebox__vote {
margin-left: 1.5rem;
}
}
.choicebox__countxt {
display: none;
margin-top: .5rem;
.choicebox--active & {
display: block; display: block;
width: 20px; @media (min-width: $breakpoint-responsive) {
height: 20px; 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;
}
}
} }

View File

@ -1,9 +1,11 @@
@charset "UTF-8"; @charset "UTF-8";
main { main {
max-width: 320px; // to look like the styleguide, to remove when we will have full width views
width: 100%;
display: block; display: block;
width: 100%;
//max-width: 320px; // to look like the styleguide, to remove when we will have full width views
max-width: 800px;
margin: 0 auto; margin: 0 auto;
padding: 0 2rem; padding: 0 2rem;
} }