diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.scss b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
index 0670a0ffa5d25776ec7bf1ae7b036eabf9086251..f12a2d2d56c724cb5df0dccfbb6a2d9d10edcd14 100644
--- a/src/app/annuaire/annuaire-header/annuaire-header.component.scss
+++ b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
@@ -1,6 +1,12 @@
@import 'search';
+@import 'color';
.searchContainer {
+ max-width: 980px;
+ margin: auto;
padding-top: 24px;
padding-bottom: 16px;
+ background-color: $white;
+ position: sticky;
+ top: 0;
}
diff --git a/src/app/annuaire/annuaire.component.scss b/src/app/annuaire/annuaire.component.scss
index 53633e31364bb8ddfbb6ce494117246f6a91f68e..a17cc1389ae34ce6524cf9a7d57be87071a05f01 100644
--- a/src/app/annuaire/annuaire.component.scss
+++ b/src/app/annuaire/annuaire.component.scss
@@ -2,9 +2,6 @@
@import 'breakpoint';
.annuaire-container {
- padding-inline: 6rem;
- margin: auto;
- max-width: $content-desktop-width;
@media #{$tablet} {
padding-inline: 0.5rem;
}
diff --git a/src/app/annuaire/result-list/result-list.component.scss b/src/app/annuaire/result-list/result-list.component.scss
index 79527a574a9d799e4deadabe2471aede1c26cf0c..f25302418ba1b820401c9fca875dcc1568024c25 100644
--- a/src/app/annuaire/result-list/result-list.component.scss
+++ b/src/app/annuaire/result-list/result-list.component.scss
@@ -4,10 +4,10 @@
@import 'typography';
.results {
- margin-top: 1rem;
- height: calc(100vh - $footer-height - $header-height - 7rem);
overflow-y: auto;
- overflow-anchor: none;
+ margin: 1rem auto auto auto;
+ max-width: 980px;
+ padding-bottom: 1rem;
@media #{$phone} {
height: unset;
@@ -77,7 +77,6 @@
}
.notConnected {
- height: auto;
text-align: center;
padding: 70px 40px;
@media #{$tablet} {
diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss
index 63e1650f573450673ad62dd4d6e57c9784692b16..bdf40933a3a0dc43131e84a780467eee4fb9713f 100644
--- a/src/app/form/footer-form/footer-form.component.scss
+++ b/src/app/form/footer-form/footer-form.component.scss
@@ -7,7 +7,6 @@
justify-content: center;
gap: 1rem;
padding: 32px 0 40px 0;
- margin: 0 96px;
border-top: 1px solid $grey-7;
@media #{$tablet} {
margin: 0 2%;
diff --git a/src/app/form/form-view/form-view.component.scss b/src/app/form/form-view/form-view.component.scss
index 5c38385da23bd4c759ab8bde7f3cbe17a2e3dcea..e4fcd10c091ac9edf18d64165a8ff8e1ade741ff 100644
--- a/src/app/form/form-view/form-view.component.scss
+++ b/src/app/form/form-view/form-view.component.scss
@@ -4,23 +4,25 @@
@import 'typography';
:host {
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.formView {
- height: 100%;
display: flex;
flex-direction: column;
- background-color: $grey-10;
+ flex: 1;
}
::ng-deep.page {
display: flex;
place-content: center;
height: 100%;
- margin: 16px 96px;
- overflow-y: auto;
- scrollbar-gutter: stable;
+ margin: auto;
+ padding-block: 16px;
+ max-width: 980px;
+ width: 100%;
@media #{$tablet} {
margin: 0px 0.5rem;
width: auto;
@@ -90,3 +92,9 @@
@include font-regular-18;
color: $grey-4-5-1;
}
+
+app-footer-form {
+ position: sticky;
+ bottom: 0;
+ background: $white;
+}
diff --git a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
index 507e8881755c04a69afb01cc69933f1e4828f0bf..6be85e259273c7e37c4fdaf7f05444d14bf904b9 100644
--- a/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
+++ b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
@@ -1,9 +1,13 @@
+@import 'color';
+
.footerForm {
display: flex;
justify-content: center;
gap: 2rem;
padding-top: 2rem;
padding-bottom: 40px;
+ border-top: 1px solid $grey-7;
+ width: 100%;
@media print {
display: none !important;
}
diff --git a/src/app/form/orientation-form-view/orientation-form-view.component.scss b/src/app/form/orientation-form-view/orientation-form-view.component.scss
index 18254ef8f1b058579276be34c5cf5f19c996d1ac..d94a71fe783149f4152dcee871e4f3acbd7414f0 100644
--- a/src/app/form/orientation-form-view/orientation-form-view.component.scss
+++ b/src/app/form/orientation-form-view/orientation-form-view.component.scss
@@ -4,19 +4,19 @@
@import 'typography';
:host {
- height: 100%;
+ display: flex;
+ flex-direction: column;
+ flex: 1;
}
.orientation {
- height: 100%;
display: flex;
flex-direction: column;
+ flex: 1;
.container {
box-sizing: border-box;
-
height: 100%;
margin: auto;
- overflow-y: auto;
padding: 2rem 3rem;
@media #{$tablet} {
@@ -65,9 +65,12 @@ div.titleform {
display: flex;
flex-direction: column;
gap: 40px;
+ width: 100%;
+ max-width: 600px;
+}
- width: 600px;
- @media #{$tablet} {
- width: auto;
- }
+app-navigation {
+ position: sticky;
+ bottom: 0;
+ background: $white;
}
diff --git a/src/app/profile/profile.component.scss b/src/app/profile/profile.component.scss
index 953f8df51b7891d1dca41df6198884a021610cdc..48ee89d930657b5bca52619142028a7364e2399f 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -21,18 +21,18 @@
}
section {
- width: $content-desktop-width;
+ width: 100%;
+ max-width: 980px;
display: flex;
gap: 2em;
flex-direction: column;
align-items: flex-start;
box-sizing: border-box;
- padding: 2rem;
background: $white;
border: 1px solid $grey-6;
border-radius: 8px;
+ padding: 2rem;
@media #{$tablet} {
- width: 100%;
padding: 1.5rem;
}
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
index 4cc10cfa94c424637654f9a395c853b6239b12cc..ae04a0fc7a6ed269f87f5e8d56e6cba12fa03185 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.html
@@ -779,26 +779,24 @@
</div>
</section>
</div>
-
<div class="footer">
<ng-container *ngIf="isUpdateStructure">
<p *ngIf="!isFormValid()" class="warning">
Vous pourrez valider après avoir renseigné l’intégralité des champs obligatoires.
</p>
<div class="buttons">
- <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" />
+ <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
<app-button
[variant]="'primary'"
[label]="'Valider'"
[disabled]="!isFormValid()"
- [size]="'small'"
(action)="updateStructureUpdateDate()"
/>
</div>
</ng-container>
<ng-container *ngIf="!isUpdateStructure">
<div class="buttons">
- <app-button [variant]="'secondary'" [label]="'Retour'" [size]="'small'" (action)="goBack()" />
+ <app-button [variant]="'secondary'" [label]="'Retour'" (action)="goBack()" />
</div>
</ng-container>
</div>
diff --git a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
index a0475cf5495a58a9cdeb4133a908e218c3daeb30..546f351723a1aea505d063d74ff59a1b6c9fab92 100644
--- a/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
+++ b/src/app/profile/structure-edition-summary/structure-edition-summary.component.scss
@@ -6,20 +6,18 @@
.container {
margin: 2rem auto auto auto;
max-width: 980px;
- height: calc(100vh - $header-height - $footer-height - 2rem); //2rem are needed because of 1rem margin
+ // height: calc(100vh - $header-height - $footer-height - 2rem); //2rem are needed because of 1rem margin
display: flex;
flex-direction: column;
justify-content: space-between;
.scroll {
- height: 90%;
- overflow-y: scroll;
overflow-x: hidden;
position: sticky; // to properly display hours
- padding-right: 40px;
display: flex;
flex-direction: column;
gap: 2rem;
+ padding-bottom: 32px;
.header {
display: flex;
@@ -103,7 +101,13 @@
}
}
.footer {
- border-top: 1px solid $grey-5;
+ border-top: 1px solid $grey-7;
+ position: sticky;
+ bottom: 0;
+ background: $white;
+ margin: auto;
+ max-width: 980px;
+ width: 100%;
p.warning {
color: $orange-warning;
margin: 1rem;
@@ -112,8 +116,8 @@
display: flex;
justify-content: center;
gap: 24px;
- padding-top: 1rem;
- padding-bottom: 8px;
+ padding-top: 2rem;
+ padding-bottom: 40px;
}
}
}
diff --git a/src/app/profile/structures-management/structures-management.component.scss b/src/app/profile/structures-management/structures-management.component.scss
index 7e7730c263fab793fcab98f3a02c05289af1a2bd..44a007d48c3bcccc7963a0fdd8a361109dd82c27 100644
--- a/src/app/profile/structures-management/structures-management.component.scss
+++ b/src/app/profile/structures-management/structures-management.component.scss
@@ -10,6 +10,7 @@
width: 100%;
margin: 0 auto;
gap: 2rem;
+ padding-top: 16px;
.header {
display: flex;
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index c6b7971b7f91056193b35b5f007711eeb97009b8..286a293e67ea6dee67949ed9ff5b2a4c6faf4ecc 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -84,17 +84,5 @@
}
.orientation {
- flex-direction: row !important;
- align-items: center;
-
- .left {
- display: flex;
- width: 70%;
- }
-
- .right {
- @media #{$large-phone} {
- margin-left: unset;
- }
- }
+ gap: 16px;
}
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 8aec0e8f53891e234b80ec8db8c9ef2dcbb81813..716e30d9043dec074b1fb83644939f5ca9063b87 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,6 +3,5 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$header-post-height: 180px;
-$content-desktop-width: 980px;
$orientation-progressBarAndButtons: 119px;
$progress-bar-height: 49px;
diff --git a/src/styles.scss b/src/styles.scss
index 7f05c22dae26a24919450433b5fb111e7de752bb..35fff78d839528d96f38f352920de57ef253d032 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -110,6 +110,7 @@ a {
.content-container {
margin: 0;
padding-top: 16px;
+ padding-bottom: 16px;
width: 100%;
box-sizing: border-box;
&.medium-pt {