Skip to content
Snippets Groups Projects
Unverified Commit f49f252d authored by Florimond Manca's avatar Florimond Manca Committed by GitHub
Browse files

Merge pull request #24 from oser-cs/refactor/layout

Extract generic layout with blue and white themes
parents 6fc8526d 05c79ad7
Branches
No related tags found
1 merge request!26Release first-users version to production
Showing
with 104 additions and 131 deletions
<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>
@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;
}
}
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;
}
}
...@@ -3,4 +3,3 @@ export * from './navbar/navbar.component'; ...@@ -3,4 +3,3 @@ export * from './navbar/navbar.component';
export * from './footer/footer.component'; export * from './footer/footer.component';
export * from './ui-gallery/ui-gallery.component'; export * from './ui-gallery/ui-gallery.component';
export * from './nav.model'; export * from './nav.model';
export * from './blue_navbar/blue_navbar.component';
<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>
/*
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;
}
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();
});
});
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);
}
}
<ul>
<li *ngFor="let link of links">
<app-nav-item [link]="link"></app-nav-item>
</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
li {
text-align: center;
}
}
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[];
}
<ul> <ul [ngClass]="{'vertical': vertical}">
<li *ngFor="let link of links"> <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> </li>
</ul> </ul>
...@@ -4,6 +4,10 @@ ul { ...@@ -4,6 +4,10 @@ ul {
padding: 0; padding: 0;
display: flex; display: flex;
&.vertical {
flex-direction: column;
}
li { li {
text-align: center; text-align: center;
} }
......
...@@ -9,5 +9,7 @@ import { Link } from '../nav.model'; ...@@ -9,5 +9,7 @@ import { Link } from '../nav.model';
export class NavGroupComponent { export class NavGroupComponent {
@Input() links: Link[]; @Input() links: Link[];
@Input() theme: string;
@Input() vertical = false;
} }
<div class="nav-link"> <div class="nav-link" [ngClass]="{'blue': theme === 'blue'}">
<a *ngIf="link.href; else action" class="no-style" [routerLink]="link.href"> <a *ngIf="link.href; else action" class="no-style" [routerLink]="link.href">
{{ link.text }} {{ link.text }}
</a> </a>
......
...@@ -17,4 +17,14 @@ ...@@ -17,4 +17,14 @@
color: $color-dark-blue; color: $color-dark-blue;
border-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;
}
}
}
} }
...@@ -9,5 +9,6 @@ import { Link } from '../nav.model'; ...@@ -9,5 +9,6 @@ import { Link } from '../nav.model';
export class NavItemComponent { export class NavItemComponent {
@Input() link: Link; @Input() link: Link;
@Input() theme: string;
} }
<div class="navbar drop-shadow-md"> <div class="navbar drop-shadow-md" [ngClass]="{'blue': theme === 'blue'}">
<div class="top"> <div class="top">
<a routerLink="/" class='logo-container'> <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> </a>
<div class="nav-wide"> <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> <ng-content select="[app-navbar-extra]"></ng-content>
</div> </div>
<i (click)="toggle()" class="hamburger fa fa-bars fa-2x"></i> <i (click)="toggle()" class="hamburger fa fa-bars fa-2x"></i>
</div> </div>
<div class="nav-narrow" *ngIf="visible"> <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> <ng-content select="[app-navbar-extra-narrow]"></ng-content>
</div> </div>
</div> </div>
...@@ -9,6 +9,12 @@ $col-padding: 10px; ...@@ -9,6 +9,12 @@ $col-padding: 10px;
padding: 0 $margin-page; padding: 0 $margin-page;
margin: 0; margin: 0;
background: white; background: white;
&.blue {
background: $color-dark-blue;
i.hamburger {
color: white !important;
}
}
z-index: 10; z-index: 10;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
......
...@@ -11,6 +11,7 @@ export class NavbarComponent { ...@@ -11,6 +11,7 @@ export class NavbarComponent {
visible = false; visible = false;
@Input() links: Link[] = []; @Input() links: Link[] = [];
@Input() theme: string;
constructor() { } constructor() { }
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment