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

correct size of advanced config content and all step width

Browse Source
This commit is contained in:
Tykayn 2021-12-09 15:43:44 +01:00 committed by tykayn
parent f993f5c31e
commit 2a48633e83
11 changed files with 62 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/features/administration/form/advanced-config/advanced-config.component.html
View File

@ -117,8 +117,11 @@
</mat-checkbox> </mat-checkbox>
<br /> <br />
<mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers"> <mat-checkbox class="is-not-flex" formControlName="hasMaxCountOfAnswers">
Nombre de réponses limitées à ce nombre. Utile pour réserver des places à un évènement. Nombre de réponses limitées à ce nombre.
</mat-checkbox> </mat-checkbox>
<p>
Utile pour réserver des places à un évènement.
</p>
<input <input
*ngIf="form.value.hasMaxCountOfAnswers" *ngIf="form.value.hasMaxCountOfAnswers"
#maxCountOfAnswers #maxCountOfAnswers
@ -138,7 +141,7 @@
</h2> </h2>
<div> <div>
<mat-checkbox class="is-not-flex" formControlName="useVoterUniqueLink"> <mat-checkbox class="is-not-flex" formControlName="useVoterUniqueLink">
Spécifier un <strong> lien unique de vote</strong> à des participants définis par leur email Lien unique de vote par email
</mat-checkbox> </mat-checkbox>
<p> <p>
lister les email des participants et leur fournir un lien unique pour voter à chacun, au lieu d'un lien lister les email des participants et leur fournir un lien unique pour voter à chacun, au lieu d'un lien
@ -155,11 +158,17 @@
</div> </div>
<mat-checkbox class="is-not-flex" formControlName="allowNewDateTime"> <mat-checkbox class="is-not-flex" formControlName="allowNewDateTime">
Proposer un créneau
</mat-checkbox>
<p>
Permettre au public de proposer un créneau de vote supplémentaire Permettre au public de proposer un créneau de vote supplémentaire
</mat-checkbox> </p>
<mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge"> <mat-checkbox class="is-not-flex" formControlName="isZeroKnoledge">
Les informations du sondage seront chiffrés en base de données Zéro knowledge
</mat-checkbox> </mat-checkbox>
<p>
Les informations du sondage seront chiffrées en base de données
</p>
</fieldset> </fieldset>
<app-errors-list [form]="form"></app-errors-list> <app-errors-list [form]="form"></app-errors-list>
</form> </form>

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

@ -1,7 +1,7 @@
<app-stepper [step_current]="5" [step_max]="pollService.step_max"></app-stepper>
<div class="step"> <div class="step">
<div class="min-height"> <div class="min-height">
<section class="supplement"> <section class="supplement">
<app-stepper [step_current]="5" [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>
<div class="advanced-config"> <div class="advanced-config">
<h2 class="title is-2"> <h2 class="title is-2">

9
src/app/features/administration/form/steps/step-four/step-four.component.html
View File

@ -1,6 +1,6 @@
<app-stepper [step_current]="4" [step_max]="pollService.step_max"></app-stepper>
<div class="step"> <div class="step">
<div class="min-height"> <div class="min-height">
<app-stepper [step_current]="4" [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>
<div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day"> <div class="custom-day-time-slices" *ngIf="environment.creation_display_hour_per_day">
@ -115,8 +115,9 @@
</div> </div>
</div> </div>
</div> </div>
<app-nav-steps </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>
</div>

9
src/app/features/administration/form/steps/step-one/step-one.component.html
View File

@ -1,6 +1,6 @@
<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
<div class="step step-container"> <div class="step step-container">
<form class="min-height" [formGroup]="pollService.form"> <form class="min-height" [formGroup]="pollService.form">
<app-stepper [step_current]="1" [step_max]="pollService.step_max"></app-stepper>
<section class="poll-title"> <section class="poll-title">
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'creation.choose_title' | translate }} {{ 'creation.choose_title' | translate }}
@ -73,11 +73,10 @@
></button> ></button>
</ng-template> </ng-template>
</p-confirmDialog> </p-confirmDialog>
</div>
<app-nav-steps <app-nav-steps
[display_previous_button]="false" [display_previous_button]="false"
[display_next_button]="true" [display_next_button]="true"
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>
</div>

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

@ -1,5 +1,5 @@
<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
<div class="step min-height step-resume"> <div class="step min-height step-resume">
<app-stepper [step_current]="7" [step_max]="pollService.step_max"></app-stepper>
<div class="columns content"> <div class="columns content">
<div class="column"> <div class="column">
<h2 class="title is-2"> <h2 class="title is-2">
@ -82,9 +82,9 @@
</div> </div>
</div> </div>
</div> </div>
<app-nav-steps </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
[is_finish_step]="true" [is_finish_step]="true"
></app-nav-steps> ></app-nav-steps>
</div>

