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

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"
},
"expiracyDate": {
"date": "2020-01-15 15:07:53.000000",
"date": "2020-03-17 15:07:53.000000",
"timezone_type": 3,
"timezone": "Europe/Paris"
},

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

@ -1,13 +1,30 @@
<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 >
<section class="name" >
<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>
<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>
<p class="comment">
<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="text title ">
<div class="choicebox selection-{{choice.answer}}" ><!-- add .choicebox--active to most voted -->
<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}}
</div>
<div class="choicebox__subject">
</div >
<div class="choicebox__subject" >
<!-- TEXT CASE --><!--
<p class="choicebox__txt">
@ -16,90 +23,127 @@
--><!-- IMG CASE -->
<!-- DATE CASE -->
<div class="dates" *ngIf="choice.date">
<div class="choicebox__date">
<div
class="dates"
*ngIf="choice.date" >
<div class="choicebox__date" >
{{choice.date | date:'EEE'}} <span
class="choicebox__day">{{choice.date | date:'dd'}}</span> {{choice.date | date:'LLL'}}
</div>
<div class="choicebox__hour">
class="choicebox__day" >{{choice.date | date:'dd'}}</span > {{choice.date | date:'LLL'}}
</div >
<div class="choicebox__hour" >
08:00
</div>
</div>
</div >
</div >
<!-- DATE CASE -->
</div>
</div >
<div class="choicebox__actions">
<div class="choicebox__actions" >
<!-- show only the yes check if the config is set to simpleAnswer -->
<!-- add .choicebox__btn--active to selected <button> -->
<span class="simple-answer">
<span class="simple-answer" >
<button class="choicebox__btn choicebox__btn--yes" type="button"
[ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
(click)="setAnswserTo('yes')">
<img src="../../../assets/img/check.svg" alt="">
</button>
</span>
<span class="complex-answers" *ngIf="!choice.simpleAnswer">
<button 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')"
<button
class="choicebox__btn choicebox__btn--yes"
type="button"
[ngClass]="{'choicebox__btn--active': choice.answer === 'yes'}"
(click)="setAnswserTo('yes')" >
<img
src="../../../assets/img/check.svg"
alt="" >
</button >
</span >
<span
class="complex-answers"
*ngIf="!choice.simpleAnswer" >
<button
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="">
</button>
</span>
<img
src="../../../assets/img/croix.svg"
alt="" >
</button >
</span >
</div>
</div >
<div class="choicebox__count">
<button type="button" aria-describedby="choicebox-tooltip" class="choicebox__votes"
*ngIf="choice.votes.count">
<div class="choicebox__vote">
<div class="choicebox__count" >
<button
type="button"
aria-describedby="choicebox-tooltip"
class="choicebox__votes"
*ngIf="choice.votes.count" >
<div class="choicebox__vote" >
{{choice.votes.count.yes}}
<img width="20px" height="21px" src="../../../assets/img/votant-sur.svg" alt="">
</div>
<div class="choicebox__vote">
<img
width="20px"
height="21px"
src="../../../assets/img/votant-sur.svg"
alt="" >
</div >
<div class="choicebox__vote" >
{{choice.votes.count.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="">
<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.votes.count.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="">
</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.votes.count.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">
</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 >
</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;
}
.title {
max-width: 25%;
}
}
.choicebox__subject {
@ -132,11 +135,7 @@ $breakpoint-responsive: 640px; // à définir
border: .3rem solid #ccc9c9;
background-color: transparent;
border-radius: 50%;
@media (min-width: $breakpoint-responsive) {
margin-top: 0;
margin-bottom: 0;
}
cursor: pointer;
//&:focus,
//&:hover,
//&:active {
@ -161,6 +160,12 @@ $breakpoint-responsive: 640px; // à définir
&--active {
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;
}
.comment, .prefered {
.comment {
border-left: 6px solid $ugly-purple;
padding-left: 5px;
margin-top: 25px;
margin-bottom: 25px;
flex-wrap: wrap;
padding-left: 17px;
}
.cname {
padding-left: 17px;
font-weight: bold;
}
@ -146,11 +146,6 @@ textarea {
margin-bottom: 20px;
}
.name {
margin-bottom: 50px;
margin-top: 50px;
}
.nobold {
font-weight: normal;
}