From b8b5f82a7678489d7b543b1bad362cb5a959c043 Mon Sep 17 00:00:00 2001 From: Sunny Date: Sat, 28 Aug 2021 15:50:53 -0400 Subject: [PATCH 1/4] Improving header navigation link styles --- src/app/constants/app.constants.ts | 1 + .../article-header.component.html | 34 +++++++++---------- .../article-header.component.scss | 31 ++++++----------- .../article-header.component.ts | 9 +++-- 4 files changed, 32 insertions(+), 43 deletions(-) create mode 100644 src/app/constants/app.constants.ts diff --git a/src/app/constants/app.constants.ts b/src/app/constants/app.constants.ts new file mode 100644 index 0000000..f6d7316 --- /dev/null +++ b/src/app/constants/app.constants.ts @@ -0,0 +1 @@ +export const TABS = ['feed', 'week', 'month', 'year', 'infinity', 'latest']; diff --git a/src/app/pages/home/articles/article-header/article-header.component.html b/src/app/pages/home/articles/article-header/article-header.component.html index cf218e0..fa45363 100644 --- a/src/app/pages/home/articles/article-header/article-header.component.html +++ b/src/app/pages/home/articles/article-header/article-header.component.html @@ -1,20 +1,18 @@ -
-

Posts

-
diff --git a/src/app/pages/home/articles/article-header/article-header.component.scss b/src/app/pages/home/articles/article-header/article-header.component.scss index 9375286..2f1548b 100644 --- a/src/app/pages/home/articles/article-header/article-header.component.scss +++ b/src/app/pages/home/articles/article-header/article-header.component.scss @@ -3,29 +3,20 @@ padding: 0; } -.tab-item { +.tab-list-item { padding: 0.5rem; - margin: 0 0.25rem; - flex-direction: column; font-size: 1rem; - transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; -border-radius: 5px; - &.active { - font-weight: 500; - color: #08090a; - } - &:before{ - content: attr(data-text); - height: 0; - visibility: hidden; - overflow: hidden; - user-select: none; - pointer-events: none; + border-radius: 5px; + margin: 0 0.25rem; + + &:hover { + background: #3b49df1a; + color: #3b49df; } - &:after{ - position: absolute; - content: ""; - + &.active-tab { + border-bottom: 3px solid #3b49df; + font-weight: 500; + color: #08090a; } } diff --git a/src/app/pages/home/articles/article-header/article-header.component.ts b/src/app/pages/home/articles/article-header/article-header.component.ts index 8726eec..75eb969 100644 --- a/src/app/pages/home/articles/article-header/article-header.component.ts +++ b/src/app/pages/home/articles/article-header/article-header.component.ts @@ -1,14 +1,13 @@ -import { Component, OnInit } from '@angular/core'; +import { Component } from '@angular/core'; +import { TABS } from 'src/app/constants/app.constants'; @Component({ selector: 'app-article-header', templateUrl: './article-header.component.html', styleUrls: ['./article-header.component.scss'], }) -export class ArticleHeaderComponent implements OnInit { +export class ArticleHeaderComponent { selectedTab = 'feed'; - tabs = ['feed', 'week', 'month', 'year', 'infinity', 'latest']; + tabs = TABS; constructor() {} - - ngOnInit(): void {} } From 00b289a7cb03e1434ca951358a39f69887e2aab7 Mon Sep 17 00:00:00 2001 From: Sunny Date: Sat, 28 Aug 2021 16:08:33 -0400 Subject: [PATCH 2/4] Implementing 404 (not found page) in app.module --- src/app/app-routing.module.ts | 2 ++ src/app/app.module.ts | 4 +-- .../global/not-found/not-found.component.html | 6 +++++ .../global/not-found/not-found.component.scss | 15 +++++++++++ .../not-found/not-found.component.spec.ts | 25 +++++++++++++++++++ .../global/not-found/not-found.component.ts | 10 ++++++++ 6 files changed, 60 insertions(+), 2 deletions(-) create mode 100644 src/app/global/not-found/not-found.component.html create mode 100644 src/app/global/not-found/not-found.component.scss create mode 100644 src/app/global/not-found/not-found.component.spec.ts create mode 100644 src/app/global/not-found/not-found.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2f736bf..803e970 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { NotFoundComponent } from 'src/app/global/not-found/not-found.component'; import { ContainerComponent } from './global/container/container.component'; const routes: Routes = [ @@ -13,6 +14,7 @@ const routes: Routes = [ import('./pages/home/home.module').then((m) => m.HomeModule), }, { path: '', redirectTo: 'home', pathMatch: 'full' }, + { path: '**', component: NotFoundComponent }, ], }, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index ae7af20..a3f1c8c 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,18 @@ import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; - import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { HeaderComponent } from './global/header/header.component'; import { ContainerComponent } from './global/container/container.component'; import { HttpClientModule } from '@angular/common/http'; - +import { NotFoundComponent } from 'src/app/global/not-found/not-found.component'; @NgModule({ declarations: [ AppComponent, HeaderComponent, ContainerComponent, + NotFoundComponent ], imports: [ BrowserModule, diff --git a/src/app/global/not-found/not-found.component.html b/src/app/global/not-found/not-found.component.html new file mode 100644 index 0000000..786431e --- /dev/null +++ b/src/app/global/not-found/not-found.component.html @@ -0,0 +1,6 @@ +
+

The Page you are looking for was not found

+ + Return to Home Page + +
diff --git a/src/app/global/not-found/not-found.component.scss b/src/app/global/not-found/not-found.component.scss new file mode 100644 index 0000000..bc5879c --- /dev/null +++ b/src/app/global/not-found/not-found.component.scss @@ -0,0 +1,15 @@ +.not-found { + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.btn-primary { + background-color: aqua; +} + +.go-home { + font-size: 1.5rem; +} diff --git a/src/app/global/not-found/not-found.component.spec.ts b/src/app/global/not-found/not-found.component.spec.ts new file mode 100644 index 0000000..9d41c99 --- /dev/null +++ b/src/app/global/not-found/not-found.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { NotFoundComponent } from './not-found.component'; + +describe('NotFoundComponent', () => { + let component: NotFoundComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ NotFoundComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(NotFoundComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/global/not-found/not-found.component.ts b/src/app/global/not-found/not-found.component.ts new file mode 100644 index 0000000..a341134 --- /dev/null +++ b/src/app/global/not-found/not-found.component.ts @@ -0,0 +1,10 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-not-found', + templateUrl: './not-found.component.html', + styleUrls: ['./not-found.component.scss'], +}) +export class NotFoundComponent { + constructor() {} +} From f9f1da0c7832727520dd2e3098ac0316d80efc71 Mon Sep 17 00:00:00 2001 From: Sunny Date: Sat, 28 Aug 2021 16:20:37 -0400 Subject: [PATCH 3/4] merging app-routing --- src/app/app-routing.module.ts | 25 +++++++++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2f736bf..fba0092 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,20 +1,41 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; -import { ContainerComponent } from './global/container/container.component'; +import { NotFoundComponent } from 'src/app/global/not-found/not-found.component'; +import { ContainerComponent } from './global/components/container/container.component'; const routes: Routes = [ { path: '', component: ContainerComponent, children: [ + { path: '', redirectTo: 'home', pathMatch: 'full' }, { path: 'home', loadChildren: () => import('./pages/home/home.module').then((m) => m.HomeModule), }, - { path: '', redirectTo: 'home', pathMatch: 'full' }, + { + path: 'videos', + loadChildren: () => + import('./pages/videos/videos.module').then((m) => m.VideosModule), + }, + { + path: 'listings', + loadChildren: () => + import('./pages/listings/listings.module').then( + (m) => m.ListingsModule + ), + }, + { + path: ':user/:slug', + loadChildren: () => + import('./pages/article-detail/article-detail.module').then( + (m) => m.ArticleDetailModule + ), + }, ], }, + { path: '**', pathMatch: 'prefix', component: NotFoundComponent } ]; @NgModule({ From c03ed1ce8c99c91a3b96264373f2aed442e597a7 Mon Sep 17 00:00:00 2001 From: Sunny Date: Sat, 28 Aug 2021 16:21:53 -0400 Subject: [PATCH 4/4] removing pathMatch --- src/app/app-routing.module.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index fba0092..a69ce0a 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -35,7 +35,7 @@ const routes: Routes = [ }, ], }, - { path: '**', pathMatch: 'prefix', component: NotFoundComponent } + { path: '**', component: NotFoundComponent } ]; @NgModule({