tykayn/funky-framadate-front
1
1
Fork 1
mirror of https://framagit.org/framasoft/framadate/funky-framadate-front.git synced 2023-08-25 13:53:14 +02:00
Code Issues Projects Releases Wiki Activity

style on comments bubbles

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/app/features/consultation/consultation.component.html
View File

@ -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" *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>
</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 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>
</section>

1
src/app/features/consultation/consultation.component.scss
View File

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

83
src/app/shared/components/comments/comments.component.html
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">
⚰️ 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">
<!-- comment list-->
<article class="message-comment" *ngFor="let comment of poll.comments">
<div class="message-text">
<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">
<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
@ -24,43 +26,32 @@
time_unit: 'date_delays.days' | translate
}
}}
{{ calculateDaysAgoOfComment(comment.created_at) }} ,
</span>
<span class="date is-small">
<!-- {{ calculateDaysAgoOfComment(comment.created_at) }} ,-->
</div>
<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">
<!-- <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>-->
<div class="field"></div>
</div>
<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"
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>
<!-- <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">
<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>

46
src/app/shared/components/comments/comments.component.scss
View File

@ -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;
}

1
src/app/shared/components/comments/comments.component.ts
View File

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