From 86f7aa143aef614b800a29091e6af1f483ce38ea Mon Sep 17 00:00:00 2001 From: Solomon Laing Date: Mon, 14 Jun 2021 16:14:19 +0930 Subject: [PATCH 1/3] first go of nav restyle is complete, removed blue and replaced with visual que --- src/app/app.module.ts | 2 ++ src/app/nav/nav.component.html | 6 +++--- src/app/nav/nav.component.scss | 19 +++++++++++-------- src/app/nav/nav.component.ts | 34 +++++++++++++++++++++++++++++----- 4 files changed, 45 insertions(+), 16 deletions(-) diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1464527..bacf059 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; +import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @@ -27,6 +28,7 @@ import { Page404Component } from './page404/page404.component'; imports: [ SharedModule, BrowserModule, + BrowserAnimationsModule, AppRoutingModule, HttpClientModule ], diff --git a/src/app/nav/nav.component.html b/src/app/nav/nav.component.html index cb8f373..4501355 100644 --- a/src/app/nav/nav.component.html +++ b/src/app/nav/nav.component.html @@ -1,6 +1,6 @@ \ No newline at end of file diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss index 8a044e1..9b344fb 100644 --- a/src/app/nav/nav.component.scss +++ b/src/app/nav/nav.component.scss @@ -12,9 +12,12 @@ li { border-radius: 50px; width: 100px; height: 100px; + padding-right: 50px; + margin-right: -15px; } li a { + right: 0; border-radius: 50px; width: 100px; height: 100px; @@ -31,13 +34,13 @@ li .activeRoute { color: colors.$inklets-color-black; } -li a:hover { - background-color: colors.$inklets-color-highlight-bg; - color: colors.$inklets-color-white; -} +// li a:hover { +// background-color: colors.$inklets-color-highlight-bg; +// color: colors.$inklets-color-white; +// } - li a:hover.activeRoute { - background-color: colors.$inklets-color-highlight-fg; - color: colors.$inklets-color-black; -} +// li a:hover.activeRoute { +// background-color: colors.$inklets-color-highlight-fg; +// color: colors.$inklets-color-black; +// } diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts index fc97dbd..ffc59fd 100644 --- a/src/app/nav/nav.component.ts +++ b/src/app/nav/nav.component.ts @@ -1,18 +1,42 @@ -import { Component, OnDestroy, OnInit } from '@angular/core'; -import { ActivatedRoute, Router } from '@angular/router'; -import { Subject } from 'rxjs'; -import { takeUntil } from 'rxjs/operators'; +import { animate, state, style, transition, trigger } from '@angular/animations'; +import { Component, OnInit } from '@angular/core'; import { Pages } from '../shared/models/pages.model'; -import { NavService } from './nav.service'; @Component({ selector: 'app-nav', + animations: [ + trigger('openClose', [ + state( + 'bump', + style({ + 'margin-left': 0 + }) + ), + state( + 'norm', + style({ + 'margin-left': '15px' + }) + ), + transition('norm => bump', [ + animate( + '0.1s' + ) + ]), + transition('bump => norm', [ + animate( + '0.1s' + ) + ]) + ]) + ], templateUrl: './nav.component.html', styleUrls: ['./nav.component.scss'] }) export class NavComponent implements OnInit { Pages = Pages; + state: string[] = ['norm', 'norm', 'norm']; constructor() { } From a4e891c8b5990ed56c5b3a0b7df2707f785d9d1d Mon Sep 17 00:00:00 2001 From: Solomon Laing Date: Mon, 14 Jun 2021 16:19:37 +0930 Subject: [PATCH 2/3] first go of nav restyle is complete, removed blue and replaced with visual que --- src/app/home/home.component.scss | 6 +++--- src/app/links/links.component.scss | 4 ++-- src/app/nav/nav.component.scss | 8 ++++---- src/app/projects/project-card/project-card.component.scss | 4 ++-- src/app/projects/projects.component.scss | 2 +- src/app/shared/styles/_variables.color.scss | 8 ++++---- src/styles.scss | 2 +- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/app/home/home.component.scss b/src/app/home/home.component.scss index a287f14..0321415 100644 --- a/src/app/home/home.component.scss +++ b/src/app/home/home.component.scss @@ -19,7 +19,7 @@ .headshot { width: 200px; height: 200px; - border: colors.$inklets-color-fg 5px solid; + border: colors.$inklets-color-red-light 5px solid; border-radius: 100px; } @@ -27,7 +27,7 @@ margin-left: 30px; h1 { - border-bottom: colors.$inklets-color-fg 2px dashed; + border-bottom: colors.$inklets-color-red-light 2px dashed; img { width: 30px; @@ -50,7 +50,7 @@ color: colors.$inklets-color-white; } > a:hover { - color: colors.$inklets-color-fg; + color: colors.$inklets-color-red-light; } } } \ No newline at end of file diff --git a/src/app/links/links.component.scss b/src/app/links/links.component.scss index f6564c0..9900556 100644 --- a/src/app/links/links.component.scss +++ b/src/app/links/links.component.scss @@ -28,7 +28,7 @@ a { margin: 0; color: colors.$inklets-color-white; background-color: colors.$inklets-color-black; - border: 2px solid colors.$inklets-color-bg; + border: 2px solid colors.$inklets-color-red-dark; border-radius: 10px; > * { @@ -38,5 +38,5 @@ a { } a:hover { - border: colors.$inklets-color-fg 2px solid; + border: colors.$inklets-color-red-light 2px solid; } \ No newline at end of file diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss index 9b344fb..696b855 100644 --- a/src/app/nav/nav.component.scss +++ b/src/app/nav/nav.component.scss @@ -23,24 +23,24 @@ li a { height: 100px; line-height: 100px; color: colors.$inklets-color-white; - background-color: colors.$inklets-color-bg; + background-color: colors.$inklets-color-red-dark; display: block; text-align: center; text-decoration: none; } li .activeRoute { - background-color: colors.$inklets-color-fg; + background-color: colors.$inklets-color-red-light; color: colors.$inklets-color-black; } // li a:hover { -// background-color: colors.$inklets-color-highlight-bg; +// background-color: colors.$inklets-color-blue-dark; // color: colors.$inklets-color-white; // } // li a:hover.activeRoute { -// background-color: colors.$inklets-color-highlight-fg; +// background-color: colors.$inklets-color-blue-light; // color: colors.$inklets-color-black; // } diff --git a/src/app/projects/project-card/project-card.component.scss b/src/app/projects/project-card/project-card.component.scss index c47453d..7710bae 100644 --- a/src/app/projects/project-card/project-card.component.scss +++ b/src/app/projects/project-card/project-card.component.scss @@ -8,14 +8,14 @@ a { color: colors.$inklets-color-white; background-color: colors.$inklets-color-black; - border: 2px solid colors.$inklets-color-bg; + border: 2px solid colors.$inklets-color-red-dark; text-decoration: none; padding: 15px 20px 15px 20px; border-radius: 10px; } a:hover { - border: 2px solid colors.$inklets-color-fg; + border: 2px solid colors.$inklets-color-red-light; } .right { diff --git a/src/app/projects/projects.component.scss b/src/app/projects/projects.component.scss index 66ca070..3be2d70 100644 --- a/src/app/projects/projects.component.scss +++ b/src/app/projects/projects.component.scss @@ -8,6 +8,6 @@ padding: 0 20px 0 20px; h2 { - border-bottom: colors.$inklets-color-fg 2px dashed; + border-bottom: colors.$inklets-color-red-light 2px dashed; } } diff --git a/src/app/shared/styles/_variables.color.scss b/src/app/shared/styles/_variables.color.scss index 5eefc32..a298a6d 100644 --- a/src/app/shared/styles/_variables.color.scss +++ b/src/app/shared/styles/_variables.color.scss @@ -14,8 +14,8 @@ $inklets-color-black: #0e0906; $inklets-color-grey: #191511; $inklets-color-white: #f4efea; -$inklets-color-highlight-bg: #181846; -$inklets-color-highlight-fg:#6a9ccc; -$inklets-color-bg:#6d1d00; -$inklets-color-fg:#e6906c; +$inklets-color-red-dark:#6d1d00; +$inklets-color-red-light:#e6906c; +$inklets-color-blue-dark: #181846; +$inklets-color-blue-light:#6a9ccc; $inklets-color-text-highlight: #f5d870; \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 74adf1a..bfe7946 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -99,7 +99,7 @@ span.linenos.special { color: #979797; background-color: #ffffc0; padding-left: } * a:hover { - color: colors.$inklets-color-highlight-fg; + color: colors.$inklets-color-blue-light; } * img { From 2935df9b90cd2a417483659967dbdadd6a693b59 Mon Sep 17 00:00:00 2001 From: Solomon Laing Date: Tue, 15 Jun 2021 20:15:28 +0930 Subject: [PATCH 3/3] finished nav re-theme and fixed scrolling bug --- src/app/app.component.html | 12 +- src/app/app.component.scss | 31 ++--- src/app/nav/nav.component.scss | 11 +- src/app/nav/nav.component.ts | 108 ++++++++++++------ .../projects/project/project.component.html | 1 + 5 files changed, 91 insertions(+), 72 deletions(-) diff --git a/src/app/app.component.html b/src/app/app.component.html index 962a2aa..b199e9c 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,10 +1,8 @@ -
- -
+ +
+
-
- -
+ +
- diff --git a/src/app/app.component.scss b/src/app/app.component.scss index 6296e33..ce38d44 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,50 +1,33 @@ @use 'src/app/shared/styles/_variables.color' as colors; :host { - height: 100%; - display: flex; - flex-direction: column; - overflow-y: auto; - justify-content: center; - align-items: center; -} - -.centre-content { height: 100%; display: flex; flex-direction: row; justify-content: center; align-items: center; + overflow: hidden; } -.page-fixed-width { +.page-fixed { width: 1000px; + height: 100%; display: flex; + align-items: center; + justify-content: center; flex-direction: column; - overflow-y: auto; background-color: colors.$inklets-color-grey; } -.content { - flex-grow: 1; - overflow-y: auto; -} - -app-nav { - margin-left: -125px; -} - -app-footer { - bottom: 20px; -} - /* Hide scrollbar for Chrome, Safari and Opera */ .no-scroll-bar::-webkit-scrollbar { display: none; + overflow: auto; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scroll-bar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ + overflow: auto; } diff --git a/src/app/nav/nav.component.scss b/src/app/nav/nav.component.scss index 696b855..cea0e4d 100644 --- a/src/app/nav/nav.component.scss +++ b/src/app/nav/nav.component.scss @@ -8,16 +8,15 @@ ul { } li { + display: flex; + align-items: center; + justify-content: center; margin: 25px; - border-radius: 50px; - width: 100px; - height: 100px; - padding-right: 50px; - margin-right: -15px; + width: 120px; + height: 120px; } li a { - right: 0; border-radius: 50px; width: 100px; height: 100px; diff --git a/src/app/nav/nav.component.ts b/src/app/nav/nav.component.ts index ffc59fd..37ae052 100644 --- a/src/app/nav/nav.component.ts +++ b/src/app/nav/nav.component.ts @@ -1,46 +1,84 @@ -import { animate, state, style, transition, trigger } from '@angular/animations'; +import { animate, keyframes, state, style, transition, trigger } from '@angular/animations'; import { Component, OnInit } from '@angular/core'; import { Pages } from '../shared/models/pages.model'; @Component({ - selector: 'app-nav', - animations: [ - trigger('openClose', [ - state( - 'bump', - style({ - 'margin-left': 0 - }) - ), - state( - 'norm', - style({ - 'margin-left': '15px' - }) - ), - transition('norm => bump', [ - animate( - '0.1s' - ) - ]), - transition('bump => norm', [ - animate( - '0.1s' - ) - ]) - ]) - ], - templateUrl: './nav.component.html', - styleUrls: ['./nav.component.scss'] + selector: 'app-nav', + animations: [ + trigger('openClose', [ + state( + 'bump', + style({ + width: '110px', + height: '110px', + 'line-height': '110px', + 'border-radius': '55px' + }) + ), + state( + 'norm', + style({ + width: '100px', + height: '100px', + 'line-height': '100px', + 'border-radius': '50px' + }) + ), + transition('norm => bump', [ + animate( + '0.2s', keyframes([ + style({ + width: '100px', + height: '100px', + 'line-height': '100px', + 'border-radius': '50px' + }), + style({ + width: '120px', + height: '120px', + 'line-height': '120px', + 'border-radius': '60px' + }), + style({ + width: '110px', + height: '110px', + 'line-height': '110px', + 'border-radius': '55px' + }) + ]) + ) + ]), + transition('bump => norm', [ + animate( + '0.1s', keyframes([ + style({ + width: '110px', + height: '110px', + 'line-height': '110px', + 'border-radius': '55px' + }), + style({ + width: '100px', + height: '100px', + 'line-height': '100px', + 'border-radius': '50px' + }) + ]) + ) + ]) + ]) + ], + templateUrl: './nav.component.html', + styleUrls: ['./nav.component.scss'] }) export class NavComponent implements OnInit { - Pages = Pages; - state: string[] = ['norm', 'norm', 'norm']; + Pages = Pages; + state: string[] = ['norm', 'norm', 'norm']; - constructor() { } + constructor() { } - ngOnInit(): void { - } + ngOnInit(): void { + } } diff --git a/src/app/projects/project/project.component.html b/src/app/projects/project/project.component.html index fbeae0b..5760fed 100644 --- a/src/app/projects/project/project.component.html +++ b/src/app/projects/project/project.component.html @@ -1,2 +1,3 @@ < back +< back \ No newline at end of file