From fe655bd2cb8bfb8d4207fda0efabb5e2b0dcb442 Mon Sep 17 00:00:00 2001
From: florimondmanca <florimond.manca@gmail.com>
Date: Thu, 20 Sep 2018 15:04:29 +0200
Subject: [PATCH] extract generic layout with blue and white themes
---
src/app/shared/layout/layout.component.html | 7 ++++++
src/app/shared/layout/layout.component.scss | 14 +++++++++++
.../shared/layout/layout.component.spec.ts | 25 +++++++++++++++++++
src/app/shared/layout/layout.component.ts | 24 ++++++++++++++++++
.../shared/nav-group/nav-group.component.html | 4 +--
.../shared/nav-group/nav-group.component.scss | 4 +++
.../shared/nav-group/nav-group.component.ts | 2 ++
.../shared/nav-item/nav-item.component.html | 2 +-
.../shared/nav-item/nav-item.component.scss | 10 ++++++++
src/app/shared/nav-item/nav-item.component.ts | 1 +
src/app/shared/navbar/navbar.component.html | 11 +++++---
src/app/shared/navbar/navbar.component.scss | 6 +++++
src/app/shared/navbar/navbar.component.ts | 1 +
src/app/shared/shared.module.ts | 9 +++----
.../showcase-site.component.html | 12 +--------
.../showcase-site.component.scss | 20 ---------------
.../showcase-site/showcase-site.component.ts | 13 ++--------
17 files changed, 110 insertions(+), 55 deletions(-)
create mode 100644 src/app/shared/layout/layout.component.html
create mode 100644 src/app/shared/layout/layout.component.scss
create mode 100644 src/app/shared/layout/layout.component.spec.ts
create mode 100644 src/app/shared/layout/layout.component.ts
diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
new file mode 100644
index 0000000..ef36d90
--- /dev/null
+++ b/src/app/shared/layout/layout.component.html
@@ -0,0 +1,7 @@
+<div id="layout">
+ <app-navbar [links]="links" [theme]="theme"></app-navbar>
+ <main class="content">
+ <router-outlet (deactivate)="onDeactivate()"></router-outlet>
+ </main>
+ <app-footer></app-footer>
+</div>
diff --git a/src/app/shared/layout/layout.component.scss b/src/app/shared/layout/layout.component.scss
new file mode 100644
index 0000000..dbb1a1a
--- /dev/null
+++ b/src/app/shared/layout/layout.component.scss
@@ -0,0 +1,14 @@
+/*
+Sticky footer solution from
+https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
+*/
+#layout {
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+
+/* Make main content expand to pull footer to the bottom */
+.content {
+ flex: 1;
+}
diff --git a/src/app/shared/layout/layout.component.spec.ts b/src/app/shared/layout/layout.component.spec.ts
new file mode 100644
index 0000000..c4d6365
--- /dev/null
+++ b/src/app/shared/layout/layout.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+ let component: LayoutComponent;
+ let fixture: ComponentFixture<LayoutComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ LayoutComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(LayoutComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/shared/layout/layout.component.ts b/src/app/shared/layout/layout.component.ts
new file mode 100644
index 0000000..a91537c
--- /dev/null
+++ b/src/app/shared/layout/layout.component.ts
@@ -0,0 +1,24 @@
+import { Component, Input, Renderer } from '@angular/core';
+ import { Link } from '../nav.model';
+
+
+ @Component({
+ selector: 'app-layout',
+ templateUrl: './layout.component.html',
+ styleUrls: ['./layout.component.scss']
+ })
+ export class LayoutComponent {
+
+ @Input() links: Link[];
+ @Input() theme: string;
+
+ constructor(private renderer: Renderer) {
+ this.links = [];
+ }
+
+ onDeactivate() {
+ // on page reload, scroll to top of window
+ this.renderer.setElementProperty(document.body, 'scrollTop', 0);
+ }
+
+ }
diff --git a/src/app/shared/nav-group/nav-group.component.html b/src/app/shared/nav-group/nav-group.component.html
index 66cc875..a184f3b 100644
--- a/src/app/shared/nav-group/nav-group.component.html
+++ b/src/app/shared/nav-group/nav-group.component.html
@@ -1,5 +1,5 @@
-<ul>
+<ul [ngClass]="{'vertical': vertical}">
<li *ngFor="let link of links">
- <app-nav-item [link]="link"></app-nav-item>
+ <app-nav-item [link]="link" [theme]="theme"></app-nav-item>
</li>
</ul>
diff --git a/src/app/shared/nav-group/nav-group.component.scss b/src/app/shared/nav-group/nav-group.component.scss
index 17c79f4..3592083 100644
--- a/src/app/shared/nav-group/nav-group.component.scss
+++ b/src/app/shared/nav-group/nav-group.component.scss
@@ -4,6 +4,10 @@ ul {
padding: 0;
display: flex;
+ &.vertical {
+ flex-direction: column;
+ }
+
li {
text-align: center;
}
diff --git a/src/app/shared/nav-group/nav-group.component.ts b/src/app/shared/nav-group/nav-group.component.ts
index 0562b94..44d9d75 100644
--- a/src/app/shared/nav-group/nav-group.component.ts
+++ b/src/app/shared/nav-group/nav-group.component.ts
@@ -9,5 +9,7 @@ import { Link } from '../nav.model';
export class NavGroupComponent {
@Input() links: Link[];
+ @Input() theme: string;
+ @Input() vertical = false;
}
diff --git a/src/app/shared/nav-item/nav-item.component.html b/src/app/shared/nav-item/nav-item.component.html
index b7312fe..be52dbb 100644
--- a/src/app/shared/nav-item/nav-item.component.html
+++ b/src/app/shared/nav-item/nav-item.component.html
@@ -1,4 +1,4 @@
-<div class="nav-link">
+<div class="nav-link" [ngClass]="{'blue': theme === 'blue'}">
<a *ngIf="link.href; else action" class="no-style" [routerLink]="link.href">
{{ link.text }}
</a>
diff --git a/src/app/shared/nav-item/nav-item.component.scss b/src/app/shared/nav-item/nav-item.component.scss
index c4fe3d1..bc6391e 100644
--- a/src/app/shared/nav-item/nav-item.component.scss
+++ b/src/app/shared/nav-item/nav-item.component.scss
@@ -17,4 +17,14 @@
color: $color-dark-blue;
border-color: $color-dark-blue;
}
+
+ &.blue {
+ color: $color-purple-light;
+ &:hover {
+ &:hover {
+ color: $color-light-gray;
+ border-color: $color-light-gray;
+ }
+ }
+ }
}
diff --git a/src/app/shared/nav-item/nav-item.component.ts b/src/app/shared/nav-item/nav-item.component.ts
index 6c87861..25168ec 100644
--- a/src/app/shared/nav-item/nav-item.component.ts
+++ b/src/app/shared/nav-item/nav-item.component.ts
@@ -9,5 +9,6 @@ import { Link } from '../nav.model';
export class NavItemComponent {
@Input() link: Link;
+ @Input() theme: string;
}
diff --git a/src/app/shared/navbar/navbar.component.html b/src/app/shared/navbar/navbar.component.html
index 8f241fb..383d7ed 100644
--- a/src/app/shared/navbar/navbar.component.html
+++ b/src/app/shared/navbar/navbar.component.html
@@ -1,16 +1,19 @@
-<div class="navbar drop-shadow-md">
+<div class="navbar drop-shadow-md" [ngClass]="{'blue': theme === 'blue'}">
<div class="top">
<a routerLink="/" class='logo-container'>
- <img src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+ <span [ngSwitch]="theme">
+ <img *ngSwitchCase="'blue'" src='assets/img/oser-logo-white.png' alt='Logo' class='logo'>
+ <img *ngSwitchDefault src='assets/img/oser-logo.png' alt='Logo' class='logo'>
+ </span>
</a>
<div class="nav-wide">
- <app-nav-group [links]="links"></app-nav-group>
+ <app-nav-group [theme]="theme" [links]="links"></app-nav-group>
<ng-content select="[app-navbar-extra]"></ng-content>
</div>
<i (click)="toggle()" class="hamburger fa fa-bars fa-2x"></i>
</div>
<div class="nav-narrow" *ngIf="visible">
- <app-nav-group-vertical [links]="links" (click)="toggle()"></app-nav-group-vertical>
+ <app-nav-group [links]="links" [vertical]="true" [theme]="theme" (click)="toggle()"></app-nav-group>
<ng-content select="[app-navbar-extra-narrow]"></ng-content>
</div>
</div>
diff --git a/src/app/shared/navbar/navbar.component.scss b/src/app/shared/navbar/navbar.component.scss
index c09439a..1e058e1 100644
--- a/src/app/shared/navbar/navbar.component.scss
+++ b/src/app/shared/navbar/navbar.component.scss
@@ -9,6 +9,12 @@ $col-padding: 10px;
padding: 0 $margin-page;
margin: 0;
background: white;
+ &.blue {
+ background: $color-dark-blue;
+ i.hamburger {
+ color: white !important;
+ }
+ }
z-index: 10;
display: flex;
flex-flow: column nowrap;
diff --git a/src/app/shared/navbar/navbar.component.ts b/src/app/shared/navbar/navbar.component.ts
index 7549ee5..031453b 100644
--- a/src/app/shared/navbar/navbar.component.ts
+++ b/src/app/shared/navbar/navbar.component.ts
@@ -11,6 +11,7 @@ export class NavbarComponent {
visible = false;
@Input() links: Link[] = [];
+ @Input() theme: string;
constructor() { }
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index c783a20..57ae8ab 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -14,11 +14,10 @@ import { RevealComponent } from './reveal/reveal.component';
import { FilterComponent } from './filter/filter.component';
import { NavItemComponent } from './nav-item/nav-item.component';
import { NavGroupComponent } from './nav-group/nav-group.component';
-import { NavGroupVerticalComponent } from './nav-group-vertical/nav-group-vertical.component';
-import { BlueNavbarComponent } from './blue_navbar/blue_navbar.component';
import { MailtoComponent } from './mailto/mailto.component';
import { LoginButtonComponent } from './login-button/login-button.component';
import { FormPageComponent } from './form-page/form-page.component';
+import { LayoutComponent } from './layout/layout.component';
@NgModule({
imports: [
@@ -37,11 +36,10 @@ import { FormPageComponent } from './form-page/form-page.component';
FilterComponent,
NavItemComponent,
NavGroupComponent,
- NavGroupVerticalComponent,
- BlueNavbarComponent,
MailtoComponent,
LoginButtonComponent,
FormPageComponent,
+ LayoutComponent,
],
exports: [
NavbarComponent,
@@ -50,11 +48,10 @@ import { FormPageComponent } from './form-page/form-page.component';
RevealComponent,
FilterComponent,
NavGroupComponent,
- NavGroupVerticalComponent,
- BlueNavbarComponent,
MailtoComponent,
LoginButtonComponent,
FormPageComponent,
+ LayoutComponent,
]
})
export class SharedModule { }
diff --git a/src/app/showcase-site/showcase-site.component.html b/src/app/showcase-site/showcase-site.component.html
index 7d800a8..fab21ab 100644
--- a/src/app/showcase-site/showcase-site.component.html
+++ b/src/app/showcase-site/showcase-site.component.html
@@ -1,11 +1 @@
-<span id="top"></span>
-<div id="showcase-site">
- <app-navbar [links]="navLinks">
- <app-login-button app-navbar-extra class="login-link"></app-login-button>
- <app-login-button app-navbar-extra-narrow class="text-center login-link"></app-login-button>
- </app-navbar>
- <main class="content">
- <router-outlet (deactivate)="onDeactivate()"></router-outlet>
- </main>
- <app-footer></app-footer>
-</div>
+<app-layout [links]="navLinks"></app-layout>
diff --git a/src/app/showcase-site/showcase-site.component.scss b/src/app/showcase-site/showcase-site.component.scss
index 8add28a..e69de29 100644
--- a/src/app/showcase-site/showcase-site.component.scss
+++ b/src/app/showcase-site/showcase-site.component.scss
@@ -1,20 +0,0 @@
-/*
-Sticky footer solution from
-https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
-*/
-#showcase-site {
- display: flex;
- min-height: 100vh;
- flex-direction: column;
-}
-
-/* Make main content expand to pull footer to the bottom */
-.content {
- flex: 1;
-}
-
-.login-link {
- display: block;
- margin: auto 0;
- padding: 1em 0;
-}
diff --git a/src/app/showcase-site/showcase-site.component.ts b/src/app/showcase-site/showcase-site.component.ts
index 5ef44ae..89f9c6d 100644
--- a/src/app/showcase-site/showcase-site.component.ts
+++ b/src/app/showcase-site/showcase-site.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Renderer } from '@angular/core';
+import { Component } from '@angular/core';
import { Link } from 'app/shared';
@Component({
@@ -6,9 +6,7 @@ import { Link } from 'app/shared';
templateUrl: './showcase-site.component.html',
styleUrls: ['./showcase-site.component.scss']
})
-export class ShowcaseSiteComponent implements OnInit {
-
- constructor(private renderer: Renderer) { }
+export class ShowcaseSiteComponent {
navLinks: Link[] = [
{ href: '/qui-sommes-nous', text: 'Qui sommes-nous ?' },
@@ -18,11 +16,4 @@ export class ShowcaseSiteComponent implements OnInit {
{ href: '/contact', text: 'Contact' }
];
- ngOnInit() { }
-
- onDeactivate() {
- // on page reload, scroll to top of window
- this.renderer.setElementProperty(document.body, "scrollTop", 0);
- }
-
}
--
GitLab