🎨 step 7 style and email template

Signed-off-by: tykayn <15d65f2f-0b14-4f70-bf34-e130180ed62b@users.tedomum.net>
This commit is contained in:
tykayn 2022-03-14 17:49:11 +01:00
parent 9a6a052608
commit 11a9035816
5 changed files with 90 additions and 29 deletions

View File

@ -7,14 +7,14 @@
{{ 'resume.description' | translate }} {{ 'resume.description' | translate }}
</p> </p>
<div class="resume"> <div class="resume">
<h2 class="title is-3">{{ 'resume.general' | translate }}</h2> <h2 class="title is-5">{{ 'resume.general' | translate }}</h2>
<div class="block-resume"> <div class="block-resume">
<h3 class="title is-4"> <p class="block-label">
{{ pollService.form.value.title }} {{ pollService.form.value.title }}
<i *ngIf="!pollService.form.value.title"> </p>
<p class="no-description" *ngIf="!pollService.form.value.title">
(pas de titre) (pas de titre)
</i> </p>
</h3>
<p class="description"> <p class="description">
{{ pollService.form.value.description }} {{ pollService.form.value.description }}
<i *ngIf="!pollService.form.value.description"> <i *ngIf="!pollService.form.value.description">
@ -22,21 +22,28 @@
</i> </i>
</p> </p>
<hr /> <hr />
<div class="go-to-step" [routerLink]="['/administration/step/1']"> <div
<img class="icon" src="assets/icons/edit.svg" alt="icone crayon" /> class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
[routerLink]="['/administration/step/1']"
>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</div> </div>
</div> </div>
<h2 class="title is-3">{{ 'resume.kind' | translate }}</h2> <h2 class="title is-5">{{ 'resume.kind' | translate }}</h2>
<div class="block-resume"> <div class="block-resume">
{{ pollService.form.value.isAboutDate ? 'Date' : 'Propositions' }} {{ pollService.form.value.isAboutDate ? 'Date' : 'Propositions' }}
<hr /> <hr />
<div class="go-to-step" [routerLink]="['/administration/step/2']"> <div
<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" /> class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
[routerLink]="['/administration/step/2']"
>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</div> </div>
</div> </div>
<h2 class="title is-3">{{ 'resume.dates_and_hours' | translate }}</h2> <h2 class="title is-5" *ngIf="pollService.form.value.isAboutDate">
{{ 'resume.dates_and_hours' | translate }}
</h2>
<h2 class="title is-5" *ngIf="!pollService.form.value.isAboutDate">{{ 'SENTENCES.Choice' | translate }}</h2>
<div class="block-resume"> <div class="block-resume">
<div class="list-datechoices" *ngIf="pollService.form.value.isAboutDate"> <div class="list-datechoices" *ngIf="pollService.form.value.isAboutDate">
<ul *ngFor="let choice of pollService.dateChoiceList"> <ul *ngFor="let choice of pollService.dateChoiceList">
@ -53,28 +60,52 @@
</ul> </ul>
</div> </div>
<div class="list-texts" *ngIf="!pollService.form.value.isAboutDate"> <div class="list-texts" *ngIf="!pollService.form.value.isAboutDate">
<ul *ngFor="let choice of pollService.choices"> <ul *ngFor="let choice of StorageService.choicesText">
<li> <li>
{{ choice }} {{ choice.name }}
</li> </li>
</ul> </ul>
</div> </div>
<hr /> <hr />
<div class="go-to-step" [routerLink]="['/administration/step/3']"> <div
<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" /> class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
[routerLink]="['/administration/step/3']"
>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</div> </div>
</div> </div>
<h2 class="title is-3">{{ 'resume.params_notifs' | translate }}</h2> <h2 class="title is-5">{{ 'resume.params_notifs' | translate }}</h2>
<div class="block-resume"> <div class="block-resume">
<div class="password">Protégé par mot de passe: {{ pollService.form.value.password ? 'oui' : 'non' }}</div> <p class="password" *ngIf="pollService.form.value.password.length">
{{ 'SENTENCES.password-protected' | translate }}
</p>
<div class="notifs">
<!-- who modifies answers:-->
<!-- {{pollService.form.value.whoModifiesAnswers }}-->
<p class="block-label" *ngIf="pollService.form.value.whoModifiesAnswers === 'self'">
{{ 'SENTENCES.voters-can-modify-their-own-vote-themselves' | translate }}
</p>
<!-- {{"SENTENCES.all-voters-can-modify-any-vote" |translate}}-->
<!-- {{"SENTENCES.votes-cannot-be-modified" |translate}}-->
<p class="block-label">
email on comment:
{{ pollService.form.value.isOwnerNotifiedByEmailOnNewComment ? 'oui' : 'non' }}
</p>
<p class="block-label">
email on vote:
{{ pollService.form.value.isOwnerNotifiedByEmailOnNewVote ? 'oui' : 'non' }}
</p>
</div>
<hr /> <hr />
<div class="go-to-step clickable" [routerLink]="['/administration/step/5']"> <div
<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" /> class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
[routerLink]="['/administration/step/5']"
>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</div> </div>
</div> </div>
<h2 class="title is-3">{{ 'resume.owner' | translate }}</h2> <h2 class="title is-5">{{ 'resume.owner' | translate }}</h2>
<div class="block-resume"> <div class="block-resume">
<div class="name"> <div class="name">
<strong> <strong>
@ -89,8 +120,10 @@
{{ pollService.form.value.creatorEmail }} {{ pollService.form.value.creatorEmail }}
</div> </div>
<hr /> <hr />
<div class="go-to-step" [routerLink]="['/administration/step/6']"> <div
<img class="icon" aria-hidden="true" src="assets/icons/edit.svg" /> class="go-to-step has-background-icon-left is-filtered-icon-primary has-background-edit"
[routerLink]="['/administration/step/6']"
>
{{ 'resume.edit' | translate }} {{ 'resume.edit' | translate }}
</div> </div>
</div> </div>

