From 6a7e506202901e550674559039c4a2a142420f74 Mon Sep 17 00:00:00 2001 From: Dslak Date: Wed, 2 Dec 2020 10:33:36 +0100 Subject: [PATCH] add styles and routing --- src/app/about/about.component.html | 1 + src/app/about/about.component.scss | 0 src/app/about/about.component.spec.ts | 25 +++++++++++++++ src/app/about/about.component.ts | 15 +++++++++ src/app/app-layout/app-layout.component.html | 2 +- src/app/app-routing.module.ts | 18 ++++++++++- src/app/app.module.ts | 16 +++++++++- .../entertainment.component.html | 1 + .../entertainment.component.scss | 0 .../entertainment.component.spec.ts | 25 +++++++++++++++ .../entertainment/entertainment.component.ts | 15 +++++++++ .../exhibitions/exhibitions.component.html | 1 + .../exhibitions/exhibitions.component.scss | 0 .../exhibitions/exhibitions.component.spec.ts | 25 +++++++++++++++ src/app/exhibitions/exhibitions.component.ts | 15 +++++++++ src/app/header/header.component.html | 11 ++++--- src/app/header/header.component.scss | 32 ++++++++++++++++--- src/app/header/header.component.ts | 9 +++++- .../installations.component.html | 1 + .../installations.component.scss | 0 .../installations.component.spec.ts | 25 +++++++++++++++ .../installations/installations.component.ts | 15 +++++++++ .../performances/performances.component.html | 1 + .../performances/performances.component.scss | 0 .../performances.component.spec.ts | 25 +++++++++++++++ .../performances/performances.component.ts | 15 +++++++++ src/app/portfolio/portfolio.component.html | 1 + src/app/portfolio/portfolio.component.scss | 0 src/app/portfolio/portfolio.component.spec.ts | 25 +++++++++++++++ src/app/portfolio/portfolio.component.ts | 15 +++++++++ src/app/workshops/workshops.component.html | 1 + src/app/workshops/workshops.component.scss | 0 src/app/workshops/workshops.component.spec.ts | 25 +++++++++++++++ src/app/workshops/workshops.component.ts | 15 +++++++++ src/assets/scss/global.scss | 1 + src/assets/scss/variables.scss | 8 ++--- 36 files changed, 368 insertions(+), 16 deletions(-) create mode 100644 src/app/about/about.component.html create mode 100644 src/app/about/about.component.scss create mode 100644 src/app/about/about.component.spec.ts create mode 100644 src/app/about/about.component.ts create mode 100644 src/app/entertainment/entertainment.component.html create mode 100644 src/app/entertainment/entertainment.component.scss create mode 100644 src/app/entertainment/entertainment.component.spec.ts create mode 100644 src/app/entertainment/entertainment.component.ts create mode 100644 src/app/exhibitions/exhibitions.component.html create mode 100644 src/app/exhibitions/exhibitions.component.scss create mode 100644 src/app/exhibitions/exhibitions.component.spec.ts create mode 100644 src/app/exhibitions/exhibitions.component.ts create mode 100644 src/app/installations/installations.component.html create mode 100644 src/app/installations/installations.component.scss create mode 100644 src/app/installations/installations.component.spec.ts create mode 100644 src/app/installations/installations.component.ts create mode 100644 src/app/performances/performances.component.html create mode 100644 src/app/performances/performances.component.scss create mode 100644 src/app/performances/performances.component.spec.ts create mode 100644 src/app/performances/performances.component.ts create mode 100644 src/app/portfolio/portfolio.component.html create mode 100644 src/app/portfolio/portfolio.component.scss create mode 100644 src/app/portfolio/portfolio.component.spec.ts create mode 100644 src/app/portfolio/portfolio.component.ts create mode 100644 src/app/workshops/workshops.component.html create mode 100644 src/app/workshops/workshops.component.scss create mode 100644 src/app/workshops/workshops.component.spec.ts create mode 100644 src/app/workshops/workshops.component.ts diff --git a/src/app/about/about.component.html b/src/app/about/about.component.html new file mode 100644 index 0000000..6094aa9 --- /dev/null +++ b/src/app/about/about.component.html @@ -0,0 +1 @@ +

