diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index b9af2568605d6fcf3320c0464a96fad3b88983e3..24dc6e8b566a117ada21a68648fc5e501109545b 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -508,7 +508,7 @@
<h3>Quels sont les modalités d'accueil ?</h3>
<p>Plusieurs choix possibles</p>
</div>
- <div *ngIf="accessModality">
+ <div *ngIf="accessModality" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start">
<app-checkbox-form
*ngFor="let module of accessModality.modules"
[isChecked]="isInArray(module.id, accessModality.id)"
@@ -944,7 +944,7 @@
</div>
<ng-container *ngFor="let equipment of equipmentsAndServices">
<div
- class="collapse"
+ class="collapse equipments"
[ngClass]="{ notCollapsed: !equipment.openned }"
*ngIf="['ordinateurs', 'tablettes', 'bornesNumeriques', 'imprimantes'].includes(equipment.module.id)"
>
@@ -1061,7 +1061,7 @@
<h3>Quelle(s) labelisation proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
</div>
- <div *ngIf="labelsQualifications">
+ <div *ngIf="labelsQualifications" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start">
<app-checkbox-form
*ngFor="let module of labelsQualifications.modules"
[isChecked]="isInArray(module.id, labelsQualifications.id)"
@@ -1078,7 +1078,7 @@
<h3>Quels autres services proposez-vous ?</h3>
<p class="notRequired">facultatif</p>
</div>
- <div *ngIf="labelsQualifications">
+ <div *ngIf="labelsQualifications" fxLayout="row wrap" fxLayoutGap="16px" fxLayoutAlign="flex-start">
<ng-container *ngFor="let equipment of equipmentsAndServices">
<app-checkbox-form
*ngIf="
@@ -1135,7 +1135,13 @@
</div>
<div *ngIf="currentPage == 23" class="page">
<div class="title">
- <h3>Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon* ?</h3>
+ <h3>
+ Acceptez-vous que les informations saisies soient enregistrées par la Métropole de Lyon<span
+ class="asterisk"
+ >*</span
+ >
+ ?
+ </h3>
</div>
<app-checkbox-form
[isChecked]="userAcceptSavedDate"
@@ -1143,23 +1149,23 @@
(checkEvent)="acceptDataBeSaved($event)"
>
</app-checkbox-form>
- <p>
- * Les informations recueillies sont enregistrées dans un fichier par la Métropole de Lyon en vue de
- l'animation du réseau des acteurs de la médiation numérique. Elles sont conservées pendant 24 mois et sont
- destinées aux seuls intervenants habilités de la Métropole de Lyon. Vos données personnelles sont traitées
- dans ce cadre aux fins de Ârecensement des actions de médiation numérique sur le territoire de la métropole.
- Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l'information, aux fichiers et aux libertés,
- et au Règlement Général européen à la Protection des Données, vous avez la possibilité d’exercer vos droits
- d’accès, de rectification, d’effacement, d’opposition, de limitation du traitement et de révocation de votre
- consentement. Afin d'exercer vos droits, vous pouvez vous adresser : par courrier postal à : Métropole de Lyon
- - Direction des Affaires Juridiques et de la Commande Publique - 20, rue du Lac - BP 33569 - 69505 Lyon Cedex
- par courrier électronique en remplissant le formulaire dédié sur Toodego, le site des services et démarches en
- ligne dans la Métropole de Lyon
+ <p class="informationEndForm">
+ <span class="asterisk">*</span> Les informations recueillies sont enregistrées dans un fichier par la
+ Métropole de Lyon en vue de l'animation du réseau des acteurs de la médiation numérique. Elles sont conservées
+ pendant 24 mois et sont destinées aux seuls intervenants habilités de la Métropole de Lyon. Vos données
+ personnelles sont traitées dans ce cadre aux fins de Ârecensement des actions de médiation numérique sur le
+ territoire de la métropole. Conformément à la loi 78-17 du 6 janvier 1978 modifiée relative à l'information,
+ aux fichiers et aux libertés, et au Règlement Général européen à la Protection des Données, vous avez la
+ possibilité d’exercer vos droits d’accès, de rectification, d’effacement, d’opposition, de limitation du
+ traitement et de révocation de votre consentement. Afin d'exercer vos droits, vous pouvez vous adresser : par
+ courrier postal à : Métropole de Lyon - Direction des Affaires Juridiques et de la Commande Publique - 20, rue
+ du Lac - BP 33569 - 69505 Lyon Cedex par courrier électronique en remplissant le formulaire dédié sur Toodego,
+ le site des services et démarches en ligne dans la Métropole de Lyon
</p>
</div>
</form>
</div>
- <div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="space-around center">
+ <div *ngIf="currentPage != 0" class="footer" fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="10px">
<button class="btn previous" (click)="previousPage()"><span class="chevron left"></span>Précédent</button>
<button
*ngIf="currentPage != nbPagesForm"
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index cce0fa17eb69dea77c08c7357dbeb3bffeb4eb0c..3f8400e30d7e0b685a8727e71127a27915b07ca4 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -14,7 +14,6 @@ $progressBar-height: 50px;
height: calc(100vh - #{$header-height} - #{$footer-height});
top: #{$header-height};
z-index: $structure-details-z-index;
- overflow: auto;
@media #{$tablet} {
height: calc(100vh);
top: 0;
@@ -25,8 +24,10 @@ $progressBar-height: 50px;
}
.footer {
- border-top: 1px solid $grey-4;
padding: 17px;
+ width: 100%;
+ max-width: 960px;
+ margin: 20px auto;
.btn {
width: 149px;
&.validate {
@@ -34,7 +35,8 @@ $progressBar-height: 50px;
}
}
@media #{$tablet} {
- display: flex !important;
+ margin: 0 auto;
+ border-top: 1px solid $grey-4;
}
}
.header {
@@ -78,7 +80,7 @@ $progressBar-height: 50px;
padding: 0 16px;
display: block;
overflow-y: auto;
- height: 100vh;
+ height: auto;
h2 {
@include cn-bold-28;
@@ -90,18 +92,22 @@ $progressBar-height: 50px;
@include cn-bold-22;
}
.page {
+ max-width: 960px;
+ margin: auto;
@media #{$tablet} {
height: calc(
100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px
); // -1px because of header border
}
- height: calc(
+ height: auto;
+ /*height: calc(
100vh - #{$header-height} - #{$progressBar-height} - #{$footer-height} - #{$footer-height-phone}
- ); // -1px because of header border
+ ); // -1px because of header border*/
color: $grey-1;
&.home {
height: 100%;
.btnStart {
+ margin-top: 90px;
text-align: center;
}
}
@@ -146,10 +152,16 @@ $progressBar-height: 50px;
font-style: italic;
color: $secondary-color;
}
+ &.informationEndForm {
+ margin-top: 18px;
+ color: $grey-2;
+ @include cn-regular-14;
+ }
}
.textareaBlock {
- max-width: 90%;
-
+ @media #{$tablet} {
+ max-width: 90%;
+ }
textarea {
padding: 13px 8px;
background: $grey-6;
@@ -223,7 +235,8 @@ $progressBar-height: 50px;
}
.progressBar {
height: #{$progressBar-height};
-
+ max-width: 960px;
+ margin: auto;
progress {
width: 100%;
height: 6px;
@@ -269,6 +282,7 @@ input {
}
}
img {
+ max-height: 340px;
&.eyePassword {
padding: 0 2.5px; // Align to email input
cursor: pointer;
@@ -280,12 +294,15 @@ img {
// collapse
.collapse {
- width: 296px;
border: 1px solid $grey-4;
border-radius: 4px;
- cursor: pointer;
margin-bottom: 13px;
-
+ &.equipments {
+ width: 296px;
+ }
+ @media #{$tablet} {
+ width: 296px;
+ }
.logo {
.hide {
display: block;
@@ -393,6 +410,7 @@ img {
.collapseHeader {
height: 65px;
padding: 0 15px 0 12px;
+ cursor: pointer;
}
.logo {
height: 24px;
@@ -417,6 +435,7 @@ img {
@include cn-bold-14;
outline: none;
border: none;
+ cursor: pointer;
&.selectedChoice {
background: $green-1 !important;
color: $white;
@@ -484,3 +503,6 @@ img {
transform: translateY(-50%);
}
}
+.asterisk {
+ color: $secondary-color;
+}
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 10547cf04f385a4d7bf28f1921bcb4dd0149963f..6cae2fc6a29d099c177861177333438b513cda23 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -48,7 +48,7 @@ export class FormComponent implements OnInit {
public structureId: string;
//New var form
- public currentPage = 20;
+ public currentPage = 7;
public progressStatus = 0;
public nbPagesForm = 23;
public accountForm: FormGroup;
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
index 9aac955dfce24600af2937d1db38d48ff5cf1866..cdeca18aa0ede33413f3f73a9a8b841e7768b223 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.html
@@ -1,5 +1,5 @@
<div class="container" fxLayout="column">
- <div fxLayout="row" fxLayoutAlign="space-between start">
+ <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="30px">
<div class="boutonSection" [ngClass]="{ selectedType: type.name == pickedType }" *ngFor="let type of type_data">
<button (click)="pickType(type.name)">
<div class="containerBtn">
diff --git a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
index 119ea759ffcc3dac59679d0f2db6257a223b28d8..bac3648addce16805e4e77c19c76de2698adfa70 100644
--- a/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
+++ b/src/app/shared/components/structure-type-picker/structure-type-picker.component.scss
@@ -23,6 +23,7 @@ button {
white-space: nowrap;
height: 40px;
padding: 0 28px;
+ cursor: pointer;
@include cn-bold-14;
}
}
@@ -35,6 +36,10 @@ button {
.btnText {
color: $secondary-color;
}
+ .containerBtn {
+ background: none !important;
+ border-color: $secondary-color;
+ }
}
.boutonSection {
text-align: center;
@@ -46,14 +51,11 @@ button {
@include cn-bold-14;
margin-bottom: 12px;
}
+
button {
background: none;
max-width: 114px;
&:focus {
- .containerBtn {
- background: none;
- border-color: $secondary-color;
- }
}
}
.containerBtn {
diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss
index 7daff9af43add17ffc57581477e8067375e307cf..9eb400742e995d1da5d6a163ad8b9e1771a58eab 100644
--- a/src/assets/scss/_shapes.scss
+++ b/src/assets/scss/_shapes.scss
@@ -6,7 +6,6 @@ $input-radius: 1px;
$bouton-width: 12.25em;
$round-bouton-radius: 1.25em;
$round-radius: 50%;
-$footer-height: 60px;
$round-button: 40px;
$simple-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
$mat-tab-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);