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