From 1b350d51fcd63bcf68642968e4001fc60de4dedd Mon Sep 17 00:00:00 2001 From: rainydaysavings Date: Wed, 19 Aug 2020 02:22:31 +0100 Subject: [PATCH] [UI] Fixing timeline notice structure and CSS --- public/assets/css/network/public.css | 25 ++++++++++++++----- public/assets/css/network/public_mid.css | 26 ++++++++++++++------ public/assets/css/network/public_small.css | 28 +++++++++++++++------- templates/network/public.html.twig | 9 ++++--- 4 files changed, 62 insertions(+), 26 deletions(-) diff --git a/public/assets/css/network/public.css b/public/assets/css/network/public.css index ad20551ef1..f5f7041014 100644 --- a/public/assets/css/network/public.css +++ b/public/assets/css/network/public.css @@ -57,12 +57,22 @@ transition: all 0.8s ease; } + + +.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(--bg3); + background-color: var(--bg4); padding: var(--unit-size); } .notes-wrap .timeline-nav { @@ -70,15 +80,18 @@ width: 100%; box-shadow: var(--shadow); border-radius: var(--unit-size); -} -.notes-wrap .timeline-nav .notes div { - background-color: var(--bg4); - box-shadow: var(--shadow); - padding: 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); 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 .main-nav { width: 100%; font-size: var(--unit-size); diff --git a/public/assets/css/network/public_mid.css b/public/assets/css/network/public_mid.css index 20ce9c3b7c..b5a5954e40 100644 --- a/public/assets/css/network/public_mid.css +++ b/public/assets/css/network/public_mid.css @@ -57,28 +57,40 @@ transition: all 0.8s ease; } + +.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(--bg3); + background-color: var(--bg4); padding: var(--unit-size); } .notes-wrap .timeline-nav { - order: 2; + order: 3; width: 100%; box-shadow: var(--shadow); border-radius: var(--unit-size); -} -.notes-wrap .timeline-nav .notices div { - background-color: var(--bg4); - box-shadow: var(--shadow); - padding: 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); 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 .main-nav { width: 100%; font-size: var(--unit-size); diff --git a/public/assets/css/network/public_small.css b/public/assets/css/network/public_small.css index bcbb9f443b..75ae996acd 100644 --- a/public/assets/css/network/public_small.css +++ b/public/assets/css/network/public_small.css @@ -57,28 +57,40 @@ transition: all 0.8s ease; } + +.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(--bg3); - padding: 2%; + background-color: var(--bg4); + padding: var(--unit-size); } .notes-wrap .timeline-nav { - order: 2; + order: 3; width: 100%; box-shadow: var(--shadow); border-radius: var(--unit-size); -} -.notes-wrap .timeline-nav .notices div { - background-color: var(--bg4); - box-shadow: var(--shadow); - padding: 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); 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 .main-nav { width: 100%; font-size: var(--unit-size); diff --git a/templates/network/public.html.twig b/templates/network/public.html.twig index 36460bfe21..b514e5db94 100644 --- a/templates/network/public.html.twig +++ b/templates/network/public.html.twig @@ -59,11 +59,10 @@
{% if notes is defined %} {% for note in notes %} -
- {{ note.getContent() }} -
- {{ note.getActorNickname() }} -
+
+ {{ note.getActorNickname() }} +
{{ note.getContent() }}
+
{% endfor %} {% else %} {{ 'No notes here.' | trans }}