Commit 40c21c20 authored by ncastejon's avatar ncastejon
Browse files

Add new skeletton with side menu and search bar inside the header

parent d26f330a
This diff is collapsed.
......@@ -30,50 +30,51 @@
"@angular/router": "6.1.0",
"@turf/centroid": "^5.1.5",
"@turf/helpers": "^6.1.4",
"angulartics2": "^6.2.0",
"bulma": "^0.7.1",
"angulartics2": "^6.3.1",
"bulma": "^0.7.2",
"bulma-checkradio": "^2.1.0",
"bulma-slider": "^2.0.0",
"bulma-tooltip": "^2.0.1",
"bulma-tooltip": "^2.0.2",
"core-js": "^2.5.7",
"font-awesome": "^4.7.0",
"hamburgers": "^1.1.3",
"jwt-decode": "^2.2.0",
"lodash": "^4.17.10",
"lodash": "^4.17.11",
"lodash.clonedeep": "^4.5.0",
"mapbox-gl": "^0.47.0",
"ng-inline-svg": "^8.0.1",
"ng-inline-svg": "^8.2.1",
"ngx-infinite-scroll": "^6.0.1",
"rxjs": "^6.2.0",
"rxjs": "^6.3.3",
"xml2js": "^0.4.19",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.1.1",
"@angular/cli": "^6.2.8",
"@angular/compiler-cli": "6.1.0",
"@angular/language-service": "6.1.0",
"@types/jasmine": "^2.8.8",
"@types/jasminewd2": "~2.0.2",
"@types/jasmine": "^2.8.12",
"@types/jasminewd2": "^2.0.6",
"@types/jwt-decode": "^2.2.1",
"@types/lodash.clonedeep": "^4.5.4",
"@types/mapbox-gl": "^0.47.0",
"@types/node": "^6.0.112",
"codelyzer": "^4.3.0",
"@types/node": "^6.14.2",
"codelyzer": "^4.5.0",
"jasmine-core": "~2.8.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^2.0.2",
"karma": "^2.0.5",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^1.4.3",
"karma-htmlfile-reporter": "^0.3.5",
"karma-htmlfile-reporter": "^0.3.7",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"ng2-mock-component": "0.0.6",
"protractor": "^5.3.2",
"rxjs-tslint": "^0.1.4",
"protractor": "^5.4.1",
"rxjs-tslint": "^0.1.6",
"sass-recursive-map-merge": "^1.0.1",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"tslint-config-airbnb": "^5.9.2",
"tslint-config-airbnb": "^5.11.1",
"typescript": "2.9.2"
}
}
<footer class="footer" role="contentinfo">
<div class="container">
<div class="content">
<div class="columns">
<div class="column is-2 has-text-centered">
<ul>
<li>
<a href="https://download.data.grandlyon.com/catalogue/srv/fre/rss.search?sortBy=publicationDate&amp;georss=simplepoint&amp;data"
title="RSS Feed (new window)" i18n-title="@@footer.rss" target="_blank">
<i class="social-network-link fas fa-rss-square"></i>
</a>
</li>
<li class="left-border">
<a href="http://www.facebook.com/legrandlyon" title="Facebook (new window)" i18n-title="@@footer.facebook" target="_blank">
<i class="social-network-link fab fa-facebook-square"></i>
</a>
</li>
<li class="left-border">
<a href="https://twitter.com/grandlyon" title="Twitter (new window)" i18n-title="@@footer.twitter" target="_blank">
<i class="social-network-link fab fa-twitter-square"></i>
</a>
</li>
</ul>
</div>
<div class="column is-7 has-text-centered">
<ul>
<li>
<a class="accessibility-link" [routerLink]="['/', AppRoutes.accessibility.uri]" i18n="@@footer.accessibility">Accessibility</a>
</li>
<li class="left-border">
<a class="site-map-link" [routerLink]="['/', AppRoutes.siteMap.uri]" i18n="@@footer.sitemap">Site Map</a>
</li>
<li class="left-border">
<a class="legal-mentions-link" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@footer.notices">Legal Notices</a>
</li>
<li class="left-border">
<a [routerLink]="['/', AppRoutes.contact.uri]" i18n="@@footer.contactus">Contact Us</a>
</li>
</ul>
</div>
<div class="column is-3 has-text-centered">
<ul>
<li>
<a href="https://www.grandlyon.com/" target="_blank">
<img i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)" class="plus-logo"
src="./assets/img/footer-plus.png" alt="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)">
</a>
</li>
<li>
<a class="metropolis-website-link" i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
href="https://www.grandlyon.com/" target="_blank" i18n="@@footer.metropole.site">
A Lyon Metropolis website
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</footer>
\ No newline at end of file
<header role="banner">
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" [routerLink]="['/', AppRoutes.home.uri]">
<img class="logo-smart-data-grand-lyon" src="./assets/img/logo-smart-data-grand-lyon.png" alt="Données métropolitaines du Grand Lyon">
</a>
<div class="navbar-item is-hidden-touch">
<img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png" alt="Grand Lyon, la métropole">
</div>
<div role="button" class="navbar-burger burger" [ngClass]="{'is-active': burgerActive}" (click)="burgerActive = !burgerActive">
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="navbar-menu" [ngClass]="{'is-active': burgerActive === true}">
<div class="navbar-start">
<a class="navbar-item home-link" [routerLink]="['/', AppRoutes.home.uri]" routerLinkActive="active-link" i18n="@@header.home">
Home
</a>
<a class="navbar-item research-link" [routerLink]="['/', AppRoutes.research.uri]" routerLinkActive="active-link"
i18n="@@header.data">
Data
</a>
<a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.approach.uri]" routerLinkActive="active-link"
i18n="@@header.approach">
Approach
</a>
<a class="navbar-item approach-link" [routerLink]="['/', AppRoutes.actors.uri]" routerLinkActive="active-link" i18n="@@header.actors">
Actors
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<a href preventDefault class="flag-logo" (click)="changeLanguage('en')"><img src="./assets/img/uk-flag.png"
title="English" i18n-title="@@header.logoEnglish" alt="Drapeau français"></a>
<a href preventDefault class="flag-logo" (click)="changeLanguage('fr')"><img src="./assets/img/france-flag.png"
title="French" i18n-title="@@header.logoFrench" alt="Drapeau du Royaume-Uni"></a>
</div>
<div class="navbar-item">
<span *ngIf="!userIsSignedIn">
<a [routerLink]="['/', AppRoutes.signin.uri]" routerLinkActive="active-link" i18n="@@header.signIn">
Sign In
</a>
or
<a [routerLink]="['/', AppRoutes.signup.uri]" routerLinkActive="active-link" i18n="@@header.signUp">
Sign Up
</a>
</span>
<span class="username" *ngIf="userIsSignedIn">{{ username }}</span>
<a href preventDefault (click)="signOut()" *ngIf="userIsSignedIn" i18n="@@header.signOut">Sign Out</a>
</div>
</div>
</div>
</nav>
</header>
\ No newline at end of file
import { HeaderComponent } from './header/header.component';
import { HeaderComponent } from './main/header/header.component';
import { MainComponent } from './main/main.component';
import { FooterComponent } from './footer/footer.component';
import { FooterComponent } from './main/footer/footer.component';
import { NotificationsComponent } from './notifications/notifications.component';
import { ErrorComponent } from './error/error.component';
import { LoginComponent } from './login/login.component';
import { ContactComponent } from './contact/contact.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { SideMenuComponent } from './main/side-menu/side-menu.component';
export { HeaderComponent, MainComponent, FooterComponent, NotificationsComponent,
ErrorComponent, LoginComponent, ContactComponent, SignUpComponent };
......@@ -20,4 +21,5 @@ export const CoreComponents = [
ContactComponent,
LoginComponent,
SignUpComponent,
SideMenuComponent,
];
<footer class="footer" role="contentinfo">
<div class="columns is-desktop">
<div class="column is-narrow links">
<div>
<a class="accessibility-link" [routerLink]="['/', AppRoutes.accessibility.uri]" i18n="@@footer.accessibility">
Accessibility</a>
</div>
<div>
<a class="site-map-link" [routerLink]="['/', AppRoutes.siteMap.uri]" i18n="@@footer.sitemap">Site Map</a>
</div>
<div >
<a class="legal-mentions-link" [routerLink]="['/', AppRoutes.legalNotices.uri]" i18n="@@footer.notices">Legal
Notices</a>
</div>
<div>
<a [routerLink]="['/', AppRoutes.contact.uri]" i18n="@@footer.contactus">Contact Us</a>
</div>
</div>
<div class="column is-narrow">
<ul>
<li>
<a href="https://download.data.grandlyon.com/catalogue/srv/fre/rss.search?sortBy=publicationDate&amp;georss=simplepoint&amp;data"
title="RSS Feed (new window)" i18n-title="@@footer.rss" target="_blank">
<i class="social-network-link fas fa-rss-square"></i>
</a>
</li>
<li class="left-border">
<a href="http://www.facebook.com/legrandlyon" title="Facebook (new window)" i18n-title="@@footer.facebook"
target="_blank">
<i class="social-network-link fab fa-facebook-square"></i>
</a>
</li>
<li class="left-border">
<a href="https://twitter.com/grandlyon" title="Twitter (new window)" i18n-title="@@footer.twitter" target="_blank">
<i class="social-network-link fab fa-twitter-square"></i>
</a>
</li>
</ul>
</div>
<div class="column metropole">
<ul>
<li>
<a href="https://www.grandlyon.com/" target="_blank">
<img i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
class="plus-logo" src="./assets/img/footer-plus.png" alt="Accéder au site de la Métropole de Lyon (nouvelle fenêtre)">
</a>
</li>
<li>
<a class="metropolis-website-link" i18n-title="@@footer.metropole.site.title" title="Access the Lyon Metropolis website (new window)"
href="https://www.grandlyon.com/" target="_blank" i18n="@@footer.metropole.site">
A Lyon Metropolis website
</a>
</li>
</ul>
</div>
</div>
</footer>
@import '../../../../scss/variables';
@import '../../../../../scss/variables';
@import '../../../../../scss/init_bulma.scss';
.footer {
footer.footer {
padding-top: 1em;
padding-bottom: 1em;
margin-top: 1em;
background-color: $dark-blue;
a {
color: white;
font-size: $size-6;
}
.metropole {
text-align: right;
}
@media screen and (max-width: $desktop) {
div.column {
text-align: center;
}
}
}
.links div {
display: inline-block;
a {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
&:not(:first-of-type) {
a {
border-left: 1px solid white;
}
}
}
img, .social-network-link {
img,
.social-network-link {
vertical-align: middle;
}
......@@ -27,6 +52,7 @@ img, .social-network-link {
ul {
padding-left: 0;
margin: 0;
li {
display: inline;
}
......@@ -36,6 +62,6 @@ ul {
height: 0.875rem;
}
.metropolis-website-link:hover {
.metropolis-website-link:hover, .links a:hover {
text-decoration: underline;
}
\ No newline at end of file
}
import { Component, OnInit } from '@angular/core';
import { AppRoutes } from '../../../routes';
import { AppRoutes } from '../../../../routes';
@Component({
selector: 'app-footer',
......
<header role="banner">
<div class="navbar">
<div class="navbar-brand">
<div class="navbar-item icon-hamburger">
<div class="hamburger hamburger--collapse-r" [ngClass]="{'is-active': isBurgerActive}" (click)="toggleBurger()">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
</div>
<div class="navbar-item logo-data">
<a [routerLink]="['/', AppRoutes.home.uri]">
<span class=""><span class="has-text-danger">data</span>.grandlyon.com</span>
</a>
</div>
</div>
<div class="navbar-menu search-bar">
<div class="navbar-item">
<app-search-bar class="search-bar"></app-search-bar>
</div>
</div>
<div class="navbar-menu">
<div class="navbar-item is-hidden-touch">
<img class="logo-smart-data-grand-lyon" width="112" height="28" src="./assets/img/logo-grand-lyon.png" alt="Grand Lyon, la métropole">
</div>
</div>
</div>
</header>
@import '../../../../../scss/variables';
@import '../../../../../scss/init_bulma';
.flag-logo {
line-height: 0;
img {
width: 1.25rem;
cursor: pointer;
......@@ -7,22 +11,65 @@
}
}
.navbar-brand {
width: 100%;
}
.navbar {
flex-wrap: wrap;
justify-content: space-between;
}
.navbar-brand {
justify-content: space-between;
background-color: white;
}
.logo-data {
&:hover {
cursor: pointer;
}
a {
color: $main;
}
a:hover {
color: $main;
text-decoration: unset;
}
span {
font-size: $size-4;
}
}
// When mobile, we center the logo
@media screen and (max-width: $desktop) {
.navbar-item {
flex: 1;
}
.icon-hamburger > div {
margin-right: auto;
}
.logo-data a {
transform: translateX(-50%);
}
}
app-search-bar {
width: 100%;
}
.navbar-menu {
padding: 0.5rem 2rem;
flex-grow: unset;
}
.navbar-menu.search-bar {
flex-grow: 1;
justify-content: center;
.navbar-item {
flex-basis: 50%;
}
}
.username {
margin-right: 1rem;
font-weight: bold;
}
\ No newline at end of file
}
import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { AppRoutes } from '../../../../routes';
import { DatasetResearchService } from '../../../../geosource/services';
import { Router } from '@angular/router';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
})
export class HeaderComponent implements OnInit {
@Output() burgerStatus = new EventEmitter<boolean>();
isBurgerActive = false;
AppRoutes = AppRoutes;
constructor(
private _datasetResearchService: DatasetResearchService,
private _router: Router,
) { }
ngOnInit() {
this._datasetResearchService.searchChange$.subscribe(() => {
// Redirect to Dataset list if this is not the current page
if (this._router.url.split('/').pop() !== AppRoutes.datasets.uri) {
this._router.navigate(['/', AppRoutes.research.uri, AppRoutes.datasets.uri]);
}
});
}
toggleBurger() {
this.isBurgerActive = !this.isBurgerActive;
this.burgerStatus.emit(this.isBurgerActive);
}
}
<app-header class="site-header"></app-header>
<div class="grid-layout">
<app-header class="site-header" (burgerStatus)="changeBurgerStatus($event)">
</app-header>
<main class="site-content" role="main">
<router-outlet></router-outlet>
</main>
<app-side-menu class="side-menu" [ngClass]="{'is-active': sidebarOpened}">
<app-footer class="site-footer"></app-footer>
\ No newline at end of file
</app-side-menu>
<main class="site-content" role="main" [ngClass]="{'is-wide': !sidebarOpened}">
<router-outlet></router-outlet>
</main>
<app-footer class="site-footer"></app-footer>
</div>
@import '../../../../scss/variables.scss';
@import '../../../../scss/init_bulma.scss';
.grid-layout {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
overflow: hidden;
}
.site-header {
grid-row: 1;
grid-column: 1;
}
.side-menu {
grid-row: 2;
grid-column: 1;
width: $width-menu;
transform: translateX(-100%);
z-index: 200;
/* 1 */
transition: transform .2s linear;
/* 2 */
will-change: transform;
background-color: $dark-blue;
/* 3 */
}
.side-menu.is-active {
transform: translateX(0);
/* 4 */
}
.site-content {
grid-row: 2;
grid-column: 1;
@media screen and (min-width: $desktop) {
transition: all 200ms cubic-bezier(0.7, 0, 0.3, 1);
margin-left: $width-menu;
width: calc(100% - $width-menu);
}
&.is-wide {
margin-left: 0;
width: 100%;
}
}
.site-footer {
grid-row: 3;
grid-column: 1;
}
......@@ -7,9 +7,14 @@ import { Component, OnInit } from '@angular/core';
})
export class MainComponent implements OnInit {
constructor() { }
sidebarOpened = false;
constructor() {}
ngOnInit() {
}