Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

toggle simple answer

Browse Source
This commit is contained in:
Baptiste Lemoine 2020-01-16 16:38:06 +01:00
parent 1b65d58a6f
commit a3e243ed19
6 changed files with 159 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/config/mock-poll3.ts
View File

@ -13,7 +13,7 @@ export const mockPoll3 = {
"timezone": "Europe/Paris" "timezone": "Europe/Paris"
}, },
"expiracyDate": { "expiracyDate": {
"date": "2020-01-15 15:07:53.000000", "date": "2020-03-17 15:07:53.000000",
"timezone_type": 3, "timezone_type": 3,
"timezone": "Europe/Paris" "timezone": "Europe/Paris"
}, },

33
src/app/pages/poll-display/poll-display.component.html
View File

@ -1,13 +1,30 @@
<div class="poll" > <div class="poll" >
<div class='heading' >
<div class='col-xs-6' >
<h1 >{{pollConfigFetched.data.title}}</h1 >
<p >{{pollConfigFetched.data.description}}</p >
<span class="creationDate" >
Créé le {{pollConfigFetched.data.creationDate.date}}
</span >
<span class="expiracyDate" >
Expire le {{pollConfigFetched.data.expiracyDate.date}}
</span >
<div class="votants" >
<i class='fa fa-users' ></i >
{{pollConfigFetched.stacks.length}} votants,
{{pollConfigFetched.choices.length}} choix,
</div >
</div >
<div class='col-xs-6' >
<input
type="submit"
name="modify"
class="btn btn--primary btn--outline btn--full"
value="Je veux modifier le vote de quelqu'un"
(click)='config.todo()' >
</div >
</div >
<h1 >{{pollConfigFetched.data.title}}</h1 >
<p >{{pollConfigFetched.data.description}}</p >
<p class="creationDate" >{{pollConfigFetched.data.creationDate.date}}</p >
<p class="expiracyDate" >{{pollConfigFetched.data.creationDate.date}}</p >
<p class="votants" >
{{pollConfigFetched.stacks_count}} votants,
{{pollConfigFetched.choices_count}} choix,
</p >
</div > </div >
<section class="name" > <section class="name" >
<label for="name" >Votre nom :</label > <label for="name" >Votre nom :</label >

3
src/app/pages/voting/voting.component.html
View File

@ -2,8 +2,7 @@
<a class="next">Voir le graphique</a> <a class="next">Voir le graphique</a>
<input type="submit" name="modify" class="btn btn--primary btn--outline btn--full"
value="Je veux modifier le vote de quelqu'un">
<h2 class="margin-top-x4">Les commentaires</h2> <h2 class="margin-top-x4">Les commentaires</h2>
<p class="comment"> <p class="comment">
<span class="cname">Pikachu </span> <span class="cname">Pikachu </span>

194
src/app/ui/vote-choice/vote-choice.component.html
View File

