fix: typo, alignements and others

src/app/header/header.component.html

@@ -3,13 +3,13 @@
     <div fxLayout="row">
       <!-- <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt /> -->
       <div fxLayout="column" fxLayoutAlign="center">
-        <p>Réseau des Acteurs de la Médiation</p>
+        <p>Réseau des Acteurs de la Médiation Numérique</p>
         <p>de la Métropole de Lyon</p>
       </div>
     </div>
   </div>
   <div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
-    <a routerLink="/home" [routerLinkActive]="'active'" i18n>Acteurs de la médiation</a>
+    <a routerLink="/home" [routerLinkActive]="'active'" i18n>Acteurs de la médiation numérique</a>
     <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
     <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
     <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>

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

 <div class="structure" fxLayout="column" (click)="cardClicked()" (mouseover)="cardHover()">
-  <span class="nomStructure">{{ structure.nomDeVotreStructure }}</span>
-
-  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center">
-    <span class="typeStructure">{{ structure.typeDeStructure }}</span>
-
+  <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
+    <span class="nomStructure">{{ structure.nomDeVotreStructure }}</span>
     <div
       *ngIf="structure.distance"
       class="distanceStructure"
       fxLayout="row"
-      fxLayoutAlign="center center"
+      fxLayoutAlign="end center"
       fxLayoutGap="20px"
     >
       <div fxLayout="row" fxLayoutAlign="center center">
@@ -19,6 +16,7 @@
       </div>
     </div>
   </div>
+  <span class="typeStructure">{{ structure.typeDeStructure }}</span>
   <br />
   <app-structure-opening-status [structure]="structure"></app-structure-opening-status>
 </div>

src/app/structure-list/components/card/card.component.scss

@@ -31,10 +31,12 @@
     color: $grey-1;
     @include cn-bold-20;
     padding-bottom: 5px;
+    width: 100%;
   }
   .distanceStructure {
     @include cn-regular-16;
     color: $grey-1;
+    width: 50%;
   }
   &:last-child {
     border-bottom: none;

src/app/structure-list/components/modal-filter/modal-filter.component.scss

@@ -72,7 +72,7 @@
       }
     }
     .ligneFiltre {
-      padding: 0 5px;
+      padding: 5px;
     }
     h4 {
       @include cn-bold-14;

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

@@ -6,7 +6,7 @@
     <form
       [formGroup]="searchForm"
       fxLayout="row"
-      fxLayoutGap="1.5vw"
+      fxLayoutGap="16px"
       fxLayoutAlign=" center"
       (ngSubmit)="applyFilter(searchForm.value.searchTerm)"
     >
@@ -20,7 +20,7 @@
     </form>
   </div>
   <div (clickOutside)="closeModal()">
-    <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
+    <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
       <button
         class="btn-filter"
         type="button"

src/app/structure-list/components/search/search.component.scss

@@ -39,7 +39,7 @@
     button {
       background: $white;
       height: 40px;
-      width: 190px;
+      width: 100%;
       border: 1px solid $grey-4;
       padding: 3px 16px 3px 16px;
       outline: none;

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

@@ -48,7 +48,7 @@
           </div>
           <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
             <app-svg-icon [type]="'ico'" [icon]="'calendar'"></app-svg-icon>
-            <p>Mise-à-jour le {{ structure.derniereModification | date: 'shortDate' }}</p>
+            <p>Mise-à-jour le {{ structure.derniereModification | date: 'mediumDate' }}</p>
           </div>
         </div>
       </div>
@@ -73,17 +73,23 @@
     </div>
   </div>
   <!-- Services -->
-  <div fxLayout="column" class="structrue-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="20px">
+  <div
+    *ngIf="isBaseSkills() || isAccessRights()"
+    fxLayout="column"
+    class="structrue-details-block"
+    fxLayoutAlign="baseline baseline"
+    fxLayoutGap="20px"
+  >
     <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="20px">
       <app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
       <h2>Services</h2>
     </div>
     <div fxLayout="row" class="w-100">
-      <div fxFlex="50%" *ngIf="baseSkills && baseSkills[0] !== undefined">
+      <div fxFlex="50%" *ngIf="isBaseSkills()">
         <h3 class="subtitle">Compétences de base</h3>
         <p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
       </div>
-      <div fxFlex="50%" *ngIf="accessRights && accessRights[0] !== undefined">
+      <div fxFlex="50%" *ngIf="isAccessRights()">
         <h3 class="subtitle">Accès au droits</h3>
         <p *ngFor="let rights of accessRights">{{ rights.text }}</p>
       </div>

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

@@ -81,4 +81,11 @@ export class StructureDetailsComponent implements OnInit {
   }
 
   public keepOriginalOrder = (a, b) => a.key;
+
+  public isBaseSkills(): boolean {
+    return this.baseSkills && this.baseSkills[0] !== undefined;
+  }
+  public isAccessRights(): boolean {
+    return this.accessRights && this.accessRights[0] !== undefined;
+  }
 }

src/styles.scss

@@ -88,7 +88,6 @@ a {
     }
   }
   label {
-    align-items: center;
     grid-template-columns: min-content auto;
     display: inline-grid;
     cursor: pointer;