style on comments bubbles

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

@@ -1,6 +1,6 @@
 <app-header [linkToHome]="false"></app-header>
 
-<section class="poll_loaded padded consultation" *ngIf="!fetching && poll">
+<section class="poll_loaded consultation" *ngIf="!fetching && poll">
 	<div class="step contained-in-large-column">
 		<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
 			<h1 class="title is-2">
@@ -101,7 +101,7 @@
 					</h2>
 				</div>
 				<div class="column">
-					<button class="no-outline button" (click)="detailledDisplay = !detailledDisplay">
+					<button class="button is-secondary pull-right" (click)="detailledDisplay = !detailledDisplay">
 						<span *ngIf="detailledDisplay">
 							<!--						<img class="icon" src="assets/icons/flag.svg" alt="icone magnifying" />-->
 							{{ 'participation.mode_comptact' | translate }}
@@ -120,22 +120,31 @@
 
 			<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
 		</section>
-		<section class="poll-comments">
+		<section class="poll-comments" id="comments_list">
 			<h2 class="title is-3">
 				{{ 'participation.comments' | translate }}
+				<a [routerLink]="[]" fragment="comments_list"> #</a>
 			</h2>
-			<div class="rounded-block">
+			<!--				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack" *ngIf="poll.allow_comments" ></app-comments>-->
-				<!--					*ngIf="poll.allow_comments"-->
 			<app-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>
 		</section>
 	</div>
 </section>
-<section class="loadin_poll" *ngIf="fetching">
+<div class="step has-text-centered" class="loadin_poll" *ngIf="fetching">
-	<div class="step has-text-centered">
+	<h1 class="title is-1">
-		<p>loading ... <i class="fa fa-spinner fa-spin"></i></p>
+		Loading
+	</h1>
+	<br />
+	<i class="fa fa-spinner fa-spin fa-3x"></i>
+	<br /><br />
+	<img
+		class="stepper-app-logo fa-spin"
+		*ngIf="environment.appLogo"
+		src="{{ environment.appLogo }}"
+		alt="accueil {{ environment.appTitle }}"
+	/>
 </div>
-</section>

src/app/features/consultation/consultation.component.scss

@@ -8,6 +8,7 @@
 .poll_loaded {
 	.description {
 		min-height: 2rem;
+		margin-bottom: 1rem;
 	}
 }
 .options-button {

src/app/shared/components/comments/comments.component.html

@@ -1,21 +1,23 @@
-<div class="comments padded" id="comments">
+<div class="comments" id="comments">
 	<div class="message-body" *ngIf="poll.is_archived">
 		⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
 	</div>
 	<section class="comments-part" *ngIf="!poll.is_archived && poll.comments">
-		<h2 class="title is-2">
+		<!--		comment list-->
-			<!--			{{ poll.comments.length }}-->
+		<article class="message-comment" *ngFor="let comment of poll.comments">
-			{{ 'participation.comments_new' | translate }}
+			<div class="message-text">
-		</h2>
-
-		<article class="message rounded-block" *ngFor="let comment of poll.comments">
 				<div class="header">
-				<p>
+					<p class="chapo-paragraph-bold">
-					<em class="cname" *ngIf="comment.pseudo"> {{ comment.pseudo }} </em>
+						<em class="message-comment-pseudo" *ngIf="comment.pseudo"> {{ comment.pseudo }} </em>
-					<em class="cname" *ngIf="!comment.pseudo"> (somebody) </em>
+						<em class="message-comment-pseudo" *ngIf="!comment.pseudo"> (somebody) </em>
-					,
+					</p>
-
+				</div>
-					<span class="date date-days-ago">
+				<p class="text">
+					{{ comment.text }}
+				</p>
+				<div class="left-point"></div>
+			</div>
+			<div class="date date-days-ago">
 				{{
 					'date_delays.dipslay_comments_delay'
 						| translate
@@ -24,43 +26,32 @@
 									time_unit: 'date_delays.days' | translate
 							  }
 				}}
-						{{ calculateDaysAgoOfComment(comment.created_at) }} ,
+				<!--				{{ calculateDaysAgoOfComment(comment.created_at) }} ,-->
-					</span>
+			</div>
-					<span class="date is-small">
+			<span class="date is-small" *ngIf="display_comment_date">
 				{{ comment.created_at | date: 'short':'Europe/Paris' }}
 			</span>