@ -1,9 +1,16 @@
<div class="choicebox selection-{{choice.answer}}"><!-- add .choicebox--active to most voted --> <div class="choicebox selection-{{choice.answer}}" ><!-- add .choicebox--active to most voted -->
<div class="text title "> <button
class='btn btn--primary'
(click)=' choice.simpleAnswer = !choice.simpleAnswer' >
<i class='fa fa-gears' ></i >
</button >
<div
class="text title clickable"
(click)="setAnswserTo('yes')" >
{{choice.name}} {{choice.name}}
</div> </div >
<div class="choicebox__subject">
<div class="choicebox__subject" >
<!-- TEXT CASE --><!-- <!-- TEXT CASE --><!--
<p class="choicebox__txt"> <p class="choicebox__txt">
@ -16,90 +23,127 @@
--><!-- IMG CASE --> --><!-- IMG CASE -->
<!-- DATE CASE --> <!-- DATE CASE -->
<div class="dates" *ngIf="choice.date"> <div
<div class="choicebox__date"> class="dates"
*ngIf="choice.date" >
<div class="choicebox__date" >
{{choice.date | date:'EEE'}} <span {{choice.date | date:'EEE'}} <span
class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}} class="choicebox__day" >{{choice.date | date:'dd'}}</span > {{choice.date | date:'LLL'}}
</div> </div >
<div class="choicebox__hour"> <div class="choicebox__hour" >
08:00 08:00
</div> </div >
</div> </div >
<!-- DATE CASE --> <!-- DATE CASE -->
</div> </div >
<div class="choicebox__actions"> <div class="choicebox__actions" >
<!-- show only the yes check if the config is set to simpleAnswer --> <!-- show only the yes check if the config is set to simpleAnswer -->
<!-- add .choicebox__btn--active to selected <button> --> <!-- add .choicebox__btn--active to selected <button> -->
<span class="simple-answer"> <span class="simple-answer" >
<button class="choicebox__btn choicebox__btn--yes" type="button" <button
[ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}" class="choicebox__btn choicebox__btn--yes"
(click)="setAnswserTo('yes')"> type="button"
<img src="../../../assets/img/check.svg" alt=""> [ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
</button> (click)="setAnswserTo('yes')" >
</span> <img
<span class="complex-answers" *ngIf="!choice.simpleAnswer"> src="../../../assets/img/check.svg"
<button class="choicebox__btn choicebox__btn--maybe" type="button" alt="" >
[ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}" </button >
(click)="setAnswserTo('maybe')"> </span >
<img src="../../../assets/img/check-2.svg" alt=""> <span
</button> class="complex-answers"
<button class="choicebox__btn choicebox__btn--no" type="button" *ngIf="!choice.simpleAnswer" >
[ngClass]="{'choicebox__btn--active': choice.answer === 'no'}" <button
(click)="setAnswserTo('no')" class="choicebox__btn choicebox__btn--maybe"
type="button"
[ngClass]="{'choicebox__btn--active': choice.answer === 'maybe'}"
(click)="setAnswserTo('maybe')" >
<img
src="../../../assets/img/check-2.svg"
alt="" >
</button >
<button
class="choicebox__btn choicebox__btn--no"
type="button"
[ngClass]="{'choicebox__btn--active': choice.answer === 'no'}"
(click)="setAnswserTo('no')"
> >
<img src="../../../assets/img/croix.svg" alt=""> <img
</button> src="../../../assets/img/croix.svg"
</span> alt="" >
</button >
</span >
</div> </div >
<div class="choicebox__count"> <div class="choicebox__count" >
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes" <button
*ngIf="choice.votes.count"> type="button"
<div class="choicebox__vote"> aria-describedby="choicebox-tooltip"
class="choicebox__votes"
*ngIf="choice.votes.count" >
<div class="choicebox__vote" >
{{choice.votes.count.yes}} {{choice.votes.count.yes}}
<img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt=""> <img
</div> width="20px"
<div class="choicebox__vote"> height="21px"
src="../../../assets/img/votant-sur.svg"
alt="" >
</div >
<div class="choicebox__vote" >
{{choice.votes.count.maybe}} {{choice.votes.count.maybe}}
<img width="22px" height="24px" src="../../../assets/img/votant-pas-sur.svg" alt=""> <img
</div> width="22px"
<div class="choicebox__tooltip" id="choicebox-tooltip"> height="24px"
<div class="choicebox__tooltiplist"> src="../../../assets/img/votant-pas-sur.svg"
<div class="choicebox__tooltipttl"> alt="" >
<img width="20px" height="21px" src="../../../assets/img/votant-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.votes.count.yes}} "Oui" {{choice.votes.count.yes}} "Oui"
</div> </div >
<ul> <ul >
<li>Lorem</li> <li >Lorem</li >
<li>Ipsum dolor</li> <li >Ipsum dolor</li >
<li>Sit amet</li> <li >Sit amet</li >
<li>Consectetur</li> <li >Consectetur</li >
</ul> </ul >
</div> </div >
<div class="choicebox__tooltiplist"> <div class="choicebox__tooltiplist" >
<div class="choicebox__tooltipttl"> <div class="choicebox__tooltipttl" >
<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="" >
{{choice.votes.count.maybe}} "Peut-être" {{choice.votes.count.maybe}} "Peut-être"
</div> </div >
<ul> <ul >
<li>Lorem</li> <li >Lorem</li >
<li>Ipsum dolor</li> <li >Ipsum dolor</li >
<li>Sit amet</li> <li >Sit amet</li >
<li>Consectetur</li> <li >Consectetur</li >
<li>Lorem</li> <li >Lorem</li >
<li>Ipsum dolor</li> <li >Ipsum dolor</li >
<li>Sit amet</li> <li >Sit amet</li >
<li>Consectetur</li> <li >Consectetur</li >
</ul> </ul >
</div> </div >
</div> </div >
</button> </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 >

15
src/app/ui/vote-choice/vote-choice.component.scss
View File

@ -50,6 +50,9 @@ $breakpoint-responsive: 640px; // à définir
min-height: auto; min-height: auto;
} }
.title {
max-width: 25%;
}
} }
.choicebox__subject { .choicebox__subject {
@ -132,11 +135,7 @@ $breakpoint-responsive: 640px; // à définir
border: .3rem solid #ccc9c9; border: .3rem solid #ccc9c9;
background-color: transparent; background-color: transparent;
border-radius: 50%; border-radius: 50%;
@media (min-width: $breakpoint-responsive) { cursor: pointer;
margin-top: 0;
margin-bottom: 0;
}
//&:focus, //&:focus,
//&:hover, //&:hover,
//&:active { //&:active {
@ -161,6 +160,12 @@ $breakpoint-responsive: 640px; // à définir
&--active { &--active {
border-color: #bf83c2; border-color: #bf83c2;
} }
@media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
} }

11
src/assets/scss/atoms/_forms.scss
View File

@ -103,16 +103,16 @@ label {
font-size: 18px; font-size: 18px;
} }
.comment, .prefered { .comment {
border-left: 6px solid $ugly-purple; border-left: 6px solid $ugly-purple;
padding-left: 5px;
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
flex-wrap: wrap; flex-wrap: wrap;
padding-left: 17px;
} }
.cname { .cname {
padding-left: 17px;
font-weight: bold; font-weight: bold;
} }
@ -146,11 +146,6 @@ textarea {
margin-bottom: 20px; margin-bottom: 20px;
} }
.name {
margin-bottom: 50px;
margin-top: 50px;
}
.nobold { .nobold {
font-weight: normal; font-weight: normal;
} }