-
-
-
-
-
-
-
+
+
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 5d37d31..e69de29 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -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;
-}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 33e44ff..a8bbcc6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -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
;
- 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);
- }
-
}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 9af1f7e..3beb53d 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -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,
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
new file mode 100644
index 0000000..9ace011
--- /dev/null
+++ b/src/app/home/home.component.html
@@ -0,0 +1,36 @@
+
diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss
new file mode 100644
index 0000000..a69f599
--- /dev/null
+++ b/src/app/home/home.component.scss
@@ -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;
+}
diff --git a/src/app/home/home.component.spec.ts b/src/app/home/home.component.spec.ts
new file mode 100644
index 0000000..490e81b
--- /dev/null
+++ b/src/app/home/home.component.spec.ts
@@ -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;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ HomeComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(HomeComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
new file mode 100644
index 0000000..472fbde
--- /dev/null
+++ b/src/app/home/home.component.ts
@@ -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;
+ 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);
+ }
+
+}
diff --git a/src/app/style-guide/style-guide.component.html b/src/app/style-guide/style-guide.component.html
new file mode 100644
index 0000000..d2f425c
--- /dev/null
+++ b/src/app/style-guide/style-guide.component.html
@@ -0,0 +1,31 @@
+Color Palette
+
+
+
+
+ {{hue}}{{variant.suffix}}
+
+
+
+
Typography
+
+
Jumbo Heading 1 - mat-display-4
+
Jumbo Heading 1 - mat-display-3
+
Jumbo Heading 1 - mat-display-2
+
Jumbo Heading 1 - mat-display-1
+
H1 - Heading 1 - mat-h1
+
H2 - Heading 2 - mat-h2
+
H3 - Heading 3 - mat-h3
+
H4 - Heading 4 - mat-h4
+
H5 - Heading 5 - mat-h5
+
H6 - Heading 6 - mat-h6
+
Body 2
+
Body 1
+