diff --git a/src/app/shared/blue_navbar/blue_navbar.component.html b/src/app/shared/blue_navbar/blue_navbar.component.html
deleted file mode 100644
index 46680b3ccd9cd28bc61039489aae3a055ecf78db..0000000000000000000000000000000000000000
--- a/src/app/shared/blue_navbar/blue_navbar.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<div class="blue_navbar drop-shadow-md">
- <div class="top">
- <a routerLink="/" class='logo-container'>
- <img src='assets/img/oser-logo.png' alt='Logo' class='logo'>
- </a>
- <div class="blue_nav-wide">
- </div>
- <i (click)="toggle()" class="blue_hamburger fa fa-bars fa-2x"></i>
- </div>
-</div>
diff --git a/src/app/shared/blue_navbar/blue_navbar.component.scss b/src/app/shared/blue_navbar/blue_navbar.component.scss
deleted file mode 100644
index 21fad43575c295de501499bb6d0fa0d73d45397a..0000000000000000000000000000000000000000
--- a/src/app/shared/blue_navbar/blue_navbar.component.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import '~sass/media-queries';
-@import '~sass/variables';
-$margin-page: 2em;
-$col-padding: 10px;
-
-.blue_navbar {
- position: static;
- top: 0;
- padding: 0 $margin-page;
- margin: 0;
- background: white;
- z-index: 10;
- display: flex;
- flex-flow: column nowrap;
-}
-
-.top {
- display: flex;
- flex-direction: row;
- align-items: center;
- width: 100%;
-}
-
-a.logo-container {
- display: block;
- padding: $col-padding;
- margin: 0;
- margin-right: auto;
-}
-
-img.logo {
- width: 100%;
- max-width: 15em;
- padding-top: .3em;
- padding-bottom: .2em;
-}
-
-i.blue_hamburger {
- cursor: pointer;
- margin-left: auto;
- margin-right: 0;
- color: $color-dark-blue;
- display: block;
- @include media-md {
- display: none;
- }
-}
-
-.blue_nav-wide {
- height: 100%;
- margin-top: auto;
- display: none;
- flex: 1;
- @include media-md {
- display: flex;
- }
-}
-.blue_nav-narrow {
- display: block;
- @include media-md() {
- display: none;
- }
-}
diff --git a/src/app/shared/blue_navbar/blue_navbar.component.ts b/src/app/shared/blue_navbar/blue_navbar.component.ts
deleted file mode 100644
index 8248b887b6030f0c6f7babf0bcd60adb542cb631..0000000000000000000000000000000000000000
--- a/src/app/shared/blue_navbar/blue_navbar.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { AuthService } from 'app/core';
-import { Link } from '../nav.model';
-
-@Component({
- selector: 'blue_navbar.component',
- templateUrl: './blue_navbar.component.html',
- styleUrls: ['./blue_navbar.component.scss']
-})
-export class BlueNavbarComponent {
-
- visible = false;
- @Input() links: Link[] = [];
-
- constructor() { }
-
- toggle(): void {
- this.visible = !this.visible;
- }
-
-}
diff --git a/src/app/shared/index.ts b/src/app/shared/index.ts
index fbf312d5ed57442c9baff4389db15c60a2352397..772b50734347d0d7ee20f81ae94214221043bf48 100644
--- a/src/app/shared/index.ts
+++ b/src/app/shared/index.ts
@@ -3,4 +3,3 @@ export * from './navbar/navbar.component';
export * from './footer/footer.component';
export * from './ui-gallery/ui-gallery.component';
export * from './nav.model';
-export * from './blue_navbar/blue_navbar.component';
diff --git a/src/app/shared/layout/layout.component.html b/src/app/shared/layout/layout.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..ef36d9000d5621bc7fb0c22f08ab1727ccb10705
--- /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 0000000000000000000000000000000000000000..dbb1a1a4d4cd1207f51b99188c1c122225b6b9b8
--- /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 0000000000000000000000000000000000000000..c4d6365d70259780c4656f6382416ca8418ff674
--- /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 0000000000000000000000000000000000000000..a91537c019d3a5b44574aeae1df9a572e1b4a1af
--- /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-vertical/nav-group-vertical.component.html b/src/app/shared/nav-group-vertical/nav-group-vertical.component.html
deleted file mode 100644
index 66cc87559ca4b7855fd87a9bf9cec942c6095f81..0000000000000000000000000000000000000000
--- a/src/app/shared/nav-group-vertical/nav-group-vertical.component.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<ul>
- <li *ngFor="let link of links">
- <app-nav-item [link]="link"></app-nav-item>
- </li>
-</ul>
diff --git a/src/app/shared/nav-group-vertical/nav-group-vertical.component.scss b/src/app/shared/nav-group-vertical/nav-group-vertical.component.scss
deleted file mode 100644
index 09df9b375be10d92af8aa85df58ad6a9ec2a3eea..0000000000000000000000000000000000000000
--- a/src/app/shared/nav-group-vertical/nav-group-vertical.component.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-ul {
- list-style-type: none;
- margin: 0;
- padding: 0;
- display: flex;
- flex-direction: column;
-
- li {
- text-align: center;
- }
-}
diff --git a/src/app/shared/nav-group-vertical/nav-group-vertical.component.ts b/src/app/shared/nav-group-vertical/nav-group-vertical.component.ts
deleted file mode 100644
index 7ad1a5eca22589e5412e31b6e447d734109cd541..0000000000000000000000000000000000000000
--- a/src/app/shared/nav-group-vertical/nav-group-vertical.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { Link } from '../nav.model';
-
-@Component({
- selector: 'app-nav-group-vertical',
- templateUrl: './nav-group-vertical.component.html',
- styleUrls: ['./nav-group-vertical.component.scss']
-})
-export class NavGroupVerticalComponent {
-
- @Input() links: Link[];
-
-}
diff --git a/src/app/shared/nav-group/nav-group.component.html b/src/app/shared/nav-group/nav-group.component.html
index 66cc87559ca4b7855fd87a9bf9cec942c6095f81..a184f3b149c406c3d42a0efd7a43b6b2521dc3de 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 17c79f4886d7c5391537d24a11af70f8565880d3..35920834cc511d1b4b7a01b84ef47be433e0efda 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 0562b94036af1dda2c5fc4ba3d1cb301b860a569..44d9d7587ded708ea78c4fe35ba70aac9759625d 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 b7312fe09472fdda1810b3f8a4e1513fa3c747e4..be52dbb963b7a9fb2ae6b5029d787ef709acd7bd 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 c4fe3d13ac44e4830c5416920fcf3c9ec788fb26..bc6391e9d67366425218822da8981e78aaa1c183 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 6c87861d4035cd07dd139f6d04e420e7c0db9051..25168ec968ade09e165b7a8ad5faa5348e148001 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 8f241fb1b41f1bbae51d1452e695406dc73808e2..383d7eddf635ba28d3311c3907552bc132f6087c 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 c09439a7c111dc44c0f98d95da00d80b3596d1e4..1e058e1dbadfc2faf6fb6133d0022e816329df72 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 7549ee5a887a55a971586cd3cd8a27d9709f1ab2..031453b766d6ed7a1d4639b10f81719d4865373f 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 c783a20c5ea67967d14b13a5c30d11c622c177c9..57ae8abc7da29c06e00a73a6a05d44be42545fa6 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 7d800a87e7c746bbe97a28d12bf643a8eca7f28f..fab21ab2cddfe69d42386e324800108694902021 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 8add28ad2e814a0820550860844ab0c22f6e55db..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 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 5ef44aea274ee5341b573c49e015b73c2c863ebb..89f9c6d269f87157f00aaf67b613876f9ccf662b 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);
- }
-
}