From dc797adc7a72e48d3c5fa0346afc1a9bb937c137 Mon Sep 17 00:00:00 2001 From: Augustin LECONTE <["ext.sopra.aleconte@grandlyon.com"]> Date: Thu, 17 Feb 2022 16:50:25 +0000 Subject: [PATCH] Revert "Merge branch 'feat/US51-beneficiary-orientation' into 'dev'" This reverts merge request !193 --- package-lock.json | 140 ----- src/app/carto/carto.component.scss | 2 +- .../footer-form/footer-form.component.html | 2 +- .../footer-form/footer-form.component.scss | 5 +- .../form/footer-form/footer-form.component.ts | 7 +- .../structure-detail-print.component.html | 79 ++- .../structure-detail-print.component.scss | 14 +- .../structure-print-header.component.html | 126 +++-- .../structure-print-header.component.scss | 49 +- .../structure-print-header.component.ts | 3 +- .../orientation-form.component.html | 485 ++++++++++-------- .../orientation-form.component.scss | 286 +++-------- .../orientation-form.component.ts | 134 ++--- .../form/orientation-form/pageType.enum.ts | 4 +- .../form/structure-form/form.component.scss | 15 +- src/app/form/structure-form/form.component.ts | 1 - src/app/header/header.component.html | 8 +- src/app/map/components/layers.enum.ts | 5 - src/app/map/components/map.component.html | 9 +- src/app/map/components/map.component.scss | 23 +- src/app/map/components/map.component.ts | 58 +-- src/app/map/components/markerType.enum.ts | 1 - src/app/map/components/zoomLevel.enum.ts | 6 - src/app/map/services/map.service.ts | 72 ++- src/app/map/services/marker.ts | 6 - src/app/models/address.model.ts | 1 - src/app/models/orientation-filter.object.ts | 3 +- .../newsletter-subscription.component.scss | 2 +- .../address-autocomplete.component.ts | 1 - .../svg-icon/svg-icon.component.scss | 4 - .../components/card/card.component.html | 87 ++-- .../components/card/card.component.scss | 41 +- .../structure-details.component.scss | 8 +- .../structure-details.component.ts | 19 + .../structure-list/models/category.model.ts | 1 - src/app/structure-list/models/filter.model.ts | 2 - .../structure-list.component.html | 1 - .../structure-list.component.scss | 5 - src/app/utils/utils.ts | 11 - src/assets/form/sprite.svg | 30 -- src/assets/ico/sprite.svg | 7 - src/assets/logos/grandLyonLaMetropole.svg | 29 -- src/assets/scss/_color.scss | 2 - src/assets/scss/_icons.scss | 124 +---- 44 files changed, 696 insertions(+), 1222 deletions(-) delete mode 100644 src/app/map/components/layers.enum.ts delete mode 100644 src/app/map/components/zoomLevel.enum.ts delete mode 100644 src/assets/logos/grandLyonLaMetropole.svg diff --git a/package-lock.json b/package-lock.json index 4423b9a74..820b6fdb1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9878,12 +9878,6 @@ "vary": "^1" } }, - "corser": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/corser/-/corser-2.0.1.tgz", - "integrity": "sha1-jtolLsqrWEDc2XXOuQ2TcMgZ/4c=", - "dev": true - }, "cosmiconfig": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz", @@ -12080,12 +12074,6 @@ "integrity": "sha512-7kIufnBqdsBGcSZLPJwqHT3yhk1QTsSlFsVD3kx5ixH/AlgBs9yM1q6DPhXZ8f8gtdqgh7N7/5btRLpQsS2gHw==", "dev": true }, - "he": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz", - "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", - "dev": true - }, "hosted-git-info": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.0.2.tgz", @@ -12107,15 +12095,6 @@ "wbuf": "^1.1.0" } }, - "html-encoding-sniffer": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-3.0.0.tgz", - "integrity": "sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==", - "dev": true, - "requires": { - "whatwg-encoding": "^2.0.0" - } - }, "html-entities": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", @@ -12278,78 +12257,6 @@ } } }, - "http-server": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/http-server/-/http-server-14.1.0.tgz", - "integrity": "sha512-5lYsIcZtf6pdR8tCtzAHTWrAveo4liUlJdWc7YafwK/maPgYHs+VNP6KpCClmUnSorJrARVMXqtT055zBv11Yg==", - "dev": true, - "requires": { - "basic-auth": "^2.0.1", - "chalk": "^4.1.2", - "corser": "^2.0.1", - "he": "^1.2.0", - "html-encoding-sniffer": "^3.0.0", - "http-proxy": "^1.18.1", - "mime": "^1.6.0", - "minimist": "^1.2.5", - "opener": "^1.5.1", - "portfinder": "^1.0.28", - "secure-compare": "3.0.1", - "union": "~0.5.0", - "url-join": "^4.0.1" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.2", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", - "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==", - "dev": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "http-signature": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.2.0.tgz", @@ -14839,12 +14746,6 @@ "integrity": "sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==", "dev": true }, - "opener": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz", - "integrity": "sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==", - "dev": true - }, "optionator": { "version": "0.8.3", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", @@ -16793,12 +16694,6 @@ "get-assigned-identifiers": "^1.1.0" } }, - "secure-compare": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/secure-compare/-/secure-compare-3.0.1.tgz", - "integrity": "sha1-8aAymzCLIh+uN7mXTz1XjQypmeM=", - "dev": true - }, "select-hose": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz", @@ -18301,15 +18196,6 @@ } } }, - "union": { - "version": "0.5.0", - "resolved": "https://registry.npmjs.org/union/-/union-0.5.0.tgz", - "integrity": "sha512-N6uOhuW6zO95P3Mel2I2zMsbsanvvtgn6jVqJv4vbVcz/JN0OkL9suomjQGmWtxJQXOCqUJvquc1sMeNz/IwlA==", - "dev": true, - "requires": { - "qs": "^6.4.0" - } - }, "unique-filename": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.1.tgz", @@ -18430,12 +18316,6 @@ "punycode": "^2.1.0" } }, - "url-join": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/url-join/-/url-join-4.0.1.tgz", - "integrity": "sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==", - "dev": true - }, "url-parse-lax": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/url-parse-lax/-/url-parse-lax-3.0.0.tgz", @@ -18853,26 +18733,6 @@ "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==", "dev": true }, - "whatwg-encoding": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz", - "integrity": "sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==", - "dev": true, - "requires": { - "iconv-lite": "0.6.3" - }, - "dependencies": { - "iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "requires": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - } - } - } - }, "which": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz", diff --git a/src/app/carto/carto.component.scss b/src/app/carto/carto.component.scss index 3fcf8948f..eb5f97b21 100644 --- a/src/app/carto/carto.component.scss +++ b/src/app/carto/carto.component.scss @@ -29,7 +29,7 @@ height: calc(100vh - #{$header-height} - #{$footer-height}); @media #{$tablet} { padding: 0; - height: calc(100vh - #{$header-height}); + height: 100%; } } .btnSwitch { diff --git a/src/app/form/footer-form/footer-form.component.html b/src/app/form/footer-form/footer-form.component.html index 84e1517f2..6157b4a2c 100644 --- a/src/app/form/footer-form/footer-form.component.html +++ b/src/app/form/footer-form/footer-form.component.html @@ -1,5 +1,5 @@ <div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="center center"> - <button *ngIf="displayPreviousButton" class="btn-primary small previous" (click)="goToPreviousPage()"> + <button class="btn-primary small previous" (click)="goToPreviousPage()"> <div class="rowBtn" fxLayout="row" fxLayoutAlign="center center"> <svg class="chevronLeft" aria-hidden="true"> <use [attr.xlink:href]="'assets/form/sprite.svg#chevronLeft'"></use> diff --git a/src/app/form/footer-form/footer-form.component.scss b/src/app/form/footer-form/footer-form.component.scss index 61ae2b385..6ebf95c44 100644 --- a/src/app/form/footer-form/footer-form.component.scss +++ b/src/app/form/footer-form/footer-form.component.scss @@ -3,9 +3,8 @@ .btn-primary { &.previous { - background-color: $white; + background-color: initial; color: $grey-2; - border: solid $grey-4 1px; } &.next { .rowBtn { @@ -26,6 +25,6 @@ .chevronRight { height: 24px; width: 24px; - // stroke: inherit; + stroke: inherit; margin-left: 10px; } diff --git a/src/app/form/footer-form/footer-form.component.ts b/src/app/form/footer-form/footer-form.component.ts index 12736e3ac..15a5456ff 100644 --- a/src/app/form/footer-form/footer-form.component.ts +++ b/src/app/form/footer-form/footer-form.component.ts @@ -5,17 +5,18 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; templateUrl: './footer-form.component.html', styleUrls: ['./footer-form.component.scss'], }) -export class FooterFormComponent { +export class FooterFormComponent implements OnInit { @Input() isValid: boolean; @Input() btnName: string[]; - @Input() displayPreviousButton: boolean = true; @Output() nextPage = new EventEmitter<any>(); @Output() previousPage = new EventEmitter<any>(); + constructor() {} + + ngOnInit(): void {} public goToNextPage(): void { this.nextPage.emit(); } - public goToPreviousPage(): void { this.previousPage.emit(); } diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html index 7d7ed3c9e..b6e592955 100644 --- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html +++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.html @@ -3,7 +3,12 @@ <div fxLayout="row" class="structure-details-block" fxLayoutAlign="baseline baseline" fxLayoutGap="8px"> <div fxLayout="column" fxLayoutGap="10px" fxFlex="100%"> <div fxLayout="column" class="no-margin" fxLayoutAlign="space-between start"> - <h3 class="bold">{{ structure.structureName }}</h3> + <h2 class="bold">{{ structure.structureName }}</h2> + </div> + <div fxLayout="row" fxLayoutAlign="space-between center"> + <div class="typeInformationHeader" fxLayout="column"> + <h3>{{ structure.getLabelTypeStructure() }}</h3> + </div> </div> <div class="mobile-column"> <div fxLayout="column" fxFlex="50%"> @@ -11,10 +16,63 @@ <app-svg-icon [type]="'ico'" [icon]="'adress'" [title]="'Adresse'"></app-svg-icon> <p>{{ structure.address.numero }} {{ structure.address.street }}, {{ structure.address.commune }}</p> </div> + <div *ngIf="structure.website" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px"> + <app-svg-icon [type]="'ico'" [icon]="'web'" [title]="'Site web'"></app-svg-icon> + <a + target="_blank" + class="custom-link" + rel="noopener noreferrer" + [href]="structure.website.includes('http') ? structure.website : 'http://' + structure.website" + >{{ structure.website | url }}</a + > + </div> + <div *ngIf="structure.hasSocialNetwork()" fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="13px"> + <app-svg-icon [type]="'ico'" [icon]="'network'"></app-svg-icon> + <div fxLayout="row" fxLayoutAlign="none baseline" fxLayoutGap="8px"> + <a + *ngIf="structure.facebook" + target="_blank" + class="custom-link" + rel="noopener noreferrer" + [href]="'http://' + structure.facebook" + > + <app-svg-icon [type]="'ico'" [icon]="'facebook'" [title]="'Facebook'"></app-svg-icon + ></a> + <a + *ngIf="structure.twitter" + target="_blank" + class="custom-link" + rel="noopener noreferrer" + [href]="'http://' + structure.twitter" + > + <app-svg-icon [type]="'ico'" [icon]="'twitter'" [title]="'Twitter'"></app-svg-icon + ></a> + <a + *ngIf="structure.instagram" + target="_blank" + class="custom-link" + rel="noopener noreferrer" + [href]="'http://' + structure.instagram" + > + <app-svg-icon [type]="'ico'" [icon]="'instagram'" [title]="'Instagram'"></app-svg-icon + ></a> + <a + *ngIf="structure.linkedin" + target="_blank" + class="custom-link" + rel="noopener noreferrer" + [href]="'http://' + structure.linkedin" + > + <app-svg-icon [type]="'ico'" [icon]="'linkedin'" [title]="'Linkedin'"></app-svg-icon + ></a> + </div> + </div> <div *ngIf="structure.contactPhone" fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px"> <app-svg-icon [type]="'ico'" [icon]="'tel'" [title]="'Téléphone'"></app-svg-icon> <p>{{ structure.contactPhone | phone }}</p> </div> + </div> + <div fxLayout="column" fxFlex="50%"> <div *ngIf="structure.contactMail && structure.contactMail !== 'unknown@unknown.com'" fxLayout="row" @@ -24,8 +82,23 @@ <app-svg-icon [type]="'ico'" [iconClass]="'grey-1'" [icon]="'email'" [title]="'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'" [title]="'Pass numérique'"></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> + </div> </div> </div> + + <div> + {{ structure.description }} + </div> + <div class="info"> + {{ structure.lockdownActivity }} + </div> </div> </div> <!-- Accueil --> @@ -46,9 +119,7 @@ <h4>{{ day.key | day }}</h4> <div class="opening-time" fxLayout="row" fxLayoutAlign="none flex-end"> <div *ngFor="let timeRange of day.value.time; let isFirst = first"> - <p *ngIf="isFirst && timeRange.opening"> - de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }} - </p> + <p *ngIf="isFirst && timeRange.opening">de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }}</p> <p *ngIf="!isFirst && timeRange.opening"> et de {{ timeRange.formatOpeningDate() }} à {{ timeRange.formatClosingDate() }} </p> diff --git a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss index 155566070..8e3d713f5 100644 --- a/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss +++ b/src/app/form/orientation-form/component/structure-detail-print/structure-detail-print.component.scss @@ -10,10 +10,15 @@ a { } .structrue-details-container { + border-right: solid 1px $grey-4; + page-break-after: always; + background-color: $white; + top: 0; + left: 0; max-width: 980px; - width: 64%; - margin-top: 1%; - float: right; + width: 100%; + margin-bottom: 50px; + padding: 10px 24px; @media #{$tablet} { width: calc(100% - 2 * 24px); position: inherit; @@ -29,6 +34,7 @@ a { .structrue-details-container > .structure-details-block { padding: 0px 0px 24px 0; + border-bottom: 1px dashed $grey-2; .subtitle { text-transform: uppercase; @include cn-bold-16; @@ -126,7 +132,7 @@ p, height: 25px; border-radius: 20px; padding: 5px 15px; - color: $white; + color: white; border-style: none; margin-top: 15px; background: #348899; diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html index 616b544b1..b1c83faf2 100644 --- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html +++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.html @@ -1,77 +1,67 @@ <div class="print-header" fxLayout="column"> - <div class="header-print"> - <div class="header-infos"> - <svg aria-hidden="true" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#grandLyonLaMetropole'"></use> - </svg> - <div class="header-title"> - <div>RES’IN : Réseau des acteurs de l'inclusion numérique de la Métropole de Lyon</div> - <h3>Fiche d'orientation</h3> - </div> + <div class="header-print" fxLayout="row" fxLayoutAlign="space-between center"> + <h3>Fiche d'orientation</h3> + <h4 class="typeInformationHeader">{{ date }}</h4> + </div> + + <!-- Name --> + <div *ngIf="beneficiaryName"> + <p class="bold">{{ beneficiaryName }}</p> + </div> + + <!-- Accompaniment --> + <div *ngIf="structureAccompaniment"> + <div class="typeInformationHeader">Orienté par</div> + <div class="contactAccompaniment" fxLayout="row" fxLayoutAlign="space-between center"> + <div class="bold">{{ structureAccompaniment }}</div> + <!-- Contact --> + <div class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</div> </div> - <p class="typeInformationHeader date">{{ date }}</p> </div> - <div class="informations"> - <div class="helper"> - <!-- Accompaniment --> - <div *ngIf="structureAccompaniment"> - <div class="typeInformationHeader">{{ 'Orienté par' | uppercase }}</div> - <p class="bold">{{ structureAccompaniment }}</p> - <!-- Contact --> - <p class="bold" *ngIf="contactAccompaniment">{{ contactAccompaniment }}</p> - <p class="bold" *ngIf="contactAccompanimentPhone">{{ contactAccompanimentPhone }}</p> + <!-- Needs --> + <div *ngIf="equipments.length > 0"> + <p class="typeInformationHeader">Besoins en matériel</p> + <div fxLayout="row wrap" fxLayoutGap="16px"> + <div *ngFor="let equipmentTag of equipments" class="tags-cloud" fxLayout="row"> + {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }} </div> </div> - <div class="beneficiary"> - <div class="typeInformationHeader">{{ 'Bénéficiaire' | uppercase }}</div> - <!-- Name --> - <table> - <tr> - <td class="typeInformationHeader">Nom</td> - <td class="bold">{{ beneficiaryName }}</td> - </tr> - <tr *ngIf="equipments.length > 0"> - <td class="typeInformationHeader">Besoin(s) en matériel</td> - <td class="bold"> - <div *ngFor="let equipmentTag of equipments"> - {{ equipmentTag.text ? equipmentTag.text : equipmentTag.value }} - </div> - </td> - </tr> - <tr *ngIf="formations.length > 0"> - <td class="typeInformationHeader">Besoin(s) en formation</td> - <td class="bold"> - <div *ngFor="let formationTag of formations"> - {{ formationTag.text ? formationTag.text : formationTag.value }} - </div> - </td> - </tr> - <tr *ngIf="assistances.length > 0"> - <td class="typeInformationHeader">Besoin(s) d'accompagnement</td> - <td class="bold"> - <div *ngFor="let assistanceTag of assistances"> - {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }} - </div> - </td> - </tr> - <tr *ngIf="specificNeeds.length > 0"> - <td class="typeInformationHeader">Besoin(s) spécifiques</td> - <td class="bold"> - <div *ngFor="let specificNeed of specificNeeds"> - {{ specificNeed.text ? specificNeed.text : specificNeed.value }} - </div> - </td> - </tr> - <tr *ngIf="beneficiaryPassNumeric"> - <td class="typeInformationHeader">Pass Numérique</td> - <td class="bold">Oui</td> - </tr> - <tr *ngIf="beneficiaryNeedCommentary"> - <td class="typeInformationHeader">Informations</td> - <td class="bold">{{ beneficiaryNeedCommentary }}</td> - </tr> - </table> + </div> + <div *ngIf="formations.length > 0"> + <p class="typeInformationHeader">Besoins en formation</p> + <div fxLayout="row wrap" fxLayoutGap="16px"> + <div *ngFor="let formationTag of formations" class="tags-cloud" fxLayout="row"> + {{ formationTag.text ? formationTag.text : formationTag.value }} + </div> </div> </div> + <div *ngIf="assistances.length > 0"> + <p class="typeInformationHeader">Besoins d'accompagnement</p> + <div fxLayout="row wrap" fxLayoutGap="16px"> + <div *ngFor="let assistanceTag of assistances" class="tags-cloud" fxLayout="row"> + {{ assistanceTag.text ? assistanceTag.text : assistanceTag.value }} + </div> + </div> + </div> + <div *ngIf="specificNeeds.length > 0"> + <div class="typeInformationHeader">Besoins spécifiques'</div> + <div fxLayout="row wrap" fxLayoutGap="16px"> + <div *ngFor="let specificNeed of specificNeeds" class="tags-cloud" fxLayout="row"> + {{ specificNeed.text ? specificNeed.text : specificNeed.value }} + </div> + </div> + </div> + + <!-- Pass Numeric --> + <div *ngIf="beneficiaryPassNumeric" class="inputRow" fxLayout="row" fxLayoutGap="13px"> + <app-svg-icon [type]="'ico'" [icon]="'passNumeric'"></app-svg-icon> + <p class="bold">Pass Numérique</p> + </div> + + <!-- Comments --> + <div *ngIf="beneficiaryNeedCommentary"> + <div class="typeInformationHeader">Informations à destination de la structure</div> + <p>{{ beneficiaryNeedCommentary }}</p> + </div> </div> diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss index b9cce0c61..0c9a98b49 100644 --- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss +++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.scss @@ -9,30 +9,6 @@ margin-top: 20px; margin-bottom: 20px; width: 100%; - border-bottom: solid black 1px; -} - -.header-infos { - height: 80px; - display: flex; - - .header-title { - width: 70%; - float: left; - } - - h3 { - margin-top: 3px; - } - - svg { - max-width: fit-content; - width: 30%; - } -} - -.date { - float: right; } .print-header { @@ -44,10 +20,6 @@ @include cn-bold-16; margin-bottom: 5px; color: $grey-3; - &.date { - color: $grey-3; - font-style: italic; - } } .contactAccompaniment { @@ -61,7 +33,7 @@ height: 28px; border-radius: 20px; padding: 5px 15px; - color: $white; + color: white; border-style: none; margin-top: 5px; background: #348899; @@ -86,22 +58,3 @@ text-align: right; } } - -.informations { - width: 100%; - display: flex; - .helper { - max-height: 300px; - background-color: $grey-6; - width: 30%; - height: fit-content; - padding: 2%; - } - - .beneficiary { - background-color: $grey-6; - margin-left: 2%; - padding: 2%; - width: 70%; - } -} diff --git a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts index ee7b51cf1..20c827dec 100644 --- a/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts +++ b/src/app/form/orientation-form/component/structure-print-header/structure-print-header.component.ts @@ -1,7 +1,9 @@ import { Component, Input, OnInit } from '@angular/core'; +import { Structure } from '../../../../models/structure.model'; import * as _ from 'lodash'; import { ActivatedRoute } from '@angular/router'; import { PrintService } from '../../../../shared/service/print.service'; +import Module from 'module'; import { Filter } from '../../../../structure-list/models/filter.model'; @Component({ selector: 'app-structure-print-header', @@ -14,7 +16,6 @@ export class StructurePrintHeaderComponent implements OnInit { @Input() public structureAccompaniment: string; @Input() public beneficiaryPassNumeric: boolean; @Input() public contactAccompaniment: string | null; - @Input() public contactAccompanimentPhone: string | null; @Input() public filters: Filter[]; public date: string; diff --git a/src/app/form/orientation-form/orientation-form.component.html b/src/app/form/orientation-form/orientation-form.component.html index 04a8a0500..02e379de3 100644 --- a/src/app/form/orientation-form/orientation-form.component.html +++ b/src/app/form/orientation-form/orientation-form.component.html @@ -1,10 +1,10 @@ -<div id="body" *ngIf="!multiPrint" class="form" fxLayout="column"> +<div *ngIf="!multiPrint" class="form" fxLayout="column"> <app-modal-confirmation [openned]="showConfirmationModal" [content]="'Il vous faudra de nouveau remplir le formulaire si vous quittez'" (closed)="hasRedirectionAccepted($event)" ></app-modal-confirmation> - <div class="progress-container"> + <div class="content"> <div class="progressBar" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px"> <label [ngClass]="{ validate: currentPage == nbPagesForm }" for="progressForm" >{{ progressStatus | number: '1.0-0' }}% @@ -16,8 +16,6 @@ [value]="progressStatus" ></progress> </div> - </div> - <div class="content" *ngIf="currentPage != pageTypeEnum.structuresSelection"> <!-- BESOIN BENEFICIAIRE --> <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeed" class="page"> <div class="titleInfo"> @@ -25,7 +23,7 @@ Merci de remplir ces quelques questions qui vous permettront d'identifier le lieu à proximité le plus adapté. </div> <div class="title"> - <h3>Quels sont les besoins du bénéficiaire ?</h3> + <h3>De quoi le bénéficiaire a-t-il besoin ?</h3> </div> <div class="collapse" [ngClass]="{ notCollapsed: !showEquipments }"> <div fxLayout="column"> @@ -121,8 +119,73 @@ </div> </div> <div *ngIf="showFormation" class="tags"> + <p class="titleCateg">{{ baseSkillssReferentiel.name }}</p> + <button + *ngFor="let choice of baseSkillssReferentiel.modules" + (click)="updateChoice(choice.id, 'formation')" + [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }" + > + <div fxLayout="row" fxLayoutAlign=" center"> + <svg class="validate" aria-hidden="true"> + <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> + </svg> + <div class="textBtn"> + {{ choice.text }} + </div> + </div> + </button> + + <p class="titleCateg">{{ accessRightsReferentiel.name }}</p> + <button + *ngFor="let choice of accessRightsReferentiel.modules" + (click)="updateChoice(choice.id, 'formation')" + [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }" + > + <div fxLayout="row" fxLayoutAlign=" center"> + <svg class="validate" aria-hidden="true"> + <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> + </svg> + <div class="textBtn"> + {{ choice.text }} + </div> + </div> + </button> + + <p class="titleCateg">{{ digitalCultureSecuritysReferentiel.name }}</p> + <button + *ngFor="let choice of digitalCultureSecuritysReferentiel.modules" + (click)="updateChoice(choice.id, 'formation')" + [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }" + > + <div fxLayout="row" fxLayoutAlign=" center"> + <svg class="validate" aria-hidden="true"> + <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> + </svg> + <div class="textBtn"> + {{ choice.text }} + </div> + </div> + </button> + + <p class="titleCateg">{{ parentingHelpsReferentiel.name }}</p> + <button + *ngFor="let choice of parentingHelpsReferentiel.modules" + (click)="updateChoice(choice.id, 'formation')" + [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }" + > + <div fxLayout="row" fxLayoutAlign=" center"> + <svg class="validate" aria-hidden="true"> + <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> + </svg> + <div class="textBtn"> + {{ choice.text }} + </div> + </div> + </button> + + <p class="titleCateg">{{ socialAndProfessionalsReferentiel.name }}</p> <button - *ngFor="let choice of formations" + *ngFor="let choice of socialAndProfessionalsReferentiel.modules" (click)="updateChoice(choice.id, 'formation')" [ngClass]="{ selectedChoice: isInArray(choice.id, 'formation') }" > @@ -130,62 +193,139 @@ <svg class="validate" aria-hidden="true"> <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> </svg> - <div class="textBtn">{{ choice.name }} ({{ choice.surname }}...)</div> + <div class="textBtn"> + {{ choice.text }} + </div> </div> </button> </div> </div> </div> </div> + <!-- NUMERIC PASS --> + <div *ngIf="currentPage == pageTypeEnum.beneficiaryPassNumeric" class="page"> + <div class="title"> + <h3>Le bénéficiaire possède-t-il un Pass numérique ?</h3> + </div> + <app-radio-form + [selectedOption]="getOrientationControl('passNumeric').value" + [horizontal]="true" + (selectedEvent)="onRadioBtnChange('passNumeric', $event)" + > + </app-radio-form> + </div> <!-- PROFIL BENEFICIAIRE --> <div *ngIf="currentPage == pageTypeEnum.beneficiaryInfo" class="page"> <div class="title"> - <h3>Quel est le profil du bénéficiaire ?</h3> + <h3>Autour de quelle adresse chercher une structure ?</h3> </div> - <div class="section"> - <label>Nom</label> + <div class="form-group" fxLayout="column"> + <label for="address">Adresse</label> + <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> - <input - type="text" - [value]="getOrientationControl('beneficiaryName').value" - (input)="setBeneficiaryName($event.target.value)" - class="form-input" - /> + <app-address-autocomplete + [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null" + (inputAddress)="setAddressBeneficiary()" + (selectedAddress)="setAddressBeneficiary($event)" + ></app-address-autocomplete> + <app-svg-icon + *ngIf="getOrientationControl('address').valid && !isLoading" + [iconClass]="'validation'" + [type]="'form'" + [icon]="'validate'" + class="validateIcon" + ></app-svg-icon> + <div *ngIf="!getOrientationControl('address').valid && !isLoading" (click)="getAddress()"> + <app-svg-icon [type]="'ico'" [icon]="'locateMe'" class="markerIcon"></app-svg-icon> + </div> + <div *ngIf="isLoading"> + <img class="loader-gif" src="/assets/gif/loader_circle.gif" alt /> + </div> </div> </div> - <div class="section"> - <label>Possède-t-il un Pass numérique ?</label> - <app-radio-form [horizontal]="true" (selectedEvent)="onRadioBtnChange('passNumeric', $event)"> </app-radio-form> + <div class="title"> + <h3>Le bénéficiaire a-t-il un profil spécifique ?</h3> + <p class="notRequired">facultatif</p> </div> - <div class="section"> - <label>A-t-il un profil spécifique ?</label> - <div class="tags"> - <button - (click)="updateChoice(null, 'specificProfile')" - [ngClass]="{ selectedChoice: isEmpty('specificProfile') }" - > - <div fxLayout="row" fxLayoutAlign=" center"> - <svg class="validate" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> - </svg> - <div class="textBtn">Aucun</div> - </div> - </button> - <button - *ngFor="let choice of specificProfile.modules" - (click)="updateChoice(choice.id, 'specificProfile')" - [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }" - > - <div fxLayout="row" fxLayoutAlign=" center"> - <svg class="validate" aria-hidden="true"> - <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> - </svg> - <div class="textBtn"> - {{ choice.text }} - </div> + + <div class="tags"> + <button + *ngFor="let choice of specificProfile.modules" + (click)="updateChoice(choice.id, 'specificProfile')" + [ngClass]="{ selectedChoice: isInArray(choice.id, 'specificProfile') }" + > + <div fxLayout="row" fxLayoutAlign=" center"> + <svg class="validate" aria-hidden="true"> + <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use> + </svg> + <div class="textBtn"> + {{ choice.text }} </div> - </button> + </div> + </button> + </div> + </div> + <!-- STRUCTURE SEARCH --> + <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="page"> + Filtres séléctionnés + <div fxLayout="row wrap" fxLayoutGap="16px"> + <div *ngFor="let filter of filters" class="tags-cloud" fxLayout="row" (click)="removeFilter(filter)"> + {{ filter.text ? filter.text : filter.value }} + <app-svg-icon [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon> + </div> + <div + *ngFor="let uncheckedFilter of uncheckedFilters" + class="tags-cloud unchecked" + fxLayout="row" + (click)="restoreFilter(uncheckedFilter)" + > + {{ uncheckedFilter.text ? uncheckedFilter.text : uncheckedFilter.value }} + <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon> + </div> + </div> + <div fxLayout="row" class="content-container"> + <div class="nbStructure-panel left-pane" [ngClass]="{ mapPhone: isMapPhone == true }"> + <div class="nbStructuresLabel" [ngPlural]="structuresList.length"> + <ng-template ngPluralCase="0">0 structure trouvée</ng-template> + <ng-template ngPluralCase="1">1 structure trouvée</ng-template> + <ng-template ngPluralCase="other">{{ structuresList.length }} structures trouvées</ng-template> + </div> + <div id="listCard" (mouseleave)="mouseLeave()"> + <app-card + *ngFor="let structure of structuresList" + [structure]="structure" + [isOrientation]="true" + [isSelected]="isInPrintList(structure._id)" + (addToList)="addToList($event, structure)" + (hover)="handleCardHover($event)" + (showDetails)="showDetails($event)" + ></app-card> + <p *ngIf="structureList && structureList.length <= 0"> + Il n'y a aucune réponse correspondant à votre recherche + </p> + </div> + </div> + <div class="btnSwitch"> + <app-button + [style]="'roundedButton'" + [text]="isMapPhone ? 'Liste' : 'Carte'" + [iconBtn]="isMapPhone ? 'liste' : 'map-marker'" + (action)="switchMapList()" + ></app-button> </div> + <app-map + [structures]="structuresList" + [structuresToPrint]="structuresToPrint" + [toogleToolTipId]="displayMapMarkerId" + [selectedMarkerId]="selectedMarkerId" + [locate]="locate" + (locatationTrigger)="locatationTrigger($event)" + (selectedStructure)="showDetails($event)" + [isMapPhone]="isMapPhone" + [searchedValue]="searchedValue" + class="right-pane deep-map" + [ngClass]="{ mapPhone: isMapPhone == true }" + ></app-map> </div> </div> <!-- BENEFICIARY ACCOMPANIMENT --> @@ -193,95 +333,59 @@ <div class="title"> <h3>Qui oriente le bénéficiaire ?</h3> </div> - <div class="section"> - <label>De quelle structure êtes-vous ? (MDM, Caf, Pôle Emploi...)</label> - <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> - <input - type="text" - [value]="getOrientationControl('structureAccompaniment').value" - (input)="setStructureAccompaniment($event.target.value)" - class="form-input" - /> - </div> + <label>Votre structure (MDM, Caf, Pôle Emploi...)</label> + <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> + <input + type="text" + [value]="getOrientationControl('structureAccompaniment').value" + (input)="setStructureAccompaniment($event.target.value)" + class="form-input" + /> </div> - <div class="section"> - <label>Courriel de votre structure</label> + + <div class="title"> + <h3>Comment contacter cette structure ?</h3> <p class="notRequired">facultatif</p> - <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> - <input - type="text" - [value]="getOrientationControl('contactAccompanimentEmail').value" - placeholder="exemple: prenom.nom@grandlyon.com" - (input)="setContactAccompanimentEmail($event.target.value)" - class="form-input" - /> - <app-svg-icon - *ngIf=" - getOrientationControl('contactAccompanimentEmail').valid && - getOrientationControl('contactAccompanimentEmail').value - " - [iconClass]="'validation'" - [type]="'form'" - [icon]="'validate'" - ></app-svg-icon> - <app-svg-icon - *ngIf=" - getOrientationControl('contactAccompanimentEmail').invalid && - getOrientationControl('contactAccompanimentEmail').value - " - [iconClass]="'validation'" - [type]="'form'" - [icon]="'notValidate'" - ></app-svg-icon> - </div> </div> - <div class="section"> - <label>Téléphone de votre structure</label> + <label>Contact (email ou n° de téléphone)</label> + <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> + <input + type="text" + [value]="getOrientationControl('contactAccompaniment').value" + (input)="setContactAccompaniment($event.target.value)" + class="form-input" + /> + </div> + + <div class="title"> + <h3>Qui est le bénéficiaire ?</h3> <p class="notRequired">facultatif</p> - <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> - <input - type="text" - [value]="getOrientationControl('contactAccompanimentPhone').value" - (input)="setContactAccompanimentPhone($event.target.value)" - class="form-input" - /> - <app-svg-icon - *ngIf=" - getOrientationControl('contactAccompanimentPhone').value && - getOrientationControl('contactAccompanimentPhone').valid - " - [iconClass]="'validation'" - [type]="'form'" - [icon]="'validate'" - ></app-svg-icon> - <app-svg-icon - *ngIf=" - getOrientationControl('contactAccompanimentPhone').invalid && - getOrientationControl('contactAccompanimentPhone').value - " - [iconClass]="'validation'" - [type]="'form'" - [icon]="'notValidate'" - ></app-svg-icon> - </div> + </div> + <label>Nom du bénéficiaire</label> + <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> + <input + type="text" + [value]="getOrientationControl('beneficiaryName').value" + (input)="setBeneficiaryName($event.target.value)" + class="form-input" + /> </div> </div> <!-- BENEFICIARY NEEDS COMMENTARY --> <div *ngIf="currentPage == pageTypeEnum.beneficiaryNeedCommentary" class="page"> <div class="title"> - <h3>Avez-vous des précisions à apporter ?</h3> - <p class="notRequired lg">facultatif</p> + <h3>Précisez le besoin</h3> + <p class="notRequired">facultatif</p> </div> - <label>Ces informations accompagneront la fiche d'orientation du bénéficiaire</label> + <label>Ces informations sont à destination de la structure</label> <div class="textareaBlock" fxLayout="column"> <textarea rows="8" maxlength="500" - placeholder="Exemple: le bénéficiaire n'a pas d'adresse e-mail" [value]="getOrientationControl('beneficiaryNeedCommentary').value" (input)="setBeneficiaryNeedCommentary($event.target.value)" ></textarea> - <p class="textarea-char"> + <p> {{ getOrientationControl('beneficiaryNeedCommentary').value ? getOrientationControl('beneficiaryNeedCommentary').value.length @@ -290,43 +394,15 @@ </p> </div> </div> - <!-- ADDRESS SEARCH --> - <div *ngIf="currentPage == pageTypeEnum.beneficiaryAddress" class="page"> - <div class="title"> - <h3>Autour de quelle adresse chercher une structure ?</h3> - <p class="notRequired lg">facultatif</p> - </div> - <div class="form-group" fxLayout="column"> - <div class="inputRow" fxLayout="row" fxLayoutGap="13px"> - <app-address-autocomplete - [address]="getOrientationControl('address').valid ? getOrientationControl('address').value : null" - (inputAddress)="setAddressBeneficiary()" - (selectedAddress)="setAddressBeneficiary($event)" - ></app-address-autocomplete> - <app-svg-icon - *ngIf="getOrientationControl('address').valid && !isLoading" - [iconClass]="'validation'" - [type]="'form'" - [icon]="'validate'" - class="validateIcon" - ></app-svg-icon> - </div> - </div> - </div> <!-- PRINT RESULTS --> - <div *ngIf="currentPage == pageTypeEnum.printResults" class="last-page"> + <div *ngIf="currentPage == pageTypeEnum.printResults" class="page"> <div class="title"> <app-structure-print-header - [beneficiaryNeedCommentary]=" - getOrientationControl('beneficiaryNeedCommentary') - ? getOrientationControl('beneficiaryNeedCommentary').value - : '' - " - [beneficiaryName]="getOrientationControl('beneficiaryName')?.value" - [structureAccompaniment]="getOrientationControl('structureAccompaniment')?.value" - [beneficiaryPassNumeric]="getOrientationControl('passNumeric')?.value" - [contactAccompaniment]="getOrientationControl('contactAccompanimentEmail')?.value" - [contactAccompanimentPhone]="getOrientationControl('contactAccompanimentPhone')?.value" + [beneficiaryNeedCommentary]="getOrientationControl('beneficiaryNeedCommentary').value" + [beneficiaryName]="getOrientationControl('beneficiaryName').value" + [structureAccompaniment]="getOrientationControl('structureAccompaniment').value" + [beneficiaryPassNumeric]="getOrientationControl('passNumeric').value" + [contactAccompaniment]="getOrientationControl('contactAccompaniment').value" [filters]="filters" ></app-structure-print-header> @@ -337,94 +413,49 @@ </div> </div> </div> - <!-- STRUCTURE SEARCH --> - <div *ngIf="currentPage == pageTypeEnum.structuresSelection" class="carto"> - <div class="left-col" [ngClass]="{ mapPhone: isMapPhone == true }"> - <div class="filters"> - <span class="filters-title">Filtre(s) séléctionné(s)</span> - <div fxLayout="row wrap" fxLayoutGap="4px"> - <div - class="tags-cloud" - *ngFor="let filter of filters" - [class.unchecked]="!filter.checked" - fxLayout="row" - (click)="checkFilter(filter)" - > - <app-svg-icon - *ngIf="filter.checked" - [type]="'ico'" - [icon]="'validate'" - [iconColor]="'white'" - ></app-svg-icon> - <app-svg-icon *ngIf="!filter.checked" [type]="'ico'" [icon]="'delete'" [iconColor]="'white'"></app-svg-icon> - <div>{{ filter.text ? filter.text : filter.value }}</div> - </div> - </div> - </div> - <div class="nbStructuresLabel" [ngPlural]="structuresList.length"> - <ng-template ngPluralCase="0">0 structure</ng-template> - <ng-template ngPluralCase="1">1 structure</ng-template> - <ng-template ngPluralCase="other">{{ structuresList.length }} structures</ng-template> - </div> - <div fxLayout="row" class="content-container"> - <div class="nbStructure-panel left-pane"> - <div id="listCard" (mouseleave)="mouseLeave()"> - <app-card - *ngFor="let structure of structuresList" - [structure]="structure" - [isOrientation]="true" - [isSelected]="isInPrintList(structure._id)" - (addToList)="addToList($event, structure)" - (hover)="handleCardHover($event)" - (showDetails)="showDetails($event)" - class="structure-card" - ></app-card> - <p *ngIf="structureList && structureList.length <= 0"> - Il n'y a aucune réponse correspondant à votre recherche - </p> - </div> - </div> - </div> + <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION --> + <div *ngIf="currentPage == 0" class="footer desktop" fxLayout="column" fxLayoutAlign="space-between"> + <div fxLayout="row" fxLayoutAlign="center center"> + <app-footer-form + [btnName]="['Précédent', 'Suivant']" + (previousPage)="previousUrl()" + (nextPage)="nextPage()" + [isValid]="isPageValid" + ></app-footer-form> </div> - <div class="btnSwitch"> - <app-button - [style]="'roundedButton'" - [text]="isMapPhone ? 'Liste' : 'Carte'" - [iconBtn]="isMapPhone ? 'liste' : 'map-marker'" - (action)="switchMapList()" - ></app-button> + </div> + <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer desktop"> + <div fxLayout="row" fxLayoutAlign="center center"> + <app-footer-form + [btnName]="['Précédent', 'Suivant']" + (previousPage)="previousPage()" + (nextPage)="nextPage()" + [isValid]="isPageValid" + ></app-footer-form> </div> - <div class="right-col" [ngClass]="{ mapPhone: isMapPhone == true }"> - <app-map - [isOrientationForm]="true" - [structures]="structuresList" - [structuresToPrint]="structuresToPrint" - [toogleToolTipId]="displayMapMarkerId" - [selectedMarkerId]="selectedMarkerId" - [locate]="locate" - (locatationTrigger)="locatationTrigger($event)" - (selectedStructure)="showDetails($event)" - [isMapPhone]="isMapPhone" - [searchedValue]="userLocation" - (onOrientationButtonClick)="addToList($event, structure)" - class="right-pane deep-map" - [ngClass]="{ mapPhone: isMapPhone == true }" - ></app-map> + </div> + <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer desktop"> + <div fxLayout="row" fxLayoutAlign="center center"> + <app-footer-form + [btnName]="['Précédent', 'Imprimer']" + (previousPage)="previousPage()" + (nextPage)="runMultiPrint(true)" + [isValid]="isPageValid" + ></app-footer-form> </div> </div> - <!-- FOOTER AVEC SUIVANT / PRECEDENT ET VALIDATION --> - <div *ngIf="currentPage != pageTypeEnum.printResults" class="form-footer"> + + <div *ngIf="currentPage != 0 && currentPage != pageTypeEnum.printResults" class="footer phone"> <div fxLayout="row" fxLayoutAlign="center center"> <app-footer-form [btnName]="['Précédent', 'Suivant']" (previousPage)="previousPage()" - [displayPreviousButton]="currentPage !== pageTypeEnum.beneficiaryNeed" (nextPage)="nextPage()" [isValid]="isPageValid" ></app-footer-form> </div> </div> - <div *ngIf="currentPage == pageTypeEnum.printResults" class="form-footer"> + <div *ngIf="currentPage == pageTypeEnum.printResults" class="footer phone"> <div fxLayout="row" fxLayoutAlign="center center"> <app-footer-form [btnName]="['Précédent', 'Imprimer']" diff --git a/src/app/form/orientation-form/orientation-form.component.scss b/src/app/form/orientation-form/orientation-form.component.scss index b83f7a12b..dbeffc59d 100644 --- a/src/app/form/orientation-form/orientation-form.component.scss +++ b/src/app/form/orientation-form/orientation-form.component.scss @@ -4,24 +4,61 @@ @import '../../../assets/scss/color'; @import '../../../assets/scss/typography'; +.title { + margin-top: 20px; +} + .body-wrap { height: 400px; } +.left-pane { + width: 529px; + min-width: 500px; + height: 600px; + overflow: auto; + overflow-x: hidden; + padding: 0 25px 0 0; + @media #{$tablet} { + width: 100%; + min-width: unset; + &.mapPhone { + display: none !important; + } + } +} + +.right-pane { + width: 400px; + max-height: 400px; + padding: 0 16px; + @media #{$tablet} { + display: none; + &.mapPhone { + display: block; + } + width: 100%; + padding: 0; + } +} + +.deep-map ::ng-deep #map { + height: 380px; +} + .tags-cloud { - cursor: pointer; font-style: normal; justify-content: center; align-items: center; height: 28px; border-radius: 20px; - padding: 4px 12px; - color: $white; + padding: 5px 15px; + color: white; border-style: none; - margin-top: 4px; - background: $blue; + margin-top: 15px; + background: #348899; &.unchecked { - background: $grey-4; + background: #bdbdbd; } } @@ -52,38 +89,42 @@ } .nbStructuresLabel { + color: $white; @include cn-regular-16; - display: flex; - text-align: center; + display: grid; + align-items: center; height: 32px; - color: $grey-3; + background-color: $grey-4; + padding-left: 9px; width: 100%; - align-items: center; - @media #{$large-phone} { - padding-left: unset; - } -} - -.nbStructuresLabel::before, -.nbStructuresLabel::after { - border-top: 0.0625em solid; - content: ''; - flex: 1; - margin: 0 0.5em; } -.form-footer { +.footer { padding: 17px 0; width: 100%; + max-width: 960px; + margin: 20px auto; text-align: center; - z-index: calc($btn-phone-switch-map-list-z-index - 1); - background: $grey-6; + &.desktop { + @media #{$tablet} { + display: none; + } + } + + &.phone { + display: none; + @media #{$tablet} { + margin: 0 auto; + border-top: 1px solid $grey-4; + display: block; + } + } } .btnSwitch { position: fixed; left: 50%; - bottom: 0; + bottom: $footer-height + 5px; transform: translate(-50%, -50%); margin: 0 auto; display: none; @@ -91,200 +132,25 @@ display: block; opacity: 0.8; z-index: $btn-phone-switch-map-list-z-index; - margin-bottom: 60px; } -} - -#body { - background-color: $grey-6; -} - -.content { - min-height: 450px; - background-color: $white; - margin-left: 25%; - margin-right: 24%; - - @media #{$tablet} { - width: 100%; - height: 100vh !important; - margin: 0; - border-bottom: $grey-4 solid 1px; - min-height: unset; - } - - p { - &.notRequired { - font-size: 14px; - margin-top: 0px; - font-style: italic; - color: $secondary-color; - - &.lg { - font-size: 17px; - } - } + @media #{$large-phone} { } } -.content-container { - width: 97%; - float: right; - height: 58vh; - padding: unset; - // height: 100%; - @media #{$tablet} { - height: 57vh !important; - } - +.loader-gif { @media #{$desktop} { - height: 100%; - } - - ::ng-deep .structure-card .structure { - margin-right: 16px; - } - ::ng-deep .structure-card:last-child .structure { - border-bottom: unset !important; + width: 20%; } -} - -::ng-deep #search-address { - width: 400px !important; - @media #{$phone} { - width: 250px !important; - } -} - -.progress-container { - margin-top: 1%; - margin-left: 25.5%; - width: 50%; - @media #{$tablet} { - margin: 0 16px; - width: calc(100% - 32px); + @media #{$large-desktop} { + width: 20%; } - .progressBar { - height: #{$progressBar-height}; - progress { - height: 6px; - border-radius: 7px; - &::-webkit-progress-bar { - background-color: $white-1; - } - &::-webkit-progress-value { - background-color: $secondary-color; - border-radius: 12px; - } - &.validate { - &::-webkit-progress-value { - background-color: $green-1; - } - } - } - } -} - -.title { - margin-top: 20px; - padding-bottom: 3%; -} - -.last-page { - width: 96%; - margin-left: 2%; -} - -.page { - float: left; - padding-top: 2%; - padding-bottom: 5%; - - textarea { - margin-top: 1%; - } - - .textarea-char { - font-style: italic; - color: $grey-3; - } - - .section { - margin-top: 0.5%; - } - - @media #{$tablet} { - width: calc(100vw - 32px); - } -} - -.left-pane { - width: 100%; - height: 100%; - overflow: auto; - overflow-x: hidden; - @media #{$tablet} { + @media #{$large-phone} { width: 100%; - min-width: unset; } -} - -.carto { - display: flex; - float: left; - min-height: 500px; - width: 100%; - border-bottom: $grey-4 solid 1px; - - @media #{$tablet} { - min-height: 50vh; - } - - .left-col { - padding-left: 16px; - margin-left: 1%; - background-color: $white; - padding-right: 16px; - width: 30%; - @media #{$tablet} { - width: 100%; - min-width: unset; - height: 100vh; - &.mapPhone { - display: none !important; - } - } - } - - .right-col { - width: 67%; - padding-left: 2%; - padding-right: 2%; - margin-bottom: 2%; - @media #{$tablet} { - display: none; - height: 100vh; - &.mapPhone { - display: block; - } - width: 100%; - padding: 0; - } - } - - .filters { - margin-bottom: 1%; - margin-top: 7%; - .filters-title { - color: $grey-3; - } + @media #{$small-phone} { + width: 100%; } -} - -input { - width: 400px; - &.email-placeholder::placeholder { - color: $white-2; - font-style: italic; + @media #{$phone} { + width: 100%; } } diff --git a/src/app/form/orientation-form/orientation-form.component.ts b/src/app/form/orientation-form/orientation-form.component.ts index 7f6b8721d..59b8b6513 100644 --- a/src/app/form/orientation-form/orientation-form.component.ts +++ b/src/app/form/orientation-form/orientation-form.component.ts @@ -16,8 +16,6 @@ import { Filter } from '../../structure-list/models/filter.model'; import { Module } from '../../structure-list/models/module.model'; import { SearchService } from '../../structure-list/services/search.service'; import { PageTypeEnum } from './pageType.enum'; -import { Utils } from '../../utils/utils'; -import { CustomRegExp } from '../../utils/CustomRegExp'; @Component({ selector: 'app-orientation-form', @@ -32,9 +30,6 @@ export class OrientationFormComponent implements OnInit { public isMapPhone = false; public isLoading = false; - // Map auto locate with address - public userLocation = []; - public orientationForm: FormGroup; // Page and progress var @@ -57,11 +52,11 @@ export class OrientationFormComponent implements OnInit { public numberAssistanceChecked; public filters: Filter[] = []; + public uncheckedFilters: Filter[] = []; public equipments: Module[] = []; public assistance: Module[] = []; public formation: Module[] = []; - public selectedFormations: Category[] = []; public baseSkillssReferentiel: Category; public accessRightsReferentiel: Category; public digitalCultureSecuritysReferentiel: Category; @@ -86,8 +81,7 @@ export class OrientationFormComponent implements OnInit { private searchService: SearchService, private structureService: StructureService, private geoJsonService: GeojsonService, - private meta: Meta, - public utils: Utils + private meta: Meta ) {} ngOnInit(): void { @@ -108,7 +102,6 @@ export class OrientationFormComponent implements OnInit { }); const categs = await this.searchService.getCategoriesTraining().toPromise(); categs.forEach((categ) => { - this.selectedFormations.push(categ); categ.modules.forEach((module) => { this.formation.push(module); }); @@ -164,15 +157,8 @@ export class OrientationFormComponent implements OnInit { commune: new FormControl('', Validators.required), }), structureAccompaniment: new FormControl(orientationFormFilters.structureAccompaniment, Validators.required), - contactAccompanimentPhone: new FormControl( - orientationFormFilters.contactAccompanimentPhone, - Validators.pattern(CustomRegExp.PHONE) - ), - contactAccompanimentEmail: new FormControl( - orientationFormFilters.contactAccompanimentEmail, - Validators.pattern(CustomRegExp.EMAIL) - ), - beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName, Validators.required), + contactAccompaniment: new FormControl(orientationFormFilters.contactAccompaniment), + beneficiaryName: new FormControl(orientationFormFilters.beneficiaryName), beneficiaryNeedCommentary: new FormControl(orientationFormFilters.beneficiaryNeedCommentary), }); } @@ -190,18 +176,31 @@ export class OrientationFormComponent implements OnInit { if (this.currentPage === this.nbPagesForm - 1) { this.validateForm(); } else { + if ( + this.currentPage === this.pageTypeEnum.beneficiaryNeed && + this.orientationForm.get('assistance').value.length + this.orientationForm.get('formation').value.length == 0 && + this.orientationForm.get('equipments').value.length > 0 + ) { + this.noPassNumeric = true; + this.getOrientationControl('passNumeric').setValue(false); + + this.currentPage++; + this.progressStatus += 100 / this.nbPagesForm; + } this.currentPage++; this.progressStatus += 100 / this.nbPagesForm; this.updatePageValid(); - document.getElementsByClassName('content')[0].scrollTo(0, 0); } } public previousPage(): void { // Check if going to the first page if (this.currentPage === 0) { - this.previousUrl(); + //go back to home ? previous page } else { + if (this.currentPage === this.pageTypeEnum.beneficiaryInfo && this.noPassNumeric) { + this.currentPage--; + } this.currentPage--; this.progressStatus -= 100 / this.nbPagesForm; this.setStructuresAndCoord(); @@ -232,24 +231,19 @@ export class OrientationFormComponent implements OnInit { this.orientationForm.get('formation').value.length > 0, }; - this.pagesValidation[PageTypeEnum.beneficiaryInfo] = { - valid: - this.getOrientationControl('passNumeric').value != null && - this.getOrientationControl('beneficiaryName').value && - this.getOrientationControl('beneficiaryName').value.length != 0, + this.pagesValidation[PageTypeEnum.beneficiaryPassNumeric] = { + valid: this.getOrientationControl('passNumeric').valid, }; + this.pagesValidation[PageTypeEnum.beneficiaryInfo] = { valid: this.orientationForm.get('address').valid }; this.pagesValidation[PageTypeEnum.beneficiaryAccompaniment] = { valid: this.getOrientationControl('structureAccompaniment').valid && - this.getOrientationControl('contactAccompanimentPhone').valid && - this.getOrientationControl('contactAccompanimentEmail').valid, + this.getOrientationControl('contactAccompaniment').valid && + this.getOrientationControl('beneficiaryName').valid, }; this.pagesValidation[PageTypeEnum.beneficiaryNeedCommentary] = { valid: this.getOrientationControl('beneficiaryNeedCommentary').valid, }; - this.pagesValidation[PageTypeEnum.beneficiaryAddress] = { - valid: true, - }; this.pagesValidation[PageTypeEnum.printResults] = { valid: true }; this.pagesValidation[PageTypeEnum.structuresSelection] = { valid: this.structuresToPrint.length > 0 }; @@ -298,18 +292,7 @@ export class OrientationFormComponent implements OnInit { } public updateChoice(choice: string, controlName: string): void { - if (choice == null) this.unCheckAll(controlName); - else this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice); - } - - public isEmpty(formControlName: string): boolean { - const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray; - return formArray.length < 1; - } - - public unCheckAll(formControlName: string) { - const formArray: FormArray = this.orientationForm.get(formControlName) as FormArray; - formArray.clear(); + this.onCheckChange(!this.isInArray(choice, controlName), controlName, choice); } public onCheckChange(event: boolean, formControlName: string, value: string): void { @@ -339,10 +322,8 @@ export class OrientationFormComponent implements OnInit { this.getOrientationControl('address').get('numero').setValue(address.numero); this.getOrientationControl('address').get('street').setValue(address.street); this.getOrientationControl('address').get('commune').setValue(address.commune); - this.userLocation = address.coordinates; } else { this.orientationForm.get('address').reset(); - this.userLocation = null; } this.setValidationsForm(); } @@ -352,13 +333,8 @@ export class OrientationFormComponent implements OnInit { this.setValidationsForm(); } - public setContactAccompanimentPhone(phone: string): void { - this.getOrientationControl('contactAccompanimentPhone').setValue(this.utils.modifyPhoneValue(phone)); - this.setValidationsForm(); - } - - public setContactAccompanimentEmail(email: string): void { - this.getOrientationControl('contactAccompanimentEmail').setValue(email); + public setContactAccompaniment(contact: string): void { + this.getOrientationControl('contactAccompaniment').setValue(contact); this.setValidationsForm(); } @@ -389,7 +365,7 @@ export class OrientationFormComponent implements OnInit { this.filters.push(new Filter('equipmentsAndServices', element, this.findEquipmentName(element))); }); this.orientationForm.get('formation').value.forEach((element) => { - this.findTrainingCategoryForSkill(element); + this.orientationForm.get('formation'); // Put higher cat like accessRight and so on here this.filters.push( new Filter( @@ -399,6 +375,15 @@ export class OrientationFormComponent implements OnInit { ) ); }); + + // todo - fix + this.removeDoublonFilters(); + } + + public removeDoublonFilters(): void { + this.uncheckedFilters.forEach((elem) => { + this.filters = this.filters.filter((filter) => filter.value != elem.value); + }); this.setStructuresAndCoord(); } @@ -425,10 +410,34 @@ export class OrientationFormComponent implements OnInit { public findTrainingCategoryForSkill(skill): any { let infos = { categ: '', name: '' }; - this.selectedFormations.forEach((elem) => { + this.baseSkillssReferentiel.modules.forEach((elem) => { if (elem.id === skill) { - infos.categ = ''; - infos.name = elem.name; + infos.categ = this.baseSkillssReferentiel.id; + infos.name = elem.text; + } + }); + this.accessRightsReferentiel.modules.forEach((elem) => { + if (elem.id === skill) { + infos.categ = this.accessRightsReferentiel.id; + infos.name = elem.text; + } + }); + this.parentingHelpsReferentiel.modules.forEach((elem) => { + if (elem.id === skill) { + infos.categ = this.parentingHelpsReferentiel.id; + infos.name = elem.text; + } + }); + this.socialAndProfessionalsReferentiel.modules.forEach((elem) => { + if (elem.id === skill) { + infos.categ = this.socialAndProfessionalsReferentiel.id; + infos.name = elem.text; + } + }); + this.digitalCultureSecuritysReferentiel.modules.forEach((elem) => { + if (elem.id === skill) { + infos.categ = this.digitalCultureSecuritysReferentiel.id; + infos.name = elem.text; } }); return infos; @@ -438,7 +447,7 @@ export class OrientationFormComponent implements OnInit { this.geoJsonService .getCoord(this.orientationForm.value.address.numero, this.orientationForm.value.address.street, '69000') .subscribe((res) => { - this.structureService.getStructures(this.filters.filter((elem) => elem.checked == true)).subscribe((data) => { + this.structureService.getStructures(this.filters).subscribe((data) => { data.map((structure) => { structure.distance = parseInt( this.geoJsonService.getDistance( @@ -492,10 +501,15 @@ export class OrientationFormComponent implements OnInit { this.showStructureDetails = false; } - public checkFilter(filter: Filter): void { - this.filters.forEach((element) => { - if (element == filter) element.checked = !element.checked; - }); + public removeFilter(filter: Filter): void { + this.filters = this.filters.filter((elem) => elem != filter); + this.uncheckedFilters.push(filter); + this.setStructuresAndCoord(); + } + + public restoreFilter(filter: Filter): void { + this.uncheckedFilters = this.uncheckedFilters.filter((elem) => elem != filter); + this.filters.push(filter); this.setStructuresAndCoord(); } diff --git a/src/app/form/orientation-form/pageType.enum.ts b/src/app/form/orientation-form/pageType.enum.ts index e7f68bb8e..1a0fc933a 100644 --- a/src/app/form/orientation-form/pageType.enum.ts +++ b/src/app/form/orientation-form/pageType.enum.ts @@ -1,9 +1,9 @@ export enum PageTypeEnum { beneficiaryNeed, + beneficiaryPassNumeric, beneficiaryInfo, + structuresSelection, beneficiaryAccompaniment, beneficiaryNeedCommentary, - beneficiaryAddress, - structuresSelection, printResults, } diff --git a/src/app/form/structure-form/form.component.scss b/src/app/form/structure-form/form.component.scss index 1fabc2e2c..79d9304e1 100644 --- a/src/app/form/structure-form/form.component.scss +++ b/src/app/form/structure-form/form.component.scss @@ -19,7 +19,7 @@ h4 { } .form { - background: $white; + background: white; width: 100vw; height: calc(var(--vh, 1vh) * 100 - #{$header-height} - #{$footer-height}); top: #{$header-height}; @@ -46,7 +46,7 @@ h4 { display: none; @media #{$tablet} { margin: 0 auto; - //border-top: 1px solid $grey-4; + border-top: 1px solid $grey-4; display: block; } } @@ -96,6 +96,7 @@ h4 { ) !important; // -1px because of header border } @media #{$tablet} { + height: 100%; &.editMode { .page { height: calc( @@ -130,6 +131,11 @@ h4 { .page { max-width: 960px; margin: auto; + @media #{$tablet} { + height: calc( + 100vh - #{$header-height-phone} - #{$progressBar-height} - #{$footer-height-phone} - 1px + ); // -1px because of header border + } height: auto; color: $grey-1; &.home { @@ -301,7 +307,7 @@ h4 { input { &.email-placeholder::placeholder { - color: $white-2; + color: #cacccb; font-style: italic; } &.phone { @@ -329,9 +335,6 @@ img { border: 1px solid $grey-4; border-radius: 4px; margin-bottom: 13px; - @media #{$small-phone} { - width: 95% !important; - } @media #{$tablet} { width: 296px; } diff --git a/src/app/form/structure-form/form.component.ts b/src/app/form/structure-form/form.component.ts index d0b4d04ad..c454231a2 100644 --- a/src/app/form/structure-form/form.component.ts +++ b/src/app/form/structure-form/form.component.ts @@ -744,7 +744,6 @@ export class FormComponent implements OnInit { } else { this.currentPage++; this.progressStatus += 100 / this.nbPagesForm; - document.getElementsByClassName('content')[0].scrollTo(0, 0); this.updatePageValid(); } } diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index bdf85fe6b..51dd7c81d 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -38,12 +38,8 @@ <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw"> <a routerLink="/news" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Actualités</a> <a routerLink="/acteurs" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Cartographie de acteurs</a> - <a routerLink="/orientation" [routerLinkActive]="'active'" (click)="closeMenu()" i18n - >Orienter un bénéficiaire</a - > - <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" (click)="closeMenu()" i18n - >Qui sommes-nous ?</a - > + <a routerLink="/orientation" [routerLinkActive]="'active'" i18n>Orienter un bénéficiaire</a> + <a routerLink="/page/qui-sommes-nous" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a> <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'" (click)="closeMenu()">Administration</a> </div> </div> diff --git a/src/app/map/components/layers.enum.ts b/src/app/map/components/layers.enum.ts deleted file mode 100644 index 3878af93c..000000000 --- a/src/app/map/components/layers.enum.ts +++ /dev/null @@ -1,5 +0,0 @@ -export enum Layers { - mdm = 'mdm', - user = 'user', - structure = 'structure', -} diff --git a/src/app/map/components/map.component.html b/src/app/map/components/map.component.html index 1c4483bc5..3af397dbb 100644 --- a/src/app/map/components/map.component.html +++ b/src/app/map/components/map.component.html @@ -1,10 +1,3 @@ <div class="map-wrapper"> - <div - id="map" - class="body-wrap" - [ngClass]="{ orientation: isOrientationForm }" - leaflet - [leafletOptions]="mapOptions" - (leafletMapReady)="onMapReady($event)" - ></div> + <div id="map" class="body-wrap" leaflet [leafletOptions]="mapOptions" (leafletMapReady)="onMapReady($event)"></div> </div> diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss index bac0c2f7f..a78caaa5c 100644 --- a/src/app/map/components/map.component.scss +++ b/src/app/map/components/map.component.scss @@ -23,9 +23,6 @@ @media #{$large-phone} { height: calc(100vh - #{$header-height} - 28px); } - &.orientation { - height: calc(96vh - #{$header-height} - #{$footer-height} - 68px); - } } ::ng-deep .leaflet-popup-close-button { @@ -135,33 +132,15 @@ .pop-up { text-align: center; padding-top: 20px; - &.orientation { - padding: 0; - text-align: -webkit-center; - } button { @include btn-search-filter; @include cn-bold-14; font-size: 16px; } - - .orientationButton { - display: flex; - padding: 10px 20px; - border-radius: 20px; - margin: 0 4px; - color: $black; - background-color: $white; - border: solid 1px $grey-3; - min-width: 120px; - } } span { - margin-right: 4px; - &.eye { - margin-right: 11px; - } + display: inline-block; } } ::ng-deep .leaflet-popup-content-wrapper { diff --git a/src/app/map/components/map.component.ts b/src/app/map/components/map.component.ts index f844d5d69..de1990809 100644 --- a/src/app/map/components/map.component.ts +++ b/src/app/map/components/map.component.ts @@ -1,4 +1,4 @@ -import { Component, EventEmitter, HostListener, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; import { latLng, MapOptions, geoJSON, tileLayer, Map, latLngBounds, layerGroup } from 'leaflet'; import { Structure } from '../../models/structure.model'; import { GeojsonService } from '../../services/geojson.service'; @@ -9,7 +9,6 @@ import { MarkerType } from './markerType.enum'; import metropole from '../../../assets/geojson/metropole.json'; import L from 'leaflet'; import 'leaflet.locatecontrol'; -import { ZoomLevel } from './zoomLevel.enum'; @Component({ selector: 'app-map', @@ -17,16 +16,14 @@ import { ZoomLevel } from './zoomLevel.enum'; styleUrls: ['./map.component.scss'], }) export class MapComponent implements OnChanges { - @Input() public isOrientationForm = false; @Input() public structures: Structure[] = []; @Input() public structuresToPrint: Structure[] = []; @Input() public toogleToolTipId: string; @Input() public selectedMarkerId: string; @Input() public isMapPhone: boolean; @Input() public locate = false; - @Input() public searchedValue: string | [number, number]; - @Output() public selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); - @Output() public onOrientationButtonClick: EventEmitter<Structure> = new EventEmitter<Structure>(); + @Input() public searchedValue: string; + @Output() selectedStructure: EventEmitter<Structure> = new EventEmitter<Structure>(); @Output() locatationTrigger: EventEmitter<boolean> = new EventEmitter<boolean>(); private lc; // Locate control private currentStructure: Structure; @@ -48,10 +45,6 @@ export class MapComponent implements OnChanges { if (event.target.classList.contains('btnShowDetails')) { this.selectedStructure.emit(this.currentStructure); } - if (event.target.classList.contains('add')) { - this.onOrientationButtonClick.emit(this.currentStructure); - this.getStructuresPositions(this.structures); - } } constructor(private mapService: MapService, private geoJsonService: GeojsonService) { @@ -126,7 +119,7 @@ export class MapComponent implements OnChanges { if (changes.structuresToPrint) { if (changes.structuresToPrint.currentValue < changes.structuresToPrint.previousValue) { - this.mapService?.setUnactiveMarker( + this.mapService.setUnactiveMarker( this.toogleToolTipId, this.getMarkerTypeByStructureId(changes.structuresToPrint.previousValue) ); @@ -151,15 +144,6 @@ export class MapComponent implements OnChanges { ); } - /** - * Create a user position marcker and center the map on it with a zoom level defined in ZoomLevel - * @param coords {[number, number]} Map center position - */ - public centerOnCoordinates(coords: [number, number]): void { - this.mapService.createMarker(coords[1], coords[0], MarkerType.user, 'userLocation').addTo(this.map); - this.map.setView(new L.LatLng(coords[1], coords[0]), ZoomLevel.userPosition); - } - /** * Get structures positions and add marker corresponding to those positons on the map */ @@ -190,7 +174,7 @@ export class MapComponent implements OnChanges { * @returns {MarkerType} */ private getMarkerType(structure: Structure): MarkerType { - return structure?.labelsQualifications?.includes('conseillerNumFranceServices') + return structure.labelsQualifications.includes('conseillerNumFranceServices') ? MarkerType.conseillerFrance : MarkerType.structure; } @@ -246,18 +230,12 @@ export class MapComponent implements OnChanges { '</h1>' + '<p>' + structure.getLabelTypeStructure() + - '</p>' + - (this.isOrientationForm - ? '' - : '<div>' + - '<span class="ico-dot-' + - cssAvailabilityClass + - '"></span><span>' + - structure.openDisplay() + - '</span></div>') + - (this.isOrientationForm - ? '<div class="pop-up orientation"><button type="button" class="orientationButton btnShowDetails"><span class="ico-gg-eye-alt eye"></span>Voir</button></div>' - : '<div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>') + '</p><div>' + + '<span class="ico-dot-' + + cssAvailabilityClass + + '"></span><span>' + + structure.openDisplay() + + '</span></div><div class="pop-up"><button type="button" class="btnShowDetails">Voir</button></div>' ); } @@ -276,12 +254,6 @@ export class MapComponent implements OnChanges { this.map.on('locationfound', () => { this.locatationTrigger.emit(true); }); - - if (this.searchedValue) { - if (Array.isArray(this.searchedValue)) { - this.centerOnCoordinates(this.searchedValue); - } - } } /** @@ -296,15 +268,15 @@ export class MapComponent implements OnChanges { layerGroup(); const carteLayer = tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { attribution: '© <a href="https://carto.com/attributions">CARTO</a>', - maxZoom: ZoomLevel.max, + maxZoom: 19, }); // Center is set on townhall // Zoom is blocked on 11 to prevent people to zoom out from metropole this.mapOptions = { center: latLng(45.764043, 4.835659), - maxZoom: ZoomLevel.max, - zoom: ZoomLevel.regular, - minZoom: ZoomLevel.min, + maxZoom: 19, + zoom: 12, + minZoom: 10, layers: [carteLayer], }; } diff --git a/src/app/map/components/markerType.enum.ts b/src/app/map/components/markerType.enum.ts index ade600852..9d6c395c7 100644 --- a/src/app/map/components/markerType.enum.ts +++ b/src/app/map/components/markerType.enum.ts @@ -2,5 +2,4 @@ export enum MarkerType { structure = 0, mdm = 1, conseillerFrance = 2, - user = 3, } diff --git a/src/app/map/components/zoomLevel.enum.ts b/src/app/map/components/zoomLevel.enum.ts deleted file mode 100644 index fe020b772..000000000 --- a/src/app/map/components/zoomLevel.enum.ts +++ /dev/null @@ -1,6 +0,0 @@ -export enum ZoomLevel { - min = 10, - regular = 12, - userPosition = 15, - max = 19, -} diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts index c65d92585..93b07319c 100644 --- a/src/app/map/services/map.service.ts +++ b/src/app/map/services/map.service.ts @@ -1,15 +1,17 @@ import { Injectable } from '@angular/core'; import { DivIcon, divIcon, Map, Marker } from 'leaflet'; -import { Layers } from '../components/layers.enum'; import { MarkerType } from '../components/markerType.enum'; import { markerIcon, markerIconActive, markerIconAddedToList, + markerIconFranceService, + markerIconFranceServiceActive, + markerIconFranceServiceAddedToList, + markerIconFranceServiceHover, markerIconHover, markerIconMdm, markerIconMdmActive, - userLocationIcon, } from './marker'; @Injectable({ providedIn: 'root', @@ -49,63 +51,51 @@ export class MapService { private getLayerAttributton(markerType: MarkerType): string { if (markerType === MarkerType.mdm) { - return Layers.mdm; - } else if (markerType === MarkerType.user) { - return Layers.user; + return 'mdm'; } else { - return Layers.structure; + return 'structure'; } } // Note: Marke IconFranceService has been removed temporarly on order to rework on buisness needs. // This comment is applied for the next 4 methods private getMarkerIcon(markerType: MarkerType): DivIcon { - switch (markerType) { - case MarkerType.mdm: - return markerIconMdm; - case MarkerType.conseillerFrance: - return markerIcon; - case MarkerType.user: - return userLocationIcon; - default: - return markerIcon; + if (markerType === MarkerType.mdm) { + return markerIconMdm; + } else if (markerType === MarkerType.conseillerFrance) { + // return markerIconFranceService; + return markerIcon; + } else { + return markerIcon; } } private getActiveMarkerIcon(markerType: MarkerType): DivIcon { - switch (markerType) { - case MarkerType.mdm: - return markerIconMdmActive; - case MarkerType.conseillerFrance: - // return markerIconFranceServiceActive; - return markerIconActive; - case MarkerType.user: - return userLocationIcon; - default: - return markerIconActive; + if (markerType === MarkerType.mdm) { + return markerIconMdmActive; + } else if (markerType === MarkerType.conseillerFrance) { + // return markerIconFranceServiceActive; + return markerIconActive; + } else { + return markerIconActive; } } private getAddedToListMarkerIcon(markerType: MarkerType): DivIcon { - switch (markerType) { - case MarkerType.conseillerFrance: - // return markerIconFranceServiceAddedToList; - return markerIconAddedToList; - case MarkerType.user: - return userLocationIcon; - default: - return markerIconAddedToList; + if (markerType === MarkerType.conseillerFrance) { + // return markerIconFranceServiceAddedToList; + return markerIconAddedToList; + } else { + return markerIconAddedToList; } } private getHoverMarkerIcon(markerType: MarkerType): DivIcon { - switch (markerType) { - case MarkerType.conseillerFrance: - return markerIconHover; - case MarkerType.user: - return userLocationIcon; - default: - return markerIconHover; + if (markerType === MarkerType.conseillerFrance) { + // return markerIconFranceServiceHover; + return markerIconHover; + } else { + return markerIconHover; } } @@ -171,7 +161,7 @@ export class MapService { MapService.markersList = {}; if (map) { map.eachLayer((layer) => { - if (layer instanceof Marker && layer.options.attribution == Layers.structure) { + if (layer instanceof Marker && layer.options.attribution !== 'mdm') { map.removeLayer(layer); } }); diff --git a/src/app/map/services/marker.ts b/src/app/map/services/marker.ts index e458b0b9d..fb940ba4c 100644 --- a/src/app/map/services/marker.ts +++ b/src/app/map/services/marker.ts @@ -28,12 +28,6 @@ export const markerIconAddedToList = divIcon({ iconAnchor: [24, 48], popupAnchor: [0, -48], }); -export const userLocationIcon = divIcon({ - className: null, - html: '<svg width="34" height="34"><use xlink:href="assets/ico/sprite.svg#user-location"></use></svg>', - iconSize: [34, 34], - iconAnchor: [17, 0], -}); export const markerIconMdm = divIcon({ className: null, html: diff --git a/src/app/models/address.model.ts b/src/app/models/address.model.ts index 0b30ddc1c..d04d83abe 100644 --- a/src/app/models/address.model.ts +++ b/src/app/models/address.model.ts @@ -2,5 +2,4 @@ export class Address { numero: string = null; street: string = null; commune: string = null; - coordinates? = []; } diff --git a/src/app/models/orientation-filter.object.ts b/src/app/models/orientation-filter.object.ts index 49fe9ca54..48a52e4ac 100644 --- a/src/app/models/orientation-filter.object.ts +++ b/src/app/models/orientation-filter.object.ts @@ -7,8 +7,7 @@ export class OrientationFormFilters { handicap: boolean; passNumeric: boolean; structureAccompaniment: string; - contactAccompanimentPhone: string; - contactAccompanimentEmail: string; + contactAccompaniment: string; beneficiaryName: string; beneficiaryNeedCommentary: string; address: Address; diff --git a/src/app/newsletter-subscription/newsletter-subscription.component.scss b/src/app/newsletter-subscription/newsletter-subscription.component.scss index f3c913b2c..4bf4d917c 100644 --- a/src/app/newsletter-subscription/newsletter-subscription.component.scss +++ b/src/app/newsletter-subscription/newsletter-subscription.component.scss @@ -10,7 +10,7 @@ } .form-input { - background-color: $white; + background-color: white; width: 100%; } diff --git a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts index a1115c3ac..10f2efed1 100644 --- a/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts +++ b/src/app/shared/components/address-autocomplete/address-autocomplete.component.ts @@ -59,7 +59,6 @@ export class AddressAutocompleteComponent implements OnInit { address.numero = hit.properties.housenumber ? hit.properties.housenumber : null; address.street = hit.properties.street; address.commune = hit.properties.city; - address.coordinates = hit.geometry.coordinates; const value = this.parseHitToAddress(hit); // Set input value this.searchAddress.nativeElement.value = value; diff --git a/src/app/shared/components/svg-icon/svg-icon.component.scss b/src/app/shared/components/svg-icon/svg-icon.component.scss index 0ce39a373..bed7e3e0d 100644 --- a/src/app/shared/components/svg-icon/svg-icon.component.scss +++ b/src/app/shared/components/svg-icon/svg-icon.component.scss @@ -51,10 +51,6 @@ fill: $grey-1; stroke: $grey-1; } - &.green { - fill: $green-1; - stroke: $green-1; - } } svg { diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html index eae83fda6..bfe44fd1a 100644 --- a/src/app/structure-list/components/card/card.component.html +++ b/src/app/structure-list/components/card/card.component.html @@ -1,57 +1,42 @@ -<div - class="structure" - fxLayout="column" - (click)="cardClicked()" - (mouseenter)="cardHover()" - [ngClass]="{ orientation: isOrientation }" -> - <div class="left"> - <div fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px"> - <div fxLayout="column" fxLayoutAlign="end"> - <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span> - <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span> +<div class="structure" fxLayout="column" (click)="cardClicked()" (mouseenter)="cardHover()"> + <div class="headerStructure" fxLayout="row" fxLayoutAlign="space-between baseline" fxLayoutGap="16px"> + <div fxLayout="column" fxLayoutAlign="end"> + <span class="structure-name" [ngClass]="{ notClaimed: !isClaimed }">{{ structure.structureName }}</span> + <span class="typeStructure">{{ structure.getLabelTypeStructure() }}</span> + </div> + <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end"> + <div *ngIf="!isOrientation"> + {{ this.structure.address.commune }} </div> - <div class="distanceStructure" fxLayout="column" fxLayoutAlign="none end"> - <div *ngIf="!isOrientation"> - {{ this.structure.address.commune }} - </div> + <div + fxLayout="row" + *ngIf="isOrientation && !isSelected" + class="selection-button selected" + (click)="cardAddToList(); $event.stopPropagation()" + > + <app-svg-icon [type]="'ico'" [icon]="'add'" [iconColor]="'black'"></app-svg-icon>ajouter à la liste + </div> + <div + fxLayout="row" + *ngIf="isOrientation && isSelected" + class="selection-button to-select" + (click)="cardAddToList(); $event.stopPropagation()" + > + <app-svg-icon [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon> + retirer de la liste + </div> + <div *ngIf="structure.distance"> + {{ this.formatDistance() }} </div> - </div> - <div - fxLayout="row" - fxLayoutAlign="none flex-end" - fxLayoutGap="7px" - *ngIf="structure.hasEquipments() && !isOrientation" - > - <app-svg-icon - *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)" - [type]="'ico'" - [iconColor]="'grey'" - [icon]="structure.getEquipmentsIcon(equipement)" - [title]="structure.getEquipmentsTitle(equipement)" - ></app-svg-icon> - </div> - <div class="distance" *ngIf="structure.distance"> - {{ this.formatDistance() }} </div> </div> - <div class="actions right" *ngIf="isOrientation"> - <div - fxLayout="row" - *ngIf="!isSelected" - class="selection-button selected" - (click)="cardAddToList(); $event.stopPropagation()" - > - <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'add'" [iconColor]="'green'"></app-svg-icon>Ajouter - </div> - <div - fxLayout="row" - *ngIf="isSelected" - class="selection-button to-select" - (click)="cardAddToList(); $event.stopPropagation()" - > - <app-svg-icon class="add-icon" [type]="'ico'" [icon]="'validate'" [iconColor]="'white'"></app-svg-icon> - Ajouté - </div> + <div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="7px" *ngIf="structure.hasEquipments()"> + <app-svg-icon + *ngFor="let equipement of filterOnlyEquipments(structure.equipmentsAndServices)" + [type]="'ico'" + [iconColor]="'grey'" + [icon]="structure.getEquipmentsIcon(equipement)" + [title]="structure.getEquipmentsTitle(equipement)" + ></app-svg-icon> </div> </div> diff --git a/src/app/structure-list/components/card/card.component.scss b/src/app/structure-list/components/card/card.component.scss index 220adda58..7b5fb40ae 100644 --- a/src/app/structure-list/components/card/card.component.scss +++ b/src/app/structure-list/components/card/card.component.scss @@ -30,6 +30,9 @@ color: $grey-3; width: 50%; } + &:last-child { + border-bottom: none; + } } .selection-button { @@ -37,44 +40,22 @@ font-weight: bold; justify-content: center; align-items: center; - min-width: 120px; - height: 40px; + min-width: 180px; + height: 30px; border-radius: 20px; + padding: 3px 10px; + margin-bottom: 10px; } .selected { - border: solid 1px $grey-3; + border-style: solid; + border-width: 2px; background-color: $white; + border-color: $black; color: $black; } .to-select { - color: $white; + color: white; border-style: none; background: #47c562; } - -.distance { - color: $grey-3; -} - -.add-icon { - color: $green-1; -} - -.orientation { - flex-direction: row !important; - - .left { - display: flex; - flex-direction: column; - justify-content: space-between; - width: 70%; - } - - .right { - margin-top: 6%; - @media #{$large-phone} { - margin-left: unset; - } - } -} diff --git a/src/app/structure-list/components/structure-details/structure-details.component.scss b/src/app/structure-list/components/structure-details/structure-details.component.scss index 2b5a439e1..de1fd0ab8 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.scss +++ b/src/app/structure-list/components/structure-details/structure-details.component.scss @@ -22,13 +22,13 @@ a { padding: 0px 24px; overflow: auto; @media #{$tablet} { + width: calc(100% - 2 * 24px); + position: inherit; + height: 100%; + overflow: unset; .printButton { display: none !important; } - - .ico-close { - margin-left: 16px; - } } .printButton { margin-right: 75px; diff --git a/src/app/structure-list/components/structure-details/structure-details.component.ts b/src/app/structure-list/components/structure-details/structure-details.component.ts index cae5b0b60..5ccbc64f4 100644 --- a/src/app/structure-list/components/structure-details/structure-details.component.ts +++ b/src/app/structure-list/components/structure-details/structure-details.component.ts @@ -94,6 +94,7 @@ export class StructureDetailsComponent implements OnInit { this.socialAndProfessionalsReferentiel = referentiel; } }); + this.setServiceCategories(); if (this.printMode) { this.printService.onDataReady(); } @@ -249,6 +250,24 @@ export class StructureDetailsComponent implements OnInit { } } + public setServiceCategories(): void { + this.baseSkills = this.structure.baseSkills.map((skill) => + _.find(this.baseSkillssReferentiel.modules, { id: skill }) + ); + this.accessRights = this.structure.accessRight.map((rights) => + _.find(this.accessRightsReferentiel.modules, { id: rights }) + ); + this.parentingHelp = this.structure.parentingHelp.map((help) => + _.find(this.parentingHelpsReferentiel.modules, { id: help }) + ); + this.socialAndProfessional = this.structure.socialAndProfessional.map((skill) => + _.find(this.socialAndProfessionalsReferentiel.modules, { id: skill }) + ); + this.digitalCultureSecurity = this.structure.digitalCultureSecurity.map((skill) => + _.find(this.digitalCultureSecuritysReferentiel.modules, { id: skill }) + ); + } + public keepOriginalOrder = (a, b) => a.key; public isBaseSkills(): boolean { diff --git a/src/app/structure-list/models/category.model.ts b/src/app/structure-list/models/category.model.ts index b130dc133..2aa78bbf3 100644 --- a/src/app/structure-list/models/category.model.ts +++ b/src/app/structure-list/models/category.model.ts @@ -2,7 +2,6 @@ import { Module } from './module.model'; export class Category { name: string; - surname: string; id: string; modules: Module[]; diff --git a/src/app/structure-list/models/filter.model.ts b/src/app/structure-list/models/filter.model.ts index 25d7ff825..9ca536124 100644 --- a/src/app/structure-list/models/filter.model.ts +++ b/src/app/structure-list/models/filter.model.ts @@ -2,12 +2,10 @@ export class Filter { name: string; value: string; text?: string; - checked: boolean; constructor(name: string, value: any, text?: string) { this.name = name; this.value = value.toString(); this.text = text; - this.checked = true; } } diff --git a/src/app/structure-list/structure-list.component.html b/src/app/structure-list/structure-list.component.html index 9f2fc1b20..1b39ec645 100644 --- a/src/app/structure-list/structure-list.component.html +++ b/src/app/structure-list/structure-list.component.html @@ -18,7 +18,6 @@ [structure]="structure" (showDetails)="showDetails($event, filters)" (hover)="handleCardHover($event)" - class="structure-card" ></app-card> <p *ngIf="structureList && structureList.length <= 0">Il n'y a aucune réponse correspondant à votre recherche</p> </div> diff --git a/src/app/structure-list/structure-list.component.scss b/src/app/structure-list/structure-list.component.scss index 56305e76c..1817ffba9 100644 --- a/src/app/structure-list/structure-list.component.scss +++ b/src/app/structure-list/structure-list.component.scss @@ -12,16 +12,11 @@ padding-left: 9px; margin: 0 16px; } - .listCard { overflow-y: auto; padding: 0 25px; } -::ng-deep .structure-card:last-child .structure { - border-bottom: unset !important; -} - @media print { .listCard { display: none; diff --git a/src/app/utils/utils.ts b/src/app/utils/utils.ts index a949f40fd..e37ab99dd 100644 --- a/src/app/utils/utils.ts +++ b/src/app/utils/utils.ts @@ -14,15 +14,4 @@ export class Utils { form.get(controlName).setValue(phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' ')); //NOSONAR } } - - public modifyPhoneValue(phoneNumber: string): string { - // Take length of phone number without spaces. - const phoneNoSpace = phoneNumber.replace(/\s/g, ''); - // Check to refresh every 2 number. - if (phoneNoSpace.length % 2 === 0) { - // Add space every 2 number - return phoneNoSpace.replace(/(?!^)(?=(?:\d{2})+$)/g, ' '); //NOSONAR - } - return phoneNumber; - } } diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg index f159036d9..356b83c16 100644 --- a/src/assets/form/sprite.svg +++ b/src/assets/form/sprite.svg @@ -382,35 +382,5 @@ <path fill-rule="evenodd" clip-rule="evenodd" stroke="none" d="M0 9C0 8.44772 0.447715 8 1 8H21C21.5523 8 22 8.44772 22 9V23C22 23.5523 21.5523 24 21 24H14V25.6L16.3685 26.3106C16.7433 26.423 17 26.768 17 27.1593C17 27.6487 16.6033 28.0454 16.1139 28.0454H5.88612C5.39673 28.0454 5 27.6487 5 27.1593C5 26.768 5.25668 26.423 5.63149 26.3106L8 25.6V24H1C0.447716 24 0 23.5523 0 23V9ZM1 9H21V21H1V9Z" fill="#333333"/> </symbol> -<symbol id="grandLyonLaMetropole" width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_5084_112181)"> -<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/> -<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/> -<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/> -<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/> -<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/> -<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/> -<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/> -<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/> -<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/> -<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/> -<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/> -<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/> -<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/> -<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/> -<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/> -<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/> -<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/> -<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/> -<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/> -<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/> -</g> -<defs> -<clipPath id="clip0_5084_112181"> -<rect width="189" height="43" fill="white"/> -</clipPath> -</defs> -</symbol> - </svg> diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg index 81f91788f..e7b918e0f 100644 --- a/src/assets/ico/sprite.svg +++ b/src/assets/ico/sprite.svg @@ -292,13 +292,6 @@ <path fill-rule="evenodd" clip-rule="evenodd" d="M17.3405 17.1848C16.2256 17.652 15.5 18.7428 15.5 19.9517V34.6087L22.5 34.6087V30.1087C22.5 29.2802 23.1716 28.6087 24 28.6087C24.8284 28.6087 25.5 29.2802 25.5 30.1087V34.6087L32.5 34.6087V20.0123C32.5 18.7731 31.7381 17.6614 30.5823 17.2143L29.0555 16.6237C28.6291 16.4588 28.246 16.1986 27.9355 15.863L25.4183 13.1419C24.6451 12.3061 23.3312 12.2834 22.5297 13.0921L19.6982 15.9488C19.4206 16.2289 19.0906 16.4515 18.7269 16.6039L17.3405 17.1848ZM25.5 16.1087C25.5 16.9371 24.8284 17.6087 24 17.6087C23.1716 17.6087 22.5 16.9371 22.5 16.1087C22.5 15.2802 23.1716 14.6087 24 14.6087C24.8284 14.6087 25.5 15.2802 25.5 16.1087ZM18.75 27.544C18.0406 27.6631 17.5 28.2801 17.5 29.0233V30.3587H18.75V27.544ZM17.5 33.5233V30.8587H18.75V33.5233H17.5ZM19.25 33.5233V30.8587H20.5V33.5233H19.25ZM20.5 29.0233V30.3587H19.25V27.544C19.9594 27.6631 20.5 28.2801 20.5 29.0233ZM27.5 29.0233C27.5 28.2801 28.0406 27.6631 28.75 27.544V30.3587H27.5V29.0233ZM27.5 30.8587V33.5233H28.75V30.8587H27.5ZM29.25 30.8587V33.5233H30.5V30.8587H29.25ZM30.5 30.3587V29.0233C30.5 28.2801 29.9594 27.6631 29.25 27.544V30.3587H30.5ZM28.75 19.6087C28.0406 19.7277 27.5 20.3447 27.5 21.0879V22.4233H28.75V19.6087ZM27.5 25.5879V22.9233H28.75V25.5879H27.5ZM29.25 25.5879V22.9233H30.5V25.5879H29.25ZM30.5 21.0879V22.4233H29.25V19.6087C29.9594 19.7277 30.5 20.3447 30.5 21.0879ZM22.5 21.0879C22.5 20.3447 23.0406 19.7277 23.75 19.6087V22.4233H22.5V21.0879ZM22.5 22.9233V25.5879H23.75V22.9233H22.5ZM24.25 22.9233V25.5879H25.5V22.9233H24.25ZM25.5 22.4233V21.0879C25.5 20.3447 24.9594 19.7277 24.25 19.6087V22.4233H25.5ZM18.75 19.6087C18.0406 19.7277 17.5 20.3447 17.5 21.0879V22.4233H18.75V19.6087ZM17.5 25.5879V22.9233H18.75V25.5879H17.5ZM19.25 25.5879V22.9233H20.5V25.5879H19.25ZM20.5 21.0879V22.4233H19.25V19.6087C19.9594 19.7277 20.5 20.3447 20.5 21.0879Z" fill="#BD9E6A"/> </symbol> -<symbol id="user-location" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"> -<circle cx="17" cy="17" r="16.5" fill="#ED3939" fill-opacity="0.15" stroke="white"/> -<circle cx="17" cy="17" r="6" fill="#ED3939"/> -<path opacity="0.35" d="M19.625 12.9167C18.1502 12.2215 16.7083 12.0417 15.25 12.9167C16.4166 12.9167 18.7694 14.3782 19.3737 15.1918C20.5 16.7084 20.6016 19.0553 20.2083 19.3334C20.4541 19.4724 21.5026 18.3063 21.6666 17C21.8306 15.6948 21.0998 13.6119 19.625 12.9167Z" fill="white"/> -</symbol> - - <symbol id="conseillerFranceService" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"> <path d="M24.1752 4.3111L12 11.3612V25.4094L23.5247 45.3111H24.8255L36.3503 25.4094V11.3612L24.1752 4.3111Z"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M24.1752 2L38.3503 10.2083V25.9467L25.9785 47.3111H22.3718L10 25.9467V10.2082L24.1752 2ZM12 25.4094V11.3612L24.1752 4.31111L36.3503 11.3612V25.4094L24.8255 45.3111H23.5247L12 25.4094Z" fill="white"/> diff --git a/src/assets/logos/grandLyonLaMetropole.svg b/src/assets/logos/grandLyonLaMetropole.svg deleted file mode 100644 index 9d443ffa2..000000000 --- a/src/assets/logos/grandLyonLaMetropole.svg +++ /dev/null @@ -1,29 +0,0 @@ -<svg width="189" height="43" viewBox="0 0 189 43" fill="none" xmlns="http://www.w3.org/2000/svg"> -<g clip-path="url(#clip0_5084_112181)"> -<path d="M14.6188 24.1594C13.8364 25.1028 12.8909 25.8619 11.8386 26.3915C10.7863 26.921 9.64874 27.2102 8.49363 27.2418C7.33852 27.2733 6.18949 27.0467 5.11498 26.5753C4.04046 26.1039 3.06242 25.3974 2.23911 24.4978C0.0358825 22.0532 1.03355e-07 19.6802 7.15522e-08 13.6244C3.9749e-08 7.56856 0.043059 5.19162 2.23911 2.74699C3.03301 1.87136 3.97472 1.17801 5.01036 0.706612C6.04601 0.235214 7.15526 -0.00498298 8.27465 -0.000236215C12.516 -0.000236237 15.7706 3.08541 16.5278 7.82736L14.6977 7.82736C13.9801 4.14051 11.5436 1.80736 8.28541 1.80736C7.4372 1.79871 6.59591 1.97729 5.81047 2.33273C5.02504 2.68816 4.31114 3.21334 3.71031 3.87773C1.96998 5.81273 1.83722 7.86717 1.83722 13.6244C1.83722 19.3816 1.97357 21.452 3.70314 23.3671C4.30384 24.0316 5.01772 24.5569 5.80318 24.9124C6.58864 25.2678 7.43 25.4463 8.27824 25.4375C9.23644 25.4435 10.1839 25.2138 11.0526 24.765C11.9212 24.3161 12.6894 23.6592 13.3019 22.8415C14.3461 21.4122 14.7551 19.8315 14.7551 17.5382L14.7551 15.1294L8.27465 15.1294L8.27465 13.3218L16.5852 13.3218L16.5852 17.7014C16.5852 20.4885 16.0433 22.4792 14.6188 24.1753" fill="#FF0101"/> -<path d="M31.9782 2.03265L24.8554 2.03265L24.8554 12.8702L31.9782 12.8702C35.0642 12.8702 37.3033 11.1383 37.3033 7.45144C37.3033 3.76459 35.0642 2.03265 31.9782 2.03265ZM37.2674 27.0204L31.501 14.6778L24.8554 14.6778L24.8554 27.0204L23.0254 27.0204L23.0254 0.237L32.2151 0.236999C36.1622 0.236999 39.1333 2.75728 39.1333 7.42357C39.1333 11.4051 36.9624 14.0089 33.5714 14.65L39.4024 27.0324L37.2674 27.0204Z" fill="#FF0101"/> -<path d="M51.7832 2.93246L46.7308 18.6991L56.8355 18.6991L51.7832 2.93246ZM59.516 27.0164L57.4133 20.5067L46.1531 20.5067L44.0504 27.0164L42.084 27.0164L50.9686 0.236999L52.5977 0.236999L61.4824 27.0324L59.516 27.0164Z" fill="#FF0101"/> -<path d="M81.4838 27.0166L67.5468 3.72496L67.5468 27.0166L65.7168 27.0166L65.7168 0.221252L67.5468 0.221252L81.4838 23.4413L81.4838 0.221252L83.3175 0.221252L83.3175 27.0166L81.4838 27.0166Z" fill="#FF0101"/> -<path d="M103.623 4.09904C102.234 2.50644 100.368 2.03265 98.4342 2.03265L92.5996 2.03265L92.5996 25.2088L98.4306 25.2088C100.365 25.2088 102.231 24.7191 103.619 23.1385C105.55 20.9566 105.413 16.2147 105.413 13.2445C105.413 10.2743 105.546 6.28487 103.619 4.08709L103.623 4.09904ZM104.907 24.5599C103.472 26.1525 101.384 27.0045 98.872 27.0045L90.7695 27.0045L90.7695 0.237L98.8755 0.236999C101.387 0.236999 103.487 1.10496 104.911 2.68561C107.355 5.39302 107.251 9.64524 107.251 13.2604C107.251 16.8756 107.355 21.8604 104.911 24.5718L104.907 24.5599Z" fill="#FF0101"/> -<path d="M112.846 27.0166L112.846 0.221252L117.561 0.221252L117.561 22.3503L128.516 22.3503L128.516 27.0166L112.846 27.0166Z" fill="#333333"/> -<path d="M138.852 16.0277L138.852 27.0166L134.173 27.0166L134.173 16.0277L126.914 0.221252L132.035 0.221252L136.545 11.027L140.991 0.221252L146.108 0.221252L138.852 16.0277Z" fill="#333333"/> -<path d="M159.805 6.09478C159.424 5.62814 158.957 5.25868 158.436 5.0119C157.914 4.76512 157.35 4.64691 156.783 4.66543C156.212 4.64699 155.643 4.76508 155.116 5.01168C154.59 5.25829 154.117 5.62767 153.73 6.09478C152.815 7.22154 152.578 8.48367 152.578 13.6198C152.578 18.7559 152.815 20.014 153.73 21.1448C154.117 21.6117 154.59 21.9809 155.117 22.2275C155.643 22.4741 156.212 22.5923 156.783 22.5741C157.35 22.5924 157.914 22.4741 158.435 22.2273C158.957 21.9805 159.424 21.6112 159.805 21.1448C160.72 20.014 160.992 18.7559 160.992 13.6198C160.992 8.48367 160.723 7.22154 159.805 6.09478ZM163.311 24.3101C161.561 26.1934 159.219 27.2467 156.782 27.2467C154.344 27.2467 152.002 26.1934 150.253 24.3101C147.813 21.6026 147.877 18.2502 147.877 13.6238C147.877 8.99728 147.813 5.6608 150.253 2.93747C152.002 1.05412 154.344 0.000793424 156.782 0.000793411C159.219 0.000793399 161.561 1.05412 163.311 2.93747C165.754 5.64487 165.718 8.9933 165.718 13.6238C165.718 18.2542 165.74 21.6026 163.311 24.3101Z" fill="#333333"/> -<path d="M184.79 27.0166L175.227 10.5731L175.227 27.0166L170.516 27.0166L170.516 0.221252L174.721 0.221252L184.284 16.6289L184.284 0.221252L188.999 0.221252L188.999 27.0166L184.79 27.0166Z" fill="#333333"/> -<path d="M160.242 35.4745L160.264 35.4745C160.376 35.2188 160.553 35.0047 160.773 34.8578C160.992 34.7108 161.246 34.6374 161.502 34.6464C162.363 34.6464 163.239 35.0445 163.239 37.6524C163.239 39.1414 163.196 40.8575 161.444 40.8575C161.208 40.8618 160.974 40.7976 160.766 40.6712C160.559 40.5449 160.384 40.3607 160.26 40.1368L160.228 40.1368L160.228 42.9995L159.363 42.9995L159.363 34.7658L160.239 34.7658L160.242 35.4745ZM162.324 37.6524C162.324 36.7526 162.324 35.4387 161.226 35.4387C160.128 35.4387 160.246 37.095 160.246 38.0067C160.246 38.803 160.289 40.0651 161.258 40.0651C162.227 40.0651 162.324 39.2569 162.324 37.6643L162.324 37.6524Z" fill="#333333"/> -<path d="M99.992 39.8734L99.9705 39.8734C99.8752 40.1805 99.6905 40.4438 99.4457 40.6218C99.2008 40.7998 98.9095 40.8825 98.6177 40.8568C97.4766 40.8568 97.1465 40.0406 97.1465 38.8939C97.1465 37.0824 98.7469 37.0027 99.9705 37.0346C99.992 36.2383 100.003 35.3783 99.0627 35.3783C98.9391 35.3673 98.815 35.3884 98.7001 35.44C98.5853 35.4916 98.4828 35.5722 98.401 35.6754C98.3191 35.7786 98.26 35.9016 98.2285 36.0345C98.197 36.1675 98.1939 36.3068 98.2194 36.4414L97.2864 36.4414C97.3295 35.1036 97.9682 34.6417 99.1093 34.6417C100.494 34.6417 100.857 35.438 100.857 36.4414L100.857 39.316C100.86 39.7921 100.896 40.2672 100.964 40.7374L100.006 40.7374L99.992 39.8734ZM98.022 38.9616C98.022 39.5389 98.2768 40.0605 98.8617 40.0605C99.4466 40.0605 100.057 39.6942 99.9705 37.7632C99.1416 37.7791 98.022 37.6995 98.022 38.9656L98.022 38.9616Z" fill="#333333"/> -<path d="M115.722 40.7375L115.722 36.5968C115.722 35.9916 115.572 35.4382 114.868 35.4382C114.724 35.4407 114.581 35.4776 114.451 35.5462C114.32 35.6149 114.204 35.7138 114.111 35.8363C113.976 36.1038 113.905 36.4056 113.907 36.7123L113.907 40.7336L113.038 40.7336L113.038 36.0075C113.038 35.6094 113.017 35.1794 112.984 34.7653L113.91 34.7653L113.91 35.5099L113.932 35.5099C114.042 35.2248 114.232 34.9868 114.474 34.8311C114.715 34.6755 114.996 34.6105 115.274 34.6459C115.528 34.6248 115.783 34.6862 116.006 34.8226C116.23 34.959 116.413 35.1646 116.533 35.4143C116.652 35.1581 116.838 34.9478 117.067 34.8107C117.295 34.6736 117.556 34.6162 117.814 34.6459C118.381 34.6459 119.285 34.7892 119.285 36.1947L119.285 40.7375L118.41 40.7375L118.41 36.5968C118.41 35.9916 118.263 35.4382 117.556 35.4382C117.438 35.4175 117.317 35.4268 117.203 35.4654C117.088 35.504 116.983 35.5709 116.896 35.6612C116.684 35.9597 116.579 36.3334 116.598 36.7123L116.598 40.7336L115.722 40.7375Z" fill="#333333"/> -<path d="M125.656 38.063C125.656 39.7313 126.061 40.0538 126.732 40.0538C127.328 40.0538 127.64 39.5203 127.669 38.9191L128.627 38.9191C128.627 40.2449 127.881 40.8461 126.75 40.8461C125.62 40.8461 124.705 40.4479 124.705 37.8281C124.705 36.0763 124.884 34.6429 126.75 34.6429C128.286 34.6429 128.67 35.5786 128.67 37.5534L128.67 38.063L125.656 38.063ZM127.755 37.3304C127.755 35.5905 127.317 35.3795 126.679 35.3795C126.126 35.3795 125.667 35.6741 125.656 37.3304L127.755 37.3304ZM127.97 32.1943L126.575 33.8626L125.857 33.8626L126.808 32.1943L127.97 32.1943Z" fill="#333333"/> -<path d="M134.605 34.7658L134.605 33.6191L135.481 33.1812L135.481 34.7737L136.654 34.7737L136.654 35.5063L135.481 35.5063L135.481 39.1613C135.481 39.5595 135.481 40.0253 136.281 40.0253C136.346 40.0253 136.482 40.0014 136.676 39.9775L136.676 40.7221C136.389 40.746 136.098 40.8176 135.811 40.8176C134.979 40.8176 134.605 40.4195 134.605 39.7546L134.605 35.4984L133.723 35.4984L133.723 34.7658L134.605 34.7658Z" fill="#333333"/> -<path d="M143.185 35.674L143.217 35.674C143.576 34.7623 144.028 34.6588 144.879 34.6588L144.879 35.6661L144.646 35.6302C144.568 35.6157 144.49 35.6077 144.412 35.6063C143.443 35.6063 143.196 36.4226 143.196 37.2268L143.196 40.7544L142.32 40.7544L142.32 34.7822L143.196 34.7822L143.185 35.674Z" fill="#333333"/> -<path d="M149.852 37.84C149.852 36.0882 150.031 34.6548 151.897 34.6548C153.763 34.6548 153.942 36.1001 153.942 37.84C153.942 40.4797 153.034 40.858 151.897 40.858C150.759 40.858 149.852 40.4797 149.852 37.84ZM153.027 37.4419C153.027 35.8095 152.568 35.4511 151.897 35.4511C151.226 35.4511 150.767 35.8055 150.767 37.4419C150.767 39.3809 150.993 40.0816 151.897 40.0816C152.801 40.0816 153.031 39.3649 153.031 37.426L153.027 37.4419Z" fill="#333333"/> -<path d="M168.586 37.84C168.586 36.0882 168.765 34.6548 170.631 34.6548C172.497 34.6548 172.68 36.1001 172.68 37.84C172.68 40.4797 171.772 40.858 170.631 40.858C169.49 40.858 168.586 40.4797 168.586 37.84ZM171.762 37.4419C171.762 35.8095 171.302 35.4511 170.631 35.4511C169.96 35.4511 169.501 35.8055 169.501 37.4419C169.501 39.3809 169.723 40.0816 170.631 40.0816C171.539 40.0816 171.765 39.3649 171.765 37.426L171.762 37.4419Z" fill="#333333"/> -<path d="M179.221 40.7386L178.346 40.7386L178.346 32.1983L179.218 32.1983L179.221 40.7386Z" fill="#333333"/> -<path d="M185.674 38.0618C185.674 39.7301 186.079 40.0526 186.75 40.0526C187.346 40.0526 187.658 39.519 187.687 38.9178L188.645 38.9178C188.645 40.2437 187.898 40.8449 186.768 40.8449C185.638 40.8449 184.723 40.4467 184.723 37.8269C184.723 36.0751 184.902 34.6417 186.768 34.6417C188.304 34.6417 188.688 35.5774 188.688 37.5522L188.688 38.0618L185.674 38.0618ZM187.773 37.3292C187.773 35.5893 187.335 35.3783 186.696 35.3783C186.144 35.3783 185.684 35.6729 185.674 37.3292L187.773 37.3292Z" fill="#333333"/> -<path d="M92.1236 40.7386L91.248 40.7386L91.248 32.1983L92.1236 32.1983L92.1236 40.7386Z" fill="#333333"/> -</g> -<defs> -<clipPath id="clip0_5084_112181"> -<rect width="189" height="43" fill="white"/> -</clipPath> -</defs> -</svg> \ No newline at end of file diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss index ad54ee550..7b72d6a99 100644 --- a/src/assets/scss/_color.scss +++ b/src/assets/scss/_color.scss @@ -1,8 +1,6 @@ //TODO: Clean colors when design is properly setup $black: #000000; $white: #ffff; -$white-1: #e5e5e5; -$white-2: #cacccb; /* GREYS */ $grey: #b4bbbf; $grey-1: #333333; diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss index 4cc84a175..c93d6aa78 100644 --- a/src/assets/scss/_icons.scss +++ b/src/assets/scss/_icons.scss @@ -61,7 +61,7 @@ width: 7px; height: 7px; border-radius: 4px; - background-color: $white; + background-color: white; } } .ico-dot-available { @@ -589,125 +589,3 @@ bottom: -6px; } } - -.ico-gg-eye-alt { - position: relative; - display: block; - transform: scale(var(--ggs, 1)); - width: 24px; - height: 18px; - border-bottom-right-radius: 100px; - border-bottom-left-radius: 100px; - overflow: hidden; - box-sizing: border-box; -} -.ico-gg-eye-alt::after, -.ico-gg-eye-alt::before { - content: ''; - display: block; - border-radius: 100px; - position: absolute; - box-sizing: border-box; -} -.ico-gg-eye-alt::after { - top: 2px; - box-shadow: inset 0 -8px 0 2px $grey-3, inset 0 0 0 2px $grey-3; - width: 24px; - height: 24px; -} -.ico-gg-eye-alt::before { - width: 8px; - height: 8px; - border: 2px solid $grey-3; - bottom: 4px; - left: 8px; - background-color: $grey-3; -} - -.ico-gg-add { - box-sizing: border-box; - position: relative; - display: block; - color: $green-1; - width: 32px; - height: 32px; -} -.ico-gg-add::after, -.ico-gg-add::before { - content: ''; - display: block; - box-sizing: border-box; - position: absolute; - width: 14px; - height: 2px; - background: currentColor; - border-radius: 5px; - top: 8px; - left: 0px; -} -.ico-gg-add::after { - width: 2px; - height: 14px; - top: 2px; - left: 6px; -} - -.gg-eye-alt { - position: relative; - display: block; - width: 18px; - height: 12px; - border-bottom-right-radius: 100px; - border-bottom-left-radius: 100px; - overflow: hidden; - box-sizing: border-box; -} -.gg-eye-alt::after, -.gg-eye-alt::before { - content: ''; - display: block; - border-radius: 100px; - position: absolute; - box-sizing: border-box; -} -.gg-eye-alt::after { - top: 2px; - box-shadow: inset 0 -8px 0 2px, inset 0 0 0 2px; - width: 18px; - height: 18px; -} -.gg-eye-alt::before { - width: 2px; - height: 2px; - border: 2px solid black; - bottom: 3px; - left: 7px; - background-color: black; -} - -.ico-gg-check { - box-sizing: border-box; - position: relative; - display: block; - transform: scale(var(--ggs, 1)); - width: 22px; - height: 22px; - border: 1px solid transparent; - border-radius: 100px; - color: $white; -} -.ico-gg-check::after { - content: ''; - display: block; - box-sizing: border-box; - position: absolute; - left: 5px; - top: -3px; - width: 7px; - height: 12px; - border-width: 0 2px 2px 0; - border-style: solid; - transform-origin: bottom left; - transform: rotate(45deg); - color: $white; -} -- GitLab