funky-framadate-front/src/app/vote-choice/vote-choice.component.html

67 lines
3.0 KiB
HTML

<div class="choicebox choicebox--active">
<div class="choicebox__time">
<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>
</div>
<div class="choicebox__actions">
<!-- show only the yes check if the config is set to simpleAnswer -->
<button class="choicebox__btn choicebox__btn--yes" type="button">
<img src="../../assets/img/check.svg" (click)="setAnswserTo('yes')" alt="">
</button>
<button class="choicebox__btn choicebox__btn--maybe" type="button">
<img src="../../assets/img/check-2.svg" (click)="setAnswserTo('maybe')" alt="" *ngIf="!choice.simpleAnswer">
</button>
<button class="choicebox__btn choicebox__btn--no" type="button">
<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">
{{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>