8
src/app/features/administration/form/steps/step-six/step-six.component.html
View File

@ -1,5 +1,5 @@
<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
<div class="step min-height"> <div class="step min-height">
<app-stepper [step_current]="6" [step_max]="pollService.step_max"></app-stepper>
<div class="min-height"> <div class="min-height">
<form action="#" [formGroup]="pollService.form"> <form action="#" [formGroup]="pollService.form">
<h2> <h2>
@ -18,8 +18,8 @@
<input class="input" type="text" id="email" formControlName="creatorEmail" /> <input class="input" type="text" id="email" formControlName="creatorEmail" />
</form> </form>
</div> </div>
<app-nav-steps </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>
</div>

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

@ -1,5 +1,5 @@
<app-stepper [step_current]="3" [step_max]="pollService.step_max"></app-stepper>
<div class="step min-height"> <div class="step min-height">
<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>
<!-- sélecteur d'interface--> <!-- sélecteur d'interface-->
<button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()"> <button class="button is-fullwidth date-input-selector is-secondary" (click)="changeDateInputMode()">
@ -28,8 +28,8 @@
<app-day-list [form]="pollService.form"></app-day-list> <app-day-list [form]="pollService.form"></app-day-list>
<!-- [hasSeveralHours]="pollService.form.value.hasSeveralHours"--> <!-- [hasSeveralHours]="pollService.form.value.hasSeveralHours"-->
</div> </div>
<app-nav-steps </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>
</div>

8
src/app/features/administration/form/steps/step-two/step-two.component.html
View File

@ -1,7 +1,7 @@
<app-stepper [step_current]="2" [step_max]="pollService.step_max"></app-stepper>
<div class="step step-container form-field poll-kind"> <div class="step step-container form-field poll-kind">
<form action="#" [formGroup]="pollService.form"> <form action="#" [formGroup]="pollService.form">
<div class="min-height"> <div class="min-height">
<app-stepper [step_current]="2" [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>
<h2 class="title is-2"> <h2 class="title is-2">
{{ 'creation.want' | translate }} {{ 'creation.want' | translate }}
@ -42,8 +42,8 @@
</div> </div>
</div> </div>
</form> </form>
<app-nav-steps </div>
<app-nav-steps
[next_step_number]="pollService.step_current + 1" [next_step_number]="pollService.step_current + 1"
[previous_step_number]="pollService.step_current - 1" [previous_step_number]="pollService.step_current - 1"
></app-nav-steps> ></app-nav-steps>
</div>

2
src/app/features/administration/stepper/stepper.component.scss
View File

@ -66,6 +66,8 @@
.step-info { .step-info {
padding: 9px 10px; padding: 9px 10px;
width: 100%;
display: block;
background: $white; background: $white;
height: $header-nav-inner-height; height: $header-nav-inner-height;
i { i {

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

@ -191,11 +191,6 @@ mat-checkbox {
} }
} }
.step {
max-width: $main-column-width;
margin: 0 auto;
}
.fa { .fa {
margin-right: 1ch; margin-right: 1ch;
@ -277,9 +272,11 @@ mat-checkbox {
} }
.step { .step {
max-width: $main-column-width;
margin: 0 auto;
padding: 2rem 1rem; padding: 2rem 1rem;
box-sizing: border-box; box-sizing: border-box;
overflow: auto;
.title { .title {
color: $d-primary-intense; color: $d-primary-intense;
margin-bottom: 36px; margin-bottom: 36px;
@ -292,6 +289,10 @@ mat-checkbox {
font-size: 1rem; font-size: 1rem;
line-height: 1.25rem; line-height: 1.25rem;
} }
p,
* {
max-width: $main-column-width-inner;
}
} }
// resume de la création de sondage // resume de la création de sondage

5
src/styles/variables.scss
View File

@ -69,6 +69,11 @@ $title_font: 'helvetica', 'proza_libre', 'Arial', 'DejaVu Sans Mono';
// sizes and breakpoints // sizes and breakpoints
$main-column-width: 400px; $main-column-width: 400px;
$main-column-width-inner: 380px;
$mobile-size: 400px; $mobile-size: 400px;
$header-nav-height: 68px; $header-nav-height: 68px;
$header-nav-inner-height: 60px; $header-nav-inner-height: 60px;
:root {
--main-col-width: $main-column-width-inner;
}