View File

@ -0,0 +1,26 @@
.step-resume {
.description {
font-weight: 400;
font-size: 16px;
line-height: 20px;
}
.title {
margin-top: 2rem;
}
.block-label {
font-weight: 700;
font-size: 16px;
line-height: 20px;
margin-bottom: 1rem;
.rounded-block > & {
margin-top: 0;
}
}
.go-to-step {
margin-left: -1rem;
margin-right: -1rem;
&:hover {
color: #000;
}
}
}

View File

@ -1,6 +1,7 @@
import { Component, OnInit } from '@angular/core'; import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; import { Router } from '@angular/router';
import { PollService } from '../../../../../core/services/poll.service'; import { PollService } from '../../../../../core/services/poll.service';
import { StorageService } from '../../../../../core/services/storage.service';
@Component({ @Component({
selector: 'app-step-seven', selector: 'app-step-seven',
@ -8,7 +9,7 @@ import { PollService } from '../../../../../core/services/poll.service';
styleUrls: ['./step-seven.component.scss'], styleUrls: ['./step-seven.component.scss'],
}) })
export class StepSevenComponent implements OnInit { export class StepSevenComponent implements OnInit {
constructor(private router: Router, public pollService: PollService) { constructor(private router: Router, public StorageService: StorageService, public pollService: PollService) {
this.pollService.step_current = 7; this.pollService.step_current = 7;
} }

View File

@ -57,7 +57,7 @@
} }
.rounded-block { .rounded-block {
border-radius: 0.25em; border-radius: 8px;
background: $d-blue30; background: $d-blue30;
padding: 1em; padding: 1em;
margin-bottom: 1rem; margin-bottom: 1rem;

View File

@ -326,10 +326,11 @@ mat-checkbox {
padding-bottom: 0; padding-bottom: 0;
} }
.go-to-step { .go-to-step {
padding: 1rem 0.75rem; color: $primary;
padding-left: 1rem; padding: 1rem 0.5rem;
margin-left: -1em; padding-left: 44px;
margin-right: -1em; //margin-left: -1em;
//margin-right: -1em;
} }
.list-datechoices { .list-datechoices {