From ef625258dede0422f0c9e58cb1e7636a7a38b56d Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Mon, 19 Feb 2024 16:43:52 +0100
Subject: [PATCH 1/6] fix scroll
---
.../annuaire/annuaire-header/annuaire-header.component.scss | 6 ++++++
src/app/annuaire/annuaire.component.scss | 3 ---
src/app/annuaire/result-list/result-list.component.scss | 6 +++---
3 files changed, 9 insertions(+), 6 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 565fd658b..81a87b6e0 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;
--
GitLab
From 06e9c40ae5bd695550eb0b8bb4cfffc00e98d364 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Mon, 19 Feb 2024 17:10:01 +0100
Subject: [PATCH 2/6] remove unused styles
---
.../result-list/result-list.component.scss | 54 -------------------
1 file changed, 54 deletions(-)
diff --git a/src/app/annuaire/result-list/result-list.component.scss b/src/app/annuaire/result-list/result-list.component.scss
index 81a87b6e0..d34851f46 100644
--- a/src/app/annuaire/result-list/result-list.component.scss
+++ b/src/app/annuaire/result-list/result-list.component.scss
@@ -44,59 +44,6 @@
display: flex;
flex-direction: column;
gap: 16px;
- padding-right: 8px;
- .singleUser {
- display: flex;
- align-items: center;
- min-height: 100px;
- padding: 1rem;
- box-sizing: border-box;
- cursor: pointer;
- border-radius: 8px;
- border: 1px solid $grey-7;
- justify-content: space-between;
- gap: 1rem;
- transition: all 0.2s ease-in-out;
-
- &:hover {
- border-color: $grey-4;
- }
-
- .left {
- display: flex;
- align-items: center;
- gap: 1.5rem;
- .identity {
- display: flex;
- flex-direction: column;
- gap: 0.5rem;
- max-width: 330px;
- .name {
- font-weight: bold;
- }
- .job {
- color: $grey-3;
- }
- .appointment {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- span {
- @include font-bold-14;
- }
- }
- }
- }
- .right {
- display: flex;
- align-items: center;
- gap: 1.5rem;
- color: $grey-4;
- .employer {
- color: $grey-3;
- }
- }
- }
}
.noResult {
@@ -129,7 +76,6 @@
}
.notConnected {
- height: auto;
text-align: center;
padding: 70px 40px;
@media #{$tablet} {
--
GitLab
From bef48410fd25157d228121c8ee17129a2ee16b30 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 09:06:24 +0100
Subject: [PATCH 3/6] edition sticky footer
---
.../structure-edition-summary.component.html | 6 ++----
.../structure-edition-summary.component.scss | 18 +++++++++++-------
2 files changed, 13 insertions(+), 11 deletions(-)
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;
}
}
}
--
GitLab
From 852575d4b53a7ac315b6d8f07fcabb84aa433e6f Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 14:34:40 +0100
Subject: [PATCH 4/6] fix scroll
---
.../form/form-view/form-view.component.scss | 20 +++++++++++++------
.../navigation/navigation.component.scss | 6 ++++++
.../orientation-form-view.component.scss | 19 ++++++++++--------
src/app/profile/profile.component.scss | 6 +++---
.../structures-management.component.scss | 1 +
.../components/card/card.component.scss | 14 +------------
src/assets/scss/_layout.scss | 1 +
src/styles.scss | 1 +
8 files changed, 38 insertions(+), 30 deletions(-)
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..874ca38b1 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,15 @@
+@import 'color';
+
.footerForm {
display: flex;
justify-content: center;
gap: 2rem;
padding-top: 2rem;
padding-bottom: 40px;
+ border-top: 1px solid $grey-7;
+ width: 100%;
+ max-width: 980px;
+ margin: auto;
@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 98c22cfa6..f48c222d1 100644
--- a/src/app/profile/profile.component.scss
+++ b/src/app/profile/profile.component.scss
@@ -23,18 +23,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/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 a984c434a..55c9ecc18 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..92de6edb9 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,6 +3,7 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$header-post-height: 180px;
+// TODO no more used. Remove or use it ?
$content-desktop-width: 980px;
$orientation-progressBarAndButtons: 119px;
$progress-bar-height: 49px;
diff --git a/src/styles.scss b/src/styles.scss
index 87d49d5e9..e7bbeabf7 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -128,6 +128,7 @@ a {
.content-container {
margin: 0;
padding-top: 16px;
+ padding-bottom: 16px;
width: 100%;
box-sizing: border-box;
&.medium-pt {
--
GitLab
From ad33ffb21951b37fea0cb30dc1ac3cee51a0b67d Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 15:20:08 +0100
Subject: [PATCH 5/6] remove unused max-width
---
src/assets/scss/_layout.scss | 2 --
1 file changed, 2 deletions(-)
diff --git a/src/assets/scss/_layout.scss b/src/assets/scss/_layout.scss
index 92de6edb9..716e30d90 100644
--- a/src/assets/scss/_layout.scss
+++ b/src/assets/scss/_layout.scss
@@ -3,7 +3,5 @@ $footer-height: 56px;
$header-height-phone: 70px;
$footer-height-phone: 75px;
$header-post-height: 180px;
-// TODO no more used. Remove or use it ?
-$content-desktop-width: 980px;
$orientation-progressBarAndButtons: 119px;
$progress-bar-height: 49px;
--
GitLab
From 5bbd2d6e4e0624ca37c82fa384ac41e36eb664d5 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Tue, 20 Feb 2024 15:22:16 +0100
Subject: [PATCH 6/6] footer full width
---
src/app/form/footer-form/footer-form.component.scss | 1 -
.../global-components/navigation/navigation.component.scss | 2 --
2 files changed, 3 deletions(-)
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/orientation-form-view/global-components/navigation/navigation.component.scss b/src/app/form/orientation-form-view/global-components/navigation/navigation.component.scss
index 874ca38b1..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
@@ -8,8 +8,6 @@
padding-bottom: 40px;
border-top: 1px solid $grey-7;
width: 100%;
- max-width: 980px;
- margin: auto;
@media print {
display: none !important;
}
--
GitLab