From 5880656282edfb7dc1bb7073c20ccf74aad6a093 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 18 Mar 2021 19:50:02 +0200 Subject: Major redesign of post component styling. Added foundatinal global stylings as well as icons. --- src/app/components/post/post.component.css | 119 ++------------------- src/app/components/post/post.component.html | 84 ++++++++------- src/assets/icons/tabler-icon-calendar-time.svg | 87 +++++++++++++++ src/assets/icons/tabler-icon-chevron-down.svg | 65 +++++++++++ src/assets/icons/tabler-icon-chevron-up.svg | 65 +++++++++++ src/assets/icons/tabler-icon-link.svg | 69 ++++++++++++ src/assets/icons/tabler-icon-message-2.svg | 79 ++++++++++++++ src/styles.css | 142 ++++++++++++++++++++++++- 8 files changed, 562 insertions(+), 148 deletions(-) create mode 100644 src/assets/icons/tabler-icon-calendar-time.svg create mode 100644 src/assets/icons/tabler-icon-chevron-down.svg create mode 100644 src/assets/icons/tabler-icon-chevron-up.svg create mode 100644 src/assets/icons/tabler-icon-link.svg create mode 100644 src/assets/icons/tabler-icon-message-2.svg diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index 07d931f..52f3283 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -1,129 +1,30 @@ -.post { - display: flex; - width: 98%; - - margin: .5em auto; +.left-pane { box-sizing: border-box; - padding: .5em; - background-color: var(--card-bg); - position: relative; -} - -.post:first-child { - margin-top: 0; -} - -hr { - border: 1px solid black; - width: 90%; } /* Author */ -.author { - display: flex; - margin-bottom: .2em; -} - -.author:hover { - cursor: pointer; -} - -.author > img { +.author-picture { width: 2.2em; height: 2.2em; - margin-right: .2em; -} - -.author-info > .handle { - font-size: .9em; - color: gray; } /* Content */ .content { - flex: 1; + padding: 0 var(--card-padding); } .message { - margin: .3em 0; - word-break: break-all; -} - -.bottom-post { - font-size: .5em; - color: gray; - display: flex; - align-items: center; -} - -.separator { - margin: 0 .5em; -} - -.comment-count { - font-size: 1em; -} - -.comment-count > img { - height: .8em; -} - -.message:hover, .timestamp:hover { - cursor: pointer; -} - -/* Rating */ - -.rating { - display: flex; - flex-direction: column; - align-items: center; - min-height: 4.4em; - margin: auto -.1em auto 0; -} - -.score { - flex: 1; - display: flex; - align-items: center; -} - - -.vote { - display: flex; - align-items: center; - flex: 1; - - background: var(--card-bg); - font-size: 1em; - - border: 1px solid var(--card-bg); - box-sizing: border-box; - border-radius: .2em; - - } - -.vote:hover { - border: 1px solid var(--focus-color); - color: var(--focus-color); - cursor: pointer; -} - -/* Attachments */ - -.attachments { - display: flex; - width: 98%; - margin: -.3em auto .5em auto; - flex-wrap: wrap; + margin: 0.2em 0; + word-break: break-word; } -.attachments:empty { - display: none; +.post-details { + margin-bottom: calc(var(--card-padding) / 1.5); + padding: 0.2em 0; } -.attachments > * { - flex: 1; +.post-details > * { + margin-left: 1.1em; } diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 1603ebf..a4acfe6 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -1,48 +1,60 @@ -
-
- - -
-
- {{ user.firstName }} {{ user.lastName }} -
-
- @{{ user.userName }} -
-
+
+ +
+ + + {{ user.firstName }} {{ user.lastName }} + + + @{{ user.userName }} + -
+
{{ post.message }}
-
-
-
-
-
+
+ + +
+ +
+
- diff --git a/src/assets/icons/tabler-icon-calendar-time.svg b/src/assets/icons/tabler-icon-calendar-time.svg new file mode 100644 index 0000000..3bb3a3e --- /dev/null +++ b/src/assets/icons/tabler-icon-calendar-time.svg @@ -0,0 +1,87 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-chevron-down.svg b/src/assets/icons/tabler-icon-chevron-down.svg new file mode 100644 index 0000000..0971874 --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-down.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-chevron-up.svg b/src/assets/icons/tabler-icon-chevron-up.svg new file mode 100644 index 0000000..20d694a --- /dev/null +++ b/src/assets/icons/tabler-icon-chevron-up.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-link.svg b/src/assets/icons/tabler-icon-link.svg new file mode 100644 index 0000000..a9f9110 --- /dev/null +++ b/src/assets/icons/tabler-icon-link.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-message-2.svg b/src/assets/icons/tabler-icon-message-2.svg new file mode 100644 index 0000000..6a9d20c --- /dev/null +++ b/src/assets/icons/tabler-icon-message-2.svg @@ -0,0 +1,79 @@ + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index b62f493..b187391 100644 --- a/src/styles.css +++ b/src/styles.css @@ -2,11 +2,15 @@ @import "./reset.css"; :root { - --bg-color: white; + --max-width: 40rem; + --bg-color: #18191a; + --fg-color: #ffeede; --focus-color: forestgreen; - --card-bg: white; + --card-bg: #303030; + --card-padding: 0.5em; --success: forestgreen; --failure: indianred; + --faded-color: #696969; } html, @@ -16,9 +20,18 @@ body { } body { font: 21px sans-serif !important; + color: var(--fg-color); background-color: var(--bg-color); } +button { + color: inherit; + background: inherit; + font: inherit; + padding: 0; + border: none; +} + input:focus, button:focus { outline: 0; @@ -38,7 +51,7 @@ input[type=file]::file-selector-button { #content { /* Used for the login and register pages */ height: 100%; - max-width: 20em; + max-width: var(--max-width); box-sizing: border-box; border: 0.5em solid var(--bg-color); @@ -96,6 +109,129 @@ input[type=file]::file-selector-button { width: fit-content; } +/* General flex */ + +.flex-row, .flex-col { + display: flex; + flex-wrap: wrap; +} + +.flex-row { + flex-direction: row; +} + +.flex-col { + flex-direction: column; +} + +.flexible, .flexible-children > * { + flex: 1; +} + +.flex-center-align-items { + align-items: center; +} + +.flex-justify-start { + justify-content: flex-start; +} + +.flex-justify-end { + justify-content: flex-end; +} + +.justify-children-center > * { + display: flex; + justify-content: center; +} + +/* General font sizes */ + +.font-size-dot9 { + font-size: 0.9em; +} + +.font-size-dot8 { + font-size: 0.8em; +} + +.font-size-dot7 { + font-size: 0.7em; +} + +.img-height-font-size { + height: 1em; +} + +/* General colors */ + +.fg-color-faded { + color: var(--faded-color); +} + +/* General text */ + +.text-vertical-middle { + vertical-align: middle; +} + +/* General border */ + +.faded-slim-border { + border: 1px solid var(--faded-color); +} + +.border-radius-normal, .card { + border-radius: 0.5em; +} + +.border-radius-smaller { + border-radius: 0.3em; +} + +.border-radius-small { + border-radius: 0.2em; +} + +.border-bottom-only { + border-top: none; + border-left: none; + border-right: none; +} + +/* General padding */ + +.small-padding { + padding: 0.2em; +} + +/* Cards */ + +.card { + margin: .5em auto; + box-sizing: border-box; + padding: var(--card-padding); + background-color: var(--card-bg); + position: relative; +} + + +/* Effects */ + +.lighter-hover:hover { + cursor: pointer; + background: #424242; +} + +.click-effect:active { + transform: scale(0.9); +} + +.hover-half-opacity:hover { + opacity: 0.5; + cursor: pointer; +} + /* Inputs, the type found in login and register */ .input-field { -- cgit v1.2.3 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/app.module.ts | 4 +- src/app/components/navbar/navbar.component.css | 43 +++++++++++++ src/app/components/navbar/navbar.component.html | 36 +++++++++++ src/app/components/navbar/navbar.component.ts | 49 ++++++++++++++ src/app/components/post/post.component.html | 4 +- src/assets/icons/tabler-icon-home.svg | 73 +++++++++++++++++++++ src/assets/icons/tabler-icon-logout.svg | 69 ++++++++++++++++++++ src/assets/icons/tabler-icon-message-circle.svg | 86 +++++++++++++++++++++++++ src/assets/icons/tabler-icon-search.svg | 74 +++++++++++++++++++++ src/assets/icons/tabler-icon-settings.svg | 71 ++++++++++++++++++++ src/assets/icons/tabler-icon-trending-up.svg | 69 ++++++++++++++++++++ src/styles.css | 28 ++++++-- 12 files changed, 598 insertions(+), 8 deletions(-) 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 create mode 100644 src/assets/icons/tabler-icon-home.svg create mode 100644 src/assets/icons/tabler-icon-logout.svg create mode 100644 src/assets/icons/tabler-icon-message-circle.svg create mode 100644 src/assets/icons/tabler-icon-search.svg create mode 100644 src/assets/icons/tabler-icon-settings.svg create mode 100644 src/assets/icons/tabler-icon-trending-up.svg diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 1bf44ad..f582bbc 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -25,6 +25,7 @@ import { CommentComponent } from './components/comment/comment.component'; import { CommentPageComponent } from './components/comment-page/comment-page.component'; import { PostAttachmentComponent } from './components/post-attachment/post-attachment.component'; import { RouterModule } from '@angular/router'; +import { NavbarComponent } from './components/navbar/navbar.component'; @NgModule({ declarations: [ @@ -43,7 +44,8 @@ import { RouterModule } from '@angular/router'; AdminPanelPageComponent, CommentComponent, CommentPageComponent, - PostAttachmentComponent + PostAttachmentComponent, + NavbarComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'serverApp' }), 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']); + } +} diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index a4acfe6..4d9fc64 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -36,11 +36,11 @@
- - diff --git a/src/assets/icons/tabler-icon-home.svg b/src/assets/icons/tabler-icon-home.svg new file mode 100644 index 0000000..3578ddb --- /dev/null +++ b/src/assets/icons/tabler-icon-home.svg @@ -0,0 +1,73 @@ + + + + + + image/svg+xml + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-logout.svg b/src/assets/icons/tabler-icon-logout.svg new file mode 100644 index 0000000..c311628 --- /dev/null +++ b/src/assets/icons/tabler-icon-logout.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-message-circle.svg b/src/assets/icons/tabler-icon-message-circle.svg new file mode 100644 index 0000000..fc999bd --- /dev/null +++ b/src/assets/icons/tabler-icon-message-circle.svg @@ -0,0 +1,86 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-search.svg b/src/assets/icons/tabler-icon-search.svg new file mode 100644 index 0000000..abbd480 --- /dev/null +++ b/src/assets/icons/tabler-icon-search.svg @@ -0,0 +1,74 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-settings.svg b/src/assets/icons/tabler-icon-settings.svg new file mode 100644 index 0000000..c133334 --- /dev/null +++ b/src/assets/icons/tabler-icon-settings.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-trending-up.svg b/src/assets/icons/tabler-icon-trending-up.svg new file mode 100644 index 0000000..c40ee92 --- /dev/null +++ b/src/assets/icons/tabler-icon-trending-up.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index b187391..75fe905 100644 --- a/src/styles.css +++ b/src/styles.css @@ -201,10 +201,22 @@ input[type=file]::file-selector-button { /* General padding */ -.small-padding { +.padding-normal { + padding: 0.4em; +} + +.padding-smaller { + padding: 0.3em; +} + +.padding-small { padding: 0.2em; } +.padding-tiny { + padding: 0.1em; +} + /* Cards */ .card { @@ -218,18 +230,24 @@ input[type=file]::file-selector-button { /* Effects */ -.lighter-hover:hover { +.lighter-hover:hover, .light-hover:hover, .hover-half-opacity:hover { cursor: pointer; +} + +.lighter-hover:hover { background: #424242; } -.click-effect:active { - transform: scale(0.9); +.light-hover:hover { + background: #696969; } .hover-half-opacity:hover { opacity: 0.5; - cursor: pointer; +} + +.click-effect:active { + transform: scale(0.9); } /* Inputs, the type found in login and register */ -- cgit v1.2.3 From 5916079f20c5cd36e4092fd717c1bcc8814670f7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:07:42 +0200 Subject: Added navbar component to pages that need it --- src/app/components/admin-panel-page/admin-panel-page.component.html | 2 ++ src/app/components/comment-page/comment-page.component.html | 2 ++ src/app/components/feed/feed.component.html | 2 ++ src/app/components/post-page/post-page.component.html | 2 ++ src/app/components/profile-settings/profile-settings.component.html | 2 ++ src/app/components/profile/profile.component.html | 2 ++ 6 files changed, 12 insertions(+) diff --git a/src/app/components/admin-panel-page/admin-panel-page.component.html b/src/app/components/admin-panel-page/admin-panel-page.component.html index 31f0849..96ab545 100644 --- a/src/app/components/admin-panel-page/admin-panel-page.component.html +++ b/src/app/components/admin-panel-page/admin-panel-page.component.html @@ -1,3 +1,5 @@ + +
diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index ae114da..1b94568 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -1,3 +1,5 @@ + +
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index 5ff2dca..5694b09 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -1,3 +1,5 @@ + +
diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index 5da8cc7..fe12177 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -1,3 +1,5 @@ + +
diff --git a/src/app/components/profile-settings/profile-settings.component.html b/src/app/components/profile-settings/profile-settings.component.html index 502697d..dbfc747 100644 --- a/src/app/components/profile-settings/profile-settings.component.html +++ b/src/app/components/profile-settings/profile-settings.component.html @@ -1,3 +1,5 @@ + +
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index 5c21cee..dede887 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -1,3 +1,5 @@ + +
-- 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 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(+) 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 533bf3779ac4e4736320fdb5f23746cb5e765105 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 16:31:26 +0200 Subject: Removed old image assets and added new default user icon asset --- src/app/app-constants.module.ts | 2 +- src/assets/icons/tabler-icon-user.svg | 71 +++++++++++++++++++++++++++++++++ src/assets/images/comment.png | Bin 31366 -> 0 bytes src/assets/images/feed/chat-pic.png | Bin 7634 -> 0 bytes src/assets/images/feed/profile-pic.png | Bin 7870 -> 0 bytes src/assets/images/paper-clip.png | Bin 2923 -> 0 bytes 6 files changed, 72 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/tabler-icon-user.svg delete mode 100644 src/assets/images/comment.png delete mode 100644 src/assets/images/feed/chat-pic.png delete mode 100644 src/assets/images/feed/profile-pic.png delete mode 100644 src/assets/images/paper-clip.png diff --git a/src/app/app-constants.module.ts b/src/app/app-constants.module.ts index f8722f7..39538e0 100644 --- a/src/app/app-constants.module.ts +++ b/src/app/app-constants.module.ts @@ -14,7 +14,7 @@ export class AppConstants { public static API_COMMENT_URL = AppConstants.BASE_API_URL + '/Comment'; public static PAGE_SIZE = 10; - public static FALLBACK_PROFILE_ICON = 'assets/images/feed/profile-pic.png'; + public static FALLBACK_PROFILE_ICON = 'assets/icons/tabler-icon-user.svg'; public static SESSION_TOKEN_KEY = 'UserCred'; public static ADMIN_ROLE_NAME = 'Admin'; diff --git a/src/assets/icons/tabler-icon-user.svg b/src/assets/icons/tabler-icon-user.svg new file mode 100644 index 0000000..37969ec --- /dev/null +++ b/src/assets/icons/tabler-icon-user.svg @@ -0,0 +1,71 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/images/comment.png b/src/assets/images/comment.png deleted file mode 100644 index 5f8e8d9..0000000 Binary files a/src/assets/images/comment.png and /dev/null differ diff --git a/src/assets/images/feed/chat-pic.png b/src/assets/images/feed/chat-pic.png deleted file mode 100644 index 60241fa..0000000 Binary files a/src/assets/images/feed/chat-pic.png and /dev/null differ diff --git a/src/assets/images/feed/profile-pic.png b/src/assets/images/feed/profile-pic.png deleted file mode 100644 index 87f67f5..0000000 Binary files a/src/assets/images/feed/profile-pic.png and /dev/null differ diff --git a/src/assets/images/paper-clip.png b/src/assets/images/paper-clip.png deleted file mode 100644 index 46ce0a7..0000000 Binary files a/src/assets/images/paper-clip.png and /dev/null differ -- 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(-) 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 @@
-
+
-
+ diff --git a/src/app/components/profile/profile.component.ts b/src/app/components/profile/profile.component.ts index ed17f33..fc5d4d6 100644 --- a/src/app/components/profile/profile.component.ts +++ b/src/app/components/profile/profile.component.ts @@ -131,18 +131,6 @@ export class ProfileComponent implements OnInit { } } - goBack(): void { - this._router.navigate(['/']); - } - - navigateToAdminPanel(): void { - this._router.navigate(['/admin-panel']); - } - - navigateToSettings(): void { - this._router.navigate([this._router.url + '/settings']); - } - logout(): void { this._tokenService.logoutUserFromSessionStorage(); diff --git a/src/styles.css b/src/styles.css index b4f7539..64aa79f 100644 --- a/src/styles.css +++ b/src/styles.css @@ -89,6 +89,7 @@ input[type=file]::file-selector-button { width: 100%; max-height: 100%; overflow-y: auto; + flex-wrap: nowrap !important; } /* Hide scrollbar for Chrome, Safari and Opera */ @@ -142,6 +143,10 @@ input[type=file]::file-selector-button { justify-content: flex-end; } +.flex-justify-center { + justify-content: center; +} + .flex-center-align-children > * { display: flex; align-items: center; @@ -178,6 +183,10 @@ input[type=file]::file-selector-button { /* General text */ +.text-centered { + text-align: center; +} + .text-vertical-middle { vertical-align: middle; } @@ -268,6 +277,10 @@ input[type=file]::file-selector-button { /* Misc */ +.full-width { + width: 100%; +} + .centered-content { max-width: var(--max-width); margin: 0 auto; -- cgit v1.2.3 From da7ee0c5d640083fcce8af38730c587c4fb15395 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 19:18:21 +0200 Subject: Fixed height of pages that were the whole window height but were also below the navbar --- src/app/components/comment-page/comment-page.component.html | 2 +- src/app/components/feed/feed.component.html | 2 +- src/app/components/navbar/navbar.component.css | 1 + src/app/components/post-page/post-page.component.html | 2 +- src/app/components/profile-settings/profile-settings.component.html | 2 +- src/app/components/profile/profile.component.html | 2 +- src/app/services/comment.service.ts | 2 +- src/styles.css | 5 +++++ 8 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/app/components/comment-page/comment-page.component.html b/src/app/components/comment-page/comment-page.component.html index 1b94568..553b545 100644 --- a/src/app/components/comment-page/comment-page.component.html +++ b/src/app/components/comment-page/comment-page.component.html @@ -2,7 +2,7 @@ -
+
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index c5c4401..a8290a1 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -2,7 +2,7 @@ -
+
diff --git a/src/app/components/navbar/navbar.component.css b/src/app/components/navbar/navbar.component.css index aa666b0..d02e928 100644 --- a/src/app/components/navbar/navbar.component.css +++ b/src/app/components/navbar/navbar.component.css @@ -1,4 +1,5 @@ #navbar { + height: var(--navbar-height); width: 100%; background-color: var(--card-bg); } diff --git a/src/app/components/post-page/post-page.component.html b/src/app/components/post-page/post-page.component.html index fe12177..ad748e3 100644 --- a/src/app/components/post-page/post-page.component.html +++ b/src/app/components/post-page/post-page.component.html @@ -2,7 +2,7 @@ -
+