diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html
index 3f71ab09c33a7b83c7c77a66efa8e5cf61d57d4e..0b50d93e3869c66bd30bca115cd864e056a13b16 100644
--- a/src/app/about/about.component.html
+++ b/src/app/about/about.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" class="content-container">
+<div fxLayout="column" class="content-container full-screen">
<div class="section-container">
<h1>Qui sommes-nous ?</h1>
<p>
diff --git a/src/app/admin/components/panel/panel.component.html b/src/app/admin/components/panel/panel.component.html
index 163961e48268e1ffdb9eb05f701526da758f1044..2d250110650d55fe3ae55e07c6e031cc24cfaecb 100644
--- a/src/app/admin/components/panel/panel.component.html
+++ b/src/app/admin/components/panel/panel.component.html
@@ -1,4 +1,4 @@
-<div fxLayout="column" class="content-container">
+<div fxLayout="column" class="content-container full-screen">
<div fxLayout="row" fxLayoutAlign="center center"><h1>Administration</h1></div>
<app-admin-claim-structure></app-admin-claim-structure>
</div>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 6f992a7337d57f46b9f2d345f280099e96471490..5edc4cd02cb86a7af27979d4fa34eca758bab8ef 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -19,7 +19,6 @@ 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';
import { FormComponent } from './form/form.component';
import { UserVerificationComponent } from './user-verification/user-verification.component';
import { AuthGuard } from './guards/auth.guard';
@@ -44,7 +43,6 @@ import { AdminGuard } from './guards/admin.guard';
StructureOpeningStatusComponent,
LegalNoticeComponent,
AboutComponent,
- MenuPhoneComponent,
UserVerificationComponent,
ResetEmailComponent,
ResetPasswordComponent,
diff --git a/src/app/footer/footer.component.html b/src/app/footer/footer.component.html
index b04879372c33a128e2cfc2480f7b522bcbb04175..e043a1e4479fe890e9cf26cb3fa6acd0a0cdf61e 100644
--- a/src/app/footer/footer.component.html
+++ b/src/app/footer/footer.component.html
@@ -2,8 +2,8 @@
<div fxLayout="row">
<a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
<!-- <a class="clickable text-align-center" routerLink="/sitemap" i18n>Plan du site</a> -->
-
<a class="clickable text-align-center" href="mailto:inclusionnumerique@grandlyon.com">Contact</a>
+ <a routerLink="/about" i18n>Qui sommes-nous ?</a>
</div>
<a
class="metro-link"
diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html
index 87806a6691914bde3f5851709aecc3a8d9cf1a7a..81feb9cf3f77cbac903b9e28c6ba7c9d2e88d90a 100644
--- a/src/app/header/header.component.html
+++ b/src/app/header/header.component.html
@@ -1,32 +1,48 @@
<div fxLayout="row" class="header hide-on-print">
<div class="logo clickable" routerLink="/home">
- <img class="logo-grand-lyon" src="/assets/logos/ram_logo.svg" alt />
+ <img class="logo-grand-lyon" src="/assets/logos/resin.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>
+ <p>Réseau des acteurs de l'inclusion numérique de la métropole de Lyon</p>
</div>
</div>
- <div class="containerIconMenu" (click)="openMenu()">
- <span class="ico-menu"></span>
+ <div class="containerIconMenu">
+ <app-svg-icon (click)="openMenu()" [type]="'ico'" [icon]="'menu'" [iconClass]="'icon-32'"></app-svg-icon>
</div>
<div fxLayout="row" class="right-header" fxLayoutAlign="center center" fxLayoutGap="3vw">
<a routerLink="/home" [routerLinkActive]="'active'" i18n>Les acteurs</a>
- <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
- <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
- <a routerLink="/about" [routerLinkActive]="'active'" i18n>Qui sommes-nous ?</a>
- <!-- <a routerLink="/login" [routerLinkActive]="'active'" i18n><span class="clickable ico-mglass purple"></span></a> -->
- <a *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen">
- <span class="ico-profile" fxLayout="column" fxLayoutAlign="center center">
- <span class="head"></span>
- <span class="body"></span>
- </span>
- </a>
+ <!-- <a routerLink="/news" [routerLinkActive]="'active'" i18n>Actualités</a> -->
+ <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a> -->
<a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
- <a *ngIf="isLoggedIn" routerLink="/profile" [routerLinkActive]="'active'" fxLayout="row" fxLayoutGap="1.5vh">
+ <!-- <a *ngIf="isLoggedIn" routerLink="/profile" [routerLinkActive]="'active'" fxLayout="row" fxLayoutGap="1.5vh">
<app-svg-icon [type]="'ico'" [iconClass]="'icon-32'" [icon]="'user'" [iconColor]="'currentColor'"></app-svg-icon>
- </a>
- <button *ngIf="isLoggedIn" (click)="logout()">Logout</button>
+ </a> -->
+ <button *ngIf="isLoggedIn" class="red" routerLink="/profile" [routerLinkActive]="'active'">
+ {{ displayName }}
+ </button>
+ <button *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen">Se connecter</button>
</div>
</div>
-<app-menu-phone *ngIf="showMenu" (closeEvent)="closeMenu($event)"></app-menu-phone>
+<div *ngIf="showMenu" class="mobile-menu" fxLayout="row">
+ <div class="outside" (click)="closeMenu()"></div>
+ <div class="menu-content" fxLayout="column" fxLayoutAlign="space-between">
+ <div>
+ <div class="title" fxLayout="row" fxLayoutAlign="space-between center">
+ <span>Menu</span>
+ <div (click)="closeMenu()" class="ico-close-details"></div>
+ </div>
+ <div fxLayout="column" class="right-header" fxLayoutAlign="none baseline" fxLayoutGap="5vw">
+ <a routerLink="/home" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Les acteurs</a>
+ <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</a>
+ </div>
+ </div>
+ <div>
+ <button *ngIf="isLoggedIn" class="red" routerLink="/profile" [routerLinkActive]="'active'" (click)="closeMenu()">
+ {{ displayName }}
+ </button>
+ <button *ngIf="!isLoggedIn" (click)="isPopUpOpen = !isPopUpOpen; closeMenu()">Se connecter</button>
+ </div>
+ </div>
+</div>
+
<app-signup-modal *ngIf="displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignUpModal($event)"></app-signup-modal>
<app-signin-modal *ngIf="!displaySignUp" [openned]="isPopUpOpen" (closed)="closeSignInModal()"></app-signin-modal>
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss
index 2e49b9b20033d675c95908e45891060915d44157..c6d86829929b392ab49d400f054241407b7e7045 100644
--- a/src/app/header/header.component.scss
+++ b/src/app/header/header.component.scss
@@ -4,6 +4,8 @@
@import '../../assets/scss/color';
@import '../../assets/scss/breakpoint';
@import '../../assets/scss/shapes';
+@import '../../assets/scss/buttons';
+@import '../../assets/scss/z-index';
.header {
height: $header-height;
@@ -13,22 +15,6 @@
border-bottom: solid 1px $grey-4;
background-color: $white;
padding: 0 20px;
- a {
- font-style: italic;
- color: $grey-2;
- &.active {
- font-weight: bold;
- color: $grey-1;
- &:before {
- color: $primary-color;
- content: '// ';
- }
- &:after {
- color: $primary-color;
- content: ' //';
- }
- }
- }
.right-header {
@media #{$tablet} {
display: none !important;
@@ -50,6 +36,24 @@
}
}
+button {
+ @include btn-grey;
+ &.red {
+ @include btn-red;
+ border: none;
+ }
+}
+
+a {
+ color: $grey-2;
+ &.active {
+ font-weight: bold;
+ color: $grey-1;
+ border-bottom: 2px solid $red-default;
+ text-decoration: none;
+ }
+}
+
@media print {
div {
display: none !important;
@@ -69,3 +73,57 @@
display: none !important;
}
}
+
+@keyframes slideMenu {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
+@keyframes background-fade {
+ 0% {
+ background: none;
+ }
+ 100% {
+ background: none;
+ }
+}
+.mobile-menu {
+ position: fixed;
+ top: 0;
+ right: 0;
+ width: 100%;
+ height: 100%;
+ z-index: $menu-phone-z-index;
+ animation: slideMenu 0.5s;
+ .menu-content {
+ 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;
+ }
+}
+.title {
+ margin-bottom: 35px;
+ @include cn-regular-28;
+ span {
+ color: $grey-2;
+ }
+}
+.footer {
+ a {
+ height: unset;
+ display: table-cell;
+ vertical-align: middle;
+ margin: auto 0 auto 0;
+ }
+}
diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts
index 22e7fc8425684cae0f8520911dcf973dd8b12af8..f91c0fa2d77f47737b17ed99fe0319e5183870d0 100644
--- a/src/app/header/header.component.ts
+++ b/src/app/header/header.component.ts
@@ -26,10 +26,6 @@ export class HeaderComponent implements OnInit {
return this.authService.isLoggedIn();
}
- public logout(): void {
- this.authService.logout();
- }
-
public closeSignInModal(): void {
this.isPopUpOpen = false;
this.displaySignUp = true;
@@ -46,4 +42,8 @@ export class HeaderComponent implements OnInit {
public get isAdmin(): boolean {
return this.profileService.isAdmin();
}
+
+ public get displayName(): string {
+ return this.authService.getUsernameDisplay();
+ }
}
diff --git a/src/app/legal-notice/legal-notice.component.html b/src/app/legal-notice/legal-notice.component.html
index f3a346d71706d56e7698a7806584d28f9d53c9f0..cac0b8d3a5bb7ce8aa1046814223c624216b7af8 100644
--- a/src/app/legal-notice/legal-notice.component.html
+++ b/src/app/legal-notice/legal-notice.component.html
@@ -151,18 +151,18 @@
<p>
Les bases de données sont protégées par la loi du 1er juillet 1998 et le régime français du droit d'auteur.
</p>
- <p><strong>Établissements de liens vers le site www.ram.grandlyon.com</strong></p>
+ <p><strong>Établissements de liens vers le site www.resin.grandlyon.com</strong></p>
<p>
- La Métropole de Lyon autorise la mise en place d'un lien hypertexte vers son site www.ram.grandlyon.com pour
+ La Métropole de Lyon autorise la mise en place d'un lien hypertexte vers son site www.resin.grandlyon.com pour
tous les sites Internet, à l'exclusion de ceux diffusant des informations à caractère polémique,
pornographique, xénophobe ou pouvant, dans une plus large mesure porter atteinte à la sensibilité du plus grand
- nombre. Le lien doit aboutir à la page d'accueil du site (home page) et le site www.ram.grandlyon.com doit
- apparaître dans une nouvelle fenêtre. Les pages du site www.ram.grandlyon.com ne doivent en aucun cas être
+ nombre. Le lien doit aboutir à la page d'accueil du site (home page) et le site www.resin.grandlyon.com doit
+ apparaître dans une nouvelle fenêtre. Les pages du site www.resin.grandlyon.com ne doivent en aucun cas être
intégrées à l'intérieur des pages d'un autre site (Frame). Dans tous les cas d'espèce, la Métropole de
Lyon se réserve le droit de demander la suppression d'un lien si elle estime que le site cible ne respecte pas
les règles ainsi définies.
</p>
- <p><strong>Liens vers des sites tiers depuis le site www.ram.grandlyon.com</strong></p>
+ <p><strong>Liens vers des sites tiers depuis le site www.resin.grandlyon.com</strong></p>
<p>
Les liens hypertextes mis en Å“uvre au sein du site en direction d'autres sites et/ou de pages personnelles et
d'une manière générale vers toutes ressources existantes sur internet ne sauraient engager la responsabilité
diff --git a/src/app/menu-phone/menu-phone.component.html b/src/app/menu-phone/menu-phone.component.html
deleted file mode 100644
index 3551f848ef9539f082f94ec03de1efd0f8ff54d3..0000000000000000000000000000000000000000
--- a/src/app/menu-phone/menu-phone.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<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>Les acteurs</a>
- <!-- <a routerLink="/resources" [routerLinkActive]="'active'" i18n>Ressources</a>
- <a routerLink="/projects" [routerLinkActive]="'active'" i18n>Projets</a> -->
- <a routerLink="/about" [routerLinkActive]="'active'" (click)="closeMenu()" i18n>Qui sommes-nous ?</a>
-
- <a *ngIf="isAdmin" routerLink="/admin" [routerLinkActive]="'active'">Administration</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> -->
- <a *ngIf="isLoggedIn" routerLink="/profile" [routerLinkActive]="'active'" fxLayout="row" fxLayoutGap="1.5vh">
- <app-svg-icon
- [type]="'ico'"
- [iconClass]="'icon-32'"
- [icon]="'user'"
- [iconColor]="'currentColor'"
- ></app-svg-icon>
- </a>
- <button *ngIf="isLoggedIn" (click)="logout()">Logout</button>
- </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
deleted file mode 100644
index ea2eb05ce33fcdd036046833e1590bac98cf6e57..0000000000000000000000000000000000000000
--- a/src/app/menu-phone/menu-phone.component.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-@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: $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
deleted file mode 100644
index 718d9c8417b95c7bb804e680b2fff8d41cdcd19d..0000000000000000000000000000000000000000
--- a/src/app/menu-phone/menu-phone.component.spec.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-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
deleted file mode 100644
index a0276b4c6984e8cce0b25884e72bf4fbdcc281f3..0000000000000000000000000000000000000000
--- a/src/app/menu-phone/menu-phone.component.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { ProfileService } from '../profile/services/profile.service';
-import { AuthService } from '../services/auth.service';
-
-@Component({
- selector: 'app-menu-phone',
- templateUrl: './menu-phone.component.html',
- styleUrls: ['./menu-phone.component.scss'],
-})
-export class MenuPhoneComponent implements OnInit {
- constructor(private authService: AuthService, private profileService: ProfileService) {}
-
- @Output() closeEvent = new EventEmitter();
- ngOnInit(): void {}
-
- closeMenu(): void {
- this.closeEvent.emit();
- }
-
- public get isLoggedIn(): boolean {
- return this.authService.isLoggedIn();
- }
-
- public get isAdmin(): boolean {
- return this.profileService.isAdmin();
- }
-}
diff --git a/src/app/models/user-auth.model.ts b/src/app/models/user-auth.model.ts
index 0c3ddbf83cffa09a4cd9eaa18e714166d55fbc0e..54ebec02210436d633a01056a73bd269422f56da 100644
--- a/src/app/models/user-auth.model.ts
+++ b/src/app/models/user-auth.model.ts
@@ -1,5 +1,7 @@
export class UserAuth {
username: string;
+ name: string;
+ surname: string;
accessToken: string;
expiresAt: string;
}
diff --git a/src/app/profile/profile.component.html b/src/app/profile/profile.component.html
index e28fca468d24b21dadae6ba0330fb0fb61e875d2..a26b3822a5cdc7abd31c1c931049c3409d922998 100644
--- a/src/app/profile/profile.component.html
+++ b/src/app/profile/profile.component.html
@@ -4,6 +4,7 @@
<div *ngIf="userProfile" fxLayout="column" fxLayoutAlign="center" fxLayoutGap="10px">
<p>Id: {{ userProfile._id }}</p>
<p>Email: {{ userProfile.email }}</p>
+ <button (click)="logout()">Se déconnecter</button>
<p fxLayout="column" *ngIf="userProfile.structuresLink.length > 0">
Mes structures :
<span *ngFor="let structureId of userProfile.structuresLink">
diff --git a/src/app/profile/profile.component.ts b/src/app/profile/profile.component.ts
index 1c7bd1c4228a9eb16996d461a832ab18c0596264..5f3b49a7389039c7ede12fd8154d5d721944a2a7 100644
--- a/src/app/profile/profile.component.ts
+++ b/src/app/profile/profile.component.ts
@@ -1,7 +1,7 @@
import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Structure } from '../models/structure.model';
import { User } from '../models/user.model';
+import { AuthService } from '../services/auth.service';
import { MustMatch } from '../shared/validator/form';
import { ProfileService } from './services/profile.service';
@@ -20,7 +20,11 @@ export class ProfileComponent implements OnInit {
public formEmail: FormGroup;
public addStructure = false;
- constructor(private formBuilder: FormBuilder, private profileService: ProfileService) {}
+ constructor(
+ private authService: AuthService,
+ private formBuilder: FormBuilder,
+ private profileService: ProfileService
+ ) {}
ngOnInit(): void {
this.profileService.getProfile().then((profile) => {
@@ -98,4 +102,8 @@ export class ProfileComponent implements OnInit {
}
);
}
+
+ public logout(): void {
+ this.authService.logout();
+ }
}
diff --git a/src/app/services/auth.service.ts b/src/app/services/auth.service.ts
index bb6b1f569582974b129248489f067e46d6a91371..ba2da5e7537e6731cc2fa12201f839bb605d4d40 100644
--- a/src/app/services/auth.service.ts
+++ b/src/app/services/auth.service.ts
@@ -42,6 +42,10 @@ export class AuthService {
return false;
}
+ public getUsernameDisplay(): string {
+ return `${this.userValue.name}`;
+ }
+
private getExpiration(): DateTime {
return DateTime.fromISO(this.userValue.expiresAt, { zone: 'Europe/Paris' });
}
diff --git a/src/app/structure-list/components/search/search.component.html b/src/app/structure-list/components/search/search.component.html
index b1538490b2c2f879ecb33eaefb6b3fbffaf40bfe..c1546791de58f3c62abbc0b784b8056e86901f49 100644
--- a/src/app/structure-list/components/search/search.component.html
+++ b/src/app/structure-list/components/search/search.component.html
@@ -13,8 +13,6 @@
<div class="inputSection" fxLayout="row" fxLayoutAlign="space-between center">
<input type="text" formControlName="searchTerm" placeholder="Rechercher une commune, une association..." />
<button (click)="clearInput()" class="icon close" type="button"><div class="ico-close-search"></div></button>
- <span class="separator"></span>
- <button (click)="locateMe()" class="icon pin" type="button"><div class="ico-pin-search"></div></button>
</div>
<app-button
class="isntPhoneContent"
diff --git a/src/app/structure-list/components/search/search.component.scss b/src/app/structure-list/components/search/search.component.scss
index 5afee7a7da5b5e1862c94f1a26536e86a810bf42..bd9fbd745ce9d429e85d370208cbf788239c982f 100644
--- a/src/app/structure-list/components/search/search.component.scss
+++ b/src/app/structure-list/components/search/search.component.scss
@@ -21,12 +21,6 @@
@include input-search;
}
.searchSection {
- .separator {
- height: 100%;
- width: 2px;
- background-color: $grey-4;
- margin: 0 5px 0 5px;
- }
.inputSection {
padding: 6px 3px 6px 6px;
width: 100%;
diff --git a/src/assets/ico/sprite.svg b/src/assets/ico/sprite.svg
index 342b08c58a85dd0e2dd83d7f74aaa45880479583..5a89acce08f64a8c491ee7dd313a10564027abfe 100644
--- a/src/assets/ico/sprite.svg
+++ b/src/assets/ico/sprite.svg
@@ -96,6 +96,14 @@
<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C5.44772 12 5 12.4477 5 13V21H9V17H23V21H27V13C27 12.4477 26.5523 12 26 12H6Z"/>
</symbol>
+
+<symbol id="menu" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="5" y="9" width="23" height="2" rx="1" fill="#333333"/>
+<rect x="5" y="15" width="23" height="2" rx="1" fill="#333333"/>
+<rect x="5" y="21" width="23" height="2" rx="1" fill="#333333"/>
+</symbol>
+
+
<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"/>
diff --git a/src/assets/logos/resin.svg b/src/assets/logos/resin.svg
new file mode 100644
index 0000000000000000000000000000000000000000..6a2f80d71165f014b77a71ec47c72affddcda368
--- /dev/null
+++ b/src/assets/logos/resin.svg
@@ -0,0 +1,4 @@
+<svg width="108" height="37" viewBox="0 0 108 37" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M104.933 7.60039C105.747 8.22003 106.427 9.00169 106.945 9.92797C107.456 10.8602 107.705 11.9128 107.726 13.0853V31.9332C107.726 33.2027 106.576 34.2251 105.163 34.2251H105.116C103.695 34.2251 102.552 33.1963 102.552 31.9332V13.0853C102.539 12.0387 102.189 11.2629 101.482 10.7696C100.809 10.2525 99.9682 10.0058 99.0266 9.9939C98.0846 9.98795 97.2777 10.2469 96.5779 10.722C95.878 11.197 95.5345 11.9732 95.5417 13.0134L95.5816 31.9217C95.5816 33.1848 94.4378 34.2136 93.0181 34.2136C91.5984 34.2136 90.4547 33.1908 90.4547 31.9217C90.4547 30.0179 90.4604 27.5464 90.4616 27.0237C90.4618 26.9619 90.4618 26.9273 90.4618 26.9242L90.4214 12.9773C90.4142 11.7627 90.6497 10.6739 91.1545 9.76C91.6589 8.83967 92.2983 8.06989 93.1323 7.47449C93.933 6.87866 94.8479 6.42786 95.8975 6.12122C96.9475 5.82055 97.97 5.68234 99.0195 5.69425C100.069 5.70616 101.119 5.86224 102.148 6.18716C103.177 6.51803 104.092 6.98712 104.933 7.60039ZM73.465 9.35682C73.465 7.34181 71.6346 5.70616 69.3809 5.70616C67.1272 5.70616 65.2969 7.34181 65.2969 9.35682V13.0071H69.4413V13.0011C71.6689 12.9709 73.465 11.3535 73.465 9.35682ZM81.1952 5.70616C82.7834 5.70616 84.0685 6.85484 84.0685 8.27403V31.6448C84.0685 33.0645 82.7834 34.2132 81.1952 34.2132C79.6076 34.2132 78.3226 33.0645 78.3226 31.6448V8.27403C78.3226 6.85484 79.6081 5.70616 81.1952 5.70616Z" fill="#E30613"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.694 5.2482C38.3089 4.21039 37.8663 2.92346 36.7053 2.37377C35.5443 1.82409 34.1046 2.21979 33.4896 3.2576L33.4896 3.25763C33.4891 3.2585 33.4797 3.27387 33.4577 3.30447C33.4352 3.33564 33.4038 3.37674 33.3621 3.4275C33.2781 3.5299 33.1644 3.65674 33.0207 3.80252C32.7325 4.09505 32.3557 4.43154 31.9199 4.76486C31.2055 5.31117 30.4449 5.76348 29.754 6.03653C29.5884 6.08152 29.4245 6.13163 29.2626 6.18713C28.2064 6.52395 27.3048 6.93307 26.4708 7.53442C25.6434 8.14173 24.9636 8.88173 24.4322 9.82587C23.9007 10.7704 23.6785 11.8468 23.6785 12.9951L23.6048 26.882V26.9241V26.9484C23.6048 30.2078 26.0674 33.0045 29.4178 33.8287L29.4986 33.8648L29.512 33.8708C30.434 34.1238 31.3423 34.2318 32.2029 34.2318C32.2174 34.2318 32.2318 34.2301 32.2452 34.2286C32.2568 34.2272 32.2676 34.2259 32.2772 34.2259C32.2904 34.2259 32.3022 34.2274 32.3139 34.2289L32.314 34.2289L32.3141 34.2289C32.3258 34.2304 32.3376 34.2318 32.3509 34.2318C33.4071 34.2318 34.4633 34.0936 35.4457 33.7568C36.5024 33.42 37.4035 33.0113 38.2381 32.4095C39.0316 31.8145 39.6373 31.2132 40.1487 30.2988C40.2163 30.1784 40.2834 30.0462 40.3371 29.9139C40.9699 28.4756 39.7049 26.942 37.9893 26.942C36.953 26.942 35.991 27.5013 35.6608 28.3795C35.1427 29.7327 33.8448 30.2499 32.3237 30.2499C30.9307 30.2499 29.7399 29.5341 29.148 28.4998C29.0605 28.3552 28.9934 28.1991 28.9329 28.0367C28.8183 27.7241 28.7445 27.3992 28.7445 27.056C28.7445 27.0511 28.7451 27.0466 28.7459 27.0423C28.7465 27.0389 28.7473 27.0355 28.7481 27.0322C28.7499 27.0247 28.7517 27.0173 28.7517 27.0083C28.7517 26.9962 28.7499 26.9855 28.7481 26.9749C28.7463 26.9643 28.7445 26.9539 28.7445 26.942V20.4708H32.2295C33.34 20.4708 34.4366 20.2845 35.4657 19.9298C36.4415 19.593 37.4174 19.1903 38.2447 18.5889C39.0792 17.9812 39.752 17.2416 40.2834 16.297C40.8149 15.3529 41.037 14.2765 41.037 13.1278V13.0615C41.037 13.0485 41.035 13.0356 41.0331 13.0237L41.0331 13.0237C41.0314 13.0133 41.0299 13.0036 41.0299 12.9951H41.037C41.037 11.8468 40.8082 10.7704 40.2834 9.82587C39.752 8.88173 39.0792 8.14173 38.2447 7.53442C37.7376 7.16193 37.2001 6.8417 36.6168 6.58721C37.0715 6.12274 37.4488 5.66194 37.694 5.2482ZM19.7696 9.93433C19.2515 9.00805 18.5716 8.22597 17.7575 7.60675C16.9164 6.99348 16.0019 6.52397 14.9724 6.19352C13.9428 5.8686 12.8933 5.71208 11.8437 5.70017C10.7942 5.68826 9.77174 5.82649 8.72171 6.12717C7.67216 6.43423 6.75725 6.88504 5.95653 7.48044C5.70865 7.65729 5.47798 7.84957 5.26295 8.05661C4.77815 7.66996 4.23024 7.32763 3.62332 7.03472C3.59049 7.02196 3.55103 7.00283 3.5182 6.98369C1.92151 6.26538 0.0393351 7.33159 0.00317654 8.92471L0.000330739 9.18966C-0.0163212 10.0555 0.597416 10.7943 1.47997 11.1502C1.90436 11.3186 2.25264 11.5691 2.51764 11.8894C2.90317 12.3167 3.14129 12.8116 3.2462 13.355L3.28554 26.9301L3.28532 27.0309C3.2841 27.5564 3.2784 30.0257 3.2784 31.9281C3.2784 33.1967 4.42217 34.2195 5.84235 34.2195C7.26157 34.2195 8.40577 33.1912 8.40577 31.9221L8.36535 13.0138C8.35821 11.9736 8.70171 11.1974 9.40157 10.7224C10.1014 10.2474 10.9088 9.98834 11.8503 9.99429C12.7919 10.0062 13.6331 10.2529 14.3058 10.77C14.6555 11.0167 14.9253 11.3357 15.0999 11.7201C15.4701 12.5201 16.2774 13.0917 17.2461 13.1036L17.5425 13.1095C19.3252 13.1278 20.5765 11.4798 19.8233 10.0304C19.8029 10.0003 19.7829 9.9641 19.7696 9.93433ZM34.773 15.4133C35.4529 14.9438 35.8292 14.1319 35.8292 13.1214V13.0496C35.8292 12.0391 35.4529 11.2332 34.773 10.7581C34.0194 10.2831 33.2658 10.0122 32.2838 10.0122C31.3018 10.0122 30.4744 10.2831 29.7946 10.7581C29.1152 11.2272 28.7383 12.0391 28.7383 13.0496V16.1529H32.2838C33.2658 16.1529 34.0932 15.8883 34.773 15.4133ZM57.6823 19.6653L52.1853 15.1369C51.0549 14.2225 50.6248 13.3081 50.6248 12.3461C50.6248 10.8066 51.8085 9.50776 53.6925 9.50776C55.3278 9.50776 56.2765 10.3979 56.8612 11.8171C57.1709 12.569 57.9445 13.0861 58.8394 13.0861H58.8594C60.2929 13.0861 61.2882 11.829 60.8376 10.6084C59.7881 7.76366 57.3588 5.7006 53.477 5.7006C48.6322 5.7006 45.4503 8.1545 45.4503 12.5388C45.4503 15.8101 47.1188 17.6928 49.2717 19.3289L54.6003 23.4185C56.3763 24.7654 57.13 25.9681 57.13 27.5561C57.13 29.3368 55.9995 30.491 53.9542 30.491C52.2519 30.491 51.1148 29.7634 50.3812 28.2897C49.9711 27.4719 49.1028 26.9246 48.1003 26.9246H47.9662C46.1359 26.9246 44.965 28.6385 45.759 30.1121C47.1583 32.7042 49.8359 34.2977 53.4694 34.2977C58.5825 34.2977 62.088 31.9404 62.088 27.1712C62.1027 23.6163 59.8956 21.4932 57.6823 19.6653Z" fill="black"/>
+</svg>
diff --git a/src/assets/scss/_buttons.scss b/src/assets/scss/_buttons.scss
index 84fb5a756cc9528f7739d5a73549af7cfdf1d660..6f8458fcfb62bf057bf6c802b6df275f3b875901 100644
--- a/src/assets/scss/_buttons.scss
+++ b/src/assets/scss/_buttons.scss
@@ -18,7 +18,7 @@
height: 31px;
border: none;
color: $primary-color;
- padding: 3px 16px 3px 16px;
+ padding: 3px 16px;
outline: none;
cursor: pointer;
display: table-cell;
@@ -29,7 +29,7 @@
background: $secondary-color;
height: 40px;
color: $white;
- padding: 4px 37px 4px 37px;
+ padding: 4px 37px;
border-radius: 4px;
outline: none;
border: 1px solid transparent;
@@ -42,3 +42,23 @@
color: $secondary-color;
outline: none;
}
+@mixin btn-grey {
+ border: 1px solid $grey-4;
+ box-sizing: border-box;
+ border-radius: 6px;
+ background: $white;
+ color: $grey-2;
+ cursor: pointer;
+ @include cn-regular-12;
+ line-height: 18px;
+ padding: 8px 15px;
+}
+@mixin btn-red {
+ border-radius: 6px;
+ background: $red-default;
+ color: $white;
+ cursor: pointer;
+ @include cn-regular-12;
+ line-height: 18px;
+ padding: 8px 15px;
+}
diff --git a/src/assets/scss/_color.scss b/src/assets/scss/_color.scss
index ad8ba7e920341154095335aa68e22ac098f9e0f2..63829c4a2ad33e66578aaac365b529f5494d8523 100644
--- a/src/assets/scss/_color.scss
+++ b/src/assets/scss/_color.scss
@@ -17,6 +17,7 @@ $blue-hover: #117083;
$blue-active: #8cb6be;
$red-metro: #d50000;
$red-info: #a00000;
+$red-default: #ed3939;
/* APP COLORS */
$primary-color: $red-metro;
$secondary-color: $blue;
diff --git a/src/assets/scss/_shapes.scss b/src/assets/scss/_shapes.scss
index c85355e0f9d902d9636af3a4f3d464f137190d62..d2c8d047278aeef88b47a5272f5511308a6e1825 100644
--- a/src/assets/scss/_shapes.scss
+++ b/src/assets/scss/_shapes.scss
@@ -6,7 +6,6 @@ $input-radius: 4px;
$bouton-width: 12.25em;
$round-bouton-radius: 1.25em;
$round-radius: 50%;
-$footer-height: 60px;
$round-button: 40px;
$simple-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
$mat-tab-shadow: 0px 2px 7px rgba(0, 0, 0, 0.25);
diff --git a/src/assets/scss/_typography.scss b/src/assets/scss/_typography.scss
index e7469954d6ee56132b5a1e2d67ca42325d6cc787..5ac70fdc41284f7938e14160cdd407a72e418f0f 100644
--- a/src/assets/scss/_typography.scss
+++ b/src/assets/scss/_typography.scss
@@ -2,6 +2,7 @@ $text-font: 'Trebuchet MS', 'Helvetica', sans-serif;
$footer-text-font: 'Arial', 'Helvetica', sans-serif;
$title-font: 'Trebuchet MS', 'Helvetica', sans-serif;
+$font-size-xxsmall: 0.75em; // 12px
$font-size-xsmall: 0.875em; // 14px
$font-size-small: 1em; // 16px
$font-size-medium: 1.25em; // 20px
@@ -156,6 +157,12 @@ h6,
font-weight: normal;
font-size: $font-size-xsmall;
}
+@mixin cn-regular-12 {
+ font-family: $text-font;
+ font-style: normal;
+ font-weight: normal;
+ font-size: $font-size-xxsmall;
+}
@mixin text-ellipsis {
overflow: hidden;
diff --git a/src/styles.scss b/src/styles.scss
index 76e407a1858cedaa9418538150277e0daf5989be..fe31c70d7e4ad14257c952527a54dafccabc77e4 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,7 @@
@import 'assets/scss/inputs';
@import 'assets/scss/hyperlink';
@import 'assets/scss/layout';
+@import 'assets/scss/buttons';
@import '../node_modules/leaflet.locatecontrol/dist/L.Control.Locate.css';
html {
@@ -36,6 +37,7 @@ a {
}
&:hover {
text-decoration: underline;
+ outline-color: $blue-hover;
}
&.primary {
@include hyperlink;
@@ -70,7 +72,7 @@ a {
padding: 0 0 30px 0;
}
&.full-screen {
- height: calc(100vh - #{$header-height} - #{$footer-height});
+ min-height: calc(100vh - #{$header-height} - #{$footer-height});
}
@media #{$phone} {
padding-top: 30px;
@@ -92,6 +94,13 @@ a {
}
}
+/** Buttons **/
+button {
+ &:focus {
+ outline-color: $blue-hover;
+ }
+}
+
/** Checkboxes **/
.checkbox {