From 23df4a58991eceb1ba9453faedaacf722e5f3831 Mon Sep 17 00:00:00 2001
From: Tykayn <contact@cipherbliss.com>
Date: Tue, 22 Mar 2022 11:53:45 +0100
Subject: [PATCH] style on comments bubbles

---
 .../consultation/consultation.component.html  |  37 ++++--
 .../consultation/consultation.component.scss  |   1 +
 .../comments/comments.component.html          | 125 ++++++++----------
 .../comments/comments.component.scss          |  46 ++++++-
 .../components/comments/comments.component.ts |   1 +
 5 files changed, 124 insertions(+), 86 deletions(-)

diff --git a/src/app/features/consultation/consultation.component.html b/src/app/features/consultation/consultation.component.html
index 39b483e4..04d94ecd 100644
--- a/src/app/features/consultation/consultation.component.html
+++ b/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">
-				<!--					*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>
+			<!--				<app-comments [poll]="poll" [vote_stack]="storageService.vote_stack" *ngIf="poll.allow_comments" ></app-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>
 		</section>
 	</div>
 </section>
-<section class="loadin_poll" *ngIf="fetching">
-	<div class="step has-text-centered">
-		<p>loading ... <i class="fa fa-spinner fa-spin"></i></p>
-	</div>
-</section>
+<div class="step has-text-centered" class="loadin_poll" *ngIf="fetching">
+	<h1 class="title is-1">
+		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>
diff --git a/src/app/features/consultation/consultation.component.scss b/src/app/features/consultation/consultation.component.scss
index 0ea6ca7c..3e2e4948 100644
--- a/src/app/features/consultation/consultation.component.scss
+++ b/src/app/features/consultation/consultation.component.scss
@@ -8,6 +8,7 @@
 .poll_loaded {
 	.description {
 		min-height: 2rem;
+		margin-bottom: 1rem;
 	}
 }
 .options-button {
diff --git a/src/app/shared/components/comments/comments.component.html b/src/app/shared/components/comments/comments.component.html
index 92d58111..c3bd9460 100644
--- a/src/app/shared/components/comments/comments.component.html
+++ b/src/app/shared/components/comments/comments.component.html
@@ -1,88 +1,71 @@
-<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">
-			<!--			{{ poll.comments.length }}-->
-			{{ 'participation.comments_new' | translate }}
-		</h2>
-
-		<article class="message rounded-block" *ngFor="let comment of poll.comments">
-			<div class="header">
-				<p>
-					<em class="cname" *ngIf="comment.pseudo"> {{ comment.pseudo }} </em>
-					<em class="cname" *ngIf="!comment.pseudo"> (somebody) </em>
-					,
-
-					<span class="date date-days-ago">
-						{{
-							'date_delays.dipslay_comments_delay'
-								| translate
-									: {
-											counter_delay: calculateDaysAgoOfComment(comment.created_at),
-											time_unit: 'date_delays.days' | translate
-									  }
-						}}
-						{{ calculateDaysAgoOfComment(comment.created_at) }} ,
-					</span>
-					<span class="date is-small">
-						{{ comment.created_at | date: 'short':'Europe/Paris' }}
-					</span>
-				</p>
-			</div>
-			<div class="message-body">
+		<!--		comment list-->
+		<article class="message-comment" *ngFor="let comment of poll.comments">
+			<div class="message-text">
+				<div class="header">
+					<p class="chapo-paragraph-bold">
+						<em class="message-comment-pseudo" *ngIf="comment.pseudo"> {{ comment.pseudo }} </em>
+						<em class="message-comment-pseudo" *ngIf="!comment.pseudo"> (somebody) </em>
+					</p>
+				</div>
 				<p class="text">
 					{{ comment.text }}
 				</p>
+				<div class="left-point"></div>
 			</div>
+			<div class="date date-days-ago">
+				{{
+					'date_delays.dipslay_comments_delay'
+						| translate
+							: {
+									counter_delay: calculateDaysAgoOfComment(comment.created_at),
+									time_unit: 'date_delays.days' | translate
+							  }
+				}}
+				<!--				{{ calculateDaysAgoOfComment(comment.created_at) }} ,-->
+			</div>
+			<span class="date is-small" *ngIf="display_comment_date">
+				{{ comment.created_at | date: 'short':'Europe/Paris' }}
+			</span>
 		</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">
-					<!--					<span class="control has-icons-left has-icons-right">-->
-					<!--						<input-->
-					<!--							type="email"-->
-					<!--							name="cremail"-->
-					<!--							id="email_comment"-->
-					<!--							[(ngModel)]="vote_stack.owner.email"-->
-					<!--							required="required"-->
-					<!--						/>-->
-					<!--						<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"
-							required="required"
-						/>
-						<span class="icon is-small is-left">
-							<i class="fa fa-user"></i>
-						</span>
-					</span>
-				</div>
-
-				<!--			<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 class="field"></div>
 			</div>
-			<div class="message-body">
-				<label for="comment">
+			<div class="message-text-new rounded-block">
+				<h2 class="title is-5">
+					{{ 'participation.comments_new' | translate }}
+				</h2>
+				<p>
+					Votre commentaire sera directement visible sur la page du sondage.
+				</p>
+				<label for="comment_pseudo">
+					{{ 'participation.name_label' | translate }}
+				</label>
+				<span class="control has-icons-left">
+					<input
+						type="text"
+						name="crname"
+						[(ngModel)]="vote_stack.pseudo"
+						id="comment_pseudo"
+						required="required"
+					/>
+					<span class="icon is-small is-left">
+						<i class="fa fa-user"></i>
+					</span>
+				</span>
+				<br />
+				<label for="new_comment">
 					{{ 'participation.content_label' | translate }}
 				</label>
-
-				<br />
-				<textarea name="comment" id="comment" [(ngModel)]="vote_stack.comment"> </textarea>
+				<textarea name="comment" id="new_comment" [(ngModel)]="vote_stack.comment"> </textarea>
 
 				<input
 					type="submit"
@@ -92,6 +75,6 @@
 					(click)="addComment()"
 				/>
 			</div>
-		</article>
+		</section>
 	</section>
 </div>
diff --git a/src/app/shared/components/comments/comments.component.scss b/src/app/shared/components/comments/comments.component.scss
index 7cfdd368..41f9ffad 100644
--- a/src/app/shared/components/comments/comments.component.scss
+++ b/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;
 }
diff --git a/src/app/shared/components/comments/comments.component.ts b/src/app/shared/components/comments/comments.component.ts
index 312db7db..a51a9639 100644
--- a/src/app/shared/components/comments/comments.component.ts
+++ b/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,