From a9358fb8a27cd3d48547f5427797702ee2780de8 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:02:43 +0200 Subject: Implemented navbar component; added some global stylings and changed the name of others; added icons --- src/app/components/navbar/navbar.component.css | 43 ++++++++++++++++++++++ src/app/components/navbar/navbar.component.html | 36 ++++++++++++++++++ src/app/components/navbar/navbar.component.ts | 49 +++++++++++++++++++++++++ 3 files changed, 128 insertions(+) create mode 100644 src/app/components/navbar/navbar.component.css create mode 100644 src/app/components/navbar/navbar.component.html create mode 100644 src/app/components/navbar/navbar.component.ts (limited to 'src/app/components/navbar') diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css new file mode 100644 index 0000000..58ec821 --- /dev/null +++ b/src/app/components/navbar/navbar.component.css @@ -0,0 +1,43 @@ +#navbar { + width: 100%; + background-color: var(--card-bg); +} + +#nav-contents { + max-width: var(--max-width); + margin: 0 auto; + box-sizing: border-box; +} + +#nav-contents img { + height: 1.9em; + width: 1.9em; +} + +@media screen and (max-width: 30rem) { + #nav-username { + display: none; + } + + #navbar { + font-size: 0.8em; + } +} + +#nav-profile-picture { + padding: 0.1em; +} + +#nav-profile-picture img { + height: 1.8em; + width: 1.8em; +} + +.nav-item { + margin-left: 0.2em; + padding: 0 0.1em; +} + +.nav-item:first-child { + margin-left: 0; +} diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html new file mode 100644 index 0000000..2d386aa --- /dev/null +++ b/src/app/components/navbar/navbar.component.html @@ -0,0 +1,36 @@ + diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts new file mode 100644 index 0000000..4af7a8a --- /dev/null +++ b/src/app/components/navbar/navbar.component.ts @@ -0,0 +1,49 @@ +import { Component, OnInit } from '@angular/core'; +import { Router } from '@angular/router'; +import { TokenService } from 'src/app/services/token.service'; +import { UserService } from 'src/app/services/user.service'; +import { User } from 'src/models/identity/user.model'; + +@Component({ + selector: 'app-navbar', + templateUrl: './navbar.component.html', + styleUrls: ['./navbar.component.css'] +}) +export class NavbarComponent implements OnInit { + public user: User; + + constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService) + { } + + ngOnInit(): void { + if (!this._tokenService.getTokenFromSessionStorage()) { + this._router.navigate(['/login']); + return; + } + + this.user = this._userService.getDefaultUser(); + + this._userService.getUserFromSessionStorageRequest().subscribe({ + next: (res: object) => { + Object.assign(this.user, res); + }, + }); + } + + goToProfile(): void { + this._router.navigate(['/profile/' + this.user.userName]); + } + + goToFeed(): void { + this._router.navigate(['/']); + } + + goToSettings(): void { + this._router.navigate(['/profile/' + this.user.userName + '/settings']); + } + + logout(): void { + this._tokenService.logoutUserFromSessionStorage(); + this._router.navigate(['/login']); + } +} -- cgit v1.2.3 From 90003ad1e0342fc6e87b844fbbb05870ac128308 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:15:53 +0200 Subject: Fixed navbar component not handling logged out user properly --- src/app/components/navbar/navbar.component.html | 17 ++++-- src/app/components/navbar/navbar.component.ts | 17 ++++-- src/assets/icons/tabler-icon-login.svg | 69 +++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 9 deletions(-) create mode 100644 src/assets/icons/tabler-icon-login.svg (limited to 'src/app/components/navbar') diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 2d386aa..6bd3e66 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -1,9 +1,12 @@ diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index 4af7a8a..d10a49d 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -11,15 +11,13 @@ import { User } from 'src/models/identity/user.model'; }) export class NavbarComponent implements OnInit { public user: User; + public loggedIn: Boolean; constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService) { } ngOnInit(): void { - if (!this._tokenService.getTokenFromSessionStorage()) { - this._router.navigate(['/login']); - return; - } + this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== ''; this.user = this._userService.getDefaultUser(); @@ -35,7 +33,12 @@ export class NavbarComponent implements OnInit { } goToFeed(): void { - this._router.navigate(['/']); + if (this.loggedIn) { + this._router.navigate(['/']); + } + else { + this.goToLogin(); + } } goToSettings(): void { @@ -44,6 +47,10 @@ export class NavbarComponent implements OnInit { logout(): void { this._tokenService.logoutUserFromSessionStorage(); + this.goToLogin(); + } + + goToLogin(): void { this._router.navigate(['/login']); } } diff --git a/src/assets/icons/tabler-icon-login.svg b/src/assets/icons/tabler-icon-login.svg new file mode 100644 index 0000000..4f62892 --- /dev/null +++ b/src/assets/icons/tabler-icon-login.svg @@ -0,0 +1,69 @@ + + -- cgit v1.2.3 From a5fd7df34da790377052e660e991e614a1bde27c Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:18:47 +0200 Subject: Fixed going to your profile (via navbar) while on someone else's profile --- src/app/components/navbar/navbar.component.ts | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/app/components/navbar') diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts index d10a49d..b62d8e0 100644 --- a/src/app/components/navbar/navbar.component.ts +++ b/src/app/components/navbar/navbar.component.ts @@ -29,6 +29,11 @@ export class NavbarComponent implements OnInit { } goToProfile(): void { + // Properly reload the page + // Needed because if you're on someone's profile and go to yours, angular won't refresh the page (with your info) + this._router.routeReuseStrategy.shouldReuseRoute = () => false; + this._router.onSameUrlNavigation = 'reload'; + this._router.navigate(['/profile/' + this.user.userName]); } -- cgit v1.2.3 From 3002de560f363886fddcfa5520ef5520bf78fcc8 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 17:12:23 +0200 Subject: Improved card (post) scaling, slight modifications of global styling --- src/app/components/navbar/navbar.component.css | 6 ------ src/app/components/navbar/navbar.component.html | 2 +- src/app/components/post/post.component.html | 2 +- src/styles.css | 24 +++++++++++++++++++++++- 4 files changed, 25 insertions(+), 9 deletions(-) (limited to 'src/app/components/navbar') diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css index 58ec821..aa666b0 100644 --- a/src/app/components/navbar/navbar.component.css +++ b/src/app/components/navbar/navbar.component.css @@ -3,12 +3,6 @@ background-color: var(--card-bg); } -#nav-contents { - max-width: var(--max-width); - margin: 0 auto; - box-sizing: border-box; -} - #nav-contents img { height: 1.9em; width: 1.9em; diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html index 6bd3e66..9fcd704 100644 --- a/src/app/components/navbar/navbar.component.html +++ b/src/app/components/navbar/navbar.component.html @@ -1,5 +1,5 @@