conditionnal displays on consultation

src/app/features/consultation/consultation.component.html

@@ -1,4 +1,4 @@
-<section class="poll_loaded padded" *ngIf="!fetching && poll">
+<section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
 	<!--	messages-->
 
 	<div class="message is-warning" *ngIf="isArchived">
@@ -44,22 +44,37 @@
 
 				<div class="card-content">
 					<div class="content">
-						<button
-							class="btn is-info"
-							(click)="isCompactMode = !isCompactMode"
-							[ngClass]="{ 'is-primary': isCompactMode, 'is-default': !isCompactMode }"
-						>
-							changer d'affichage
-						</button>
-						<div class="buttons has-addons is-small is-right">
-							<button class="button" [class.is-active]="isCompactMode" (click)="isCompactMode = true">
-								Compact
-							</button>
-							<button class="button" [class.is-active]="!isCompactMode" (click)="isCompactMode = false">
-								Detailed
-							</button>
+						<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">
+								<div class="buttons has-addons is-small is-right">
+									<button
+										class="button"
+										[class.is-active]="isCompactMode"
+										(click)="isCompactMode = true"
+									>
+										Compact
+									</button>
+									<button
+										class="button"
+										[class.is-active]="!isCompactMode"
+										(click)="isCompactMode = false"
+									>
+										Detailed
+									</button>
+								</div>
+							</div>
 						</div>
-						<div class="pseudo-land" *ngIf="isCompactMode">
+
+						<div class="pseudo-land" *ngIf="isCompactMode && !isArchived">
 							<label for="vote_pseudo_vote_stack">
 								Votre pseudo:
 							</label>
@@ -89,7 +104,7 @@
 					<button
 						class="button is-block submit-votestack is-primary"
 						(click)="addVoteStack()"
-						*ngIf="!storageService.vote_stack || !storageService.vote_stack.id"
+						*ngIf="(!isArchived && !storageService.vote_stack) || !storageService.vote_stack.id"
 					>
 						<i class="fa fa-paper-plane" aria-hidden="true"></i> Envoyer
 					</button>
@@ -109,6 +124,9 @@
 							[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>
 
@@ -129,6 +147,9 @@
 						<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>

src/app/features/consultation/poll-results-detailed/poll-results-detailed.component.html

@@ -19,7 +19,7 @@
 		</tr>
 	</thead>
 	<tbody>
-		<tr class="stats">
+		<tr class="stats add-vote-stack" *ngIf="!poll.is_archived">
 			<td>
 				Ajouter votre vote
 				<div>

src/styles/partials/_form-controls.scss

@@ -0,0 +1,12 @@
+.consultation {
+	.is-active {
+		background: $primary-color;
+		color: $white;
+	}
+}
+
+.alert {
+	@extend .padded;
+	border-radius: 0.25em;
+	color: $font_color;
+}