From bc206b0329aac1dd534c368445fa05191f1c9f9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20BRISON?=
<ext.sopra.jbrison@grandlyon.com>
Date: Fri, 27 Nov 2020 17:05:19 +0100
Subject: [PATCH] Feat responsive for Phone and tablet
---
src/app/app.module.ts | 2 +
src/app/footer/footer.component.scss | 3 +-
src/app/header/header.component.html | 13 +--
src/app/header/header.component.scss | 21 +++++
src/app/header/header.component.ts | 10 +-
src/app/home/home.component.html | 10 ++
src/app/home/home.component.scss | 38 ++++++++
src/app/home/home.component.ts | 5 +
src/app/map/components/map.component.scss | 7 ++
src/app/map/services/map.service.ts | 6 +-
src/app/menu-phone/menu-phone.component.html | 29 ++++++
src/app/menu-phone/menu-phone.component.scss | 74 +++++++++++++++
.../menu-phone/menu-phone.component.spec.ts | 26 +++++
src/app/menu-phone/menu-phone.component.ts | 17 ++++
.../components/button/button.component.html | 20 ++++
.../components/button/button.component.scss | 18 ++++
.../components/button/button.component.ts | 2 +
.../svg-icon/svg-icon.component.html | 2 +-
.../svg-icon/svg-icon.component.scss | 12 +--
.../components/svg-icon/svg-icon.component.ts | 1 +
.../components/card/card.component.html | 2 +-
.../components/card/card.component.scss | 7 ++
.../modal-filter/modal-filter.component.html | 10 +-
.../modal-filter/modal-filter.component.scss | 35 ++++++-
.../components/search/search.component.html | 22 ++++-
.../components/search/search.component.scss | 94 +++++++++++--------
.../structure-details.component.html | 8 +-
.../structure-details.component.scss | 11 ++-
src/assets/ico/liste.svg | 8 ++
src/assets/ico/sprite.svg | 59 +++++++-----
src/assets/ico/user.svg | 5 +
src/assets/logos/ram_logo.svg | 32 +++++--
src/assets/scss/_breakpoint.scss | 6 +-
src/assets/scss/_icons.scss | 24 ++++-
src/assets/scss/_z-index.scss | 7 +-
src/styles.scss | 2 +-
36 files changed, 541 insertions(+), 107 deletions(-)
create mode 100644 src/app/menu-phone/menu-phone.component.html
create mode 100644 src/app/menu-phone/menu-phone.component.scss
create mode 100644 src/app/menu-phone/menu-phone.component.spec.ts
create mode 100644 src/app/menu-phone/menu-phone.component.ts
create mode 100644 src/assets/ico/liste.svg
create mode 100644 src/assets/ico/user.svg
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f49e4bb52..e951cd68b 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -21,6 +21,7 @@ import { StructureOpeningStatusComponent } from './structure-list/components/str
import { ModalFilterComponent } from './structure-list/components/modal-filter/modal-filter.component';
import { LegalNoticeComponent } from './legal-notice/legal-notice.component';
import { AboutComponent } from './about/about.component';
+import { MenuPhoneComponent } from './menu-phone/menu-phone.component';
@NgModule({
declarations: [
@@ -36,6 +37,7 @@ import { AboutComponent } from './about/about.component';
StructureOpeningStatusComponent,
LegalNoticeComponent,
AboutComponent,
+ MenuPhoneComponent,
],
imports: [
BrowserModule,
diff --git a/src/app/footer/footer.component.scss b/src/app/footer/footer.component.scss
index 75df53093..9398ecc03 100644
--- a/src/app/footer/footer.component.scss
+++ b/src/app/footer/footer.component.scss
@@ -26,8 +26,9 @@
height: 37px;
width: 22px;
}
+
@media #{$large-phone} {
- height: unset;
+ display: none !important;
font-size: 0.75em;
div {
margin: 20px 0;
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 600d0e766..3e9740a8e 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,13 +1,13 @@
<div fxLayout="row" class="header hide-on-print">
<div class="logo clickable" routerLink="/home">
- <div fxLayout="row">
- <!-- <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt /> -->
- <div fxLayout="column" fxLayoutAlign="center">
- <p>Réseau des Acteurs de la Médiation Numérique</p>
- <p>de la Métropole de Lyon</p>
- </div>
+ <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt />
+ <div class="logo-text" fxLayout="column" fxLayoutAlign="center">
+ <p>Réseau des Acteurs de la Médiation Numérique de la Métropole de Lyon</p>
</div>
</div>
+ <div class="containerIconMenu" (click)="openMenu()">
+ <span class="ico-menu"></span>
+ </div>
<div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Acteurs de la médiation numérique</a>
<!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
@@ -21,3 +21,4 @@
></a> -->
</div>
</div>
+<app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 0f02934cc..2e49b9b20 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -30,6 +30,9 @@
}
}
.right-header {
+ @media #{$tablet} {
+ display: none !important;
+ }
height: 100%;
}
}
@@ -41,6 +44,10 @@
p {
margin: 0;
}
+ @media #{$tablet} {
+ text-align: center;
+ width: 100%;
+ }
}
@media print {
@@ -48,3 +55,17 @@
display: none !important;
}
}
+
+.containerIconMenu {
+ display: none;
+ padding-right: 20px;
+ @media #{$tablet} {
+ display: block;
+ }
+}
+
+@media #{$tablet} {
+ .logo-text {
+ display: none !important;
+ }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 84aef6db8..b645bfde0 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -6,7 +6,15 @@ import { Component, OnInit } from '@angular/core';
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
- constructor() {}
+ public showMenu = false;
+ constructor() {}
ngOnInit(): void {}
+
+ public openMenu(): void {
+ this.showMenu = true;
+ }
+ public closeMenu(): void {
+ this.showMenu = false;
+ }
}
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
index 84956ea18..c293e365a 100644
--- a/src/app/home/home.component.html
+++ b/src/app/home/home.component.html
@@ -7,13 +7,23 @@
(selectedMarkerId)="setSelectedMarkerId($event)"
[selectedStructure]="currentStructure"
class="left-pane"
+ [ngClass]="{ mapPhone: isMapPhone == true }"
fxLayout="column"
></app-structure-list>
+ <div class="btnSwitch">
+ <app-button
+ [style]="'roundedButton'"
+ [text]="isMapPhone ? 'Liste' : 'Carte'"
+ [iconBtn]="isMapPhone ? 'liste' : 'map-marker'"
+ (action)="switchMapList()"
+ ></app-button>
+ </div>
<app-map
[structures]="structures"
[toogleToolTipId]="displayMarkerId"
[selectedMarkerId]="selectedMarkerId"
(selectedStructure)="showDetailStructure($event)"
class="right-pane"
+ [ngClass]="{ mapPhone: isMapPhone == true }"
></app-map>
</div>
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
index bfa9fd02c..52be62637 100644
--- a/src/app/home/home.component.scss
+++ b/src/app/home/home.component.scss
@@ -1,11 +1,49 @@
+@import '../../assets/scss/breakpoint';
+@import '../../assets/scss/layout';
+@import '../../assets/scss/z-index';
+
.left-pane {
width: 640px;
min-width: 640px;
+ @media #{$tablet} {
+ width: 100%;
+ min-width: unset;
+ &.mapPhone {
+ display: none !important;
+ }
+ }
}
.right-pane {
width: 80%;
padding: 0 40px;
+ @media #{$tablet} {
+ display: none;
+ &.mapPhone {
+ display: block;
+ }
+ width: 100%;
+ padding: 0;
+ }
}
.content-container {
height: 100%;
+ @media #{$tablet} {
+ padding: 0;
+ }
+}
+.btnSwitch {
+ position: fixed;
+ left: 50%;
+ bottom: $footer-height;
+ transform: translate(-50%, -50%);
+ margin: 0 auto;
+ display: none;
+ @media #{$tablet} {
+ display: block;
+ opacity: 0.8;
+ z-index: $btn-phone-switch-map-list-z-index;
+ }
+ @media #{$large-phone} {
+ bottom: 20px;
+ }
}
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
index 82b5fb354..521b21db9 100644
--- a/src/app/home/home.component.ts
+++ b/src/app/home/home.component.ts
@@ -22,6 +22,7 @@ export class HomeComponent implements OnInit {
public geolocation = false;
public currentLocation: GeoJson;
public currentStructure: Structure;
+ public isMapPhone = false;
constructor(private structureService: StructureService, private geoJsonService: GeojsonService) {}
ngOnInit(): void {
@@ -146,4 +147,8 @@ export class HomeComponent implements OnInit {
public showDetailStructure(structure: Structure): void {
this.currentStructure = new Structure(structure);
}
+
+ public switchMapList(): void {
+ this.isMapPhone = !this.isMapPhone;
+ }
}
diff --git a/src/app/map/components/map.component.scss b/src/app/map/components/map.component.scss
index 0e07fe89a..fbe4d0c10 100644
--- a/src/app/map/components/map.component.scss
+++ b/src/app/map/components/map.component.scss
@@ -4,6 +4,7 @@
@import '../../../assets/scss/typography';
@import '../../../assets/scss/shapes';
@import '../../../assets/scss/buttons';
+@import '../../../assets/scss/breakpoint';
.map-wrapper {
border-radius: 6px;
@@ -15,6 +16,12 @@
height: calc(100vh - #{$header-height} - #{$footer-height} - 87px);
border: 10px solid $white;
border-radius: 6px;
+ @media #{$tablet} {
+ height: calc(100vh - #{$header-height} - #{$footer-height} - 24px);
+ }
+ @media #{$large-phone} {
+ height: calc(100vh - #{$header-height} - 28px);
+ }
}
::ng-deep .leaflet-popup-close-button {
diff --git a/src/app/map/services/map.service.ts b/src/app/map/services/map.service.ts
index dac2b55e2..58594ff23 100644
--- a/src/app/map/services/map.service.ts
+++ b/src/app/map/services/map.service.ts
@@ -17,7 +17,8 @@ export class MapService {
});
public markerIcon = divIcon({
className: null,
- html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ html:
+ '<svg width="40" height="46" fill="#348899" stroke="#fff" stroke-width="2"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
iconSize: [40, 46],
iconAnchor: [20, 46],
popupAnchor: [0, -46],
@@ -133,7 +134,8 @@ export class MapService {
if (id) {
const markerIcon = divIcon({
className: null,
- html: '<svg width="40" height="46"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
+ html:
+ '<svg width="40" height="46" fill="#348899" stroke="#fff" stroke-width="2"><use xlink:href="assets/ico/sprite.svg#map-marker"></use></svg>',
iconSize: [35, 41],
iconAnchor: [13, 41],
});
diff --git a/src/app/menu-phone/menu-phone.component.html b/src/app/menu-phone/menu-phone.component.html
new file mode 100644
index 000000000..dbd120b9f
--- /dev/null
+++ b/src/app/menu-phone/menu-phone.component.html
@@ -0,0 +1,29 @@
+<div class="containerMenu" fxLayout="row">
+ <div class="outside" (click)="closeMenu()"></div>
+ <div class="contentMenu" fxLayout="column" fxLayoutAlign="space-between">
+ <div>
+ <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
+ <span>Menu</span>
+ <div (click)="closeMenu()" class="ico-close-details"></div>
+ </div>
+ <div fxLayout="column" class="right-header" fxLayoutGap="3vw">
+ <a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n
+ >Acteurs de la médiation numérique</a
+ >
+ <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
+ <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
+ <a routerLink="/about" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Qui sommes-nous ?</a>
+ <!--<a routerLink="/login" [routerLinkActive]="'active'" i18n><span class="clickable ico-mglass purple"></span></a>
+ <a routerLink="/home" [routerLinkActive]="'active'" i18n
+ ><span class="ico-profile" fxLayout="column" fxLayoutAlign="center center">
+ <span class="head"></span>
+ <span class="body"></span> </span
+ ></a> -->
+ </div>
+ </div>
+ <!--<div class="footer" fxLayout="row" fxLayoutGap="1.5vh">
+ <app-svg-icon [type]="'ico'" [iconClass]="'icon-32'" [icon]="'user'" [iconColor]="'currentColor'"></app-svg-icon>
+ <a>Mon compte</a>
+ </div>-->
+ </div>
+</div>
diff --git a/src/app/menu-phone/menu-phone.component.scss b/src/app/menu-phone/menu-phone.component.scss
new file mode 100644
index 000000000..75987578e
--- /dev/null
+++ b/src/app/menu-phone/menu-phone.component.scss
@@ -0,0 +1,74 @@
+@import '../../assets/scss/color';
+@import '../../assets/scss/z-index';
+@import '../../assets/scss/typography';
+@import '../../assets/scss/breakpoint';
+
+@keyframes slideMenu {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+@keyframes background-fade {
+ 0% {
+ background: none;
+ }
+ 100% {
+ background: none;
+ }
+}
+.containerMenu {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ z-index: $modal-menu-phone-z-index;
+ animation: slideMenu 0.5s;
+ .contentMenu {
+ background-color: $white;
+ height: 100vh;
+ width: 350px;
+ padding: 27px 25px;
+ }
+ .outside {
+ width: calc(100% - 350px);
+ height: 100vh;
+ opacity: 0.65;
+ animation: background-fade 0.1s;
+ background-color: $black;
+ }
+}
+.titleFilter {
+ margin-bottom: 35px;
+ @include cn-bold-28;
+}
+.footer {
+ a {
+ height: unset;
+ display: table-cell;
+ vertical-align: middle;
+ margin: auto 0 auto 0;
+ }
+}
+a {
+ @include cn-bold-18;
+ font-style: italic;
+ color: $grey-2;
+ height: 70px;
+ margin: 0;
+ &.active {
+ font-weight: bold;
+ color: $grey-1;
+ &:before {
+ color: $primary-color;
+ content: '// ';
+ }
+ &:after {
+ color: $primary-color;
+ content: ' //';
+ }
+ }
+}
diff --git a/src/app/menu-phone/menu-phone.component.spec.ts b/src/app/menu-phone/menu-phone.component.spec.ts
new file mode 100644
index 000000000..718d9c841
--- /dev/null
+++ b/src/app/menu-phone/menu-phone.component.spec.ts
@@ -0,0 +1,26 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+
+import { MenuPhoneComponent } from './menu-phone.component';
+
+describe('HeaderComponent', () => {
+ let component: MenuPhoneComponent;
+ let fixture: ComponentFixture<MenuPhoneComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [RouterTestingModule],
+ declarations: [MenuPhoneComponent],
+ }).compileComponents();
+ });
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(MenuPhoneComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/menu-phone/menu-phone.component.ts b/src/app/menu-phone/menu-phone.component.ts
new file mode 100644
index 000000000..c0d48f25e
--- /dev/null
+++ b/src/app/menu-phone/menu-phone.component.ts
@@ -0,0 +1,17 @@
+import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+
+@Component({
+ selector: 'app-menu-phone',
+ templateUrl: './menu-phone.component.html',
+ styleUrls: ['./menu-phone.component.scss'],
+})
+export class MenuPhoneComponent implements OnInit {
+ constructor() {}
+
+ @Output() closeEvent = new EventEmitter();
+ ngOnInit(): void {}
+
+ closeMenu(): void {
+ this.closeEvent.emit();
+ }
+}
diff --git a/src/app/shared/components/button/button.component.html b/src/app/shared/components/button/button.component.html
index 5b059dee9..91c9e7a67 100644
--- a/src/app/shared/components/button/button.component.html
+++ b/src/app/shared/components/button/button.component.html
@@ -17,3 +17,23 @@
<ng-container *ngIf="style === 'button'">
<button class="btn-search-filter" type="{{ type }}">{{ text }}</button>
</ng-container>
+
+<ng-container *ngIf="style === 'buttonPhone'">
+ <button class="btn-filter-phone" [ngClass]="extraClass" type="{{ type }}" (click)="doAction()">{{ text }}</button>
+</ng-container>
+
+<ng-container *ngIf="style === 'roundedButton'">
+ <button class="btn-switch-phone" type="{{ type }}" (click)="doAction()">
+ <div *ngIf="!iconBtn" class="searchButton">{{ text }}</div>
+ <div
+ *ngIf="iconBtn"
+ fxLayout="row center"
+ class="searchButton withIcon"
+ fxLayoutAlign="space-between center"
+ fxLayoutGap="13px"
+ >
+ <app-svg-icon [type]="'ico'" [iconClass]="'icon-32'" [icon]="iconBtn" [iconColor]="'currentColor'"></app-svg-icon>
+ {{ text }}
+ </div>
+ </button>
+</ng-container>
diff --git a/src/app/shared/components/button/button.component.scss b/src/app/shared/components/button/button.component.scss
index 3c4e737cb..6aecd56b1 100644
--- a/src/app/shared/components/button/button.component.scss
+++ b/src/app/shared/components/button/button.component.scss
@@ -52,6 +52,13 @@ button {
}
}
}
+.btn-switch-phone {
+ background: $black;
+ height: 40px;
+ color: $white;
+ padding: 4px 37px 4px 37px;
+ border-radius: 20px;
+}
.btn-search-filter {
background: $secondary-color;
height: 40px;
@@ -72,3 +79,14 @@ button {
background-color: $blue-active;
}
}
+.btn-filter-phone {
+ background: $white;
+ height: 40px;
+ color: $grey-1;
+ padding: 4px 37px 4px 37px;
+ border-color: $grey-4;
+ @include btn-normal;
+ &.containCheckedFilters {
+ border-color: $secondary-color;
+ }
+}
diff --git a/src/app/shared/components/button/button.component.ts b/src/app/shared/components/button/button.component.ts
index dbba3226a..aa73494e4 100644
--- a/src/app/shared/components/button/button.component.ts
+++ b/src/app/shared/components/button/button.component.ts
@@ -10,7 +10,9 @@ export class ButtonComponent implements OnInit {
@Input() public text: string;
@Input() public type: string;
@Input() public iconBtn: string;
+ @Input() public extraClass: string;
@Output() public action = new EventEmitter();
+
constructor() {}
ngOnInit(): void {}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.html b/src/app/shared/components/svg-icon/svg-icon.component.html
index f151f4bb0..b90ab6a10 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.html
+++ b/src/app/shared/components/svg-icon/svg-icon.component.html
@@ -1,3 +1,3 @@
-<svg aria-hidden="true" class="icon" [ngClass]="iconClass">
+<svg aria-hidden="true" class="icon" [ngClass]="iconClass" [attr.fill]="iconColor ? iconColor : 'none'">
<use [attr.xlink:href]="'assets/' + type + '/sprite.svg#' + icon"></use>
</svg>
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 afdc21e25..6a3242f11 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.scss
+++ b/src/app/shared/components/svg-icon/svg-icon.component.scss
@@ -1,15 +1,15 @@
.icon {
display: inline-block;
- height: 24px;
- width: 24px;
+ height: 2em;
+ width: 1.5em;
&.icon-32 {
- height: 32px;
- width: 32px;
+ width: 2em;
}
}
svg {
// Scale the SVG to cover the whole app-icon container.
- height: 100%;
- width: 100%;
+
+ top: 0.125em;
+ position: relative;
}
diff --git a/src/app/shared/components/svg-icon/svg-icon.component.ts b/src/app/shared/components/svg-icon/svg-icon.component.ts
index 324fd4076..72c221e3d 100644
--- a/src/app/shared/components/svg-icon/svg-icon.component.ts
+++ b/src/app/shared/components/svg-icon/svg-icon.component.ts
@@ -9,5 +9,6 @@ export class SvgIconComponent {
@Input() icon: string;
@Input() iconClass: string;
@Input() type: string;
+ @Input() iconColor: string;
constructor() {}
}
diff --git a/src/app/structure-list/components/card/card.component.html b/src/app/structure-list/components/card/card.component.html
index 8bedea0fb..d3e08f7aa 100644
--- a/src/app/structure-list/components/card/card.component.html
+++ b/src/app/structure-list/components/card/card.component.html
@@ -8,7 +8,7 @@
fxLayoutAlign="end center"
fxLayoutGap="20px"
>
- <div fxLayout="row" fxLayoutAlign="center center">
+ <div class="isntPhoneContent" fxLayout="row" fxLayoutAlign="center center">
<span class="indicatorDistance" *ngFor="let i of [].constructor(structure.getDistanceRange())"></span>
</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 47ca330e6..c67da08bc 100644
--- a/src/app/structure-list/components/card/card.component.scss
+++ b/src/app/structure-list/components/card/card.component.scss
@@ -1,6 +1,7 @@
@import '../../../../assets/scss/icons';
@import '../../../../assets/scss/color';
@import '../../../../assets/scss/typography';
+@import '../../../../assets/scss/breakpoint';
.indicatorDistance {
width: 34px;
@@ -42,3 +43,9 @@
border-bottom: none;
}
}
+
+@media #{$large-phone} {
+ .isntPhoneContent {
+ display: none !important;
+ }
+}
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.html b/src/app/structure-list/components/modal-filter/modal-filter.component.html
index 84740d349..ca72316c5 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.html
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.html
@@ -1,11 +1,15 @@
<div *ngIf="modalType" fxLayout="column" fxLayoutAlign="space-between" [ngClass]="['modal', 'modal' + getModalType()]">
- <div class="body-wrap">
+ <div class="body-wrap" fxLayout="column" fxLayoutAlign="space-between">
+ <div class="titleFilter" fxLayout="row" fxLayoutAlign="space-between">
+ <span>Filtres</span>
+ <div (click)="closeModal()" class="ico-close-details"></div>
+ </div>
<div class="contentModal" fxLayout="row wrap" fxLayoutAlign="flex-start" *ngIf="categories.length > 0">
<div class="blockFiltre" *ngFor="let c of categories">
<h4>{{ c.name }}</h4>
<ul class="blockLigne">
- <div fxLayout="row" class="ligneFiltre" fxLayoutAlign="center" *ngFor="let module of c.modules">
+ <div fxLayout="row" class="ligneFiltre" *ngFor="let module of c.modules">
<li class="checkbox">
<div class="checkboxItem">
<label>
@@ -35,7 +39,7 @@
</div>
<div class="footer" fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="3vw">
<a (click)="clearFilters()" tabindex="0">Effacer</a>
- <app-button [style]="'button'" [link]="" [text]="'Appliquer'" (click)="emitModules(checkedModules)"></app-button>
+ <app-button [style]="'button'" [text]="'Appliquer'" (click)="emitModules(checkedModules)"></app-button>
</div>
</div>
</div>
diff --git a/src/app/structure-list/components/modal-filter/modal-filter.component.scss b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
index e33b41fe5..c81e0a111 100644
--- a/src/app/structure-list/components/modal-filter/modal-filter.component.scss
+++ b/src/app/structure-list/components/modal-filter/modal-filter.component.scss
@@ -4,6 +4,7 @@
@import '../../../../assets/scss/breakpoint';
@import '../../../../assets/scss/shapes';
@import '../../../../assets/scss/hyperlink';
+@import '../../../../assets/scss/z-index';
.modaltraining {
@media #{$desktop} {
@@ -22,10 +23,20 @@
max-height: 648px;
max-width: 754px;
width: 94%;
- z-index: 1001 !important;
+ z-index: $modal-filter-structure-z-index !important;
position: absolute;
border-radius: 6px;
margin-top: 3.5px;
+ @media #{$large-phone} {
+ max-height: auto;
+ max-width: auto;
+ width: 100%;
+ position: fixed;
+ top: 0;
+ left: 0;
+ border: none;
+ padding: 0;
+ }
@include background-hash;
border: 1px solid $grey-4;
::-webkit-scrollbar {
@@ -38,12 +49,29 @@
background: $grey;
border-radius: 6px;
}
+ .body-wrap {
+ @media #{$large-phone} {
+ height: 100vh;
+ }
+ .titleFilter {
+ display: none !important;
+ margin: 27px 25px 0px 25px;
+ @include cn-bold-28;
+ @media #{$large-phone} {
+ display: flex !important;
+ }
+ }
+ }
.contentModal {
overflow-y: auto;
max-width: 1100px;
border-bottom: 1px solid $grey;
margin-bottom: 16px;
max-height: 438px;
+ @media #{$large-phone} {
+ max-height: none;
+ height: 100%;
+ }
.blockFiltre {
width: 100%;
margin: 0 32px;
@@ -55,6 +83,11 @@
padding-bottom: 32px;
border-bottom: none;
}
+ @media #{$large-phone} {
+ margin: 0 18px;
+ padding: 25px 0;
+ min-width: 0;
+ }
}
.blockLigne {
padding-left: 0;
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index 197c25733..6dc43c676 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -16,11 +16,16 @@
<span class="separator"></span>
<button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
</div>
- <app-button [style]="'buttonWithHash'" [text]="'Rechercher'" [type]="'submit'"></app-button>
+ <app-button
+ class="isntPhoneContent"
+ [style]="'buttonWithHash'"
+ [text]="'Rechercher'"
+ [type]="'submit'"
+ ></app-button>
</form>
</div>
<div (clickOutside)="closeModal()">
- <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
+ <div class="btnSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="16px">
<button
class="btn-filter"
type="button"
@@ -75,7 +80,18 @@
</div>
</div>
</div>
-<div class="footerSearchSection" fxLayout="row" fxLayoutAlign="space-between center">
+<div class="phoneSection">
+ <div class="btnSection" fxLayout="row" fxLayoutAlign="space-between center">
+ <app-button
+ [style]="'buttonPhone'"
+ [extraClass]="numberAccompanimentChecked ? 'containCheckedFilters' : ''"
+ [text]="'Filtres'"
+ (action)="openModal(TypeModal.accompaniment)"
+ ></app-button>
+ <a (click)="openConfirmationModal()" tabindex="0">Ajouter une structure</a>
+ </div>
+</div>
+<div class="footerSearchSection isntPhoneContent" fxLayout="row" fxLayoutAlign="space-between center">
<div class="checkbox">
<div class="checkboxItem">
<label>
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index af7bfa1ad..d73591af5 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -2,6 +2,7 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/inputs';
@import '../../../../assets/scss/hyperlink';
+@import '../../../../assets/scss/breakpoint';
.header {
.title {
@@ -34,48 +35,48 @@
height: 40px;
}
}
- .btnSection {
- padding: 16px 0 0px 0;
- button {
- background: $white;
- height: 40px;
- width: 100%;
- border: 1px solid $grey-4;
- padding: 3px 16px 3px 16px;
- outline: none;
- border-radius: 4px;
- cursor: pointer;
- @include btn-normal;
- .arrow {
- background-color: transparent;
- border-bottom: 1px solid $grey-2;
- border-right: 1px solid $grey-2;
- transform: translateY(-25%) rotate(45deg);
- margin: 0 5px 0 10px;
- height: 7px;
- width: 7px;
- }
- &:focus {
- border-color: $blue-hover;
- }
+}
+.btnSection {
+ padding: 16px 0 0px 0;
+ button {
+ background: $white;
+ height: 40px;
+ width: 100%;
+ border: 1px solid $grey-4;
+ padding: 3px 16px 3px 16px;
+ outline: none;
+ border-radius: 4px;
+ cursor: pointer;
+ @include btn-normal;
+ .arrow {
+ background-color: transparent;
+ border-bottom: 1px solid $grey-2;
+ border-right: 1px solid $grey-2;
+ transform: translateY(-25%) rotate(45deg);
+ margin: 0 5px 0 10px;
+ height: 7px;
+ width: 7px;
}
- .selected {
- border-color: $primary-color !important;
- color: inherit;
- .arrow {
- background-color: transparent;
- border-bottom: 1px solid $primary-color;
- border-right: 1px solid $primary-color;
- transform: translateY(25%) rotate(-135deg);
- margin: 0 5px 0 10px;
- height: 7px;
- width: 7px;
- }
+ &:focus {
+ border-color: $blue-hover;
}
- .containCheckedFilters {
- border-color: $secondary-color;
+ }
+ .selected {
+ border-color: $primary-color !important;
+ color: inherit;
+ .arrow {
+ background-color: transparent;
+ border-bottom: 1px solid $primary-color;
+ border-right: 1px solid $primary-color;
+ transform: translateY(25%) rotate(-135deg);
+ margin: 0 5px 0 10px;
+ height: 7px;
+ width: 7px;
}
}
+ .containCheckedFilters {
+ border-color: $secondary-color;
+ }
}
.footerSearchSection {
@@ -119,4 +120,21 @@
}
a {
@include hyperlink;
+ width: 100%;
+ text-align: right;
+}
+.phoneSection {
+ margin: 9px 0px 18px 0px;
+ display: none;
+ .btnSection {
+ padding: 0;
+ }
+}
+@media #{$large-phone} {
+ .isntPhoneContent {
+ display: none !important;
+ }
+ .phoneSection {
+ display: block;
+ }
}
diff --git a/src/app/structure-list/components/structure-details/structure-details.component.html b/src/app/structure-list/components/structure-details/structure-details.component.html
index 1aa231d3c..0fd98a06c 100644
--- a/src/app/structure-list/components/structure-details/structure-details.component.html
+++ b/src/app/structure-list/components/structure-details/structure-details.component.html
@@ -10,7 +10,7 @@
<h2 class="bold">{{ structure.nomDeVotreStructure }}</h2>
<h3>{{ structure.typeDeStructure }}</h3>
</div>
- <div class="btnPrint" fxLayout="column" fxLayoutAlign="end">
+ <div class="printButton" fxLayout="column" fxLayoutAlign="end">
<app-button
class="hide-on-print"
[type]="'button'"
@@ -21,7 +21,7 @@
></app-button>
</div>
</div>
- <div fxLayout="row">
+ <div fxLayout="row" fxLayout.lt-sm="column">
<div fxLayout="column" fxFlex="50%">
<div fxLayout="row" fxLayoutAlign="none flex-end" fxLayoutGap="13px">
<app-structure-opening-status
@@ -98,7 +98,7 @@
<app-svg-icon [type]="'ico'" [icon]="'services'" [iconClass]="'icon-32'"></app-svg-icon>
<h2>Services</h2>
</div>
- <div fxLayout="row" class="w-100">
+ <div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div fxFlex="50%" *ngIf="isBaseSkills()">
<h3 class="subtitle">Compétences de base</h3>
<p *ngFor="let skill of baseSkills">{{ skill.text }}</p>
@@ -116,7 +116,7 @@
<h2>Accueil</h2>
</div>
<!-- Openning Hours -->
- <div fxLayout="row" class="w-100">
+ <div fxLayout="row" class="w-100" fxLayout.lt-sm="column">
<div fxFlex="50%">
<h3 class="subtitle">Horaires d’ouverture au public :</h3>
<div fxLayout="column">
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 7013d4f1d..1eafa4860 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
@@ -3,6 +3,7 @@
@import '../../../../assets/scss/typography';
@import '../../../../assets/scss/z-index';
@import '../../../../assets/scss/layout';
+@import '../../../../assets/scss/breakpoint';
.structrue-details-container {
border-right: solid 1px $grey-4;
@@ -16,7 +17,15 @@
height: calc(100vh - #{$header-height} - #{$footer-height});
padding: 10px 24px;
overflow: auto;
- .btnPrint {
+ @media #{$tablet} {
+ position: fixed;
+ padding: 0;
+ height: 100vh;
+ .printButton {
+ display: none !important;
+ }
+ }
+ .printButton {
margin-right: 75px;
}
}
diff --git a/src/assets/ico/liste.svg b/src/assets/ico/liste.svg
new file mode 100644
index 000000000..0b72214f2
--- /dev/null
+++ b/src/assets/ico/liste.svg
@@ -0,0 +1,8 @@
+<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" y="9" width="16" height="2" rx="1" />
+<rect x="10" y="15" width="16" height="2" rx="1" />
+<rect x="10" y="21" width="16" height="2" rx="1" />
+<rect x="6" y="9" width="2" height="2" rx="1" />
+<rect x="6" y="15" width="2" height="2" rx="1" />
+<rect x="6" y="21" width="2" height="2" rx="1"/>
+</svg>
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index f7075a329..cd608f880 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -1,89 +1,104 @@
<svg xmlns="http://www.w3.org/2000/svg">
-<symbol id="map-marker" width="40" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z" fill="#348899" stroke="#fff" stroke-width="2"/></symbol>
-<symbol id="map-marker-locate" width="40" height="46" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z" fill="#D50000" stroke="#fff" stroke-width="2"/></symbol>
+<symbol id="map-marker" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z"/></symbol>
+<symbol id="map-marker-locate" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path d="M19.72 43.73l.706.66.683-.683c2.038-2.04 4.04-3.864 5.934-5.588l.179-.163c6.32-5.755 11.624-10.585 11.624-18.493C38.846 9.267 30.59 1 20.402 1 10.214 1 1.957 9.267 1.957 19.463c0 4.152 1.08 7.233 3.179 10.152 2.04 2.84 5.05 5.523 8.833 8.899l.078.07c1.717 1.531 3.607 3.217 5.672 5.147zm6.508-24.267a5.83 5.83 0 01-5.826 5.833 5.83 5.83 0 01-5.826-5.833 5.83 5.83 0 015.826-5.833 5.83 5.83 0 015.826 5.833z" fill="#D50000" stroke="#fff" stroke-width="2"/></symbol>
-<symbol id="adress" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="adress" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 2C12.6055 2.0145 14.1397 2.68885 15.265 3.87463C16.3902 5.06042 17.0142 6.66048 16.9998 8.32269C16.9998 11.8208 12.1242 19 11 19C9.87584 19 5.00025 11.8208 5.00025 8.32269C4.98578 6.66048 5.60982 5.06042 6.73504 3.87463C7.86026 2.68885 9.39446 2.0145 11 2ZM10.9999 5.55695C12.0865 5.53677 13.0768 6.19906 13.5059 7.23274C13.9349 8.26643 13.7173 9.4661 12.9553 10.2683C12.1933 11.0704 11.0384 11.3157 10.0329 10.8888C9.02744 10.4619 8.37129 9.44779 8.37266 8.32272C8.36215 6.80858 9.53743 5.57133 10.9999 5.55695Z" fill="#333333"/>
</symbol>
-<symbol id="computer" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="liste" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<rect x="10" y="9" width="16" height="2" rx="1" />
+<rect x="10" y="15" width="16" height="2" rx="1" />
+<rect x="10" y="21" width="16" height="2" rx="1" />
+<rect x="6" y="9" width="2" height="2" rx="1" />
+<rect x="6" y="15" width="2" height="2" rx="1" />
+<rect x="6" y="21" width="2" height="2" rx="1"/>
+</symbol>
+
+<svg id="user" viewBox="0 0 28 25" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0256 13.9213C22.2638 12.4488 23 10.5413 23 8.5C22.9665 3.81496 19.185 0 14.5 0C9.81496 0 6 3.81496 6 8.5C6 13.185 9.81496 17 14.5 17C16.5079 17 18.3819 16.2972 19.8209 15.126C20.2289 14.717 20.2289 14.717 21.0256 13.9213ZM7.67323 8.5C7.67323 4.7185 10.7185 1.67323 14.5 1.67323C18.2815 1.67323 21.3268 4.7185 21.3268 8.5C21.3268 12.2815 18.2815 15.3268 14.5 15.3268C10.7185 15.3268 7.67323 12.248 7.67323 8.5Z" fill="#333333"/>
+<path d="M13.2564 17.0414C11.6597 16.8372 10.0864 16.1466 8.76423 15H8.68966C3.89049 15 0 19.1129 0 24.1864V23.9793C0 24.543 0.432277 25 0.965517 25C1.49876 25 1.93103 24.543 1.93103 23.9793V24.1864C1.93103 20.2403 4.95697 17.0414 8.68966 17.0414H13.2564Z" fill="#333333"/>
+<path d="M15.3566 17.0414H19.3103C23.043 17.0414 26.069 20.2403 26.069 24.1864V23.9793C26.069 24.543 26.5012 25 27.0345 25C27.5677 25 28 24.543 28 23.9793V24.1864C28 19.335 24.4427 15.3619 19.9351 15.0234C18.5996 16.1728 16.9994 16.8552 15.3566 17.0414Z" fill="#333333"/>
+</svg>
+
+<symbol id="computer" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<rect x="2.5" y="3.5" width="17" height="11" rx="0.5" stroke="#333333"/>
<rect x="2" y="12" width="18" height="2" fill="#333333"/>
<rect x="9" y="15" width="4" height="2" fill="#333333"/>
<path d="M7 17.382C7 17.1479 7.13226 16.9339 7.34164 16.8292L8.78885 16.1056C8.92771 16.0361 9.08082 16 9.23607 16H12.7639C12.9192 16 13.0723 16.0361 13.2111 16.1056L14.6584 16.8292C14.8677 16.9339 15 17.1479 15 17.382C15 17.7233 14.7233 18 14.382 18H7.61803C7.2767 18 7 17.7233 7 17.382Z" fill="#333333"/>
</symbol>
-<symbol id="date" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="date" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H5V13H8V10Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44771 4 2 4.44772 2 5V19C2 19.5523 2.44771 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55228 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
</symbol>
-<symbol id ="email" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id ="email" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 4H19.5C20.3284 4 21 4.67157 21 5.5V16.0714C21 16.8998 20.3284 17.5714 19.5 17.5714H3.5C2.67157 17.5714 2 16.8998 2 16.0714V5.5C2 4.67157 2.67157 4 3.5 4ZM2.91716 6.02444C3.04832 5.78143 3.35163 5.69075 3.59464 5.8219L11.2431 9.94966C11.5474 10.1138 11.9148 10.1093 12.2149 9.93753L19.3945 5.82797C19.6341 5.69079 19.9396 5.77387 20.0768 6.01353C20.214 6.25318 20.1309 6.55867 19.8913 6.69585L12.7116 10.8054C12.1116 11.1489 11.3767 11.1581 10.7682 10.8297L3.11971 6.70192C2.8767 6.57077 2.78602 6.26745 2.91716 6.02444Z" fill="#333333"/>
</symbol>
-<symbol id="pass" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="pass" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.55556 5C1.24873 5 1 5.24873 1 5.55556V14.4444C1 14.7513 1.24873 15 1.55556 15H20.4444C20.7513 15 21 14.7513 21 14.4444V5.55556C21 5.24873 20.7513 5 20.4444 5H1.55556ZM4.77222 8.76388C4.78333 8.77499 4.79722 8.78055 4.81389 8.78055H4.91667C4.93333 8.78055 4.94722 8.77499 4.95833 8.76388C4.96944 8.75277 4.97683 8.73888 4.98055 8.72221L5.03055 8.3861H5.43889L5.38889 8.72221C5.38705 8.73888 5.39167 8.75277 5.40278 8.76388C5.41389 8.77499 5.42778 8.78055 5.44444 8.78055H5.54722C5.56389 8.78055 5.57778 8.77499 5.58889 8.76388C5.6 8.75277 5.60739 8.73888 5.61111 8.72221L5.66111 8.3861H5.99444C6.01294 8.3861 6.02778 8.38055 6.03889 8.36943C6.05183 8.35832 6.05833 8.34349 6.05833 8.32499V8.23055C6.05833 8.21205 6.05183 8.19721 6.03889 8.1861C6.02778 8.17499 6.01294 8.16943 5.99444 8.16943H5.69444L5.76667 7.68055H6.06667C6.08517 7.68055 6.1 7.67499 6.11111 7.66388C6.12406 7.65277 6.13056 7.63793 6.13056 7.61943V7.52499C6.13056 7.50649 6.12406 7.49166 6.11111 7.48055C6.1 7.46943 6.08517 7.46388 6.06667 7.46388H5.79722L5.84722 7.12777C5.84905 7.1111 5.84444 7.09721 5.83333 7.0861C5.82222 7.07499 5.80833 7.06943 5.79167 7.06943H5.68889C5.67222 7.06943 5.65833 7.07499 5.64722 7.0861C5.63794 7.09721 5.6315 7.1111 5.62778 7.12777L5.57778 7.46388H5.16667L5.21667 7.12777C5.2185 7.1111 5.21389 7.09721 5.20278 7.0861C5.19167 7.07499 5.17778 7.06943 5.16111 7.06943H5.05833C5.04167 7.06943 5.02778 7.07499 5.01667 7.0861C5.00739 7.09721 5.00094 7.1111 4.99722 7.12777L4.94722 7.46388H4.60555C4.58705 7.46388 4.57222 7.46943 4.56111 7.48055C4.55 7.49166 4.54444 7.50649 4.54444 7.52499V7.61943C4.54444 7.63793 4.55 7.65277 4.56111 7.66388C4.57222 7.67499 4.58705 7.68055 4.60555 7.68055H4.91389L4.84167 8.16943H4.53333C4.51483 8.16943 4.5 8.17499 4.48889 8.1861C4.47778 8.19721 4.47222 8.21205 4.47222 8.23055V8.32499C4.47222 8.34349 4.47778 8.35832 4.48889 8.36943C4.5 8.38055 4.51483 8.3861 4.53333 8.3861H4.80833L4.75833 8.72221C4.7565 8.73888 4.76111 8.75277 4.77222 8.76388ZM6.34239 8.87221C6.3535 8.88332 6.3665 8.88888 6.38128 8.88888H6.52294C6.5415 8.88888 6.55628 8.88427 6.56739 8.87499C6.58039 8.86388 6.58872 8.85277 6.59239 8.84166L6.74517 8.44721H7.65628L7.80905 8.84166C7.81278 8.85277 7.82017 8.86388 7.83128 8.87499C7.84239 8.88427 7.85817 8.88888 7.8785 8.88888H8.02017C8.035 8.88888 8.04794 8.88332 8.05906 8.87221C8.07017 8.8611 8.07572 8.84816 8.07572 8.83332L8.07017 8.80277L7.38406 7.00555C7.36928 6.96482 7.33961 6.94443 7.29517 6.94443H7.10628C7.06183 6.94443 7.03222 6.96482 7.01739 7.00555L6.3285 8.80277C6.32667 8.80832 6.32572 8.81849 6.32572 8.83332C6.32572 8.84816 6.33128 8.8611 6.34239 8.87221ZM8.38939 8.87221C8.40239 8.88332 8.41811 8.88888 8.43661 8.88888H8.58383C8.60239 8.88888 8.61811 8.88332 8.63106 8.87221C8.64406 8.85927 8.6505 8.84349 8.6505 8.82499V8.13055H9.14217C9.35328 8.13055 9.51811 8.08054 9.63661 7.98054C9.757 7.87871 9.81717 7.73149 9.81717 7.53888C9.81717 7.34627 9.757 7.19904 9.63661 7.09721C9.51628 6.99538 9.35144 6.94443 9.14217 6.94443H8.43661C8.41811 6.94443 8.40239 6.95093 8.38939 6.96388C8.37828 6.97499 8.37272 6.99071 8.37272 7.0111V8.82499C8.37272 8.84349 8.37828 8.85927 8.38939 8.87221ZM10.5966 8.87221C10.6096 8.88332 10.6253 8.88888 10.6438 8.88888H10.7883C10.8068 8.88888 10.8226 8.88332 10.8355 8.87221C10.8485 8.85927 10.8549 8.84349 10.8549 8.82499V7.19166H11.3855C11.4041 7.19166 11.4198 7.1861 11.4327 7.17499C11.4457 7.16205 11.4522 7.14627 11.4522 7.12777V7.0111C11.4522 6.99071 11.4457 6.97499 11.4327 6.96388C11.4216 6.95093 11.4059 6.94443 11.3855 6.94443H10.0466C10.0281 6.94443 10.0124 6.95093 9.99939 6.96388C9.98828 6.97682 9.98272 6.9926 9.98272 7.0111V7.12777C9.98272 7.14627 9.98828 7.16205 9.99939 7.17499C10.0124 7.1861 10.0281 7.19166 10.0466 7.19166H10.5799V8.82499C10.5799 8.84349 10.5855 8.85927 10.5966 8.87221ZM11.7803 8.87221C11.7932 8.88332 11.8089 8.88888 11.8275 8.88888H11.9747C11.9932 8.88888 12.0081 8.88332 12.0192 8.87221C12.0321 8.85927 12.0386 8.84349 12.0386 8.82499V7.00832C12.0386 6.98982 12.0321 6.97499 12.0192 6.96388C12.0081 6.95093 11.9932 6.94443 11.9747 6.94443H11.8275C11.8089 6.94443 11.7932 6.95093 11.7803 6.96388C11.7692 6.97499 11.7636 6.98982 11.7636 7.00832V8.82499C11.7636 8.84349 11.7692 8.85927 11.7803 8.87221ZM12.6564 8.71666C12.7861 8.84999 12.975 8.91666 13.2231 8.91666C13.3879 8.91666 13.5278 8.88793 13.6426 8.83055C13.7574 8.77127 13.8444 8.69443 13.9037 8.59999C13.9629 8.50554 13.9953 8.40371 14.0009 8.29443C14.0028 8.27777 13.9972 8.26482 13.9842 8.25555C13.9731 8.24443 13.9592 8.23888 13.9426 8.23888H13.7898C13.7713 8.23888 13.7564 8.24349 13.7453 8.25277C13.7342 8.26204 13.7259 8.27871 13.7203 8.30277C13.6907 8.44166 13.6342 8.53982 13.5509 8.59721C13.4694 8.65277 13.3602 8.68055 13.2231 8.68055C12.9046 8.68055 12.7398 8.50371 12.7287 8.14999C12.7268 8.09627 12.7259 8.0176 12.7259 7.91388C12.7259 7.81016 12.7268 7.73332 12.7287 7.68332C12.7398 7.3296 12.9046 7.15277 13.2231 7.15277C13.3602 7.15277 13.4694 7.18149 13.5509 7.23888C13.6324 7.29443 13.6889 7.39166 13.7203 7.53055C13.7296 7.57316 13.7528 7.59443 13.7898 7.59443H13.9426C13.9574 7.59443 13.9703 7.58982 13.9814 7.58055C13.9944 7.56943 14.0009 7.55649 14.0009 7.54166V7.5361C13.9953 7.42871 13.9629 7.32777 13.9037 7.23332C13.8444 7.13888 13.7574 7.06293 13.6426 7.00555C13.5278 6.94627 13.3879 6.91666 13.2231 6.91666C12.9768 6.91666 12.7889 6.98427 12.6592 7.11943C12.5296 7.25277 12.4602 7.4361 12.4509 7.66943C12.4491 7.72127 12.4481 7.8046 12.4481 7.91943C12.4481 8.03238 12.4491 8.11388 12.4509 8.16388C12.4602 8.39904 12.5287 8.58332 12.6564 8.71666ZM4.25 11C4.11193 11 4 11.1119 4 11.25C4 11.3881 4.11193 11.5 4.25 11.5H12.7259C12.864 11.5 12.9759 11.3881 12.9759 11.25C12.9759 11.1119 12.864 11 12.7259 11H4.25ZM16.6144 11.9418H16.0068C16.0133 12.1185 16.0594 12.249 16.1451 12.3333C16.2321 12.4177 16.3749 12.4598 16.5735 12.4598C16.702 12.4598 16.8163 12.4398 16.9163 12.3996L17 12.9398C16.8273 12.9799 16.6566 13 16.4878 13C16.1373 13 15.8575 12.9063 15.6485 12.7189C15.4408 12.5315 15.3317 12.2724 15.3213 11.9418H15V11.6205H15.3213V11.3755H15V11.0562H15.3272C15.3518 10.7242 15.4726 10.4652 15.6894 10.2791C15.9062 10.093 16.1925 10 16.5482 10C16.6858 10 16.8364 10.0207 17 10.0622L16.9163 10.6044C16.815 10.5629 16.7066 10.5422 16.591 10.5422C16.4119 10.5422 16.2749 10.5843 16.1801 10.6687C16.0854 10.7517 16.0295 10.8809 16.0127 11.0562H16.6144V11.3755H16.0068V11.6205H16.6144V11.9418ZM9.12828 7.89721C9.2635 7.89721 9.36533 7.86666 9.43383 7.80554C9.50422 7.74443 9.53939 7.65554 9.53939 7.53888C9.53939 7.42221 9.50517 7.33332 9.43661 7.27221C9.36811 7.20927 9.26533 7.17777 9.12828 7.17777H8.64772V7.89721H9.12828ZM7.20072 7.22221L7.57572 8.20832H6.82572L7.20072 7.22221ZM5.54444 7.68055L5.47222 8.16943H5.06389L5.13611 7.68055H5.54444ZM19.75 6C19.6119 6 19.5 6.11193 19.5 6.25V6.75C19.5 6.88807 19.6119 7 19.75 7C19.8881 7 20 6.88807 20 6.75V6.25C20 6.11193 19.8881 6 19.75 6ZM19.5 8.25C19.5 8.11193 19.6119 8 19.75 8C19.8881 8 20 8.11193 20 8.25V10.75C20 10.8881 19.8881 11 19.75 11C19.6119 11 19.5 10.8881 19.5 10.75V8.25ZM19.75 12C19.6119 12 19.5 12.1119 19.5 12.25V13.75C19.5 13.8881 19.6119 14 19.75 14C19.8881 14 20 13.8881 20 13.75V12.25C20 12.1119 19.8881 12 19.75 12Z" fill="#333333"/>
</symbol>
-<symbol id="public" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="public" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0474 10.437C14.2168 9.73893 15 8.46093 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 8.46093 7.7832 9.73893 8.95263 10.437C7.21207 11.2192 6 12.9681 6 15V18H16V15C16 12.9681 14.7879 11.2192 13.0474 10.437Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.917 14H21V11.8C21 10.3099 20.1516 9.02743 18.9332 8.45382C19.7518 7.94188 20.3 7.00468 20.3 5.93333C20.3 4.3133 19.0464 3 17.5 3C16.542 3 15.6963 3.50407 15.1915 4.27286C15.7028 5.05718 16 5.99389 16 7C16 7.44599 15.9416 7.87827 15.832 8.28963C15.9075 8.34834 15.9858 8.40316 16.0668 8.45382C15.9493 8.50916 15.8352 8.57108 15.725 8.63916C15.5088 9.26223 15.173 9.82915 14.7453 10.3124C15.8722 11.214 16.6677 12.514 16.917 14ZM14.9929 7.24086C14.9976 7.16118 15 7.08087 15 7C15 6.48461 14.9025 5.99199 14.725 5.53957C14.7085 5.66836 14.7 5.79981 14.7 5.93333C14.7 6.40316 14.8054 6.84718 14.9929 7.24086ZM15.9 14H14V11.8C14 11.5447 14.0249 11.2955 14.0723 11.055C14.9949 11.7745 15.6585 12.8106 15.9 14Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.80852 4.27286C6.30371 3.50407 5.45804 3 4.5 3C2.9536 3 1.7 4.3133 1.7 5.93333C1.7 7.00468 2.24824 7.94188 3.06684 8.45382C1.84845 9.02743 1 10.3099 1 11.8V14H5.08296C5.33228 12.514 6.12778 11.214 7.25473 10.3124C6.82705 9.82915 6.49117 9.26223 6.27499 8.63916C6.16478 8.57108 6.05069 8.50916 5.93316 8.45382C6.01417 8.40316 6.09253 8.34834 6.16797 8.28963C6.05843 7.87827 6 7.44599 6 7C6 5.99389 6.29717 5.05718 6.80852 4.27286ZM7.9277 11.055C7.0051 11.7745 6.34145 12.8106 6.10002 14H8V11.8C8 11.5447 7.9751 11.2955 7.9277 11.055ZM7.27499 5.53957C7.29148 5.66836 7.3 5.79981 7.3 5.93333C7.3 6.40316 7.19457 6.84718 7.00713 7.24086C7.0024 7.16118 7 7.08087 7 7C7 6.48461 7.09747 5.99199 7.27499 5.53957Z" fill="#333333"/>
</symbol>
-<symbol id="structure" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="structure" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 3C11.2228 3.00746 11.4372 3.08448 11.612 3.21953L11.6211 3.21857L11.6971 3.28918L18.6775 9.0457C18.6952 9.06031 18.7119 9.07606 18.7275 9.09284C18.8592 9.23463 18.9477 9.40976 18.983 9.59841C19.0181 9.78692 18.9987 9.9816 18.9268 10.1599C18.8549 10.3383 18.7333 10.4933 18.5761 10.6073C18.4187 10.7214 18.232 10.7899 18.037 10.8052C18.0232 10.8063 18.0092 10.8068 17.9953 10.8068H17.2786L17.3466 17.9693L17.3466 17.974C17.3466 18.246 17.2364 18.5068 17.0402 18.6991C16.844 18.8913 16.5779 18.9994 16.3003 18.9994H13.1615C12.884 18.9994 12.6178 18.8913 12.4216 18.6991C12.2254 18.5068 12.1152 18.246 12.1152 17.974V14.493C12.1152 14.4908 12.1152 14.4886 12.1152 14.4864C12.1152 14.4837 12.1153 14.481 12.1154 14.4783C12.1389 13.6731 12.0857 13.088 11.9055 12.7135C11.8228 12.5416 11.7197 12.4288 11.5913 12.3537C11.4661 12.2806 11.2814 12.2228 11 12.2171V12.2177C10.7186 12.2234 10.5339 12.2812 10.4087 12.3543C10.2803 12.4294 10.1772 12.5422 10.0945 12.7141C9.91426 13.0886 9.86107 13.6737 9.88462 14.4789C9.88469 14.4815 9.88475 14.4841 9.88478 14.4867C9.88481 14.489 9.88483 14.4913 9.88483 14.4936V17.9746C9.88483 18.2466 9.77456 18.5074 9.57838 18.6997C9.38219 18.8919 9.11604 19 8.83854 19H5.69966C5.42215 19 5.156 18.8919 4.95982 18.6997C4.76364 18.5074 4.65336 18.2466 4.65336 17.9746L4.65339 17.9699L4.72135 10.8074H4.00466C3.99075 10.8074 3.97684 10.8069 3.96298 10.8058C3.76805 10.7905 3.58128 10.722 3.42389 10.6079C3.26667 10.4939 3.14509 10.3389 3.07317 10.1605C3.0013 9.9822 2.98192 9.78752 3.01705 9.599C3.0523 9.41035 3.14082 9.23522 3.27253 9.09344C3.28812 9.07666 3.30483 9.06091 3.32255 9.04629L10.3029 3.28978L10.3789 3.21917L10.388 3.22013C10.5628 3.08508 10.7772 3.00806 11 3.0006V3Z" fill="#333333"/>
</symbol>
-<symbol id="tel" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="tel" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M14.4979 12.1969L11.9719 14.7228L6.92 9.67091L9.44596 7.14494C9.74589 6.84502 9.74589 6.35946 9.44596 6.0603L5.61061 2.22494C5.31068 1.92502 4.82512 1.92502 4.52597 2.22494L2 4.75091C2 13.2401 8.40121 19.6428 16.8919 19.6428L19.4179 17.1169C19.7178 16.8169 19.7178 16.3314 19.4179 16.0322L15.5825 12.1969C15.2834 11.8977 14.7971 11.8977 14.4979 12.1969Z" fill="#333333"/>
</symbol>
-<symbol id="web" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="web" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M11 4C7.13895 4 4 7.13895 4 11C4 14.8611 7.13895 18 11 18C14.8611 18 18 14.8611 18 11C18 7.13895 14.8611 4 11 4ZM16.2611 8.31789H14.4926C14.2568 7.25684 13.9032 6.32842 13.4316 5.60632C14.6547 6.16632 15.6568 7.12421 16.2611 8.31789ZM16.9095 11C16.9095 11.5453 16.8358 12.0905 16.6884 12.5916H14.6842C14.7432 12.0758 14.7726 11.5453 14.7726 11C14.7726 10.4547 14.7432 9.92421 14.6842 9.40842H16.7032C16.8358 9.90948 16.9095 10.4547 16.9095 11ZM5.09053 11C5.09053 10.4547 5.16421 9.90948 5.31158 9.40842H7.33052C7.27158 9.92421 7.24211 10.4547 7.24211 11C7.24211 11.5453 7.27158 12.0758 7.33052 12.5916H5.31158C5.16421 12.0905 5.09053 11.5453 5.09053 11ZM8.31789 11C8.31789 10.4695 8.3621 9.93895 8.43579 9.40842H10.4695V12.5916H8.43579C8.3621 12.0611 8.31789 11.5305 8.31789 11ZM11.5453 5.22316C12.3558 5.60631 13.0042 6.84421 13.3579 8.33263H11.5453V5.22316ZM10.4547 5.22316V8.33263H8.64211C8.99579 6.84421 9.64421 5.60631 10.4547 5.22316ZM10.4547 13.6821V16.7916C9.64421 16.4084 8.99579 15.1705 8.64211 13.6821H10.4547ZM11.5453 16.7768V13.6674H13.3579C13.0042 15.1558 12.3558 16.3937 11.5453 16.7768ZM11.5453 12.5916V9.40842H13.5789C13.6526 9.93895 13.6968 10.4695 13.6968 11C13.6968 11.5305 13.6526 12.0611 13.5789 12.5916H11.5453ZM8.56842 5.62105C8.11158 6.34316 7.74316 7.27158 7.50737 8.33263H5.73895C6.34316 7.12421 7.34526 6.16632 8.56842 5.62105ZM5.73895 13.6821H7.50737C7.74316 14.7432 8.09684 15.6716 8.56842 16.3937C7.34526 15.8337 6.34316 14.8758 5.73895 13.6821ZM13.4316 16.3789C13.8884 15.6568 14.2568 14.7284 14.4926 13.6674H16.2611C15.6568 14.8758 14.6547 15.8337 13.4316 16.3789Z" fill="#333333"/>
</symbol>
-<symbol id="accueil" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="accueil" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M17.375 10.8789C19.724 11.194 21.6862 12.2539 23.2617 14.0586C24.8372 15.8633 25.625 17.9688 25.625 20.375H6.375C6.375 17.9688 7.16276 15.8633 8.73828 14.0586C10.3138 12.2539 12.276 11.194 14.625 10.8789V10.0625H13.9375C13.737 10.0625 13.5651 10.0052 13.4219 9.89062C13.3073 9.7474 13.25 9.57552 13.25 9.375V8.6875C13.25 8.48698 13.3073 8.32943 13.4219 8.21484C13.5651 8.07161 13.737 8 13.9375 8H18.0625C18.263 8 18.4206 8.07161 18.5352 8.21484C18.6784 8.32943 18.75 8.48698 18.75 8.6875V9.375C18.75 9.57552 18.6784 9.7474 18.5352 9.89062C18.4206 10.0052 18.263 10.0625 18.0625 10.0625H17.375V10.8789ZM26.3125 21.75C26.513 21.75 26.6706 21.8216 26.7852 21.9648C26.9284 22.0794 27 22.237 27 22.4375V23.8125C27 24.013 26.9284 24.1849 26.7852 24.3281C26.6706 24.4427 26.513 24.5 26.3125 24.5H5.6875C5.48698 24.5 5.3151 24.4427 5.17188 24.3281C5.05729 24.1849 5 24.013 5 23.8125V22.4375C5 22.237 5.05729 22.0794 5.17188 21.9648C5.3151 21.8216 5.48698 21.75 5.6875 21.75H26.3125Z" fill="black"/>
</symbol>
-<symbol id="demarches" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="demarches" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="11" y="10" width="2" height="2" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 11C8.23858 11 6 13.2386 6 16V23C6 26.3137 8.68629 29 12 29C15.3137 29 18 26.3137 18 23V16C18 13.2386 15.7614 11 13 11H11ZM12 14.5C11.4477 14.5 11 14.9477 11 15.5V18.5C11 19.0523 11.4477 19.5 12 19.5C12.5523 19.5 13 19.0523 13 18.5V15.5C13 14.9477 12.5523 14.5 12 14.5Z" fill="black"/>
<path d="M12 10.5C12 9.33333 12 9.7 12 8.5C12 7 13 3 16.9999 3C20.9998 3 21.9999 7 21.9999 9.5C21.9999 12 21.9999 11 21.9999 12.5C21.9999 14 22.4999 17 24.9999 17C27.4999 17 27.9999 14.5 27.9999 12.5" stroke="black"/>
</symbol>
-<symbol id="equipement" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="equipement" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M18.75 19.0625V17H27V23.1875C27 23.7318 26.7852 24.2044 26.3555 24.6055C25.9544 25.0352 25.4818 25.25 24.9375 25.25H7.0625C6.51823 25.25 6.03125 25.0352 5.60156 24.6055C5.20052 24.2044 5 23.7318 5 23.1875V17H13.25V19.0625C13.25 19.263 13.3073 19.4349 13.4219 19.5781C13.5651 19.6927 13.737 19.75 13.9375 19.75H18.0625C18.263 19.75 18.4206 19.6927 18.5352 19.5781C18.6784 19.4349 18.75 19.263 18.75 19.0625ZM24.9375 10.125C25.4818 10.125 25.9544 10.3398 26.3555 10.7695C26.7852 11.1706 27 11.6432 27 12.1875V15.625H5V12.1875C5 11.6432 5.20052 11.1706 5.60156 10.7695C6.03125 10.3398 6.51823 10.125 7.0625 10.125H10.5V8.0625C10.5 7.51823 10.7005 7.04557 11.1016 6.64453C11.5312 6.21484 12.0182 6 12.5625 6H19.4375C19.9818 6 20.4544 6.21484 20.8555 6.64453C21.2852 7.04557 21.5 7.51823 21.5 8.0625V10.125H24.9375ZM18.75 10.125V8.75H13.25V10.125H18.75Z" fill="black"/>
</symbol>
-<symbol id ="label" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id ="label" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M6.375 26.75V24H25.625V26.75H6.375ZM22.875 15.75C24.0208 15.75 24.9948 16.151 25.7969 16.9531C26.599 17.7552 27 18.7292 27 19.875V21.25C27 21.6224 26.8568 21.9518 26.5703 22.2383C26.3125 22.4961 25.9974 22.625 25.625 22.625H6.375C6.0026 22.625 5.67318 22.4961 5.38672 22.2383C5.12891 21.9518 5 21.6224 5 21.25V19.875C5 18.7292 5.40104 17.7552 6.20312 16.9531C7.00521 16.151 7.97917 15.75 9.125 15.75H12.0039C12.3477 15.75 12.6341 15.6354 12.8633 15.4062C13.1211 15.1484 13.25 14.8477 13.25 14.5039V14.4609C13.25 13.3151 12.9206 12.026 12.2617 10.5938C12.0039 10.0495 11.875 9.47656 11.875 8.875C11.875 7.61458 12.362 6.56901 13.3359 5.73828C14.3099 4.90755 15.4414 4.60677 16.7305 4.83594C17.5612 4.97917 18.2773 5.36589 18.8789 5.99609C19.5091 6.59766 19.9102 7.3138 20.082 8.14453C20.2253 9.0612 20.082 9.92057 19.6523 10.7227C19.0508 11.9258 18.75 13.043 18.75 14.0742V14.5039C18.75 14.8477 18.8646 15.1484 19.0938 15.4062C19.3516 15.6354 19.6523 15.75 19.9961 15.75H22.875Z" fill="black"/>
</symbol>
-<symbol id="services" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="services" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M26.1416 18.2344C26.3994 18.349 26.4854 18.5495 26.3994 18.8359C25.9124 20.3542 25.1247 21.7005 24.0361 22.875C23.8643 23.0755 23.6637 23.1185 23.4346 23.0039L21.5869 21.9297C20.8135 22.5885 19.9398 23.0898 18.9658 23.4336V25.5391C18.9658 25.8255 18.8369 25.9974 18.5791 26.0547C17.0036 26.3984 15.4424 26.3984 13.8955 26.0547C13.609 25.9974 13.4658 25.8255 13.4658 25.5391V23.4336C12.4919 23.0898 11.6182 22.5885 10.8447 21.9297L9.04004 23.0039C8.78223 23.1185 8.56738 23.0755 8.39551 22.875C7.30697 21.7005 6.51921 20.3542 6.03223 18.8359C5.94629 18.5781 6.03223 18.3776 6.29004 18.2344L8.09473 17.1602C8.00879 16.6732 7.96582 16.1719 7.96582 15.6562C7.96582 15.1406 8.00879 14.6393 8.09473 14.1523L6.29004 13.0781C6.03223 12.9635 5.94629 12.763 6.03223 12.4766C6.51921 10.9583 7.30697 9.61198 8.39551 8.4375C8.56738 8.23698 8.78223 8.20833 9.04004 8.35156L10.8447 9.38281C11.6182 8.72396 12.4919 8.22266 13.4658 7.87891V5.77344C13.4658 5.48698 13.5947 5.3151 13.8525 5.25781C15.4281 4.91406 17.0036 4.91406 18.5791 5.25781C18.8369 5.3151 18.9658 5.48698 18.9658 5.77344V7.87891C19.9398 8.22266 20.8135 8.72396 21.5869 9.38281L23.3916 8.30859C23.6494 8.19401 23.8643 8.23698 24.0361 8.4375C25.1247 9.61198 25.9124 10.9583 26.3994 12.4766C26.4854 12.763 26.3994 12.9635 26.1416 13.0781L24.3369 14.1523C24.5088 15.1549 24.5088 16.1576 24.3369 17.1602L26.1416 18.2344ZM13.7666 18.1055C14.4541 18.7643 15.2705 19.0938 16.2158 19.0938C17.1611 19.0938 17.9632 18.7643 18.6221 18.1055C19.3096 17.418 19.6533 16.6016 19.6533 15.6562C19.6533 14.7109 19.3096 13.9089 18.6221 13.25C17.9632 12.5625 17.1611 12.2188 16.2158 12.2188C15.2705 12.2188 14.4541 12.5625 13.7666 13.25C13.1077 13.9089 12.7783 14.7109 12.7783 15.6562C12.7783 16.6016 13.1077 17.418 13.7666 18.1055Z" fill="black"/>
</symbol>
-<symbol id="print" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="print" fill="none" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="8" width="12" height="5" stroke="black" stroke-width="2"/>
<rect x="10" y="17" width="12" height="8" stroke="black" stroke-width="2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z" fill="black"/>
</symbol>
-<symbol id="calendar" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="calendar" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M8 10H5V13H8V10Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 2C5.44772 2 5 2.44772 5 3V4H3C2.44772 4 2 4.44772 2 5V19C2 19.5523 2.44772 20 3 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H17V3C17 2.44772 16.5523 2 16 2C15.4477 2 15 2.44772 15 3V4H7V3C7 2.44772 6.55229 2 6 2ZM4 9V18H18V9H4Z" fill="#333333"/>
</symbol>
-<symbol id="group" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="group" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg">
<path d="M13.0474 10.437C14.2168 9.73893 15 8.46093 15 7C15 4.79086 13.2091 3 11 3C8.79086 3 7 4.79086 7 7C7 8.46093 7.7832 9.73893 8.95263 10.437C7.21207 11.2192 6 12.9681 6 15V18H16V15C16 12.9681 14.7879 11.2192 13.0474 10.437Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.917 14H21V11.8C21 10.3099 20.1516 9.02743 18.9332 8.45382C19.7518 7.94188 20.3 7.00468 20.3 5.93333C20.3 4.3133 19.0464 3 17.5 3C16.542 3 15.6963 3.50407 15.1915 4.27286C15.7028 5.05718 16 5.99389 16 7C16 7.44599 15.9416 7.87827 15.832 8.28963C15.9075 8.34834 15.9858 8.40316 16.0668 8.45382C15.9493 8.50916 15.8352 8.57108 15.725 8.63916C15.5088 9.26223 15.173 9.82915 14.7453 10.3124C15.8722 11.214 16.6677 12.514 16.917 14ZM14.9929 7.24086C14.9976 7.16118 15 7.08087 15 7C15 6.48461 14.9025 5.99199 14.725 5.53957C14.7085 5.66836 14.7 5.79981 14.7 5.93333C14.7 6.40316 14.8054 6.84718 14.9929 7.24086ZM15.9 14H14V11.8C14 11.5447 14.0249 11.2955 14.0723 11.055C14.9949 11.7745 15.6585 12.8106 15.9 14Z" fill="#333333"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.80852 4.27286C6.30371 3.50407 5.45804 3 4.5 3C2.9536 3 1.7 4.3133 1.7 5.93333C1.7 7.00468 2.24824 7.94188 3.06684 8.45382C1.84845 9.02743 1 10.3099 1 11.8V14H5.08296C5.33228 12.514 6.12778 11.214 7.25473 10.3124C6.82705 9.82915 6.49117 9.26223 6.27499 8.63916C6.16478 8.57108 6.05069 8.50916 5.93316 8.45382C6.01417 8.40316 6.09253 8.34834 6.16797 8.28963C6.05843 7.87827 6 7.44599 6 7C6 5.99389 6.29717 5.05718 6.80852 4.27286ZM7.9277 11.055C7.0051 11.7745 6.34145 12.8106 6.10002 14H8V11.8C8 11.5447 7.9751 11.2955 7.9277 11.055ZM7.27499 5.53957C7.29148 5.66836 7.3 5.79981 7.3 5.93333C7.3 6.40316 7.19457 6.84718 7.00713 7.24086C7.0024 7.16118 7 7.08087 7 7C7 6.48461 7.09747 5.99199 7.27499 5.53957Z" fill="#333333"/>
</symbol>
-<symbol id="mdm" width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="mdm" viewBox="0 0 19 24" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
<rect fill="white" y="-0.108661" width="19" height="24"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
@@ -92,7 +107,7 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34018C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617ZM11 4.5C11 5.32843 10.3284 6 9.5 6C8.67157 6 8 5.32843 8 4.5C8 3.67157 8.67157 3 9.5 3C10.3284 3 11 3.67157 11 4.5ZM4.25 15.9354C3.54057 16.0544 3 16.6714 3 17.4146V18.75H4.25V15.9354ZM3 21.9146V19.25H4.25V21.9146H3ZM4.75 21.9146V19.25H6V21.9146H4.75ZM6 17.4146V18.75H4.75V15.9354C5.45943 16.0544 6 16.6714 6 17.4146ZM13 17.4146C13 16.6714 13.5406 16.0544 14.25 15.9354V18.75H13V17.4146ZM13 19.25V21.9146H14.25V19.25H13ZM14.75 19.25V21.9146H16V19.25H14.75ZM16 18.75V17.4146C16 16.6714 15.4594 16.0544 14.75 15.9354V18.75H16ZM14.25 8C13.5406 8.11902 13 8.73601 13 9.47926V10.8146H14.25V8ZM13 13.9793V11.3146H14.25V13.9793H13ZM14.75 13.9793V11.3146H16V13.9793H14.75ZM16 9.47926V10.8146H14.75V8C15.4594 8.11902 16 8.73601 16 9.47926ZM8 9.47926C8 8.73601 8.54057 8.11902 9.25 8V10.8146H8V9.47926ZM8 11.3146V13.9793H9.25V11.3146H8ZM9.75 11.3146V13.9793H11V11.3146H9.75ZM11 10.8146V9.47926C11 8.73601 10.4594 8.11902 9.75 8V10.8146H11ZM4.25 8C3.54057 8.11902 3 8.73601 3 9.47926V10.8146H4.25V8ZM3 13.9793V11.3146H4.25V13.9793H3ZM4.75 13.9793V11.3146H6V13.9793H4.75ZM6 9.47926V10.8146H4.75V8C5.45943 8.11902 6 8.73601 6 9.47926Z" fill="#D4C4A9"/>
</symbol>
-<symbol id="mdm-hover" width="19" height="24" viewBox="0 0 19 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<symbol id="mdm-hover" viewBox="0 0 19 24" xmlns="http://www.w3.org/2000/svg">
<mask id="path-1-outside-1" maskUnits="userSpaceOnUse" x="0" y="-0.108661" width="19" height="24" fill="black">
<rect fill="white" y="-0.108661" width="19" height="24"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.84054 5.57617C1.72559 6.04339 1 7.13416 1 8.34305V23H8V18.5C8 17.6716 8.67157 17 9.5 17C10.3284 17 11 17.6716 11 18.5V23H18V8.40362C18 7.1644 17.2381 6.05271 16.0823 5.60565L14.5555 5.01505C14.1291 4.85011 13.746 4.5899 13.4355 4.2543L10.9183 1.5332C10.1451 0.6974 8.83121 0.674761 8.0297 1.48343L5.19821 4.34019C4.92065 4.62023 4.5906 4.84281 4.22694 4.9952L2.84054 5.57617Z"/>
@@ -102,7 +117,7 @@
</symbol>
-<symbol id="wifi" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/symbol">
+<symbol id="wifi" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/symbol">
<g clip-path="url(#clip0)">
<path d="M1.08488 8.63175C3.61838 6.09825 7.11838 4.53125 10.9844 4.53125C14.8504 4.53125 18.3504 6.09825 20.8839 8.63175L19.4697 10.046C17.2981 7.87439 14.2981 6.53125 10.9844 6.53125C7.67067 6.53125 4.67067 7.8744 2.4991 10.046L1.08488 8.63175Z" fill="#333333"/>
<path d="M0.987882 8.72971C-1.46518 11.2313 -2.98671 14.6496 -3.01522 18.4233C-3.00846 17.5465 -2.91931 16.6682 -2.74662 15.8C-2.21539 13.1293 -0.917109 10.6726 0.987882 8.72971Z" fill="#333333"/>
diff --git a/src/assets/ico/user.svg b/src/assets/ico/user.svg
new file mode 100644
index 000000000..eb1d88b15
--- /dev/null
+++ b/src/assets/ico/user.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="25" viewBox="0 0 28 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0256 13.9213C22.2638 12.4488 23 10.5413 23 8.5C22.9665 3.81496 19.185 0 14.5 0C9.81496 0 6 3.81496 6 8.5C6 13.185 9.81496 17 14.5 17C16.5079 17 18.3819 16.2972 19.8209 15.126C20.2289 14.717 20.2289 14.717 21.0256 13.9213ZM7.67323 8.5C7.67323 4.7185 10.7185 1.67323 14.5 1.67323C18.2815 1.67323 21.3268 4.7185 21.3268 8.5C21.3268 12.2815 18.2815 15.3268 14.5 15.3268C10.7185 15.3268 7.67323 12.248 7.67323 8.5Z" fill="#333333"/>
+<path d="M13.2564 17.0414C11.6597 16.8372 10.0864 16.1466 8.76423 15H8.68966C3.89049 15 0 19.1129 0 24.1864V23.9793C0 24.543 0.432277 25 0.965517 25C1.49876 25 1.93103 24.543 1.93103 23.9793V24.1864C1.93103 20.2403 4.95697 17.0414 8.68966 17.0414H13.2564Z" fill="#333333"/>
+<path d="M15.3566 17.0414H19.3103C23.043 17.0414 26.069 20.2403 26.069 24.1864V23.9793C26.069 24.543 26.5012 25 27.0345 25C27.5677 25 28 24.543 28 23.9793V24.1864C28 19.335 24.4427 15.3619 19.9351 15.0234C18.5996 16.1728 16.9994 16.8552 15.3566 17.0414Z" fill="#333333"/>
+</svg>
diff --git a/src/assets/logos/ram_logo.svg b/src/assets/logos/ram_logo.svg
index d8bd6173f..a2a1b8765 100644
--- a/src/assets/logos/ram_logo.svg
+++ b/src/assets/logos/ram_logo.svg
@@ -1,9 +1,25 @@
-<svg width="127" height="70" viewBox="0 0 127 70" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.1764 46.3997V30.7881M24.1764 30.7881V17.6632C24.1764 17.1109 24.6234 16.6632 25.1757 16.6632C27.6739 16.6632 31.7707 16.6632 33.8408 16.6632C36.8145 16.6632 40.5315 18.15 40.5315 24.0973C40.5315 30.0446 34.5842 30.7881 27.8935 30.7881C22.5409 30.7881 23.1852 30.7881 24.1764 30.7881Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M42.0178 46.3998C42.2656 46.8954 42.0225 46.3998 40.531 42.6828C38.4226 37.4283 36.0726 30.7881 26.4082 30.7881H22" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M49.4521 46.4028C50.4434 42.1902 52.8718 32.5754 54.656 27.8175C56.4402 23.0597 58.8687 18.401 59.8599 16.6663C60.8511 17.9053 63.4283 21.8702 65.8072 27.8175C68.1862 33.7648 70.7633 42.6858 71.7545 46.4028" stroke="#D50000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M49.5063 31.5336L66.8166 31.5336" stroke="#D50000" stroke-width="2" stroke-linecap="round"/>
-<path d="M91.0928 33.7628C91.6875 34.9522 92.3318 34.2584 92.5796 33.7628C95.5533 28.8067 101.649 18.5972 102.244 17.4077C102.987 15.9209 104.474 15.1775 104.474 17.4077C104.474 19.1919 104.474 37.7276 104.474 46.4008" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M92.5771 33.7628C91.9824 34.9522 91.3381 34.2584 91.0903 33.7628C88.1167 28.8067 82.0207 18.5972 81.426 17.4077C80.6825 15.9209 79.1957 15.1775 79.1957 17.4077C79.1957 19.1919 79.1957 37.7276 79.1957 46.4008" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M41.7603 45.7377L43.9372 50.7621C44.571 52.225 46.0131 53.1718 47.6075 53.1718L75.243 53.1718C77.4521 53.1718 79.243 51.3809 79.243 49.1718V45.7377" stroke="black" stroke-width="2"/>
+<svg width="118" height="22" viewBox="0 0 118 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<rect x="32.2148" y="20.4286" width="11.7857" height="1.57143" rx="0.785714" fill="black"/>
+<rect x="66" y="20.4286" width="11.7857" height="1.57143" rx="0.785714" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.3583 17.2857V11.7857C24.3583 10.4839 25.4136 9.42855 26.7154 9.42855C28.0172 9.42855 29.0725 10.4839 29.0725 11.7857V17.2857C29.0725 18.5875 28.0172 19.6428 26.7154 19.6428C25.4136 19.6428 24.3583 18.5875 24.3583 17.2857ZM26.7154 7.07141C29.319 7.07141 31.4297 9.18207 31.4297 11.7857V17.2857C31.4297 19.8893 29.319 22 26.7154 22C24.1118 22 22.0011 19.8893 22.0011 17.2857V11.7857C22.0011 9.18207 24.1118 7.07141 26.7154 7.07141Z" fill="#D50000"/>
+<rect width="2.35714" height="16.5" transform="matrix(-1 0 0 1 24.3555 0)" fill="#D50000"/>
+<rect width="2.35714" height="16.5" transform="matrix(-1 0 0 1 2.35547 0)" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.07143 22H9.42857V11.7857C9.42857 9.18207 7.31791 7.07141 4.71429 7.07141C2.11066 7.07141 0 9.18207 0 11.7857V22H2.35714V11.7857C2.35714 10.4839 3.41247 9.42855 4.71429 9.42855C6.0161 9.42855 7.07143 10.4839 7.07143 11.7857V22Z" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0714 7.85714H20.4286V17.2857C20.4286 19.8893 18.3179 22 15.7143 22C13.1107 22 11 19.8893 11 17.2857V7.85714H13.3571V17.2857C13.3571 18.5875 14.4125 19.6429 15.7143 19.6429C17.0161 19.6429 18.0714 18.5875 18.0714 17.2857V7.85714Z" fill="#D50000"/>
+<rect width="2.35715" height="11" transform="matrix(-1 0 0 1 80.9258 7.07141)" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M85.6417 22H87.9989V11.7857C87.9989 9.18207 85.8882 7.07141 83.2846 7.07141C80.681 7.07141 78.5703 9.18207 78.5703 11.7857V22H80.9275V11.7857C80.9275 10.4839 81.9828 9.42855 83.2846 9.42855C84.5864 9.42855 85.6417 10.4839 85.6417 11.7857V22Z" fill="#D50000"/>
+<rect width="2.35714" height="11" transform="matrix(-1 0 0 1 102.926 7.07141)" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M107.642 22H109.999V11.7857C109.999 9.18207 107.888 7.07141 105.285 7.07141C102.681 7.07141 100.57 9.18207 100.57 11.7857V22H102.927V11.7857C102.927 10.4839 103.983 9.42855 105.285 9.42855C106.586 9.42855 107.642 10.4839 107.642 11.7857V22Z" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M114.712 22H117.069V11.7857C117.069 9.18207 114.959 7.07141 112.355 7.07141C109.751 7.07141 107.641 9.18207 107.641 11.7857V22H109.998V11.7857C109.998 10.4839 111.053 9.42855 112.355 9.42855C113.657 9.42855 114.712 10.4839 114.712 11.7857V22Z" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M96.6417 7.85714H98.9989V17.2857C98.9989 19.8893 96.8882 22 94.2846 22C91.681 22 89.5703 19.8893 89.5703 17.2857V7.85714H91.9275V17.2857C91.9275 18.5875 92.9828 19.6429 94.2846 19.6429C95.5864 19.6429 96.6417 18.5875 96.6417 17.2857V7.85714Z" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.8566 17.2857V11.7857C51.8566 10.4839 50.8013 9.42855 49.4994 9.42855C48.1976 9.42855 47.1423 10.4839 47.1423 11.7857V17.2857C47.1423 18.5875 48.1976 19.6428 49.4994 19.6428C50.8013 19.6428 51.8566 18.5875 51.8566 17.2857ZM49.4994 7.07141C46.8958 7.07141 44.7852 9.18207 44.7852 11.7857V17.2857C44.7852 19.8893 46.8958 22 49.4994 22C52.1031 22 54.2137 19.8893 54.2137 17.2857V11.7857C54.2137 9.18207 52.1031 7.07141 49.4994 7.07141Z" fill="#D50000"/>
+<rect x="51.8594" width="2.35714" height="16.5" fill="#D50000"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M62.8566 7.85714H65.2137V17.2857C65.2137 19.8893 63.1031 22 60.4994 22C57.8958 22 55.7852 19.8893 55.7852 17.2857V7.85714H58.1423V17.2857C58.1423 18.5875 59.1976 19.6429 60.4994 19.6429C61.8013 19.6429 62.8566 18.5875 62.8566 17.2857V7.85714Z" fill="#D50000"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="117.071" height="22" fill="white"/>
+</clipPath>
+</defs>
</svg>
diff --git a/src/assets/scss/_breakpoint.scss b/src/assets/scss/_breakpoint.scss
index 3b5108e75..d58c83c3f 100644
--- a/src/assets/scss/_breakpoint.scss
+++ b/src/assets/scss/_breakpoint.scss
@@ -1,8 +1,8 @@
$width-small-phone: 320px;
$width-phone: 576px;
-$width-large-phone: 768px;
-$width-tablet: 992px;
-$width-desktop: 1200px;
+$width-large-phone: 600px;
+$width-tablet: 980px;
+$width-desktop: 1280px;
$width-large-desktop: 1201px;
$small-phone: 'only screen and (max-width : #{$width-small-phone})';
diff --git a/src/assets/scss/_icons.scss b/src/assets/scss/_icons.scss
index 64bd09a9f..b06335f3b 100644
--- a/src/assets/scss/_icons.scss
+++ b/src/assets/scss/_icons.scss
@@ -584,10 +584,8 @@
display: flex;
justify-content: center;
align-items: center;
+ opacity: 0.8;
cursor: pointer;
- &:active {
- opacity: 0.8;
- }
&:before,
&:after {
@@ -606,3 +604,23 @@
transform: rotate(-45deg);
}
}
+.ico-menu,
+.ico-menu:before,
+.ico-menu:after {
+ cursor: pointer;
+ border-radius: 1px;
+ height: 2px;
+ width: 23px;
+ background: $black;
+ position: absolute;
+ display: block;
+ content: '';
+}
+.ico-menu {
+ &:before {
+ top: -6px;
+ }
+ &:after {
+ bottom: -6px;
+ }
+}
diff --git a/src/assets/scss/_z-index.scss b/src/assets/scss/_z-index.scss
index 5180807ab..1f6dbcd22 100644
--- a/src/assets/scss/_z-index.scss
+++ b/src/assets/scss/_z-index.scss
@@ -1,2 +1,5 @@
-$structure-details-z-index: 1001;
-$modal-add-structure-z-index: 1001;
+$structure-details-z-index: 1002;
+$modal-add-structure-z-index: 1002;
+$modal-filter-structure-z-index: 1002;
+$modal-menu-phone-z-index: 1002;
+$btn-phone-switch-map-list-z-index: 1001;
diff --git a/src/styles.scss b/src/styles.scss
index 5cd277a87..88dd595a8 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -76,6 +76,7 @@ a {
.checkbox {
list-style-type: none;
+ width: 100%;
input {
opacity: 0;
display: none;
@@ -95,7 +96,6 @@ a {
.label {
padding: 0 16px;
@include btn-pass;
- width: 232px;
}
.customCheck {
display: inline-grid;
--
GitLab