From 301e3932b64172b3f9cf055287fdfdb4a89620af Mon Sep 17 00:00:00 2001 From: Syndamia Date: Wed, 24 Feb 2021 18:56:32 +0200 Subject: Improved semantics and simplified some HTML of comments and posts --- .../post-attachment/post-attachment.component.html | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'src/app/components/post-attachment/post-attachment.component.html') diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 4d381d1..401068c 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,13 +1,11 @@ -
-
-
- {{ fileName }} -
-
- {{ fileType }} -
-
-
+
+ + {{ fileName }} + + + {{ fileType }} + +
-- cgit v1.2.3 From 9794489573eaa3cd8bdc853c9d67db5145e22fe4 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 20 Mar 2021 11:10:58 +0200 Subject: Major rework of post attachment styling --- .../post-attachment/post-attachment.component.css | 50 +------------ .../post-attachment/post-attachment.component.html | 20 +++--- src/app/components/post/post.component.css | 1 - src/app/components/post/post.component.html | 2 +- src/assets/icons/tabler-icon-file.svg | 69 ++++++++++++++++++ src/assets/icons/tabler-icon-photo.svg | 84 ++++++++++++++++++++++ src/styles.css | 15 ++++ 7 files changed, 181 insertions(+), 60 deletions(-) create mode 100644 src/assets/icons/tabler-icon-file.svg create mode 100644 src/assets/icons/tabler-icon-photo.svg (limited to 'src/app/components/post-attachment/post-attachment.component.html') diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 58e8a82..dd41340 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,27 +1,5 @@ -/* Attachment */ - .attachment { - width: 100%; - height: 100%; - display: flex; - border: 2px solid black; - border-top: 0; - border-radius: 0 0 .6em .6em; - padding: .4em; - padding-top: 1em; - margin-top: calc(-0.8em - 2px); -} - -.attachment:hover { - cursor: pointer; -} - -.attachment-name { - flex: 1; -} - -.attachment-type { - margin-left: .2em; + background-color: #424242; } /* Full attachment */ @@ -33,9 +11,6 @@ width: 100vw; height: 100vh; background-color: #000000AF; - display: flex; - justify-content: center; - align-items: center; z-index: 2; } @@ -46,27 +21,6 @@ .attachment-download { max-width: 420px !important; - margin: 0 .4em; text-decoration: none; - color: white; - border-color: white; - background-color: black; -} - -.attachment-download:hover { - background-color: white; - color: var(--focus-color); -} - -.close { - position: fixed; - top: .2em; - right: .2em; - font-size: 2em; - color: whitesmoke; -} - -.close:hover { - color: var(--failure); - cursor: pointer; + color: inherit; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 401068c..8605ca0 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,16 +1,16 @@ -
- +
+
+ + +
+ {{ fileName }} - - {{ fileType }} -
-
+
- Download attachment -
- ☒ -
+ + Download attachment +
diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index f263386..c5919fd 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -16,7 +16,6 @@ } .message { - margin: 0.2em 0; word-break: break-word; } diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index a966d00..133b747 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -13,7 +13,7 @@ @{{ user.userName }}
-
+
{{ post.message }}
diff --git a/src/assets/icons/tabler-icon-file.svg b/src/assets/icons/tabler-icon-file.svg new file mode 100644 index 0000000..312c9f4 --- /dev/null +++ b/src/assets/icons/tabler-icon-file.svg @@ -0,0 +1,69 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/assets/icons/tabler-icon-photo.svg b/src/assets/icons/tabler-icon-photo.svg new file mode 100644 index 0000000..eddf3cc --- /dev/null +++ b/src/assets/icons/tabler-icon-photo.svg @@ -0,0 +1,84 @@ + + + + + + image/svg+xml + + + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 0a435a7..c06a9bd 100644 --- a/src/styles.css +++ b/src/styles.css @@ -122,6 +122,10 @@ input[type=file]::file-selector-button { flex-wrap: wrap; } +.flex-no-wrap { + flex-wrap: nowrap; +} + .flex-row { flex-direction: row; } @@ -246,6 +250,17 @@ input[type=file]::file-selector-button { padding-bottom: 0.2em; } +/* Margin */ + +.margin-top-bot-small { + margin-top: 0.2em; + margin-bottom: 0.2em; +} + +.margin-right-small { + margin-right: 0.2em; +} + /* Cards */ .card { -- cgit v1.2.3 From 05498013ab02d44ea1e6906c2f64ae63eeaea93a Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sat, 20 Mar 2021 11:25:26 +0200 Subject: Improved styling of download button in post attachment --- src/app/components/post-attachment/post-attachment.component.css | 1 + src/app/components/post-attachment/post-attachment.component.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) (limited to 'src/app/components/post-attachment/post-attachment.component.html') diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index dd41340..3c25563 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -21,6 +21,7 @@ .attachment-download { max-width: 420px !important; + background-color: var(--card-bg); text-decoration: none; color: inherit; } diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 8605ca0..12004dc 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -10,7 +10,7 @@
- + Download attachment
-- cgit v1.2.3 From 88b8336f0fa51a6f1ac1334e1237d1053d52d8a7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Sun, 21 Mar 2021 15:14:54 +0200 Subject: Major redesign of form attachments (the ones you find on post creation and edit) --- src/app/components/feed/feed.component.css | 12 ++-- src/app/components/feed/feed.component.html | 14 ++-- .../post-attachment/post-attachment.component.css | 4 -- .../post-attachment/post-attachment.component.html | 2 +- src/assets/icons/tabler-icon-x.svg | 75 ++++++++++++++++++++++ src/styles.css | 27 ++++---- 6 files changed, 101 insertions(+), 33 deletions(-) create mode 100644 src/assets/icons/tabler-icon-x.svg (limited to 'src/app/components/post-attachment/post-attachment.component.html') diff --git a/src/app/components/feed/feed.component.css b/src/app/components/feed/feed.component.css index 372792c..a0b6d2e 100644 --- a/src/app/components/feed/feed.component.css +++ b/src/app/components/feed/feed.component.css @@ -1,3 +1,7 @@ +section:empty { + display: none; +} + #create-post { width: 100%; margin-top: 1em; @@ -8,19 +12,11 @@ resize: vertical; } -#attachments-btns { - padding: 0.5em 0; -} - #attachments-btns img, .file-button > input { height: 1.4em; width: 1.4em; } -#new-post-attachments { - margin-bottom: 0.5em; -} - .file-button { position: relative; } diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index fb969da..3fd778a 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -5,17 +5,19 @@
-
+
-
-
- {{ file.name ? file.name : 'Attachment' }} -
- ☒ +
+
+
+ {{ file.name ? file.name : 'Attachment' }} +
+
+
diff --git a/src/app/components/post-attachment/post-attachment.component.css b/src/app/components/post-attachment/post-attachment.component.css index 3c25563..6cdab0b 100644 --- a/src/app/components/post-attachment/post-attachment.component.css +++ b/src/app/components/post-attachment/post-attachment.component.css @@ -1,7 +1,3 @@ -.attachment { - background-color: #424242; -} - /* Full attachment */ .show-full-attachment { diff --git a/src/app/components/post-attachment/post-attachment.component.html b/src/app/components/post-attachment/post-attachment.component.html index 12004dc..04ba633 100644 --- a/src/app/components/post-attachment/post-attachment.component.html +++ b/src/app/components/post-attachment/post-attachment.component.html @@ -1,4 +1,4 @@ -
+
diff --git a/src/assets/icons/tabler-icon-x.svg b/src/assets/icons/tabler-icon-x.svg new file mode 100644 index 0000000..28725c8 --- /dev/null +++ b/src/assets/icons/tabler-icon-x.svg @@ -0,0 +1,75 @@ + + + + + + image/svg+xml + + + + + + + + + + diff --git a/src/styles.css b/src/styles.css index 93ed57b..b166d70 100644 --- a/src/styles.css +++ b/src/styles.css @@ -277,6 +277,15 @@ input[type=file]::file-selector-button { padding-left: 0.3em; } +.bot-padding-bigger { + padding-bottom: 0.5em; +} + +.top-bot-padding-bigger { + padding-top: 0.5em; + padding-bottom: 0.5em; +} + .top-bot-padding-small { padding-top: 0.2em; padding-bottom: 0.2em; @@ -446,6 +455,10 @@ input[type=file]::file-selector-button { /* Form attachments (the ones that are shown while creating and editing a post) */ +.form-attachment { + background-color: #424242; +} + .form-attachments { display: flex; flex-wrap: wrap; @@ -454,20 +467,6 @@ input[type=file]::file-selector-button { margin: 0 0.3em; } -.form-attachment { - border: 2px solid black; - border-radius: 0.6em; - margin-top: 0.2em; - margin-right: 0.2em; - padding: 0.2em; - display: flex; - align-items: center; -} - -.form-attachment:last-child { - margin-right: 0; -} - .remove-form-attachment { font-size: 0.9em; color: var(--failure); -- cgit v1.2.3 From 9906b285148f54b4060c71012854a814409cc9d7 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:23:30 +0200 Subject: Improved readability and consistency of font-size, text, border, colors and padding CSS class names --- .../admin-panel-page.component.html | 62 +++++++++++----------- src/app/components/comment/comment.component.html | 18 +++---- src/app/components/feed/feed.component.html | 12 ++--- src/app/components/login/login.component.html | 22 ++++---- src/app/components/navbar/navbar.component.html | 20 +++---- .../components/not-found/not-found.component.html | 10 ++-- .../post-attachment/post-attachment.component.html | 4 +- .../components/post-page/post-page.component.html | 6 +-- src/app/components/post/post.component.html | 36 ++++++------- .../profile-settings.component.html | 54 +++++++++---------- src/app/components/profile/profile.component.html | 22 ++++---- .../components/register/register.component.html | 34 ++++++------ src/styles.css | 54 ++++++++++--------- 13 files changed, 178 insertions(+), 176 deletions(-) (limited to 'src/app/components/post-attachment/post-attachment.component.html') 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 65f9691..80d6795 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 @@ -6,34 +6,34 @@ -
+
- -
-
+
{{ lang.name }}
@@ -49,32 +49,32 @@
-
-
-
+
{{ tech.name }}
@@ -90,26 +90,26 @@
-
-
No languages available! @@ -81,12 +81,12 @@ Available languages:
-
+
{{ lang.name }}
-
@@ -94,7 +94,7 @@ - +
No technologies available! @@ -103,7 +103,7 @@ Available technologies:
-
+
{{ tech.name }}
@@ -112,15 +112,15 @@ - -
-
+
+
Are you sure you want to delete your account?
This is permanent!
-
diff --git a/src/app/components/profile/profile.component.html b/src/app/components/profile/profile.component.html index e6abeb9..8963d1b 100644 --- a/src/app/components/profile/profile.component.html +++ b/src/app/components/profile/profile.component.html @@ -3,47 +3,47 @@
-
+
-
+
{{ user.firstName }} {{ user.lastName }}
@{{ user.userName }}
-
- -
-
-
+
+
Languages
None
-
+
{{ lang.name }}
-
-
+
+
Technologies
None
-
+
{{ tech.name }}
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 4aae7ed..7d3a0bf 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,44 +1,44 @@ -
- Register +
+ Register - + -
-
- - + +
+ +
- - + +
- - + +
- - + +
- - + +
@@ -47,9 +47,9 @@
- + -
diff --git a/src/styles.css b/src/styles.css index 6c43f1f..373ff93 100644 --- a/src/styles.css +++ b/src/styles.css @@ -179,7 +179,7 @@ input[type=file]::file-selector-button { justify-content: center; } -.flex-center-align-children > * { +.align-children-center > * { display: flex; align-items: center; } @@ -203,10 +203,6 @@ input[type=file]::file-selector-button { font-size: 0.7em; } -.img-height-font-size { - height: 1em; -} - /* General text */ .text-centered { @@ -219,19 +215,19 @@ input[type=file]::file-selector-button { /* General border */ -.faded-slim-border { +.border-faded-slim { border: 1px solid var(--faded-color); } -.border-radius-normal, .card { +.border-radius-dot5r, .card { border-radius: 0.5rem; } -.border-radius-smaller { +.border-radius-dot3 { border-radius: 0.3em; } -.border-radius-small { +.border-radius-dot2 { border-radius: 0.2em; } @@ -243,66 +239,66 @@ input[type=file]::file-selector-button { /* General colors */ -.fg-color-faded { +.fg-faded { color: var(--faded-color); } -.focus-fg-color { +.fg-focus { color: var(--focus-color); border-color: var(--focus-color); } -.error-fg-color { +.fg-error { color: var(--failure); border-color: var(--failure); } /* General padding */ -.padding-big { +.padding-dot6 { padding: 0.6em; } -.padding-bigger { +.padding-dot5 { padding: 0.5em; } -.padding-normal { +.padding-dot4 { padding: 0.4em; } -.padding-smaller { +.padding-dot3 { padding: 0.3em; } -.padding-small { +.padding-dot2 { padding: 0.2em; } -.padding-tiny { +.padding-dot1 { padding: 0.1em; } -.side-padding-font { +.padding-side-font { padding-right: 1em; padding-left: 1em; } -.side-padding-smaller { +.padding-side-dot3 { padding-right: 0.3em; padding-left: 0.3em; } -.bot-padding-bigger { +.padding-bot-dot5 { padding-bottom: 0.5em; } -.top-bot-padding-bigger { +.padding-top-bot-dot5 { padding-top: 0.5em; padding-bottom: 0.5em; } -.top-bot-padding-small { +.padding-top-bot-dot2 { padding-top: 0.2em; padding-bottom: 0.2em; } @@ -370,16 +366,22 @@ input[type=file]::file-selector-button { transform: scale(0.9); } -/* Misc */ +/* Size */ -.full-height { +.height-full { height: 100%; } -.full-width { +.width-full { width: 100%; } +.height-font { + height: 1em; +} + +/* Misc */ + .centered-content { max-width: var(--max-width); margin: 0 auto; -- cgit v1.2.3 From 1afe87209a9e7140fabd3ba58b5e7b470b68fc7b Mon Sep 17 00:00:00 2001 From: Syndamia Date: Mon, 22 Mar 2021 20:35:04 +0200 Subject: Improved readability and consistency of margin global styling --- .../admin-panel-page.component.html | 22 +++++++++++----------- src/app/components/comment/comment.component.html | 6 +++--- src/app/components/feed/feed.component.html | 2 +- src/app/components/login/login.component.html | 6 +++--- .../components/not-found/not-found.component.html | 2 +- .../post-attachment/post-attachment.component.html | 4 ++-- .../components/post-page/post-page.component.html | 4 ++-- src/app/components/post/post.component.html | 6 +++--- .../profile-settings.component.html | 20 ++++++++++---------- src/app/components/profile/profile.component.html | 4 ++-- .../components/register/register.component.html | 6 +++--- src/styles.css | 18 +++++++++--------- 12 files changed, 50 insertions(+), 50 deletions(-) (limited to 'src/app/components/post-attachment/post-attachment.component.html') 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 80d6795..bc4a71f 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 @@ -11,7 +11,7 @@ -
+ @@ -21,7 +21,7 @@ Update language:
- +
@@ -33,14 +33,14 @@ -
+
No languages in database!
Available languages:
-
+
{{ lang.name }}
@@ -49,10 +49,10 @@
- -
+ @@ -62,7 +62,7 @@ Update technology:
- +
@@ -74,14 +74,14 @@ -
+
No technologies in database!
Available technologies:
-
+
{{ tech.name }}
@@ -90,10 +90,10 @@
- -
+ diff --git a/src/app/components/comment/comment.component.html b/src/app/components/comment/comment.component.html index 0ec443b..9403ea2 100644 --- a/src/app/components/comment/comment.component.html +++ b/src/app/components/comment/comment.component.html @@ -14,12 +14,12 @@ - -
-
+
{{ comment.message }}
diff --git a/src/app/components/feed/feed.component.html b/src/app/components/feed/feed.component.html index d81a142..93171a2 100644 --- a/src/app/components/feed/feed.component.html +++ b/src/app/components/feed/feed.component.html @@ -12,7 +12,7 @@
-
+
{{ file.name ? file.name : 'Attachment' }}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html index 7649a3c..29aebf9 100644 --- a/src/app/components/login/login.component.html +++ b/src/app/components/login/login.component.html @@ -1,7 +1,7 @@
- Login + Login - +
@@ -21,5 +21,5 @@ - +
diff --git a/src/app/components/not-found/not-found.component.html b/src/app/components/not-found/not-found.component.html index 7b776bd..4d1165d 100644 --- a/src/app/components/not-found/not-found.component.html +++ b/src/app/components/not-found/not-found.component.html @@ -5,7 +5,7 @@
-
-
+
@@ -80,17 +80,17 @@
Available languages:
-
+
{{ lang.name }}
-
-
+
@@ -102,13 +102,13 @@
Available technologies:
-
+
{{ tech.name }}
-
+
@@ -117,7 +117,7 @@
-
+
Are you sure you want to delete your account?
This is permanent!
diff --git a/src/app/components/register/register.component.html b/src/app/components/register/register.component.html index 7d3a0bf..1f547c4 100644 --- a/src/app/components/register/register.component.html +++ b/src/app/components/register/register.component.html @@ -1,7 +1,7 @@
- Register + Register - +
@@ -49,7 +49,7 @@ -
diff --git a/src/styles.css b/src/styles.css index 373ff93..11c2973 100644 --- a/src/styles.css +++ b/src/styles.css @@ -305,42 +305,42 @@ input[type=file]::file-selector-button { /* Margin */ -.no-margin { +.margin-0 { margin: 0; } -.no-margin-top { +.margin-top-0 { margin-top: 0; } -.margin-top-normal { +.margin-top-dot4 { margin-top: 0.4em; } -.margin-top-bigger { +.margin-top-dot5 { margin-top: 0.5em; } -.margin-bot-bigger { +.margin-bot-dot5 { margin-bottom: 0.5em; } -.margin-top-bot-very-big { +.margin-top-bot-dot7 { margin-top: 0.7em; margin-bottom: 0.7em; } -.margin-top-bot-smaller { +.margin-top-bot-dot3 { margin-top: 0.3em; margin-bottom: 0.3em; } -.margin-top-bot-small { +.margin-top-bot-dot2 { margin-top: 0.2em; margin-bottom: 0.2em; } -.margin-right-small { +.margin-right-dot2 { margin-right: 0.2em; } -- cgit v1.2.3