Merge branch 'feat-structuresDetails' into 'dev'

Change close btn details and add 'autres' section to 'Démarche'

See merge request web-et-numerique/pamn_plateforme-des-acteurs-de-la-mediation-numerique/pamn_client!25

src/app/structure-list/components/structure-details/structure-details.component.html

 <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>
@@ -66,10 +68,17 @@
       <app-svg-icon [type]="'ico'" [icon]="'demarches'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Démarches</h2>
     </div>
-    <div fxLayout="row wrap" fxLayoutGap="24px">
-      <div *ngFor="let accompagnement of structure.accompagnementDesDemarches">
-        <app-logo-card [name]="accompagnement"></app-logo-card>
+    <div fxLayout="column">
+      <div fxLayout="row wrap" fxLayoutGap="24px">
+        <div *ngFor="let accompagnement of structure.accompagnementDesDemarches">
+          <app-logo-card [name]="accompagnement"></app-logo-card>
+        </div>
       </div>
+      <p *ngIf="isOtherSection">
+        Tout ce qui est en lien avec la création d'entreprise ex : consultation de sites de références (BPI, Je créé
+        dans ma région, ...), inscription à des newsletters, aide pour trouver des sites (CMA, CCI, Urssaf,...),
+        recherches d'infos sur moteur de recherche...
+      </p>
     </div>
   </div>
   <!-- Services -->

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;
 }

src/app/structure-list/components/structure-details/structure-details.component.ts

@@ -22,6 +22,7 @@ export class StructureDetailsComponent implements OnInit {
   public baseSkills: Module[];
   public accessRights: Module[];
   public printMode = false;
+  public isOtherSection = false;
 
   constructor(route: ActivatedRoute, private printService: PrintService, private searchService: SearchService) {
     route.url.subscribe((url) => {
@@ -46,6 +47,11 @@ export class StructureDetailsComponent implements OnInit {
         this.printService.onDataReady();
       }
     });
+    const index = this.structure.accompagnementDesDemarches.indexOf('Autres');
+    if (index > -1) {
+      this.structure.accompagnementDesDemarches.splice(index, 1);
+      this.isOtherSection = true;
+    }
   }
 
   public close(): void {

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);
+  }
+}