From 2faa0492d0de529861413252dbed74deafe8c250 Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Wed, 19 Jan 2022 12:49:17 +0100
Subject: [PATCH 1/2] feat(stucture-details): sticky close button and structure
name
---
.../structure-details.component.html | 12 +++++++-----
.../structure-details.component.scss | 18 ++++++++++++++++--
2 files changed, 23 insertions(+), 7 deletions(-)
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 3f043a99d..84c409945 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -1,13 +1,15 @@
<div class="structrue-details-container" *ngIf="structure && !isLoading">
<!-- Header info -->
- <div fxLayout="row" fxLayoutAlign="end center">
- <div (click)="close()" class="ico-close-details"></div>
+ <div fxLayout="row space-between" class="sticky-title">
+ <div fxLayout="column" class="no-margin" fxLayoutAlign="end end">
+ <h2 class="bold">{{ structure.structureName }}</h2>
+ </div>
+ <div fxLayout="column" fxLayoutAlign="start start" class="ico-close">
+ <div (click)="close()" class="ico-close-details"></div>
+ </div>
</div>
<div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
- <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start">
- <h2 class="bold">{{ structure.structureName }}</h2>
- </div>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div class="typeInformationHeader" fxLayout="column">
<h3>{{ structure.getLabelTypeStructure() }}</h3>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index eeeb766c4..1b5d46b3b 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -18,13 +18,14 @@ a {
left: 0;
max-width: 980px;
width: 100%;
- height: calc(100vh - #{$header-height} - #{$footer-height} - 20px);
- padding: 10px 24px;
+ height: calc(100vh - #{$header-height} - #{$footer-height});
+ padding: 0px 24px;
overflow: auto;
@media #{$tablet} {
width: calc(100% - 2 * 24px);
position: inherit;
height: 100%;
+ overflow: unset;
.printButton {
display: none !important;
}
@@ -131,3 +132,16 @@ p,
gap: 20px 30px;
grid-template-columns: 1fr 1fr;
}
+.ico-close {
+ margin-left: auto;
+ padding-top: 10px;
+}
+.sticky-title {
+ position: sticky;
+ top: 0px;
+ max-width: 980px;
+ width: 100%;
+ background-color: white;
+ height: 80px;
+ z-index: 1;
+}
--
GitLab
From b7f81def237dd0dd6ec8aee144136ecf070148da Mon Sep 17 00:00:00 2001
From: Marlene Simondant <msimondant@grandlyon.com>
Date: Thu, 20 Jan 2022 10:52:41 +0100
Subject: [PATCH 2/2] Fix close button position on small phones screens
---
.../structure-details/structure-details.component.html | 2 +-
.../structure-details/structure-details.component.scss | 9 ++++++++-
2 files changed, 9 insertions(+), 2 deletions(-)
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 84c409945..74f1f8a5c 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -1,6 +1,6 @@
<div class="structrue-details-container" *ngIf="structure && !isLoading">
<!-- Header info -->
- <div fxLayout="row space-between" class="sticky-title">
+ <div fxLayout="space-between wrap-reverse" class="sticky-title">
<div fxLayout="column" class="no-margin" fxLayoutAlign="end end">
<h2 class="bold">{{ structure.structureName }}</h2>
</div>
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss
index 1b5d46b3b..ba71698ca 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.scss
+++ b/src/app/structure-list/components/structure-details/structure-details.component.scss
@@ -141,7 +141,14 @@ p,
top: 0px;
max-width: 980px;
width: 100%;
- background-color: white;
+ background-color: $white;
height: 80px;
z-index: 1;
+ @media #{$tablet} {
+ height: auto;
+ }
+ @media #{$small-phone} {
+ width: 111%;
+ padding-right: 20px;
+ }
}
--
GitLab