funky-framadate-front/src/app/features/consultation/choice-table/choice-table.component.html

62 lines
2.1 KiB
HTML

<div class="choice-bars-display" *ngIf="!detailledDisplay">
<div class="columns" *ngIf="choice.yes && choice.yes.count > 0">
<div class="column is-narrow">
{{ 'participation.yes' | translate }}
</div>
<div class="column">
<div
class="bar has-text-centered has-background-yes"
*ngIf="choice.yes"
[style.width]="roundToPercentWidth(choice.yes.count)"
>
{{ choice.yes.count }}
<!-- sur {{countMaxVotesForThisAnswer}}. {{roundToPercentWidth(choice.yes.count) }}-->
</div>
</div>
</div>
<div class="columns" *ngIf="choice.maybe && choice.maybe.count > 0">
<div class="column is-narrow">
{{ 'participation.maybe' | translate }}
</div>
<div class="column">
<div
class="bar has-text-centered has-background-maybe"
[style.width]="roundToPercentWidth(choice.maybe.count)"
>
{{ choice.maybe.count }}
</div>
</div>
</div>
<div class="columns" *ngIf="choice.no && choice.no.count > 0">
<div class="column is-narrow">
{{ 'participation.no' | translate }}
</div>
<div class="column">
<div class="bar has-text-centered has-background-no" [style.width]="roundToPercentWidth(choice.no.count)">
{{ choice.no.count }}
</div>
</div>
</div>
</div>
<div class="choice-details-display" *ngIf="detailledDisplay">
<p class="description-details">
{{ 'participation.details' | translate }}
<!-- display each name for each kind of answer-->
</p>
<div class="choice-display-yes" *ngIf="choice.yes">
<div class="people has-background-yes" *ngFor="let peopleName of choice.yes.people">
<img class="icon" src="assets/icons/check-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-maybe" *ngIf="choice.maybe">
<div class="people has-background-maybe" *ngFor="let peopleName of choice.maybe.people">
<img class="icon" src="assets/icons/box.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
<div class="choice-display-no" *ngIf="choice.no">
<div class="people has-background-no" *ngFor="let peopleName of choice.no.people">
<img class="icon" src="assets/icons/x-square.svg" alt="icone ok" /> {{ peopleName }}
</div>
</div>
</div>