106 lines
4.1 KiB
HTML
106 lines
4.1 KiB
HTML
<div class="choicebox selection-{{choice.answer}}"><!-- add .choicebox--active to most voted -->
|
|
<div class="text title ">
|
|
{{choice.name}}
|
|
</div>
|
|
<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="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">
|
|
08:00
|
|
</div>
|
|
</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> -->
|
|
<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')"
|
|
>
|
|
<img src="../../assets/img/croix.svg" alt="">
|
|
</button>
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<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">
|
|
{{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="">
|
|
{{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="">
|
|
{{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">
|
|
Choix ayant reçu le plus de votes
|
|
</div>
|
|
</div>
|
|
</div>
|