From 88c61dfb63de5b8e86077e793c349a216adac855 Mon Sep 17 00:00:00 2001
From: Hugo SUBTIL <ext.sopra.husubtil@grandlyon.com>
Date: Thu, 21 Jan 2021 16:27:53 +0100
Subject: [PATCH] fix: small design fixes on search and structure details
---
src/app/models/structure.model.ts | 17 ++++++++++++++
.../logo-card/logo-card.component.scss | 2 +-
.../svg-icon/svg-icon.component.html | 1 +
.../components/svg-icon/svg-icon.component.ts | 1 +
.../components/card/card.component.html | 4 +---
.../components/card/card.component.scss | 22 -------------------
.../structure-details.component.html | 9 ++------
.../structure-list.component.html | 1 +
8 files changed, 24 insertions(+), 33 deletions(-)
diff --git a/src/app/models/structure.model.ts b/src/app/models/structure.model.ts
index dc197d728..4a154bfaa 100644
--- a/src/app/models/structure.model.ts
+++ b/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;
+ }
+ }
}
diff --git a/src/app/shared/components/logo-card/logo-card.component.scss b/src/app/shared/components/logo-card/logo-card.component.scss
index 9f982ddc8..09946b427 100644
--- a/src/app/shared/components/logo-card/logo-card.component.scss
+++ b/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;
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.html b/src/app/shared/components/svg-icon/svg-icon.component.html
index 7b6734e30..055f851e1 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.html
+++ b/src/app/shared/components/svg-icon/svg-icon.component.html
@@ -1,3 +1,4 @@
<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>
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.ts b/src/app/shared/components/svg-icon/svg-icon.component.ts
index f0dbfa5ef..23badf796 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.ts
+++ b/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() {}
}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index ee7a864fc..cfc62451e 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/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>
diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss
index 4d3d5aa04..4bae4df3d 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/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;
- }
-}
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 1d401c6c5..8d375d069 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
@@ -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>
diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html
index a4d7320ed..57b306f09 100644
--- a/src/app/structure-list/structure-list.component.html
+++ b/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
--
GitLab