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

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

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

@ -1,23 +1,55 @@
<div class="columns"> <div class="step-container min-height">
<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
<div class="columns">
<div class="column"> <div class="column">
<h2 class="title is-2"> <h2 class="title is-2">
Voici le résumé de votre sondage Voici le résumé de votre sondage
</h2> </h2>
<p class="helper"> <p class="helper">
En cliquant sur le bouton « Modifier » d’une section vous serez renvoyé à l’étape correspondante de la 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. création du sondage. Vous devrez repasser par toutes les étapes suivantes.
<br /> <br />
Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau. Mais rassurez-vous, vous n’aurez pas à tout remplir à nouveau.
</p> </p>
<div class="resume"> <div class="resume">
<h3 class="title is-3">Mes informations générales</h3> <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> <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> <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> <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> <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>
<div class="column"> <div class="column">
<button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/3']"> <button class="button is-secondary is-fullwidth" [routerLink]="['/administration/step/6']">
précédent précédent
</button> </button>
</div> </div>
@ -28,4 +60,5 @@
</button> </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;
}
}
}