about works!

diff --git a/src/app/about/about.component.scss b/src/app/about/about.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/about/about.component.spec.ts b/src/app/about/about.component.spec.ts new file mode 100644 index 0000000..6b77344 --- /dev/null +++ b/src/app/about/about.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { AboutComponent } from './about.component'; + +describe('AboutComponent', () => { + let component: AboutComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AboutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AboutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/about/about.component.ts b/src/app/about/about.component.ts new file mode 100644 index 0000000..9898f7a --- /dev/null +++ b/src/app/about/about.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-about', + templateUrl: './about.component.html', + styleUrls: ['./about.component.scss'] +}) +export class AboutComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/app-layout/app-layout.component.html b/src/app/app-layout/app-layout.component.html index 4b338cb..a8b3c97 100644 --- a/src/app/app-layout/app-layout.component.html +++ b/src/app/app-layout/app-layout.component.html @@ -1,5 +1,5 @@ -

app-layout works!

+


diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 9f96b1f..c438ec1 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,13 +1,29 @@ import { NgModule } from '@angular/core' import { Routes, RouterModule } from '@angular/router' import { AppLayoutComponent } from './app-layout/app-layout.component' +import { AboutComponent } from './about/about.component' +import { PortfolioComponent } from './portfolio/portfolio.component' +import { ExhibitionsComponent } from './exhibitions/exhibitions.component' +import { InstallationsComponent } from './installations/installations.component' +import { EntertainmentComponent } from './entertainment/entertainment.component' +import { PerformancesComponent } from './performances/performances.component' +import { WorkshopsComponent } from './workshops/workshops.component' const routes: Routes = [ { path: '', component: AppLayoutComponent, - children: [] + children: [ + { path: '', redirectTo: '/portfolio', pathMatch: 'full' }, + { path: 'portfolio', component: PortfolioComponent }, + { path: 'about', component: AboutComponent }, + { path: 'exhibitions', component: ExhibitionsComponent }, + { path: 'installations', component: InstallationsComponent }, + { path: 'entertainment', component: EntertainmentComponent }, + { path: 'performances', component: PerformancesComponent }, + { path: 'workshops', component: WorkshopsComponent } + ] } ] diff --git a/src/app/app.module.ts b/src/app/app.module.ts index a10ec68..37e4b7f 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -5,12 +5,26 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeaderComponent } from './header/header.component'; import { AppLayoutComponent } from './app-layout/app-layout.component'; +import { AboutComponent } from './about/about.component'; +import { PortfolioComponent } from './portfolio/portfolio.component'; +import { ExhibitionsComponent } from './exhibitions/exhibitions.component'; +import { InstallationsComponent } from './installations/installations.component'; +import { EntertainmentComponent } from './entertainment/entertainment.component'; +import { PerformancesComponent } from './performances/performances.component'; +import { WorkshopsComponent } from './workshops/workshops.component'; @NgModule({ declarations: [ AppComponent, HeaderComponent, - AppLayoutComponent + AppLayoutComponent, + AboutComponent, + PortfolioComponent, + ExhibitionsComponent, + InstallationsComponent, + EntertainmentComponent, + PerformancesComponent, + WorkshopsComponent ], imports: [ BrowserModule, diff --git a/src/app/entertainment/entertainment.component.html b/src/app/entertainment/entertainment.component.html new file mode 100644 index 0000000..64e075f --- /dev/null +++ b/src/app/entertainment/entertainment.component.html @@ -0,0 +1 @@ +

entertainment works!

diff --git a/src/app/entertainment/entertainment.component.scss b/src/app/entertainment/entertainment.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/entertainment/entertainment.component.spec.ts b/src/app/entertainment/entertainment.component.spec.ts new file mode 100644 index 0000000..416bfd2 --- /dev/null +++ b/src/app/entertainment/entertainment.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EntertainmentComponent } from './entertainment.component'; + +describe('EntertainmentComponent', () => { + let component: EntertainmentComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ EntertainmentComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(EntertainmentComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/entertainment/entertainment.component.ts b/src/app/entertainment/entertainment.component.ts new file mode 100644 index 0000000..c6b6381 --- /dev/null +++ b/src/app/entertainment/entertainment.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-entertainment', + templateUrl: './entertainment.component.html', + styleUrls: ['./entertainment.component.scss'] +}) +export class EntertainmentComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/exhibitions/exhibitions.component.html b/src/app/exhibitions/exhibitions.component.html new file mode 100644 index 0000000..85a0021 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.html @@ -0,0 +1 @@ +

exhibitions works!

diff --git a/src/app/exhibitions/exhibitions.component.scss b/src/app/exhibitions/exhibitions.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/exhibitions/exhibitions.component.spec.ts b/src/app/exhibitions/exhibitions.component.spec.ts new file mode 100644 index 0000000..c655d74 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ExhibitionsComponent } from './exhibitions.component'; + +describe('ExhibitionsComponent', () => { + let component: ExhibitionsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ExhibitionsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ExhibitionsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/exhibitions/exhibitions.component.ts b/src/app/exhibitions/exhibitions.component.ts new file mode 100644 index 0000000..c2c1747 --- /dev/null +++ b/src/app/exhibitions/exhibitions.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-exhibitions', + templateUrl: './exhibitions.component.html', + styleUrls: ['./exhibitions.component.scss'] +}) +export class ExhibitionsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 44f716b..dbba668 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -7,10 +7,13 @@
diff --git a/src/app/header/header.component.scss b/src/app/header/header.component.scss index fd99b8d..0c448c9 100644 --- a/src/app/header/header.component.scss +++ b/src/app/header/header.component.scss @@ -101,10 +101,34 @@ .nav { display: block; text-align: center; - padding-top: 150px; - height: 100vh; - overflow: auto; - border: 1px solid red; + padding-top: 180px; + height: calc(100vh - 180px); + overflow: hidden; + overflow-y: auto; + + .items { + list-style: none; + padding: 0; + margin: 0; + + .item { + padding: 0; + margin: 10px 0; + font-weight: bold; + font-size: $font-30; + color: $black; + cursor: pointer; + transition: transform .4s; + + &:hover { + transform: scale(1.4); + } + + &.active { + text-decoration: underline; + } + } + } } &.open { diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 33cc14c..5776f44 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit, HostListener, Inject } from '@angular/core' +import { Router, NavigationEnd } from '@angular/router' import { DOCUMENT } from '@angular/common' @Component({ @@ -11,7 +12,13 @@ export class HeaderComponent implements OnInit { public isSticky: boolean = false public isMenuOpen: boolean = false - constructor(@Inject(DOCUMENT) private document: Document) { } + constructor(@Inject(DOCUMENT) private document: Document, private router: Router) { + router.events.subscribe((val) => { + this.isMenuOpen = false + this.isSticky = true + this.document.body.classList.remove('no-scroll') + }) + } ngOnInit(): void { } diff --git a/src/app/installations/installations.component.html b/src/app/installations/installations.component.html new file mode 100644 index 0000000..c142693 --- /dev/null +++ b/src/app/installations/installations.component.html @@ -0,0 +1 @@ +

installations works!

diff --git a/src/app/installations/installations.component.scss b/src/app/installations/installations.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/installations/installations.component.spec.ts b/src/app/installations/installations.component.spec.ts new file mode 100644 index 0000000..c50ae75 --- /dev/null +++ b/src/app/installations/installations.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { InstallationsComponent } from './installations.component'; + +describe('InstallationsComponent', () => { + let component: InstallationsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ InstallationsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(InstallationsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/installations/installations.component.ts b/src/app/installations/installations.component.ts new file mode 100644 index 0000000..61102ea --- /dev/null +++ b/src/app/installations/installations.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-installations', + templateUrl: './installations.component.html', + styleUrls: ['./installations.component.scss'] +}) +export class InstallationsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/performances/performances.component.html b/src/app/performances/performances.component.html new file mode 100644 index 0000000..7b9658d --- /dev/null +++ b/src/app/performances/performances.component.html @@ -0,0 +1 @@ +

performances works!

diff --git a/src/app/performances/performances.component.scss b/src/app/performances/performances.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/performances/performances.component.spec.ts b/src/app/performances/performances.component.spec.ts new file mode 100644 index 0000000..0ee44e3 --- /dev/null +++ b/src/app/performances/performances.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PerformancesComponent } from './performances.component'; + +describe('PerformancesComponent', () => { + let component: PerformancesComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PerformancesComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PerformancesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/performances/performances.component.ts b/src/app/performances/performances.component.ts new file mode 100644 index 0000000..97bbb04 --- /dev/null +++ b/src/app/performances/performances.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-performances', + templateUrl: './performances.component.html', + styleUrls: ['./performances.component.scss'] +}) +export class PerformancesComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/portfolio/portfolio.component.html b/src/app/portfolio/portfolio.component.html new file mode 100644 index 0000000..6944f6f --- /dev/null +++ b/src/app/portfolio/portfolio.component.html @@ -0,0 +1 @@ +

portfolio works!

diff --git a/src/app/portfolio/portfolio.component.scss b/src/app/portfolio/portfolio.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/portfolio/portfolio.component.spec.ts b/src/app/portfolio/portfolio.component.spec.ts new file mode 100644 index 0000000..d16d6bc --- /dev/null +++ b/src/app/portfolio/portfolio.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { PortfolioComponent } from './portfolio.component'; + +describe('PortfolioComponent', () => { + let component: PortfolioComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PortfolioComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PortfolioComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/portfolio/portfolio.component.ts b/src/app/portfolio/portfolio.component.ts new file mode 100644 index 0000000..f11071c --- /dev/null +++ b/src/app/portfolio/portfolio.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-portfolio', + templateUrl: './portfolio.component.html', + styleUrls: ['./portfolio.component.scss'] +}) +export class PortfolioComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/workshops/workshops.component.html b/src/app/workshops/workshops.component.html new file mode 100644 index 0000000..d0e6442 --- /dev/null +++ b/src/app/workshops/workshops.component.html @@ -0,0 +1 @@ +

workshops works!

diff --git a/src/app/workshops/workshops.component.scss b/src/app/workshops/workshops.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/workshops/workshops.component.spec.ts b/src/app/workshops/workshops.component.spec.ts new file mode 100644 index 0000000..46e2e57 --- /dev/null +++ b/src/app/workshops/workshops.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { WorkshopsComponent } from './workshops.component'; + +describe('WorkshopsComponent', () => { + let component: WorkshopsComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ WorkshopsComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(WorkshopsComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/workshops/workshops.component.ts b/src/app/workshops/workshops.component.ts new file mode 100644 index 0000000..af08b35 --- /dev/null +++ b/src/app/workshops/workshops.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-workshops', + templateUrl: './workshops.component.html', + styleUrls: ['./workshops.component.scss'] +}) +export class WorkshopsComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/assets/scss/global.scss b/src/assets/scss/global.scss index cf6408b..a8e6487 100644 --- a/src/assets/scss/global.scss +++ b/src/assets/scss/global.scss @@ -5,6 +5,7 @@ body { height: 100%; font-family: $font-primary; font-size: $font-20; + color: $black; &.no-scroll { overflow: hidden; diff --git a/src/assets/scss/variables.scss b/src/assets/scss/variables.scss index fa4843e..3eab155 100644 --- a/src/assets/scss/variables.scss +++ b/src/assets/scss/variables.scss @@ -22,10 +22,10 @@ $breadcrumb-height: 60px; // Colors $white: #fff; -$black: #000; -$gray: #666; -$light-gray: #f5f5f5; -$dark-gray: #47464e; +$black: #111; +$gray: #ccc; +$light-gray: #eee; +$dark-gray: #666; $yellow: #a2dc02;