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 66b1cfefea7d89e3f12ff8e171cae691be0ba8d6..39b0b3a529463bba5d14ed74fd0575621e86374f 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 df8f2159806f789a8ee7441a0176bacdc3a30576..17dde04366aa40e77af234f5185ee53745d28e37 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 adcc85c0df44df682ad939230ca41e63235ce1e5..cb0071742502503ad4227e4b5eca4dfcc129fbd5 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); + } +}