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

150 lines
5.1 KiB
HTML

<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" >
<!-- 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 >