Skip to content
Snippets Groups Projects
Commit 5d4e5095 authored by Jérémie BRISON's avatar Jérémie BRISON Committed by Hugo SUBTIL
Browse files

refactor: design structure

parent f9d99010
No related branches found
No related tags found
2 merge requests!68Recette,!67Dev
Hide whitespace changes
Inline Side-by-side
Showing
with 96 additions and 68 deletions
src/app/header/header.component.html
+ 1
− 1
View file @ 5d4e5095
......@@ -9,7 +9,7 @@
<span class="ico-menu"></span>
</div>
<div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Acteurs de la médiation numérique</a>
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Les acteurs</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/menu-phone/menu-phone.component.html
+ 1
− 3
View file @ 5d4e5095
......@@ -7,9 +7,7 @@
<div (click)="closeMenu()" class="ico-close-details"></div>
</div>
<div fxLayout="column" class="right-header" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
>Acteurs de la médiation numérique</a
>
<a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
<!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
<a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
<a routerLink="/about" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Qui sommes-nous ?</a>
......
src/app/models/structure.model.ts
+ 25
− 0
View file @ 5d4e5095
import { Equipment } from '../structure-list/enum/equipment.enum';
import { typeStructureEnum } from '../shared/enum/typeStructure.enum';
import { Weekday } from '../structure-list/enum/weekday.enum';
import { Address } from './address.model';
......@@ -111,6 +112,13 @@ export class Structure {
return false;
}
/**
* Check if a structure has pass Numeric label
*/
public hasPassNumeric(): boolean {
return this.labelsQualifications.includes('passNumerique');
}
/**
* Return a range, according to the distance, between [1,3] to get a distance reference.
* - [0,5km] => 1
......@@ -140,4 +148,21 @@ export class Structure {
public getLon(): number {
return this.coord[0];
}
public getEquipmentsIcon(equipment: Equipment): string {
switch (equipment) {
case Equipment.wifi:
return 'wifi';
case Equipment.bornes:
return 'borne';
case Equipment.printer:
return 'print';
case Equipment.tablet:
return 'tablet';
case Equipment.computer:
return 'computer';
default:
return null;
}
}
}
src/app/shared/components/button/button.component.html
+ 7
− 1
View file @ 5d4e5095
......@@ -8,7 +8,13 @@
fxLayoutAlign="space-between center"
fxLayoutGap="13px"
>
<app-svg-icon style="height: 100%" [type]="'ico'" [iconClass]="'icon-32'" [icon]="iconBtn"></app-svg-icon>
<app-svg-icon
style="height: 100%"
[type]="'ico'"
[iconClass]="'icon-32'"
[icon]="iconBtn"
[iconColor]="'currentColor'"
></app-svg-icon>
{{ text }}
</div>
</button>
......
src/app/shared/components/signup-modal/signup-modal.component.html
+ 1
− 1
View file @ 5d4e5095
......@@ -7,7 +7,7 @@
<div class="card-body">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label for="username">Identifiant</label>
<label for="username">Email</label>
<input
type="text"
formControlName="username"
......
src/app/shared/components/svg-icon/svg-icon.component.html
+ 1
− 1
View file @ 5d4e5095
<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor ? iconColor : 'none'">
<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor" [attr.stroke]="iconColor">
<use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
</svg>
src/app/shared/components/svg-icon/svg-icon.component.ts
+ 1
− 1
View file @ 5d4e5095
......@@ -9,6 +9,6 @@ export class SvgIconComponent {
@Input() icon: string;
@Input() iconClass: string;
@Input() type: string;
@Input() iconColor: string;
@Input() iconColor: string = 'none';
constructor() {}
}
src/app/structure-list/components/card/card.component.html
+ 9
− 0
View file @ 5d4e5095
......@@ -17,5 +17,14 @@
</div>
</div>
<span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
<app-svg-icon
*ngFor="let equipement of structure.equipmentsAndServices"
[type]="'ico'"
[iconColor]="'grey'"
[icon]="structure.getEquipmentsIcon(equipement)"
></app-svg-icon>
</div>
<br />
</div>
src/app/structure-list/components/card/card.component.ts
+ 1
− 0
View file @ 5d4e5095
......@@ -2,6 +2,7 @@ import { Component, Input, Output, OnInit, EventEmitter } from '@angular/core';
import { Structure } from '../../../models/structure.model';
import { GeojsonService } from '../../../services/geojson.service';
import { typeStructureEnum } from '../../../shared/enum/typeStructure.enum';
import { Equipment } from '../../enum/equipment.enum';
@Component({
selector: 'app-card',
......
src/app/structure-list/components/search/search.component.html
+ 5
− 5
View file @ 5d4e5095
<div class="header">
<span class="title">Acteurs de la médiation</span>
<span class="title">Acteurs de la médiation numérique</span>
</div>
<div class="content" fxLayout="column">
<div class="searchSection">
......@@ -11,7 +11,7 @@
(ngSubmit)="applyFilter(searchForm.value.searchTerm)"
>
<div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
<input type="text" formControlName="searchTerm" placeholder="Rechercher une adresse, une association..." />
<input type="text" formControlName="searchTerm" placeholder="Rechercher une commune, une association..." />
<button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
<span class="separator"></span>
<button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
......@@ -37,7 +37,7 @@
fxLayoutAlign="space-between center"
(click)="openModal(TypeModal.accompaniment)"
>
<span>Accompagnement</span>
<span>Démarches en ligne</span>
<div class="arrow"></div>
</button>
<button
......@@ -51,7 +51,7 @@
fxLayoutAlign="space-between center"
(click)="openModal(TypeModal.training)"
>
<span>Formations</span>
<span>Ateliers</span>
<div class="arrow"></div>
</button>
<button
......@@ -65,7 +65,7 @@
fxLayoutAlign="space-between center"
(click)="openModal(TypeModal.moreFilters)"
>
<span>Plus de filtres</span>
<span>Plus de critères</span>
<div class="arrow"></div>
</button>
</div>
......
src/app/structure-list/components/search/search.component.scss
+ 1
− 0
View file @ 5d4e5095
......@@ -47,6 +47,7 @@
outline: none;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
@include btn-normal;
.arrow {
background-color: transparent;
......
src/app/structure-list/components/structure-details/structure-details.component.html
+ 24
− 6
View file @ 5d4e5095
......@@ -21,10 +21,20 @@
</div>
<div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px">
<div fxLayout="column" fxLayoutGap="10px" fxFlex="100%">
<div fxLayout="row" fxLayoutAlign="space-between start">
<div fxLayout="column">
<h2 class="bold">{{ structure.structureName }}</h2>
<div fxLayout="column" fxLayoutAlign="space-between start">
<h2 class="bold">{{ structure.structureName }}</h2>
</div>
<div fxLayout="row" fxLayoutAlign="space-between center">
<div class="typeInformationHeader" fxLayout="column">
<h3>{{ structure.getLabelTypeStructure() }}</h3>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()">
<app-svg-icon
*ngFor="let equipement of structure.equipmentsAndServices"
[type]="'ico'"
[iconColor]="'currentColor'"
[icon]="structure.getEquipmentsIcon(equipement)"
></app-svg-icon>
</div>
</div>
<div class="printButton" fxLayout="column" fxLayoutAlign="end">
<app-button
......@@ -69,6 +79,10 @@
<app-svg-icon [type]="'ico'" [icon]="'email'"></app-svg-icon>
<p>{{ structure.contactMail }}</p>
</div>
<div *ngIf="structure.hasPassNumeric()" fxLayout="row" fxLayoutAlign="none center" fxLayoutGap="13px">
<app-svg-icon [type]="'ico'" [icon]="'pass'"></app-svg-icon>
<p>agréé Pass Numérique</p>
</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.updatedAt | date: 'mediumDate' }}</p>
......@@ -112,7 +126,7 @@
>
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="8px">
<app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Services</h2>
<h2>Ateliers</h2>
</div>
<div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div fxFlex="50%" *ngIf="isBaseSkills()">
......@@ -120,7 +134,7 @@
<p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
</div>
<div fxFlex="50%" *ngIf="isAccessRights()">
<h3 class="subtitle">Accès au droits</h3>
<h3 class="subtitle">Accès aux droits</h3>
<p *ngFor="let rights of accessRights">{{ rights.text }}</p>
</div>
</div>
......@@ -189,7 +203,11 @@
fxLayoutGap="13px"
*ngFor="let equipement of structure.equipmentsAndServices"
>
<app-svg-icon [type]="'ico'" [icon]="getEquipmentsIcon(equipement)"></app-svg-icon>
<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/components/structure-details/structure-details.component.scss
+ 3
− 2
View file @ 5d4e5095
......@@ -53,7 +53,9 @@
margin-right: 5px;
}
}
.typeInformationHeader {
color: $grey-3;
}
h2 {
margin-top: 0;
margin-bottom: 5px;
......@@ -62,7 +64,6 @@ h2 {
h3 {
margin: 0;
@include cn-regular-16;
color: $grey-3;
}
h4 {
margin-left: 0;
......
src/app/structure-list/components/structure-details/structure-details.component.ts
+ 0
− 17
View file @ 5d4e5095
......@@ -89,23 +89,6 @@ export class StructureDetailsComponent implements OnInit {
});
}
public getEquipmentsIcon(equipment: Equipment): string {
switch (equipment) {
case Equipment.wifi:
return 'wifi';
case Equipment.bornes:
return 'borne';
case Equipment.printer:
return 'print';
case Equipment.tablet:
return 'tablet';
case Equipment.computer:
return 'computer';
default:
return null;
}
}
public getEquipmentsLabel(equipment: Equipment): string {
switch (equipment) {
case Equipment.wifi:
......
src/assets/ico/sprite.svg
+ 16
− 30
View file @ 5d4e5095
......@@ -7,7 +7,7 @@
</symbol>
<symbol id="tablet" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 18C16.5523 18 17 17.5523 17 17V4C17 3.44772 16.5523 3 16 3H6C5.44772 3 5 3.44772 5 4V17C5 17.5523 5.44772 18 6 18H16ZM16 4H6V16H16V4ZM11 17.5C11.2761 17.5 11.5 17.2761 11.5 17C11.5 16.7239 11.2761 16.5 11 16.5C10.7239 16.5 10.5 16.7239 10.5 17C10.5 17.2761 10.7239 17.5 11 17.5Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 18C16.5523 18 17 17.5523 17 17V4C17 3.44772 16.5523 3 16 3H6C5.44772 3 5 3.44772 5 4V17C5 17.5523 5.44772 18 6 18H16ZM16 4H6V16H16V4ZM11 17.5C11.2761 17.5 11.5 17.2761 11.5 17C11.5 16.7239 11.2761 16.5 11 16.5C10.7239 16.5 10.5 16.7239 10.5 17C10.5 17.2761 10.7239 17.5 11 17.5Z" stroke="none"/>
</symbol>
<symbol id="transport" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
......@@ -31,10 +31,10 @@
</svg>
<symbol id="computer" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="3.5" width="17" height="11" rx="0.5" stroke="#333333"/>
<rect x="2" y="12" width="18" height="2" fill="#333333"/>
<rect x="9" y="15" width="4" height="2" fill="#333333"/>
<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z" fill="#333333"/>
<rect x="2.5" y="3" width="17" height="11" rx="0.5" stroke-width="2" fill="none"/>
<rect x="2" y="12" width="18" height="2" stroke="none" />
<rect x="9" y="15" width="4" height="2" stroke="none"/>
<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z"/>
</symbol>
<symbol id="date" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
......@@ -91,9 +91,9 @@
</symbol>
<symbol id="print" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="8" width="12" height="5" stroke="currentColor" stroke-width="2"/>
<rect x="10" y="17" width="12" height="8" stroke="currentColor" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z" fill="currentColor"/>
<rect x="10" y="8" width="12" height="5" stroke-width="2" fill="none"/>
<rect x="10" y="17" width="12" height="8" stroke-width="2" fill="none"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z"/>
</symbol>
<symbol id="calendar" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
......@@ -126,30 +126,16 @@
</symbol>
<symbol id="borne" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-inside-1" fill="white">
<rect x="5" width="12" height="9" rx="1"/>
</mask>
<rect x="5" width="12" height="9" rx="1" stroke="#333333" stroke-width="4" mask="url(#path-1-inside-1)"/>
<path d="M6 14H16L14.6364 22H7.36364L6 14Z" fill="#333333"/>
<path d="M5.04692 10.1658C5.12212 10.0617 5.24275 10 5.37119 10H16.6288C16.7573 10 16.8779 10.0617 16.9531 10.1658L18.542 12.3658C18.733 12.6303 18.544 13 18.2177 13H3.7823C3.45599 13 3.26698 12.6303 3.45803 12.3658L5.04692 10.1658Z" fill="#333333"/>
<rect x="5" width="12" height="9" rx="1" stroke-width="1.9" fill="none"/>
<path d="M6 14H16L14.6364 22H7.36364L6 14Z"/>
<path d="M5.04692 10.1658C5.12212 10.0617 5.24275 10 5.37119 10H16.6288C16.7573 10 16.8779 10.0617 16.9531 10.1658L18.542 12.3658C18.733 12.6303 18.544 13 18.2177 13H3.7823C3.45599 13 3.26698 12.6303 3.45803 12.3658L5.04692 10.1658Z" stroke="none"/>
</symbol>
<symbol id="wifi" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67066 6.53125 4.67066 7.8744 2.49909 10.046L1.08488 8.63175Z" fill="#333333"/>
<path d="M0.987878 8.72971C-1.46519 11.2313 -2.98672 14.6496 -3.01522 18.4233C-3.00846 17.5465 -2.91931 16.6682 -2.74662 15.8C-2.2154 13.1293 -0.917113 10.6726 0.987878 8.72971Z" fill="#333333"/>
<path d="M-3.0153 18.6274C-2.99021 22.3568 -1.50692 25.7399 0.892922 28.235C-0.311404 26.9826 -1.27828 25.5103 -1.94994 23.8888C-2.64453 22.2119 -3.00294 20.4247 -3.0153 18.6274Z" fill="#333333"/>
<path d="M1.20434 28.5488C3.72784 31.0128 7.17878 32.5312 10.9844 32.5312C14.7486 32.5312 18.1658 31.0457 20.6818 28.6288C20.0912 29.196 19.4494 29.7127 18.7624 30.1718C16.4601 31.7102 13.7533 32.5312 10.9844 32.5312C8.21543 32.5312 5.50867 31.7102 3.20639 30.1718C2.48717 29.6913 1.81751 29.1474 1.20434 28.5488Z" fill="#333333"/>
<path d="M21.0019 28.3113C23.4506 25.8035 24.9655 22.3797 24.9842 18.6022C24.975 20.408 24.6165 22.2041 23.9187 23.8888C23.2333 25.5434 22.2406 27.0425 21.0019 28.3113Z" fill="#333333"/>
<path d="M24.9841 18.4483C24.9621 14.6515 23.4287 11.2129 20.9551 8.70353C22.8742 10.6505 24.1817 13.1173 24.7154 15.8C24.8897 16.6764 24.9789 17.5632 24.9841 18.4483Z" fill="#333333"/>
<path d="M18.0554 11.4602C16.2458 9.65054 13.7458 8.53125 10.9844 8.53125C8.22295 8.53125 5.72295 9.65054 3.91331 11.4602L5.32752 12.8744C6.77523 11.4267 8.77523 10.5312 10.9844 10.5312C13.1935 10.5312 15.1935 11.4267 16.6412 12.8744L18.0554 11.4602Z" fill="#333333"/>
<path d="M15.227 14.2886C14.1412 13.2028 12.6412 12.5312 10.9844 12.5312C9.32752 12.5312 7.82752 13.2028 6.74173 14.2886L8.15595 15.7028C8.8798 14.979 9.8798 14.5312 10.9844 14.5312C12.0889 14.5312 13.0889 14.979 13.8128 15.7028L15.227 14.2886Z" fill="#333333"/>
<path d="M12.3986 17.117C12.0367 16.7551 11.5367 16.5312 10.9844 16.5312C10.4321 16.5312 9.93209 16.7551 9.57016 17.117L10.9844 18.5312L12.3986 17.117Z" fill="#333333"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="22" height="22" fill="white"/>
</clipPath>
</defs>
<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67066 6.53125 4.67066 7.8744 2.49909 10.046L1.08488 8.63175Z" stroke="none"/>
<path d="M1.20434 28.5488C3.72784 31.0128 7.17878 32.5312 10.9844 32.5312C14.7486 32.5312 18.1658 31.0457 20.6818 28.6288C20.0912 29.196 19.4494 29.7127 18.7624 30.1718C16.4601 31.7102 13.7533 32.5312 10.9844 32.5312C8.21543 32.5312 5.50867 31.7102 3.20639 30.1718C2.48717 29.6913 1.81751 29.1474 1.20434 28.5488Z" stroke="none"/>
<path d="M18.0554 11.4602C16.2458 9.65054 13.7458 8.53125 10.9844 8.53125C8.22295 8.53125 5.72295 9.65054 3.91331 11.4602L5.32752 12.8744C6.77523 11.4267 8.77523 10.5312 10.9844 10.5312C13.1935 10.5312 15.1935 11.4267 16.6412 12.8744L18.0554 11.4602Z" stroke="none"/>
<path d="M15.227 14.2886C14.1412 13.2028 12.6412 12.5312 10.9844 12.5312C9.32752 12.5312 7.82752 13.2028 6.74173 14.2886L8.15595 15.7028C8.8798 14.979 9.8798 14.5312 10.9844 14.5312C12.0889 14.5312 13.0889 14.979 13.8128 15.7028L15.227 14.2886Z" stroke="none"/>
<path d="M12.3986 17.117C12.0367 16.7551 11.5367 16.5312 10.9844 16.5312C10.4321 16.5312 9.93209 16.7551 9.57016 17.117L10.9844 18.5312L12.3986 17.117Z" stroke="none"/>
</symbol>
</svg>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment