From 1f008dfc777022582e5e0cf0823175e66c2790cf Mon Sep 17 00:00:00 2001 From: Danail Dimitrov Date: Sat, 6 Mar 2021 14:43:32 +0200 Subject: starting development of rating system --- src/app/components/post/post.component.css | 5 ----- 1 file changed, 5 deletions(-) (limited to 'src/app/components/post/post.component.css') diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index 1b88c7d..07d931f 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -76,11 +76,6 @@ hr { /* Rating */ -/* Temporary, until ratings are implemented fully */ -.rating { - display: none !important; -} - .rating { display: flex; flex-direction: column; -- 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/app/components/post/post.component.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 42c2065ea3b2314012d4ef41104a5161bc051f23 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Fri, 19 Mar 2021 18:05:49 +0200 Subject: Fixed slight missalignment between button icons and actual value of votes in posts --- src/app/components/post/post.component.css | 5 +++++ src/app/components/post/post.component.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) (limited to 'src/app/components/post/post.component.css') diff --git a/src/app/components/post/post.component.css b/src/app/components/post/post.component.css index 52f3283..f263386 100644 --- a/src/app/components/post/post.component.css +++ b/src/app/components/post/post.component.css @@ -28,3 +28,8 @@ .post-details > * { margin-left: 1.1em; } + +.rating img { + height: 1.2em; + width: 1.2em; +} diff --git a/src/app/components/post/post.component.html b/src/app/components/post/post.component.html index 7b8c1fa..d9ce657 100644 --- a/src/app/components/post/post.component.html +++ b/src/app/components/post/post.component.html @@ -46,7 +46,7 @@ -