From 1b350d51fcd63bcf68642968e4001fc60de4dedd Mon Sep 17 00:00:00 2001
From: rainydaysavings <eliseuamaro@pm.me>
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 @@
           <div class="notes">
             {% if notes is defined %}
               {% for note in notes %}
-                <div>
-                  {{ note.getContent() }}
-                  <br>
-                  {{ note.getActorNickname() }}
-                </div>
+                  <div>
+                    <b>{{ note.getActorNickname() }}</b>
+                    <div>{{ note.getContent() }}</div>
+                  </div>
               {% endfor %}
             {% else %}
               {{ 'No notes here.' | trans }}