style on comments bubbles

This commit is contained in:
Tykayn 2022-03-22 11:53:45 +01:00 committed by tykayn
parent c6861d1690
commit 23df4a5899
5 changed files with 124 additions and 86 deletions

View File

@ -1,6 +1,6 @@
<app-header [linkToHome]="false"></app-header> <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="step contained-in-large-column">
<div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff"> <div class="rounded-block admin-share-link" *ngIf="poll.admin_key || show_admin_stuff">
<h1 class="title is-2"> <h1 class="title is-2">
@ -101,7 +101,7 @@
</h2> </h2>
</div> </div>
<div class="column"> <div class="column">
<button class="no-outline button" (click)="detailledDisplay = !detailledDisplay"> <button class="button is-secondary pull-right" (click)="detailledDisplay = !detailledDisplay">
<span *ngIf="detailledDisplay"> <span *ngIf="detailledDisplay">
<!-- <img class="icon" src="assets/icons/flag.svg" alt="icone magnifying" />--> <!-- <img class="icon" src="assets/icons/flag.svg" alt="icone magnifying" />-->
{{ 'participation.mode_comptact' | translate }} {{ 'participation.mode_comptact' | translate }}
@ -120,22 +120,31 @@
<app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum> <app-poll-results-dinum [poll]="poll" [detailledDisplay]="detailledDisplay"></app-poll-results-dinum>
</section> </section>
<section class="poll-comments"> <section class="poll-comments" id="comments_list">
<h2 class="title is-3"> <h2 class="title is-3">
{{ 'participation.comments' | translate }} {{ 'participation.comments' | translate }}
<a [routerLink]="[]" fragment="comments_list"> #</a>
</h2> </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> <app-comments [poll]="poll" [vote_stack]="storageService.vote_stack"></app-comments>
<div class="alert has-background-info" *ngIf="!poll.allow_comments"> <div class="alert has-background-info" *ngIf="!poll.allow_comments">
Ce sondage ne permet pas d'ajouter de commentaires Ce sondage ne permet pas d'ajouter de commentaires
</div> </div>
</div>
</section> </section>
</div> </div>
</section> </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
</div> </h1>
</section> <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>

View File

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

View File

@ -1,21 +1,23 @@
<div class="comments padded" id="comments"> <div class="comments" id="comments">
<div class="message-body" *ngIf="poll.is_archived"> <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 ⚰️ Ce sondage a expiré, il n'est plus possible d'y ajouter de votes ou de commentaires
</div> </div>
<section class="comments-part" *ngIf="!poll.is_archived && poll.comments"> <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"> <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' 'date_delays.dipslay_comments_delay'
| translate | translate
@ -24,43 +26,32 @@
time_unit: 'date_delays.days' | translate 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' }} {{ comment.created_at | date: 'short':'Europe/Paris' }}
</span> </span>
</p>
</div>
<div class="message-body">
<p class="text">
{{ comment.text }}
</p>
</div>
</article> </article>
</section> </section>
<section class="add-comment" *ngIf="!poll.is_archived && vote_stack.owner"> <section class="add-comment" *ngIf="!poll.is_archived && vote_stack.owner">
<article class="message"> <section class="new-comment-section">
<div class="header"> <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"> <label for="comment_pseudo">
{{ 'participation.name_label' | translate }} {{ 'participation.name_label' | translate }}
</label> </label>
<span class="control has-icons-left"> <span class="control has-icons-left">
<input <input
type="text" type="text"
class="margin-btm-x3"
name="crname" name="crname"
[(ngModel)]="vote_stack.pseudo" [(ngModel)]="vote_stack.pseudo"
id="comment_pseudo" id="comment_pseudo"
@ -70,19 +61,11 @@
<i class="fa fa-user"></i> <i class="fa fa-user"></i>
</span> </span>
</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 }} {{ 'participation.content_label' | translate }}
</label> </label>
<textarea name="comment" id="new_comment" [(ngModel)]="vote_stack.comment"> </textarea>
<br />
<textarea name="comment" id="comment" [(ngModel)]="vote_stack.comment"> </textarea>
<input <input
type="submit" type="submit"
@ -92,6 +75,6 @@
(click)="addComment()" (click)="addComment()"
/> />
</div> </div>
</article> </section>
</section> </section>
</div> </div>

View File

@ -1,3 +1,47 @@
.date { .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;
} }

View File

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