Skip to content
Snippets Groups Projects
Commit 2be0de89 authored by Bastien DUMONT's avatar Bastien DUMONT :angel:
Browse files

feat(footer): "mediation numérique" button

parent 8ed27e48
No related branches found
No related tags found
4 merge requests!418V2.1.0,!400V2.0,!380Feat/us258 mediation distance footer,!230V2.0
<div class="footer" fxLayout="row" fxLayoutAlign="center"> <div class="footer">
<div fxLayout="row"> <div class="links">
<!--a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a--> <!--a class="clickable text-align-center" routerLink="/page/accessibilite" i18n>Accessibilité</a-->
<a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a> <a class="clickable text-align-center" routerLink="/legal-notice" i18n>Mentions légales</a>
<a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a> <a class="clickable text-align-center" routerLink="/newsletter" i18n>Newsletter</a>
...@@ -7,14 +7,21 @@ ...@@ -7,14 +7,21 @@
<a class="clickable text-align-center" routerLink="/contact" i18n>Contact</a> <a class="clickable text-align-center" routerLink="/contact" i18n>Contact</a>
<a class="clickable text-align-center" routerLink="/page/qui-sommes-nous" i18n>Qui sommes-nous ?</a> <a class="clickable text-align-center" routerLink="/page/qui-sommes-nous" i18n>Qui sommes-nous ?</a>
</div> </div>
<a
class="metro-link" <div class="right">
href="https://www.grandlyon.com" <button class="mediationButton" (click)="goToMediation()">
title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)" <img src="/assets/ico/telephone.svg" alt="telephone" />
target="_blank" Mediation numérique
rel="noopener noreferrer" </button>
> <a
<img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt /> class="metro-link"
<p class="metro-title" i18n>Un site de la Métropole de Lyon</p> href="https://www.grandlyon.com"
</a> title="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)"
target="_blank"
rel="noopener noreferrer"
>
<img class="logo-grand-lyon" src="/assets/logos/ic_metro.svg" alt />
<p class="metro-title" i18n>Un site de la Métropole de Lyon</p>
</a>
</div>
</div> </div>
...@@ -7,12 +7,16 @@ ...@@ -7,12 +7,16 @@
height: $footer-height; height: $footer-height;
background-color: black; background-color: black;
display: flex; display: flex;
align-items: center !important; align-items: center;
justify-content: space-between !important; justify-content: space-between;
padding: 0px 22px; padding: 0 1.5rem;
.links {
display: flex;
gap: 10px;
}
a { a {
color: $white; color: $white;
margin: 0px 0px 0px 10px;
text-decoration: none; text-decoration: none;
@include lato-regular-12; @include lato-regular-12;
&:hover { &:hover {
...@@ -20,7 +24,7 @@ ...@@ -20,7 +24,7 @@
} }
&:not(:last-child)::after { &:not(:last-child)::after {
content: '•'; content: '•';
margin: 0px 0px 0px 10px; margin-left: 10px;
display: inline-block; display: inline-block;
} }
} }
...@@ -29,6 +33,25 @@ ...@@ -29,6 +33,25 @@
width: 22px; width: 22px;
} }
.right {
display: flex;
gap: 1rem;
.mediationButton {
@include lato-regular-12;
padding: 0 16px 0 8px;
display: flex;
align-items: center;
gap: 0.5rem;
background-color: $grey-5;
border-radius: 8px;
border: 1px solid #000;
cursor: pointer;
&:hover {
transform: scale(1.01);
}
}
}
@media #{$large-phone} { @media #{$large-phone} {
display: none !important; display: none !important;
font-size: 0.75em; font-size: 0.75em;
......
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { Router } from '@angular/router';
@Component({ @Component({
selector: 'app-footer', selector: 'app-footer',
...@@ -6,5 +7,9 @@ import { Component } from '@angular/core'; ...@@ -6,5 +7,9 @@ import { Component } from '@angular/core';
styleUrls: ['./footer.component.scss'], styleUrls: ['./footer.component.scss'],
}) })
export class FooterComponent { export class FooterComponent {
constructor() {} constructor(private router: Router) {}
public goToMediation(): void {
this.router.navigate(['/orientation'], { state: { mediationNumerique: true } });
}
} }
...@@ -4,9 +4,8 @@ ...@@ -4,9 +4,8 @@
@import '../../../../../assets/scss/breakpoint'; @import '../../../../../assets/scss/breakpoint';
.progressBar { .progressBar {
height: #{$progressBar-height};
max-width: 980px; max-width: 980px;
margin: 16px auto 0 auto; margin: 1rem auto;
@media #{$tablet} { @media #{$tablet} {
margin: 0px 4px; margin: 0px 4px;
......
...@@ -69,6 +69,12 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked ...@@ -69,6 +69,12 @@ export class OrientationFormViewComponent implements OnInit, AfterContentChecked
} else { } else {
this.profile = await this.profileService.getProfile(); this.profile = await this.profileService.getProfile();
} }
if (history.state.mediationNumerique) {
this.currentStep = 0;
this.needType = this.needEnum.learnSkills;
this.setCurrentNeedType(NeedsType.learnSkills);
}
} }
ngAfterContentChecked() { ngAfterContentChecked() {
......
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 9.125H14.75C14.7495 8.62787 14.5518 8.15125 14.2003 7.79972C13.8488 7.4482 13.3721 7.2505 12.875 7.25V6C13.7035 6.00099 14.4978 6.33055 15.0836 6.91639C15.6694 7.50222 15.999 8.2965 16 9.125Z" fill="#DA3635"/>
<path d="M18.4999 9.125H17.2499C17.2486 7.96508 16.7872 6.85306 15.967 6.03287C15.1468 5.21269 14.0348 4.75132 12.8749 4.75V3.5C14.3662 3.50165 15.796 4.09482 16.8505 5.14935C17.9051 6.20389 18.4982 7.63367 18.4999 9.125ZM17.2499 19.125H17.1437C4.8624 18.4187 3.11865 8.05625 2.8749 4.89375C2.8368 4.39797 2.9972 3.90736 3.32081 3.52983C3.64443 3.1523 4.10475 2.91878 4.60053 2.88063C4.65011 2.87688 4.6999 2.875 4.7499 2.875H8.04365C8.294 2.87476 8.53865 2.94969 8.74592 3.0901C8.95319 3.23051 9.11352 3.42992 9.20615 3.6625L10.1561 6C10.2476 6.22722 10.2703 6.4763 10.2214 6.71631C10.1725 6.95631 10.0542 7.17667 9.88115 7.35L8.5499 8.69375C8.757 9.87583 9.32264 10.9656 10.1701 11.8153C11.0176 12.665 12.1059 13.2335 13.2874 13.4438L14.6437 12.1C14.8196 11.9288 15.042 11.8133 15.2832 11.7677C15.5244 11.7221 15.7736 11.7486 15.9999 11.8438L18.3562 12.7875C18.5852 12.8831 18.7807 13.0446 18.9176 13.2517C19.0545 13.4587 19.1267 13.7018 19.1249 13.95V17.25C19.1249 17.7473 18.9274 18.2242 18.5757 18.5758C18.2241 18.9275 17.7472 19.125 17.2499 19.125ZM4.7499 4.125C4.66782 4.12475 4.5865 4.14068 4.51058 4.17186C4.43466 4.20304 4.36562 4.24887 4.30741 4.30673C4.2492 4.36459 4.20295 4.43336 4.17132 4.50909C4.13968 4.58483 4.12327 4.66605 4.12303 4.74813C4.12303 4.76563 4.12365 4.78292 4.1249 4.8C4.4124 8.5 6.25615 17.25 17.2124 17.875C17.3778 17.8849 17.5404 17.8287 17.6644 17.7188C17.7884 17.6088 17.8637 17.4542 17.8736 17.2887L17.8749 17.25V13.95L15.5187 13.0062L13.7249 14.7875L13.4249 14.75C7.9874 14.0688 7.2499 8.63125 7.2499 8.575L7.2124 8.275L8.9874 6.48125L8.0499 4.125H4.7499Z" fill="#DA3635"/>
</svg>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment