[UI] Fixing timeline notice structure and CSS

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);

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);

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);
+    background-color: var(--bg4);
-    padding: 2%;
+    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);

templates/network/public.html.twig

@@ -59,11 +59,10 @@
           <div class="notes">
             {% if notes is defined %}
               {% for note in notes %}
-                <div>
+                  <div>
-                  {{ note.getContent() }}
+                    <b>{{ note.getActorNickname() }}</b>
-                  <br>
+                    <div>{{ note.getContent() }}</div>
-                  {{ note.getActorNickname() }}
+                  </div>
-                </div>
               {% endfor %}
             {% else %}
               {{ 'No notes here.' | trans }}