fix: small design fixes on search and structure details

src/app/models/structure.model.ts

@@ -165,4 +165,21 @@ export class Structure {
         return null;
     }
   }
+
+  public getEquipmentsTitle(equipment: Equipment): string {
+    switch (equipment) {
+      case Equipment.wifi:
+        return 'Wifi';
+      case Equipment.bornes:
+        return 'Bornes';
+      case Equipment.printer:
+        return 'Imprimantes';
+      case Equipment.tablet:
+        return 'Tablettes';
+      case Equipment.computer:
+        return 'Ordinateurs';
+      default:
+        return null;
+    }
+  }
 }

src/app/shared/components/logo-card/logo-card.component.scss

@@ -13,7 +13,7 @@ p {
 div {
   border: 1px solid $grey-4;
   box-sizing: border-box;
-  border-radius: 4px;
+  border-radius: 16px;
   margin-bottom: 24px;
   padding: 16px 25px;
   max-width: 172px;

src/app/shared/components/svg-icon/svg-icon.component.html

 <svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
+  <title *ngIf="title">{{ title }}</title>
   <use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
 </svg>

src/app/shared/components/svg-icon/svg-icon.component.ts

@@ -10,5 +10,6 @@ export class SvgIconComponent {
   @Input() iconClass: string;
   @Input() type: string;
   @Input() iconColor: string = 'none';
+  @Input() title: string = null;
   constructor() {}
 }

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

@@ -8,9 +8,6 @@
       fxLayoutAlign="end center"
       fxLayoutGap="20px"
     >
-      <div class="isntPhoneContent" fxLayout="row" fxLayoutAlign="center center">
-        <span class="indicatorDistance" *ngFor="let i of [].constructor(structure.getDistanceRange())"></span>
-      </div>
       <div>
         {{ this.formatDistance() }}
       </div>
@@ -23,6 +20,7 @@
       [type]="'ico'"
       [iconColor]="'grey'"
       [icon]="structure.getEquipmentsIcon(equipement)"
+      [title]="structure.getEquipmentsTitle(equipement)"
     ></app-svg-icon>
   </div>
 

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

@@ -3,22 +3,6 @@
 @import '../../../../assets/scss/typography';
 @import '../../../../assets/scss/breakpoint';
 
-.indicatorDistance {
-  width: 34px;
-  height: 1px;
-  background: $grey-3;
-  border-radius: 1px;
-  &:before {
-    height: 7px;
-    width: 33px;
-    content: '';
-    margin-top: -3px;
-    display: block;
-    border-radius: 1px;
-    border-left: 1px solid $grey-3;
-    border-right: 1px solid $grey-3;
-  }
-}
 .structure {
   padding: 12px 0 12px 0;
   border-bottom: 1px dashed $grey !important;
@@ -43,9 +27,3 @@
     border-bottom: none;
   }
 }
-
-@media #{$large-phone} {
-  .isntPhoneContent {
-    display: none !important;
-  }
-}

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

@@ -94,7 +94,7 @@
       </div>
     </div>
   </div>
-  <!-- Démarches -->
+  <!-- Démarches en ligne -->
   <div
     *ngIf="structure.proceduresAccompaniment.length"
     fxLayout="column"
@@ -104,7 +104,7 @@
   >
     <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
       <app-svg-icon [type]="'ico'" [icon]="'demarches'" [iconClass]="'icon-32'"></app-svg-icon>
-      <h2>Démarches</h2>
+      <h2>Démarches en ligne</h2>
     </div>
     <div fxLayout="column">
       <div fxLayout="row wrap" fxLayoutGap="24px">
@@ -206,11 +206,6 @@
       fxLayoutGap="13px"
       *ngFor="let equipement of structure.equipmentsAndServices"
     >
-      <app-svg-icon
-        [type]="'ico'"
-        [icon]="structure.getEquipmentsIcon(equipement)"
-        [iconColor]="'currentColor'"
-      ></app-svg-icon>
       <p>
         {{ getEquipmentsLabel(equipement) }}
         <span *ngIf="equipement == 'ordinateurs' && structure.nbComputers"> : {{ structure.nbComputers }}</span>

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

@@ -12,6 +12,7 @@
     (showDetails)="showDetails($event)"
     (hover)="handleCardHover($event)"
   ></app-card>
+  <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p>
 </div>
 
 <app-structure-details