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/styles.css | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 139 insertions(+), 3 deletions(-) (limited to 'src/styles.css') 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 (limited to 'src/styles.css') 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 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/styles.css') 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 @@
-
+
- - -
- -
-
- None of your friends have posted anything yet!
- Try refreshing your page! -
-
- +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+ ☒ +
+ + +
+
+ None of your friends have posted anything yet!
+ Try refreshing your page! +
+
+ +
diff --git a/src/assets/icons/tabler-icon-paperclip.svg b/src/assets/icons/tabler-icon-paperclip.svg new file mode 100644 index 0000000..955e6fb --- /dev/null +++ b/src/assets/icons/tabler-icon-paperclip.svg @@ -0,0 +1,65 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index af9bbeb..b4f7539 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,16 +24,18 @@ body { background-color: var(--bg-color); } -button { +button, textarea, input { color: inherit; background: inherit; + background-color: inherit; font: inherit; padding: 0; border: none; } input:focus, -button:focus { +button:focus, +textarea:focus { outline: 0; } -- cgit v1.2.3 From 97f3e372bd96195e6f243358ef7063a63278f699 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 19:07:24 +0200 Subject: Major redesign of profile component styling --- src/app/components/profile/profile.component.css | 109 +++------------------- src/app/components/profile/profile.component.html | 100 ++++++++++---------- src/app/components/profile/profile.component.ts | 12 --- src/styles.css | 13 +++ 4 files changed, 72 insertions(+), 162 deletions(-) (limited to 'src/styles.css') diff --git a/src/app/components/profile/profile.component.css b/src/app/components/profile/profile.component.css index ebcd406..c14fd00 100644 --- a/src/app/components/profile/profile.component.css +++ b/src/app/components/profile/profile.component.css @@ -1,105 +1,18 @@ -* { - box-sizing: border-box; +#user-info { + font-size: 1.3em; } -#content { - max-width: 22em; - justify-content: start; +#profile-picture { + height: 5rem; + width: 5rem; } -hr { - width: calc(100% - 1em); - color: black; - border: 1px solid black; +.sec-info-title { + padding-bottom: 0.2em; + margin-bottom: 0.3em; } -form { - width: 100%; -} - -/* Navigation bar (for loggedin user) */ - -#navigation { - display: flex; - width: 100%; -} - -.submit-btn { - flex: 1; - margin-top: 0; - margin-left: .5em; - font-size: inherit; -} - -#navigation > .submit-btn:first-child { - margin-left: 0; -} - -/* Top card */ - -#main-info { - display: flex; - width: 100%; - margin-bottom: .25em -} - -#main-info > img { - width: 5em; - height: 5em; -} - -#other-main-info { - flex: 1; - display: flex; - flex-direction: column; - align-items: center; - text-align: center; -} - -#other-main-info > * { - font-size: 1.4em; -} - -#other-main-info *:nth-child(1) { - margin-top: auto; -} - -#other-main-info *:nth-last-child(1) { - margin-bottom: auto; -} - -#add-friend, #loggedin-password { - flex: 0 !important; - margin-top: .4em; - max-width: 8em; - font-size: .6em !important; -} - -#loggedin-password { - max-width: 100%; -} - -/* Languages and technologies */ - -.secondary-info { - margin-top: .25em; - margin-bottom: .25em; - width: 100%; - display: flex; - align-items: center; - flex-wrap: wrap; -} - -/* Posts */ - -#no-posts { - width: 100%; - text-align: center; - color: gray; - margin-top: .2em; -} - -#posts { - width: 100%; - height: 100%; +.sec-info { + background-color: #424242; + margin: 0 0.3em 0.3em 0; } diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index dede887..45e51a5 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -2,61 +2,57 @@ -
- -
-
-
- -
-
- {{ user.firstName }} {{ user.lastName }} -
-
- @{{ user.userName }} -
-
- -
- -
-
+
+
+
+
-
- Languages: -
-
- {{ lang.name }} -
+
+
+ {{ user.firstName }} {{ user.lastName }}
-
-  None +
+ @{{ user.userName }}
+
+ +
+ +
-
- Technologies: -
-
- {{ tech.name }} -
-
-
-  None -
+
+
+
+ Languages
-
-
-
- {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! -
-
- -
+ + None + +
+ + {{ lang.name }} + +
+
+
+
+ Technologies +
+ + None + +
+ + {{ tech.name }} + +
+
+
+
+ {{ user.firstName }} {{ user.lastName }} hasn't posted anything yet! +
+
+
-
-
+
+ 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(-) (limited to 'src/styles.css') 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 @@ -
+