-				</p>
-			</div>
-			<div class="message-body">
-				<p class="text">
-					{{ comment.text }}
-				</p>
-			</div>
 		</article>
 	</section>
+
 	<section class="add-comment" *ngIf="!poll.is_archived && vote_stack.owner">
-		<article class="message">
+		<section class="new-comment-section">
 			<div class="header">
-				<div class="field">
+				<div class="field"></div>
-					<!--					<span class="control has-icons-left has-icons-right">-->
+			</div>
-					<!--						<input-->
+			<div class="message-text-new rounded-block">
-					<!--							type="email"-->
+				<h2 class="title is-5">
-					<!--							name="cremail"-->
+					{{ 'participation.comments_new' | translate }}
-					<!--							id="email_comment"-->
+				</h2>
-					<!--							[(ngModel)]="vote_stack.owner.email"-->
+				<p>
-					<!--							required="required"-->
+					Votre commentaire sera directement visible sur la page du sondage.
-					<!--						/>-->
+				</p>
-					<!--						<span class="icon is-small is-left">-->
-					<!--							<i class="fa fa-envelope"></i>-->
-					<!--						</span>-->
-					<!--					</span>-->
 				<label for="comment_pseudo">
 					{{ 'participation.name_label' | translate }}
 				</label>
 				<span class="control has-icons-left">
 					<input
 						type="text"
-							class="margin-btm-x3"
 						name="crname"
 						[(ngModel)]="vote_stack.pseudo"
 						id="comment_pseudo"
@@ -70,19 +61,11 @@
 						<i class="fa fa-user"></i>
 					</span>
 				</span>
-				</div>
+				<br />
-
+				<label for="new_comment">
-				<!--			<label for="crname"><i class="fa fa-user" aria-hidden="true"></i> Votre nom / pseudo :</label>-->
-
-				<!--			<label for="cremail"><i class="fa fa-envelope" aria-hidden="true"></i> Votre email :</label>-->
-			</div>
-			<div class="message-body">
-				<label for="comment">
 					{{ 'participation.content_label' | translate }}
 				</label>
-
+				<textarea name="comment" id="new_comment" [(ngModel)]="vote_stack.comment"> </textarea>
-				<br />
-				<textarea name="comment" id="comment" [(ngModel)]="vote_stack.comment"> </textarea>
 
 				<input
 					type="submit"
@@ -92,6 +75,6 @@
 					(click)="addComment()"
 				/>
 			</div>
-		</article>
+		</section>
 	</section>
 </div>

src/app/shared/components/comments/comments.component.scss

@@ -1,3 +1,47 @@
 .date {
-	font-size: 0.85em;
+	font-weight: 400;
+	font-size: 12px;
+	line-height: 14px;
+	margin-top: 8px;
+}
+#comments {
+	color: #383838;
+
+	.message-text {
+		background: #f6f5fd;
+		border-radius: 8px;
+		color: #383838;
+		padding: 1rem;
+		font-size: 16px;
+		line-height: 20px;
+		position: relative;
+	}
+	.message-comment {
+		margin-bottom: 1rem;
+	}
+	.message-comment-pseudo {
+		color: #3e3882;
+		font-weight: 700;
+		font-size: 14px;
+		line-height: 16px;
+		margin: 8px 0px;
+	}
+	.left-point {
+		width: 0;
+		height: 0;
+		border-left: 0.5rem solid transparent;
+		border-right: 0.5rem solid transparent;
+		border-top: 0.5rem solid #f6f5fd;
+		position: absolute;
+		top: 69%;
+		left: -0.7rem;
+		transform: rotate(88deg);
+	}
+}
+#new_comment {
+	min-height: 80px;
+	width: 100%;
+}
+.new-comment-section {
+	margin-bottom: 2rem;
 }

src/app/shared/components/comments/comments.component.ts

@@ -21,6 +21,7 @@ export class CommentsComponent {
 		myEmail: '',
 		myComment: '',
 	};
+	display_comment_date: boolean = false;
 
 	constructor(
 		private pollService: PollService,