Adds basic styleguide
This commit is contained in:
Aaron Louie
parent
433159819f
commit
e0caf50677
|
|
@ -1,36 +1,3 @@
|
|||
<div
|
||||
class="main mat-typography"
|
||||
scrollSpy (sectionChange)="onSectionChange($event)"
|
||||
>
|
||||
<div
|
||||
id="menu"
|
||||
fxLayout="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutAlign="center end"
|
||||
[ngClass]="{'scrolling': isScrolling}"
|
||||
(mouseover)="keepMenuOpen()"
|
||||
(mouseout)="isScrolling = false"
|
||||
>
|
||||
<button mat-fab (click)="toggleMenu()" class="toggle-menu" color="primary">
|
||||
<mat-icon *ngIf="!isScrolling">menu</mat-icon>
|
||||
<mat-icon *ngIf="isScrolling">close</mat-icon>
|
||||
</button>
|
||||
<a
|
||||
*ngFor="let link of menuLinks"
|
||||
mat-button
|
||||
pageScroll
|
||||
[pageScrollAdjustHash]="true"
|
||||
href="#{{ link.id }}"
|
||||
(click)="onMenuClick(link.id)"
|
||||
[ngClass]="{'active': currentSection === link.id}"
|
||||
id="{{link.id}}_menu_link"
|
||||
>{{ link.label }}</a>
|
||||
<div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let link of menuLinks" class="scroll-spy-section" id="{{link.id}}">
|
||||
<ng-container *ngComponentOutlet="link.component"></ng-container>
|
||||
</div>
|
||||
|
||||
<app-footer id="footer"></app-footer>
|
||||
<div class="mat-typography">
|
||||
<router-outlet></router-outlet>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,46 +0,0 @@
|
|||
@import "../config";
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -300px;
|
||||
z-index: 100;
|
||||
height: 100vh;
|
||||
width: 300px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 80px;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.scrolling {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
button.toggle-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 1s ease-in-out 0.5s;
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
border-right: 2px solid $brand-primary;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#selected_indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 80px;
|
||||
width: 2px;
|
||||
height: 36px;
|
||||
background-color: $brand-primary;
|
||||
transition: all 1s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -1,91 +1,11 @@
|
|||
import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core';
|
||||
import {HeaderComponent} from './header/header.component';
|
||||
import {WelcomeComponent} from './welcome/welcome.component';
|
||||
import {AboutUsComponent} from './about-us/about-us.component';
|
||||
import {LogoValuesComponent} from './logo-values/logo-values.component';
|
||||
import {TeamComponent} from './team/team.component';
|
||||
import {CaseStudiesComponent} from './case-studies/case-studies.component';
|
||||
import {ContactUsComponent} from './contact-us/contact-us.component';
|
||||
|
||||
interface MenuLink {
|
||||
id: string;
|
||||
label: string;
|
||||
component: any;
|
||||
}
|
||||
import {Component} from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
styleUrls: ['./app.component.scss']
|
||||
})
|
||||
export class AppComponent implements AfterViewInit {
|
||||
menuLinks: MenuLink[] = [
|
||||
{id: 'header', label: 'Home', component: HeaderComponent},
|
||||
{id: 'welcome', label: 'Intro', component: WelcomeComponent},
|
||||
{id: 'about_us', label: 'About Us', component: AboutUsComponent},
|
||||
{id: 'logo_values', label: 'Our Values', component: LogoValuesComponent},
|
||||
{id: 'team', label: 'Our Team', component: TeamComponent},
|
||||
{id: 'case_studies', label: 'Projects', component: CaseStudiesComponent},
|
||||
{id: 'contact_us', label: 'Contact', component: ContactUsComponent},
|
||||
];
|
||||
|
||||
@ViewChildren('scrollSpySection') scrollSpySections: QueryList<any>;
|
||||
title = 'Sartography';
|
||||
currentSection = 'header';
|
||||
activeLinkTop: number;
|
||||
showIndicator = false;
|
||||
isScrolling = false;
|
||||
scrollTimer = -1;
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef) {
|
||||
export class AppComponent {
|
||||
constructor() {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
}
|
||||
|
||||
moveSelectedIndicator(linkId: string) {
|
||||
this.currentSection = linkId;
|
||||
const activeLinkEl = document.getElementById(`${this.currentSection}_menu_link`);
|
||||
this.activeLinkTop = activeLinkEl.offsetTop;
|
||||
}
|
||||
|
||||
onMenuClick(linkId: string) {
|
||||
this.showIndicator = true;
|
||||
this.onSectionChange(linkId);
|
||||
}
|
||||
|
||||
onSectionChange(sectionId: string) {
|
||||
this.currentSection = sectionId;
|
||||
this.moveSelectedIndicator(this.currentSection);
|
||||
}
|
||||
|
||||
scrollTo(section) {
|
||||
document.querySelector('#' + section).scrollIntoView();
|
||||
}
|
||||
|
||||
@HostListener('window:scroll')
|
||||
onScroll() {
|
||||
this.isScrolling = true;
|
||||
if (this.scrollTimer !== -1) {
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
|
||||
this.scrollTimer = window.setTimeout(() => {
|
||||
this.showIndicator = true;
|
||||
this.isScrolling = false;
|
||||
this.scrollTimer = -1;
|
||||
this.changeDetector.detectChanges();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isScrolling = !this.isScrolling;
|
||||
}
|
||||
|
||||
keepMenuOpen() {
|
||||
this.isScrolling = true;
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,12 +28,18 @@ import {easingFn} from './animation';
|
|||
import {LogoValuesComponent} from './logo-values/logo-values.component';
|
||||
import {ScrollSpyDirective} from './scroll-spy.directive';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {StyleGuideComponent} from './style-guide/style-guide.component';
|
||||
import {HomeComponent} from './home/home.component';
|
||||
|
||||
const routes: Routes = [
|
||||
{
|
||||
path: '',
|
||||
component: AppComponent
|
||||
path: 'styleguide',
|
||||
component: StyleGuideComponent
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: HomeComponent
|
||||
}
|
||||
];
|
||||
|
||||
@NgModule({
|
||||
|
|
@ -48,6 +54,8 @@ const routes: Routes = [
|
|||
ScrollSpyDirective,
|
||||
TeamComponent,
|
||||
WelcomeComponent,
|
||||
StyleGuideComponent,
|
||||
HomeComponent,
|
||||
],
|
||||
imports: [
|
||||
BrowserAnimationsModule,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,36 @@
|
|||
<div
|
||||
class="main"
|
||||
scrollSpy (sectionChange)="onSectionChange($event)"
|
||||
>
|
||||
<div
|
||||
id="menu"
|
||||
fxLayout="column"
|
||||
fxLayoutGap="20px"
|
||||
fxLayoutAlign="center end"
|
||||
[ngClass]="{'scrolling': isScrolling}"
|
||||
(mouseover)="keepMenuOpen()"
|
||||
(mouseout)="isScrolling = false"
|
||||
>
|
||||
<button mat-fab (click)="toggleMenu()" class="toggle-menu" color="primary">
|
||||
<mat-icon *ngIf="!isScrolling">menu</mat-icon>
|
||||
<mat-icon *ngIf="isScrolling">close</mat-icon>
|
||||
</button>
|
||||
<a
|
||||
*ngFor="let link of menuLinks"
|
||||
mat-button
|
||||
pageScroll
|
||||
[pageScrollAdjustHash]="true"
|
||||
href="#{{ link.id }}"
|
||||
(click)="onMenuClick(link.id)"
|
||||
[ngClass]="{'active': currentSection === link.id}"
|
||||
id="{{link.id}}_menu_link"
|
||||
>{{ link.label }}</a>
|
||||
<div id="selected_indicator" [ngStyle]="{'top.px': activeLinkTop, 'opacity': showIndicator ? 1 : 0}"></div>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let link of menuLinks" class="scroll-spy-section" id="{{link.id}}">
|
||||
<ng-container *ngComponentOutlet="link.component"></ng-container>
|
||||
</div>
|
||||
|
||||
<app-footer id="footer"></app-footer>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
@import "../../config";
|
||||
|
||||
#menu {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -300px;
|
||||
z-index: 100;
|
||||
height: 100vh;
|
||||
width: 300px;
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
padding: 80px;
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
&.scrolling {
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
button.toggle-menu {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
transition: all 1s ease-in-out 0.5s;
|
||||
|
||||
&.active {
|
||||
font-weight: 500;
|
||||
border-right: 2px solid $brand-primary;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#selected_indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 80px;
|
||||
width: 2px;
|
||||
height: 36px;
|
||||
background-color: $brand-primary;
|
||||
transition: all 1s ease-in-out;
|
||||
opacity: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, HostListener, QueryList, ViewChildren} from '@angular/core';
|
||||
import {HeaderComponent} from '../header/header.component';
|
||||
import {WelcomeComponent} from '../welcome/welcome.component';
|
||||
import {AboutUsComponent} from '../about-us/about-us.component';
|
||||
import {LogoValuesComponent} from '../logo-values/logo-values.component';
|
||||
import {TeamComponent} from '../team/team.component';
|
||||
import {CaseStudiesComponent} from '../case-studies/case-studies.component';
|
||||
import {ContactUsComponent} from '../contact-us/contact-us.component';
|
||||
|
||||
interface MenuLink {
|
||||
id: string;
|
||||
label: string;
|
||||
component: any;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class HomeComponent implements AfterViewInit {
|
||||
menuLinks: MenuLink[] = [
|
||||
{id: 'header', label: 'Home', component: HeaderComponent},
|
||||
{id: 'welcome', label: 'Intro', component: WelcomeComponent},
|
||||
{id: 'about_us', label: 'About Us', component: AboutUsComponent},
|
||||
{id: 'logo_values', label: 'Our Values', component: LogoValuesComponent},
|
||||
{id: 'team', label: 'Our Team', component: TeamComponent},
|
||||
{id: 'case_studies', label: 'Projects', component: CaseStudiesComponent},
|
||||
{id: 'contact_us', label: 'Contact', component: ContactUsComponent},
|
||||
];
|
||||
|
||||
@ViewChildren('scrollSpySection') scrollSpySections: QueryList<any>;
|
||||
title = 'Sartography';
|
||||
currentSection = 'header';
|
||||
activeLinkTop: number;
|
||||
showIndicator = false;
|
||||
isScrolling = false;
|
||||
scrollTimer = -1;
|
||||
|
||||
constructor(private changeDetector: ChangeDetectorRef) {
|
||||
}
|
||||
|
||||
ngAfterViewInit() {
|
||||
}
|
||||
|
||||
moveSelectedIndicator(linkId: string) {
|
||||
this.currentSection = linkId;
|
||||
const activeLinkEl = document.getElementById(`${this.currentSection}_menu_link`);
|
||||
this.activeLinkTop = activeLinkEl.offsetTop;
|
||||
}
|
||||
|
||||
onMenuClick(linkId: string) {
|
||||
this.showIndicator = true;
|
||||
this.onSectionChange(linkId);
|
||||
}
|
||||
|
||||
onSectionChange(sectionId: string) {
|
||||
this.currentSection = sectionId;
|
||||
this.moveSelectedIndicator(this.currentSection);
|
||||
}
|
||||
|
||||
scrollTo(section) {
|
||||
document.querySelector('#' + section).scrollIntoView();
|
||||
}
|
||||
|
||||
@HostListener('window:scroll')
|
||||
onScroll() {
|
||||
this.isScrolling = true;
|
||||
if (this.scrollTimer !== -1) {
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
|
||||
this.scrollTimer = window.setTimeout(() => {
|
||||
this.showIndicator = true;
|
||||
this.isScrolling = false;
|
||||
this.scrollTimer = -1;
|
||||
this.changeDetector.detectChanges();
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
this.isScrolling = !this.isScrolling;
|
||||
}
|
||||
|
||||
keepMenuOpen() {
|
||||
this.isScrolling = true;
|
||||
clearTimeout(this.scrollTimer);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<h1 class="full-width-heading bg-primary">Color Palette</h1>
|
||||
<div class="container">
|
||||
<div fxLayout="column" fxLayoutGap="10px">
|
||||
<div *ngFor="let hue of hues" fxLayout="row" fxLayoutGap="0px">
|
||||
<div
|
||||
*ngFor="let variant of variants"
|
||||
class="swatch bg-{{hue}}{{variant.suffix}} text-{{variant.contrast}}"
|
||||
gdAlignRows="center center"
|
||||
gdAlignColumns="center center"
|
||||
>
|
||||
{{hue}}{{variant.suffix}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 class="full-width-heading bg-accent">Typography</h1>
|
||||
<div class="container">
|
||||
<h1 class="mat-display-4">Jumbo Heading 1 - mat-display-4</h1>
|
||||
<h1 class="mat-display-3">Jumbo Heading 1 - mat-display-3</h1>
|
||||
<h1 class="mat-display-2">Jumbo Heading 1 - mat-display-2</h1>
|
||||
<h1 class="mat-display-1">Jumbo Heading 1 - mat-display-1</h1>
|
||||
<h1>H1 - Heading 1 - mat-h1</h1>
|
||||
<h2>H2 - Heading 2 - mat-h2</h2>
|
||||
<h3>H3 - Heading 3 - mat-h3</h3>
|
||||
<h4>H4 - Heading 4 - mat-h4</h4>
|
||||
<h5>H5 - Heading 5 - mat-h5</h5>
|
||||
<h6>H6 - Heading 6 - mat-h6</h6>
|
||||
<p>Body 2</p>
|
||||
<p>Body 1</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
@import "../../config";
|
||||
|
||||
.swatch {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.text-white { color: white; }
|
||||
.text-black { color: $brand-gray; }
|
||||
.full-width-heading {
|
||||
width: 100%;
|
||||
color: white;
|
||||
position: relative;
|
||||
height: 4em;
|
||||
text-indent: 2em;
|
||||
padding-top: 2em;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 2em;
|
||||
bottom: 2em;
|
||||
border-bottom: 8px solid white;
|
||||
width: 4em;
|
||||
height: 4px;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { StyleGuideComponent } from './style-guide.component';
|
||||
|
||||
describe('StyleGuideComponent', () => {
|
||||
let component: StyleGuideComponent;
|
||||
let fixture: ComponentFixture<StyleGuideComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ StyleGuideComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(StyleGuideComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
interface ColorVariant {
|
||||
suffix: string;
|
||||
contrast: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-style-guide',
|
||||
templateUrl: './style-guide.component.html',
|
||||
styleUrls: ['./style-guide.component.scss']
|
||||
})
|
||||
export class StyleGuideComponent implements OnInit {
|
||||
hues = ['gray', 'primary', 'accent', 'warning'];
|
||||
variants = [
|
||||
{suffix: '-light-4', contrast: 'black'},
|
||||
{suffix: '-light-3', contrast: 'black'},
|
||||
{suffix: '-light-2', contrast: 'black'},
|
||||
{suffix: '-light-1', contrast: 'black'},
|
||||
{suffix: '', contrast: 'white'},
|
||||
{suffix: '-dark-1', contrast: 'white'},
|
||||
{suffix: '-dark-2', contrast: 'white'},
|
||||
{suffix: '-dark-3', contrast: 'white'},
|
||||
{suffix: '-dark-4', contrast: 'white'},
|
||||
];
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue