From 6ddb95d2a4e491b17b7c2641cf8be07e7c8b6e79 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marl=C3=A8ne=20SIMONDANT?= <msimondant@grandlyon.com>
Date: Thu, 20 Jan 2022 10:34:37 +0000
Subject: [PATCH] feat(stucture-details): sticky close button and structure
name
---
.../structure-details.component.html | 12 +++++----
.../structure-details.component.scss | 25 +++++++++++++++++--
2 files changed, 30 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..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,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="space-between wrap-reverse" 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 cfb9f5fcb..5b129f089 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,23 @@ 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;
+ @media #{$tablet} {
+ height: auto;
+ }
+ @media #{$small-phone} {
+ width: 111%;
+ padding-right: 20px;
+ }
+}
--
GitLab