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

<section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
	<!--	messages-->

	<div class="message is-warning" *ngIf="isArchived">
		<div class="message-body">
			{{ 'participation.poll_expired' | translate }}
		</div>
	</div>
	<div class="message is-warning" *ngIf="poll && poll.admin_key">
		<div class="message-body">
			{{ 'participation.you_are_admin' | translate }}
		</div>
	</div>

	<div class="message is-info" *ngIf="poll.modification_policy == 'self'">
		<div class="message-body">
			{{ 'participation.edit_only_self' | translate }}
		</div>
	</div>

	<router-outlet></router-outlet>

	<!--	actions-->

	<!--	affichage des possibilités de réponse -->
	<div class="columns">
		<div class="column">
			<div class="card">
				<header class="card-header padded">
					<div class="columns">
						<div class="column">
							<p class="card-header-title is-1 title">{{ poll.title }}</p>
							<p class="descr">{{ poll.description }}</p>
							<div class="voters-count padded">
								<i class="fa fa-users"></i> {{ poll.stacks.length }}
								{{ 'participation.voters' | translate }}
							</div>
							<p class="card-header-icon" *ngIf="poll.owner">
								{{ 'participation.author' | translate }} {{ poll.owner?.pseudo }}
							</p>
						</div>
						<div class="column">
							<app-actions-menu></app-actions-menu>
						</div>
					</div>
				</header>

				<div class="card-content">
					<div class="content">
						<div class="columns">
							<div class="column">
								<button
									class="btn is-info"
									(click)="isCompactMode = !isCompactMode"
									[ngClass]="{ 'is-primary': isCompactMode, 'is-default': !isCompactMode }"
								>
									changer d'affichage
								</button>
							</div>
							<div class="column">
								<!--								le bouton affiche l'état alternatif possible, et non l'état actuel-->
								<div class="buttons has-addons is-small is-right">
									<button
										class="button"
										[class.is-active]="isCompactMode"
										(click)="isCompactMode = true"
									>
										{{ 'participation.mode_detailed' | translate }}
									</button>
									<button
										class="button"
										[class.is-active]="!isCompactMode"
										(click)="isCompactMode = false"
									>
										{{ 'participation.mode_compact' | translate }}
									</button>
								</div>
							</div>
						</div>

						<div class="pseudo-land" *ngIf="isCompactMode && !isArchived">
							<label for="vote_pseudo_vote_stack">
								Votre pseudo:
							</label>
							<input
								class="is-block"
								type="text"
								id="vote_pseudo_vote_stack"
								[(ngModel)]="storageService.vote_stack.pseudo"
							/>
						</div>
						<app-poll-results-compact *ngIf="isCompactMode" [poll]="poll"></app-poll-results-compact>
						<app-poll-results-detailed *ngIf="!isCompactMode" [poll]="poll"></app-poll-results-detailed>
					</div>
				</div>

				<!--	static buttons-->
				<div class="padded">
					<div class="message is-info" *ngIf="poll.stacks.length == 0">
						<div class="message-body">
							aucun vote pour le moment
						</div>
					</div>
					<section class="loading_poll" *ngIf="fetching">
						<i class="fa fa-spinner fa-4x"></i>
					</section>
					<button
						class="button is-block submit-votestack is-primary"
						(click)="addVoteStack()"
						*ngIf="(!isArchived && !storageService.vote_stack) || !storageService.vote_stack.id"
					>
						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
					</button>
					<button
						class="btn btn--primary btn-block submit-votestack update"
						(click)="updateVoteStack()"
						*ngIf="storageService.vote_stack && storageService.vote_stack.id"
					>
						<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
					</button>
				</div>

				<div class="columns">
					<div class="column">
						<app-comments
							*ngIf="poll.allow_comments"
							[poll]="poll"
							[vote_stack]="storageService.vote_stack"
						></app-comments>
						<div class="alert has-background-info" *ngIf="!poll.allow_comments">
							Ce sondage ne permet pas d'ajouter de commentaires
						</div>
					</div>
				</div>

				<!--				fixed bottom buttons-->
				<div class="bar-votestack" *ngIf="!isArchived">
					<button
						class="btn btn-block submit-votestack"
						(click)="addVoteStack()"
						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
					>
						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
					</button>
					<button
						class="btn btn--primary btn-block submit-votestack update"
						(click)="updateVoteStack()"
						*ngIf="storageService.vote_stack && storageService.vote_stack.id"
					>
						<i class="fa fa-edit" aria-hidden="true"></i> Mettre à jour
					</button>
				</div>
				<div class="alert has-background-info" *ngIf="isArchived">
					Ce sondage est archivé
				</div>
			</div>
		</div>
	</div>
</section>