From 2c59dcefcf474876c7ff6bdf58b3aec60a70ccf9 Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Thu, 20 Aug 2020 04:26:12 +0100 Subject: [PATCH] [UI] Finalizing timeline structure and CSS --- public/assets/css/base.css | 16 ++- public/assets/css/base_mid.css | 16 +-- public/assets/css/base_small.css | 5 +- public/assets/css/left/left.css | 2 + public/assets/css/left/left_mid.css | 2 + public/assets/css/network/public.css | 100 +++++++++++++---- public/assets/css/network/public_mid.css | 111 +++++++++++++----- public/assets/css/network/public_small.css | 119 +++++++++++++++----- templates/base.html.twig | 1 - templates/left/left.html.twig | 1 - templates/network/public.html.twig | 125 +++++++++++---------- 11 files changed, 344 insertions(+), 154 deletions(-) diff --git a/public/assets/css/base.css b/public/assets/css/base.css index fc4c78ff44..9f4fd24282 100644 --- a/public/assets/css/base.css +++ b/public/assets/css/base.css @@ -5,7 +5,7 @@ /* font and margin sizes */ --main-size: 1.2em; - --medium-size: 0.8em; + --medium-size: 0.75em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 2em; @@ -14,17 +14,19 @@ /* colours and shadows */ --fg: #eceff4; --accent: #81a1c1; + --accent-low: #81a1c140; --bg1: #2e3440; --bg2: #3b4252; --bg3: #434c5e; --bg4: #4c566a; - --shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); + --bg5: #d8dee9; + --shadow: 0px 0px 20px 0px rgba(46,52,64,0.95); } /* DEFAULTS */ body, html { - background: var(--bg4); + background: var(--bg1); background-attachment: fixed; background-size: cover; color: var(--fg); @@ -36,7 +38,7 @@ html { hr { margin: 0; - color: var(--accent); + color: var(--accent-low); } ul { @@ -83,9 +85,12 @@ b { left: 0; right: 0; background-color: var(--bg1); - box-shadow: var(--shadow); padding: var(--main-size); height: var(--main-size); + margin-left: -1px; + margin-right: 1px; + margin-top: -1px; + border: solid 1px var(--accent-low); } #top { @@ -169,6 +174,7 @@ b { background-color: var(--bg1); margin-top: calc(3 * var(--main-size)); z-index: 0; + border: solid 1px var(--accent-low); } input.larger { diff --git a/public/assets/css/base_mid.css b/public/assets/css/base_mid.css index 5bc97a3399..d2627857c4 100644 --- a/public/assets/css/base_mid.css +++ b/public/assets/css/base_mid.css @@ -5,7 +5,7 @@ /* font and margin sizes */ --main-size: 1.2em; - --medium-size: 0.85em; + --medium-size: 0.75em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 5em; @@ -14,17 +14,19 @@ /* colours and shadows */ --fg: #eceff4; --accent: #81a1c1; + --accent-low: #81a1c140; --bg1: #2e3440; --bg2: #3b4252; --bg3: #434c5e; --bg4: #4c566a; + --bg5: #d8dee9; --shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); } /* DEFAULTS */ body, html { - background: var(--bg4); + background: var(--bg1); background-attachment: fixed; background-size: cover; color: var(--fg); @@ -34,11 +36,6 @@ html { padding: 0; } -hr { - margin: 0; - color: var(--accent); -} - ul { text-decoration: none; margin: 0; @@ -88,6 +85,10 @@ b { box-shadow: var(--shadow); padding: var(--main-size); height: var(--main-size); + border: solid 1px var(--accent-low); + margin-left: -1px; + margin-right: 1px; + margin-top: -1px; } #top { @@ -199,6 +200,7 @@ b { position: fixed; background-color: var(--bg1); margin-top: calc(3 * var(--main-size)); + border: solid 1px var(--accent-low); } input.larger { diff --git a/public/assets/css/base_small.css b/public/assets/css/base_small.css index fd695e2da8..6ff99ef6a7 100644 --- a/public/assets/css/base_small.css +++ b/public/assets/css/base_small.css @@ -5,7 +5,7 @@ /* font and margin sizes */ --main-size: 1.2em; - --medium-size: 0.8em; + --medium-size: 0.7em; --small-size: 0.65em; --unit-size: 1em; --side-margin: 2em; @@ -18,13 +18,14 @@ --bg2: #3b4252; --bg3: #434c5e; --bg4: #4c566a; + --bg5: #d8dee9; --shadow: 0px 0px 40px 0px rgba(46,52,64,0.95); } /* DEFAULTS */ body, html { - background: var(--bg4); + background: var(--bg1); background-attachment: fixed; background-size: cover; color: var(--fg); diff --git a/public/assets/css/left/left.css b/public/assets/css/left/left.css index 9c528ecc41..a29c1e8262 100644 --- a/public/assets/css/left/left.css +++ b/public/assets/css/left/left.css @@ -9,6 +9,8 @@ left: 0; top: 0; transition: 0.3s ease; + border: solid 1px var(--accent-low); + margin-left: -1px; } /* left navigation */ .navbar .left-nav { diff --git a/public/assets/css/left/left_mid.css b/public/assets/css/left/left_mid.css index 9a8b1efaaf..7a6b30d1a4 100644 --- a/public/assets/css/left/left_mid.css +++ b/public/assets/css/left/left_mid.css @@ -6,6 +6,8 @@ position: fixed; background-color: var(--bg1); margin-top: calc(3 * var(--main-size)); + margin-left: -1px; + border: solid 1px var(--accent-low); } .navbar { left: -100%; diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css index f5f7041014..6d6a94241a 100644 --- a/public/assets/css/network/public.css +++ b/public/assets/css/network/public.css @@ -12,8 +12,10 @@ width: 100%; margin-left: var(--unit-size); margin-right: var(--unit-size); - box-shadow: var(--shadow); - border-radius: 0 0 var(--unit-size) var(--unit-size); + margin-top: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + border: solid 2px var(--accent-low); } .main-nav { @@ -26,6 +28,7 @@ padding: var(--medium-size); font-size: var(--medium-size); font-family: var(--head-font); + border-radius: var(--small-size) var(--small-size) 0 0; } .main-nav ul { @@ -57,39 +60,32 @@ transition: all 0.8s ease; } - - +/* notices */ .notes { display: flex; flex-wrap: wrap; } -.notes div div { - flex: 1; -} .notes-wrap { display: flex; flex-wrap: wrap; font-size: var(--medium-size); - border-radius: 0 0 var(--unit-size) var(--unit-size); - background-color: var(--bg4); - padding: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + box-shadow: var(--shadow); + margin: var(--unit-size); + border: solid 2px var(--accent-low); } -.notes-wrap .timeline-nav { +.notes-wrap .timeline { order: 3; width: 100%; - box-shadow: var(--shadow); - border-radius: var(--unit-size); - margin-top: var(--unit-size); } -.notes-wrap .timeline-nav .notes > div { - background-color: var(--bg2); - padding: var(--unit-size); +.notes-wrap .timeline .notes > div { margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); - border-radius: var(--unit-size); + border-radius: var(--small-size); width: 100%; } -.notes-wrap .timeline-nav .notes > div:last-child { +.notes-wrap .timeline .notes > div:last-child { margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); } .notes-wrap .main-nav { @@ -97,11 +93,71 @@ font-size: var(--unit-size); } -/* TODO FIX THIS */ -.notes-wrap .note-post { - order: 2; +.notice { + display: flex; + flex-wrap: wrap; + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +.notice-info { + background-color: var(--bg1); + box-sizing: border-box; + padding: 5px; + border-radius: var(--small-size) var(--small-size) 0 0; + display: flex; + align-items: center; + flex-grow: 1; + flex-shrink: 0; width: 100%; } +.notice-info a img { + width: calc(2 * var(--unit-size)); + height: auto; +} +.notice-content { + flex-grow: 1; + flex-shrink: 0; + padding: var(--small-size); + border-radius: 0 0 var(--small-size) var(--small-size); +} +/* posting form */ +.note-post { + width: calc(100% - (6 * var(--unit-size))); + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +#form { + display: flex; + flex-wrap: wrap; +} +#form div { + flex-grow: 1; + flex-shrink: 0; + width: 100%; +} +#form div:nth-of-type(2) { + display: flex; + justify-content: right; +} + textarea#form_content { + background-color: var(--bg3); + border-radius: var(--small-size) var(--small-size) 0 0; + color: var(--fg); + height: calc(8 * var(--unit-size)); width: 100%; + box-sizing: border-box; + padding: var(--unit-size); + word-wrap: break-word; + resize: vertical; + font-size: var(--unit-size); } +button#form_send { + color: var(--fg); + font-size: var(--small-size); + background-color: var(--bg1); + padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size); + border: solid 2px var(--accent-low); + border-radius: var(--main-size); + margin: var(--small-size); +} \ No newline at end of file diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css index b5a5954e40..6ec952438e 100644 --- a/public/assets/css/network/public_mid.css +++ b/public/assets/css/network/public_mid.css @@ -4,16 +4,18 @@ margin-top: calc(4 * var(--main-size)); justify-content: center; align-items: center; - margin-left: var(--unit-size); - margin-right: var(--unit-size); + margin-left: 1%; + margin-right: 1%; margin-bottom: var(--unit-size); } .content .main { width: 100%; - margin-left: var(--unit-size); - margin-right: var(--unit-size); - box-shadow: var(--shadow); - border-radius: 0 0 var(--unit-size) var(--unit-size); + margin-left: 1%; + margin-right: 1%; + margin-top: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + border: solid 2px var(--accent-low); } .main-nav { @@ -26,6 +28,7 @@ padding: var(--medium-size); font-size: var(--medium-size); font-family: var(--head-font); + border-radius: var(--small-size) var(--small-size) 0 0; } .main-nav ul { @@ -33,8 +36,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: calc(2 * var(--side-margin)); - margin-right: calc(2 * var(--side-margin)); + margin-left: 1%; + margin-right: 1%; padding: 0; } .main-nav li { @@ -57,38 +60,32 @@ transition: all 0.8s ease; } - +/* notices */ .notes { display: flex; flex-wrap: wrap; } -.notes div div { - flex: 1; -} .notes-wrap { display: flex; flex-wrap: wrap; font-size: var(--medium-size); - border-radius: 0 0 var(--unit-size) var(--unit-size); - background-color: var(--bg4); - padding: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + box-shadow: var(--shadow); + margin: var(--unit-size); + border: solid 2px var(--accent-low); } -.notes-wrap .timeline-nav { +.notes-wrap .timeline { order: 3; width: 100%; - box-shadow: var(--shadow); - border-radius: var(--unit-size); - margin-top: var(--unit-size); } -.notes-wrap .timeline-nav .notes > div { - background-color: var(--bg2); - padding: var(--unit-size); +.notes-wrap .timeline .notes > div { margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); - border-radius: var(--unit-size); + border-radius: var(--small-size); width: 100%; } -.notes-wrap .timeline-nav .notes > div:last-child { +.notes-wrap .timeline .notes > div:last-child { margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); } .notes-wrap .main-nav { @@ -96,11 +93,71 @@ font-size: var(--unit-size); } -/* TODO FIX THIS */ -.notes-wrap .note-post { - order: 2; +.notice { + display: flex; + flex-wrap: wrap; + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +.notice-info { + background-color: var(--bg1); + box-sizing: border-box; + padding: 5px; + border-radius: var(--small-size) var(--small-size) 0 0; + display: flex; + align-items: center; + flex-grow: 1; + flex-shrink: 0; width: 100%; } +.notice-info a img { + width: calc(2 * var(--unit-size)); + height: auto; +} +.notice-content { + flex-grow: 1; + flex-shrink: 0; + padding: var(--small-size); + border-radius: 0 0 var(--small-size) var(--small-size); +} +/* posting form */ +.note-post { + width: calc(100% - (6 * var(--unit-size))); + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +#form { + display: flex; + flex-wrap: wrap; +} +#form div { + flex-grow: 1; + flex-shrink: 0; + width: 100%; +} +#form div:nth-of-type(2) { + display: flex; + justify-content: right; +} + textarea#form_content { + background-color: var(--bg3); + border-radius: var(--small-size) var(--small-size) 0 0; + color: var(--fg); + height: calc(8 * var(--unit-size)); width: 100%; + box-sizing: border-box; + padding: var(--unit-size); + word-wrap: break-word; + resize: vertical; + font-size: var(--unit-size); +} +button#form_send { + color: var(--fg); + font-size: var(--small-size); + background-color: var(--bg1); + padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size); + border: solid 2px var(--accent-low); + border-radius: var(--main-size); + margin: var(--small-size); } diff --git a/public/assets/css/network/public_small.css b/public/assets/css/network/public_small.css index 75ae996acd..b4e66824ab 100644 --- a/public/assets/css/network/public_small.css +++ b/public/assets/css/network/public_small.css @@ -1,19 +1,21 @@ .content { display: flex; flex-wrap: wrap; - margin-top: calc(3 * var(--main-size) + 2%); + margin-top: calc(4 * var(--main-size)); justify-content: center; align-items: center; - margin-left: 2%; - margin-right: 2%; - margin-bottom: 2%; + margin-left: 1%; + margin-right: 1%; + margin-bottom: var(--unit-size); } .content .main { width: 100%; - margin-left: 0; - margin-right: 0; - box-shadow: var(--shadow); - border-radius: 0 0 var(--unit-size) var(--unit-size); + margin-left: 1%; + margin-right: 1%; + margin-top: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + border: solid 2px var(--accent-low); } .main-nav { @@ -26,6 +28,7 @@ padding: var(--medium-size); font-size: var(--medium-size); font-family: var(--head-font); + border-radius: var(--small-size) var(--small-size) 0 0; } .main-nav ul { @@ -33,8 +36,8 @@ align-items: stretch; justify-content: space-evenly; width: 100%; - margin-left: var(--unit-size); - margin-right: var(--unit-size); + margin-left: 1%; + margin-right: 1%; padding: 0; } .main-nav li { @@ -57,50 +60,104 @@ transition: all 0.8s ease; } - +/* notices */ .notes { display: flex; flex-wrap: wrap; } -.notes div div { - flex: 1; -} .notes-wrap { display: flex; flex-wrap: wrap; font-size: var(--medium-size); - border-radius: 0 0 var(--unit-size) var(--unit-size); - background-color: var(--bg4); - padding: var(--unit-size); + border-radius: var(--small-size); + background-color: var(--bg3); + box-shadow: var(--shadow); + margin: 2%; + border: solid 2px var(--accent-low); } -.notes-wrap .timeline-nav { +.notes-wrap .timeline { order: 3; width: 100%; - box-shadow: var(--shadow); - border-radius: var(--unit-size); - margin-top: var(--unit-size); } -.notes-wrap .timeline-nav .notes > div { - background-color: var(--bg2); - padding: var(--unit-size); - margin: var(--unit-size) var(--unit-size) 0 var(--unit-size); - border-radius: var(--unit-size); +.notes-wrap .timeline .notes > div { + margin: 2% 2% 0 2%; + border-radius: var(--small-size); width: 100%; } -.notes-wrap .timeline-nav .notes > div:last-child { - margin: var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size); +.notes-wrap .timeline .notes > div:last-child { + margin: 2%; } .notes-wrap .main-nav { width: 100%; font-size: var(--unit-size); } -/* TODO FIX THIS */ -.notes-wrap .note-post { - order: 2; +.notice { + display: flex; + flex-wrap: wrap; + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +.notice-info { + background-color: var(--bg1); + box-sizing: border-box; + padding: 5px; + border-radius: var(--small-size) var(--small-size) 0 0; + display: flex; + align-items: center; + flex-grow: 1; + flex-shrink: 0; width: 100%; } +.notice-info a img { + width: calc(2 * var(--unit-size)); + height: auto; +} +.notice-content { + flex-grow: 1; + flex-shrink: 0; + padding: var(--small-size); + border-radius: 0 0 var(--small-size) var(--small-size); +} +/* posting form */ +.note-post { + width: calc(100% - (2 * var(--unit-size))); + border: solid 2px var(--accent-low); + border-radius: var(--small-size); +} +#form { + display: flex; + flex-wrap: wrap; +} +#form div { + flex-grow: 1; + flex-shrink: 0; + width: 100%; +} +#form div:nth-of-type(2) { + display: flex; + justify-content: right; +} + textarea#form_content { + background-color: var(--bg3); + border-radius: var(--small-size) var(--small-size) 0 0; + color: var(--fg); + height: calc(8 * var(--unit-size)); width: 100%; + box-sizing: border-box; + padding: var(--unit-size); + word-wrap: break-word; + resize: vertical; + font-size: var(--unit-size); +} +button#form_send { + color: var(--fg); + font-size: var(--small-size); + background-color: var(--bg1); + padding: var(--small-size) var(--main-size) var(--small-size) var(--main-size); + border: solid 2px var(--accent-low); + border-radius: var(--main-size); + margin: var(--small-size); } diff --git a/templates/base.html.twig b/templates/base.html.twig index 0dadd68f05..43b1ea37f7 100644 --- a/templates/base.html.twig +++ b/templates/base.html.twig @@ -69,7 +69,6 @@
-
diff --git a/templates/left/left.html.twig b/templates/left/left.html.twig index be8dc75cff..4c23364dfb 100644 --- a/templates/left/left.html.twig +++ b/templates/left/left.html.twig @@ -16,7 +16,6 @@
-
Your avatar. diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig index 05f29a940e..8e392285ce 100644 --- a/templates/network/public.html.twig +++ b/templates/network/public.html.twig @@ -8,9 +8,12 @@ {% block stylesheets %} {{ parent() }} - - - + + + {% endblock %} {% block header %} @@ -22,66 +25,72 @@ {% endblock %} {% block body %} -
-
- -
-
- +
{% if post_form is defined %} -
- {{ form(post_form) }} -
+
+ {{ form(post_form) }} +
{% endif %} -
-
- {% if notes is defined and notes is not empty %} - {% for note in notes %} -
- {{ note.getActorNickname() }}'s avatar - {{ note.getActorNickname() }} -
{{ note.getContent() }}
- {% set id = note.getId() - 1 %} - {% for attachment in attachments[id] %} -
- {{ attachment.getTitle() }} +
+ +
+ +
+
+ {% if notes is defined and notes is not empty %} + {% for note in notes %} +
+
+ + {{ note.getActorNickname() }}'s avatar + + {{ note.getActorNickname() }} +
+
+ {{ note.getContent() }} + {% set id = note.getId() - 1 %} + {% for attachment in attachments[id] %} +
+ {{ attachment.getTitle() }} +
+ {% endfor %} +
+
+
+
+ {% endfor %} + {% else %} +

{% trans %}No notes here.{% endtrans %}

+ {% endif %}
- {% endfor %}
- {% endfor %} - {% else %} - {{ 'No notes here.' | trans }} - {% endif %} -
+
-
- -
-
+
{% endblock body %} {% block javascripts %}{% endblock %}