From 74843ccdb5afcf031202b15581b8ca79028d85a1 Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Wed, 21 Feb 2024 12:25:36 +0000
Subject: [PATCH] fix(ui): scrollbar position
---
.../annuaire-header.component.scss | 6 ++++++
src/app/annuaire/annuaire.component.scss | 3 ---
.../result-list/result-list.component.scss | 7 +++----
.../footer-form/footer-form.component.scss | 1 -
.../form/form-view/form-view.component.scss | 20 +++++++++++++------
.../navigation/navigation.component.scss | 4 ++++
.../orientation-form-view.component.scss | 19 ++++++++++--------
src/app/profile/profile.component.scss | 6 +++---
.../structure-edition-summary.component.html | 6 ++----
.../structure-edition-summary.component.scss | 18 ++++++++++-------
.../structures-management.component.scss | 1 +
.../components/card/card.component.scss | 14 +------------
src/assets/scss/_layout.scss | 1 -
src/styles.scss | 1 +
14 files changed, 57 insertions(+), 50 deletions(-)
diff --git a/src/app/annuaire/annuaire-header/annuaire-header.component.scss b/src/app/annuaire/annuaire-header/annuaire-header.component.scss
index 0670a0ffa..f12a2d2d5 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 53633e313..a17cc1389 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 79527a574..f25302418 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 63e1650f5..bdf40933a 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 5c38385da..e4fcd10c0 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 507e88817..6be85e259 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 18254ef8f..d94a71fe7 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 953f8df51..48ee89d93 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 4cc10cfa9..ae04a0fc7 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 a0475cf54..546f35172 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 7e7730c26..44a007d48 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 c6b7971b7..286a293e6 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 8aec0e8f5..716e30d90 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 7f05c22da..35fff78d8 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 {
--
GitLab