From ca7e618ca3350a5cf200ae39c851b016c9088d41 Mon Sep 17 00:00:00 2001 From: transtrike Date: Thu, 25 Feb 2021 20:51:24 +0200 Subject: Footer added; Pages fucked up --- src/styles.css | 103 ++++++++++++++++++++++++++++++--------------------------- 1 file changed, 55 insertions(+), 48 deletions(-) (limited to 'src/styles.css') diff --git a/src/styles.css b/src/styles.css index eeb93fe..b215190 100644 --- a/src/styles.css +++ b/src/styles.css @@ -9,24 +9,27 @@ --failure: indianred; } -html, body { - height: 100%; - margin: 0; +html, +body { + height: 100%; + margin: 0; } body { font: 21px sans-serif !important; background-color: var(--bg-color); } -input:focus, button:focus { +input:focus, +button:focus { outline: 0; } -#content { /* Used for the login and register pages */ +#content { + /* Used for the login and register pages */ height: 100%; max-width: 20em; box-sizing: border-box; - border: .5em solid var(--bg-color); + border: 0.5em solid var(--bg-color); margin: 0 auto; @@ -36,10 +39,15 @@ input:focus, button:focus { flex-direction: column; } +#content > *:first-child, +#content > *:last-child { + flex: 1; +} + .rounded-border { border: 2px solid black; - border-radius: .6em; - padding: .4em; + border-radius: 0.6em; + padding: 0.4em; } .round-image { @@ -62,22 +70,23 @@ input:focus, button:focus { overflow-y: auto; } - /* Hide scrollbar for Chrome, Safari and Opera */ +/* Hide scrollbar for Chrome, Safari and Opera */ .scroll-standalone::-webkit-scrollbar { display: none; } - /* Hide scrollbar for IE, Edge and Firefox */ +/* Hide scrollbar for IE, Edge and Firefox */ .scroll-standalone { - -ms-overflow-style: none; /* IE and Edge */ - scrollbar-width: none; /* Firefox */ + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ } -.user-language, .user-technology { - border-radius: .4em; +.user-language, +.user-technology { + border-radius: 0.4em; background-color: lightgrey; - padding: .26em; - margin: .1em .2em; + padding: 0.26em; + margin: 0.1em 0.2em; width: fit-content; } @@ -85,10 +94,10 @@ input:focus, button:focus { .input-selection { position: relative; - margin-top: .7em; + margin-top: 0.7em; } - /* Don't show the placeholder when the label is on top +/* Don't show the placeholder when the label is on top */ .input-selection .input-field::-webkit-input-placeholder { opacity: 0; @@ -102,8 +111,8 @@ input:focus, button:focus { border-bottom: 1px solid grey; box-sizing: border-box; - margin-bottom: .5em; - padding: .4em; + margin-bottom: 0.5em; + padding: 0.4em; padding-left: 0; font-size: inherit; @@ -115,22 +124,22 @@ input:focus, button:focus { position: absolute; left: 0; - margin-top: .4em; + margin-top: 0.4em; color: grey; } - /* When hovering, typing or having typed something in an input, +/* When hovering, typing or having typed something in an input, * make the label smaller, color it and then move it up */ -.input-selection:hover > .input-field-label , -.input-selection > input:not(:placeholder-shown) + .input-field-label , +.input-selection:hover > .input-field-label, +.input-selection > input:not(:placeholder-shown) + .input-field-label, .input-selection > input:focus + .input-field-label { - font-size: .7em; + font-size: 0.7em; color: var(--focus-color); transform: translate(0, -1.2em); } - /* Show the placeholder, when you've hovered or +/* Show the placeholder, when you've hovered or * focused (typing in) on the input-field */ .input-selection:hover > .input-field::-webkit-input-placeholder, @@ -138,7 +147,7 @@ input:focus, button:focus { opacity: 1; } - /* Make the underline thicker and change it's and the cursors's +/* Make the underline thicker and change it's and the cursors's * color when hovered or focused (typing in) on the input-field */ .input-selection:hover > .input-field, @@ -149,19 +158,18 @@ input:focus, button:focus { margin-top: -1px !important; } - /* Input errors */ .input-errors { - margin-top: -.8em; - font-size: .7em; + margin-top: -0.8em; + font-size: 0.7em; position: absolute; right: 0; top: 0; } - /* Move the errors above the input when +/* Move the errors above the input when * using the site on a small screen and * add some space for them above the input */ @@ -175,7 +183,7 @@ input:focus, button:focus { } .input-errors > .error { - margin-left: .3em; + margin-left: 0.3em; } .input-field:focus ~ .input-errors > .error { @@ -194,14 +202,14 @@ input:focus, button:focus { background-color: black; border: 2px solid black; - border-radius: .4em; + border-radius: 0.4em; box-sizing: border-box; - font-size: .8em; + font-size: 0.8em; text-align: center; - margin-top: .5em; - padding: .3em; + margin-top: 0.5em; + padding: 0.3em; } .submit-btn:hover { @@ -213,7 +221,7 @@ input:focus, button:focus { .submit-btn:active { transition: 0s; - transform: scale(.9); + transform: scale(0.9); } .delete-btn:hover { @@ -227,16 +235,16 @@ input:focus, button:focus { display: flex; flex-wrap: wrap; color: gray; - font-size: .75em; - margin: 0 .3em; + font-size: 0.75em; + margin: 0 0.3em; } .form-attachment { border: 2px solid black; - border-radius: .6em; - margin-top: .2em; - margin-right: .2em; - padding: .2em; + border-radius: 0.6em; + margin-top: 0.2em; + margin-right: 0.2em; + padding: 0.2em; display: flex; align-items: center; } @@ -246,12 +254,12 @@ input:focus, button:focus { } .remove-form-attachment { - font-size: .9em; + font-size: 0.9em; color: var(--failure); background-color: white; - border-radius: .2em; - margin: 0 .2em; - padding: .2em; + border-radius: 0.2em; + margin: 0 0.2em; + padding: 0.2em; } .remove-form-attachment:hover { @@ -259,4 +267,3 @@ input:focus, button:focus { background-color: var(--failure); cursor: pointer; } - -- cgit v1.2.3 From b3c37ed5528cbef77f3914c41b2bbf22bed9fb9b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 4 Mar 2021 16:57:51 +0200 Subject: Fixed styling of input fields on non-chromium based browser (FireFox) --- .../profile-settings.component.css | 13 ----- src/styles.css | 62 +++++++++++----------- 2 files changed, 32 insertions(+), 43 deletions(-) (limited to 'src/styles.css') diff --git a/src/app/components/profile-settings/profile-settings.component.css b/src/app/components/profile-settings/profile-settings.component.css index 1c07d9f..5da2bf2 100644 --- a/src/app/components/profile-settings/profile-settings.component.css +++ b/src/app/components/profile-settings/profile-settings.component.css @@ -73,19 +73,6 @@ hr { margin-top: 1.1em; } -.input-field { - border-color: var(--focus-color) !important; - caret-color: var(--focus-color); - border-width: 2px !important; - margin-top: -1px !important; -} - -.input-field-label { - font-size: .7em; - color: var(--focus-color); - transform: translate(0, -1.2em); -} - #all-languages, #all-technologies { display: flex; flex-wrap: wrap; diff --git a/src/styles.css b/src/styles.css index b215190..725eee4 100644 --- a/src/styles.css +++ b/src/styles.css @@ -92,17 +92,6 @@ button:focus { /* Inputs, the type found in login and register */ -.input-selection { - position: relative; - margin-top: 0.7em; -} - -/* Don't show the placeholder when the label is on top - */ -.input-selection .input-field::-webkit-input-placeholder { - opacity: 0; -} - .input-field { width: 100%; background-color: var(--bg-color); @@ -126,36 +115,49 @@ button:focus { margin-top: 0.4em; color: grey; + + transition: 0.2s; + scale: 1em; } -/* When hovering, typing or having typed something in an input, - * make the label smaller, color it and then move it up - */ -.input-selection:hover > .input-field-label, -.input-selection > input:not(:placeholder-shown) + .input-field-label, -.input-selection > input:focus + .input-field-label { - font-size: 0.7em; - color: var(--focus-color); - transform: translate(0, -1.2em); +.input-selection { + position: relative; + margin-top: 0.7em; +} + +.input-selection input::placeholder { + /* Don't show the placeholder when the label is on top */ + opacity: 0; + color: grey; } -/* Show the placeholder, when you've hovered or - * focused (typing in) on the input-field +.input-selection:hover > input::placeholder, +.input-selection > input:focus::placeholder { + /* When hovering on the input, or when having clicked on it, + * show the placeholder */ -.input-selection:hover > .input-field::-webkit-input-placeholder, -.input-selection > .input-field:focus::-webkit-input-placeholder { opacity: 1; } -/* Make the underline thicker and change it's and the cursors's - * color when hovered or focused (typing in) on the input-field +.input-selection:hover > label, +.input-selection > input:not(:placeholder-shown) + label, +.input-selection > input:focus + label { + /* When hovering, typing or having typed something in an input, + * make the label smaller, color it and then move it up */ -.input-selection:hover > .input-field, -.input-field:focus { + font-size: 0.7em; + color: var(--focus-color); + transform: translate(0, -1.2em); +} + +.input-selection:hover > input, +.input-selection > input:focus { + /* When hovering or clicked on it, make it the focus color */ border-color: var(--focus-color) !important; caret-color: var(--focus-color); - border-width: 2px !important; - margin-top: -1px !important; + /* When hovering or clicked on it, make the bottom border wider (taller) */ + border-width: 2px; + padding-bottom: calc(0.4em - 1px); } /* Input errors */ -- cgit v1.2.3 From c7b4f0eb3493ffbaa330aa67762355dbf37ec008 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 4 Mar 2021 16:58:35 +0200 Subject: Fixed sizing twitch of input fields on non-chromium based browsers (FireFox) --- src/app/components/login/login.component.css | 8 ++++---- src/app/components/register/register.component.css | 8 ++++---- src/styles.css | 2 +- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'src/styles.css') diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css index 766522e..103f5c0 100644 --- a/src/app/components/login/login.component.css +++ b/src/app/components/login/login.component.css @@ -1,7 +1,3 @@ -* { - transition: .2s; -} - form { width: 100%; } @@ -12,6 +8,10 @@ form { box-sizing: border-box; } +.submit-btn { + transition: 0.2s; +} + .input-selection:nth-of-type(1) { margin-top: 1.2em; } diff --git a/src/app/components/register/register.component.css b/src/app/components/register/register.component.css index 93d8006..973c6f0 100644 --- a/src/app/components/register/register.component.css +++ b/src/app/components/register/register.component.css @@ -1,9 +1,5 @@ /* A lot of stuff are moved to the global styles! */ -* { - transition: 0.2s; -} - form { width: 100%; } @@ -20,6 +16,10 @@ form { box-sizing: border-box; } +.submit-btn { + transition: 0.2s; +} + .input-selection:nth-of-type(1) { margin-top: 1.2em; } diff --git a/src/styles.css b/src/styles.css index 725eee4..ae70525 100644 --- a/src/styles.css +++ b/src/styles.css @@ -222,7 +222,7 @@ button:focus { } .submit-btn:active { - transition: 0s; + transition: 0s !important; transform: scale(0.9); } -- cgit v1.2.3 From 6c52fd1199525a63dd5bed80a8609b96510282aa Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 4 Mar 2021 17:03:13 +0200 Subject: Made file input hide it's button part of the global styling --- src/app/components/feed/feed.component.css | 4 ---- src/app/components/profile-settings/profile-settings.component.css | 5 ----- src/styles.css | 5 +++++ 3 files changed, 5 insertions(+), 9 deletions(-) (limited to 'src/styles.css') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 23a70d5..3d22349 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -136,10 +136,6 @@ cursor: pointer; } -#file-upload::-webkit-file-upload-button { - visibility: hidden; -} - #attachment-img { height: 1.5em; width: 1.5em; diff --git a/src/app/components/profile-settings/profile-settings.component.css b/src/app/components/profile-settings/profile-settings.component.css index a10d9c6..347c650 100644 --- a/src/app/components/profile-settings/profile-settings.component.css +++ b/src/app/components/profile-settings/profile-settings.component.css @@ -65,11 +65,6 @@ hr { cursor: pointer; } -#upload-file > input::-webkit-file-upload-button, -#upload-file > input::file-selector-button { - visibility: hidden; -} - #update-user { margin-top: 1.1em; } diff --git a/src/styles.css b/src/styles.css index ae70525..cc92d4d 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,6 +24,11 @@ button:focus { outline: 0; } +input[type=file]::-webkit-file-upload-button, +input[type=file]::file-selector-button { + visibility: hidden; +} + #content { /* Used for the login and register pages */ height: 100%; -- cgit v1.2.3 From b379eed12c5f5fa1b1685dc2ad87191733a41d28 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 4 Mar 2021 17:12:25 +0200 Subject: Fixed file upload button being show on other browsers --- src/styles.css | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src/styles.css') diff --git a/src/styles.css b/src/styles.css index cc92d4d..1572f8c 100644 --- a/src/styles.css +++ b/src/styles.css @@ -24,7 +24,13 @@ button:focus { outline: 0; } -input[type=file]::-webkit-file-upload-button, + /* We can't do ...::-webkit-file-upload-button, ...::file-selector-button {...} + * for some reason, so they have to be separated (some browsers break) + */ +input[type=file]::-webkit-file-upload-button { + visibility: hidden; +} + input[type=file]::file-selector-button { visibility: hidden; } -- cgit v1.2.3 From d8ffe52b67e983b9b317b2e5dcb138ac996eaa31 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 6 Mar 2021 14:34:12 +0200 Subject: Fixed weird styling that survived from footer --- src/styles.css | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/styles.css') diff --git a/src/styles.css b/src/styles.css index 1572f8c..b62f493 100644 --- a/src/styles.css +++ b/src/styles.css @@ -50,11 +50,6 @@ input[type=file]::file-selector-button { flex-direction: column; } -#content > *:first-child, -#content > *:last-child { - flex: 1; -} - .rounded-border { border: 2px solid black; border-radius: 0.6em; -- cgit v1.2.3 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 (limited to 'src/styles.css') 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 (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 @@ -
+