Liness/framadate-responsive
5
0
Fork 0
forked from tykayn/funky-framadate-front
Code Pull Requests Activity

resume page style

Browse Source
This commit is contained in:
Tykayn 2021-11-18 11:41:23 +01:00 committed by tykayn
parent f26a6d7826
commit 339b5da3e8
4 changed files with 94 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/app/features/administration/form/steps/step-seven/step-seven.component.html
View File

@ -1,31 +1,64 @@
<div class="columns"> <div class="step-container min-height">
<div class="column"> <app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
<h2 class="title is-2"> <div class="columns">
Voici le résumé de votre sondage
</h2>
<p class="helper">
En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la
création du sondage. Vous devrez repasser par toutes les étapes suivante.
<br />
Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
</p>
<div class="resume">
<h3 class="title is-3">Mes informations générales</h3>
<h3 class="title is-3">Mon type de sondage</h3>
<h3 class="title is-3">Mes dates et horaires</h3>
<h3 class="title is-3">Mes paramètres et options de notifications</h3>
<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
</div>
<div class="column"> <div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']"> <h2 class="title is-2">
précédent Voici le résumé de votre sondage
</button> </h2>
</div> <p class="helper">
<div class="column"> En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la
<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid"> création du sondage. Vous devrez repasser par toutes les étapes suivantes.
<i class="fa fa-save"></i> <br />
Enregistrer le sondage Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
</button> </p>
<div class="resume">
<h3 class="title is-3">Mes informations générales</h3>
<div class="block-resume">
<hr />
<div class="go-to-step" [routerLink]="['administration/step/1']">
<i class="fa fa-pencil"></i> Modifier
</div>
</div>
<h3 class="title is-3">Mon type de sondage</h3>
<div class="block-resume">
<hr />
<div class="go-to-step" [routerLink]="['administration/step/2']">
<i class="fa fa-pencil"></i> Modifier
</div>
</div>
<h3 class="title is-3">Mes dates et horaires</h3>
<div class="block-resume">
<hr />
<div class="go-to-step" [routerLink]="['administration/step/3']">
<i class="fa fa-pencil"></i> Modifier
</div>
</div>
<h3 class="title is-3">Mes paramètres et options de notifications</h3>
<div class="block-resume">
<hr />
<div class="go-to-step clickable" [routerLink]="['administration/step/4']">
<i class="fa fa-pencil"></i> Modifier
</div>
</div>
<h3 class="title is-3">Mon nom et mon adresse e-mail</h3>
<div class="block-resume">
<hr />
<div class="go-to-step" [routerLink]="['administration/step/5']">
<i class="fa fa-pencil"></i> Modifier
</div>
</div>
</div>
<div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']">
précédent
</button>
</div>
<div class="column">
<button class="btn is-primary is-fullwidth" (click)="createPoll()" [disabled]="!pollService.form.valid">
<i class="fa fa-save"></i>
Enregistrer le sondage
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

2
src/app/features/administration/form/steps/step-three/step-three.component.html
View File

@ -1,5 +1,5 @@
<div class="step min-height"> <div class="step min-height">
<app-stepper [step_current]="3" [step_max]="5"></app-stepper> <app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
<app-errors-list [form]="pollService.form"></app-errors-list> <app-errors-list [form]="pollService.form"></app-errors-list>
<!-- choix spécialement pour les dates--> <!-- choix spécialement pour les dates-->
<div class="calendar" *ngIf="mode_calendar"> <div class="calendar" *ngIf="mode_calendar">

6
src/styles/partials/_datepicker.scss
View File

@ -1,4 +1,7 @@
// calendar primeng // calendar primeng
.calendar {
text-align: center;
}
.p-datepicker { .p-datepicker {
border: solid 1px $logo_color; border: solid 1px $logo_color;
padding: 0.5em; padding: 0.5em;
@ -20,6 +23,9 @@
.p-datepicker-buttonbar { .p-datepicker-buttonbar {
margin-top: 0.5em; margin-top: 0.5em;
button {
min-width: 15em;
}
} }
.p-datepicker-month { .p-datepicker-month {

27
src/styles/partials/_forms.scss
View File

@ -14,6 +14,7 @@ select.is-hovered,
.select select.is-hovered { .select select.is-hovered {
border-color: $border-color !important; border-color: $border-color !important;
} }
app-step-one, app-step-one,
app-step-two, app-step-two,
app-step-three, app-step-three,
@ -21,11 +22,13 @@ app-step-four {
padding: 2em 2.5em; padding: 2em 2.5em;
display: block; display: block;
} }
app-step-five { app-step-five {
app-stepper { app-stepper {
padding: 2em 2.5em; padding: 2em 2.5em;
display: block; display: block;
} }
.container { .container {
padding: 2em; padding: 2em;
} }
@ -273,6 +276,7 @@ mat-checkbox {
background: $light; background: $light;
border: 3px solid $primary-color; border: 3px solid $primary-color;
} }
.work-in-progress { .work-in-progress {
padding: 1em 2em; padding: 1em 2em;
background: $border-color; background: $border-color;
@ -281,5 +285,28 @@ mat-checkbox {
} }
.step-container { .step-container {
padding: 1em 2em;
@extend .container, .is-widescreen; @extend .container, .is-widescreen;
} }
// resume de la création de sondage
.block-resume {
border-radius: 0.25em;
background: $bg-grey;
padding: 1em;
margin-bottom: 0.5em;
hr {
margin: 0.5em -1em;
background: $rules;
}
.go-to-step {
@extend .clickable;
padding: 1em;
&:hover {
background: $secondary_color;
color: $white;
}
}
}