From 2312468628a28328fea2ce2563e11cae874a9054 Mon Sep 17 00:00:00 2001
From: Jeremie BRISON <ext.sopra.jbrison@grandlyon.com>
Date: Mon, 23 Nov 2020 11:42:26 +0100
Subject: [PATCH] fix(structureDetails) : Add new button to close details
---
.../structure-details.component.html | 8 +++--
.../structure-details.component.scss | 4 ++-
src/assets/scss/_icons.scss | 31 +++++++++++++++++++
3 files changed, 39 insertions(+), 4 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 66b1cfefe..39b0b3a52 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,10 +1,12 @@
<div class="structrue-details-container" *ngIf="structure">
<!-- Header info -->
+ <div fxLayout="row" fxLayoutAlign="end center">
+ <div (click)="close()" class="ico-close-details"></div>
+ </div>
<div fxLayout="row" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
- <em class="ic-arrow-left clickable hide-on-print" (click)="close()"></em>
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
- <div fxLayout="row" fxLayoutAlign="space-between">
- <div fxLayout="column center">
+ <div fxLayout="row" fxLayoutAlign="space-between start">
+ <div fxLayout="column">
<h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
<h3>{{ structure.typeDeStructure }}</h3>
</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 df8f21598..17dde0436 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
@@ -13,13 +13,14 @@
max-width: 980px;
width: 100%;
height: calc(100vh - #{$header-height} - #{$footer-height});
- padding: 18px 24px;
+ padding: 10px 24px;
overflow: auto;
}
.structrue-details-block {
border-bottom: 1px dashed $grey-2;
padding-bottom: 24px;
+ padding-right: 68px;
.subtitle {
text-transform: uppercase;
@include cn-bold-16;
@@ -37,6 +38,7 @@
}
h2 {
+ margin-top: 0;
margin-bottom: 5px;
@include cn-regular-24;
}
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index adcc85c0d..cb0071742 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -575,3 +575,34 @@
border-top-right-radius: 3px;
top: 9px;
}
+
+.ico-close-details {
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ background-color: $black;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ &:active {
+ opacity: 0.8;
+ }
+
+ &:before,
+ &:after {
+ content: '';
+ width: 23px;
+ height: 2px;
+ background-color: $white;
+ position: absolute;
+ border-radius: 1px;
+ }
+
+ &:before {
+ transform: rotate(45deg);
+ }
+ &:after {
+ transform: rotate(-45deg);
+ }
+}
--
GitLab