[UI] Finalizing timeline structure and CSS

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 {

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 {

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

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 {

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

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);
+    margin-top: var(--unit-size);
-    border-radius: 0 0 var(--unit-size) 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);
+    border-radius: var(--small-size);
-    background-color: var(--bg4);
+    background-color: var(--bg3);
-    padding: var(--unit-size);
+    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 {
+.notes-wrap .timeline .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);
+    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 */
+.notice {
-.notes-wrap .note-post {
+    display: flex;
-    order: 2;
+    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);
+}

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-left: 1%;
-    margin-right: var(--unit-size);
+    margin-right: 1%;
     margin-bottom: var(--unit-size);
 }
 .content .main {
     width: 100%;
-    margin-left: var(--unit-size);
+    margin-left: 1%;
-    margin-right: var(--unit-size);
+    margin-right: 1%;
-    box-shadow: var(--shadow);
+    margin-top: var(--unit-size);
-    border-radius: 0 0 var(--unit-size) 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-left: 1%;
-    margin-right: calc(2 * var(--side-margin));
+    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);
+    border-radius: var(--small-size);
-    background-color: var(--bg4);
+    background-color: var(--bg3);
-    padding: var(--unit-size);
+    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 {
+.notes-wrap .timeline .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);
+    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 */
+.notice {
-.notes-wrap .note-post {
+    display: flex;
-    order: 2;
+    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);
 }

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-left: 1%;
-    margin-right: 2%;
+    margin-right: 1%;
-    margin-bottom: 2%;
+    margin-bottom: var(--unit-size);
 }
 .content .main {
     width: 100%;
-    margin-left: 0;
+    margin-left: 1%;
-    margin-right: 0;
+    margin-right: 1%;
-    box-shadow: var(--shadow);
+    margin-top: var(--unit-size);
-    border-radius: 0 0 var(--unit-size) 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-left: 1%;
-    margin-right: var(--unit-size);
+    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);
+    border-radius: var(--small-size);
-    background-color: var(--bg4);
+    background-color: var(--bg3);
-    padding: var(--unit-size);
+    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 {
+.notes-wrap .timeline .notes > div {
-    background-color: var(--bg2);
+    margin: 2% 2% 0 2%;
-    padding: var(--unit-size);
+    border-radius: var(--small-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 {
+.notes-wrap .timeline .notes > div:last-child {
-    margin:  var(--unit-size) var(--unit-size) var(--unit-size) var(--unit-size);
+    margin:  2%;
 }
 .notes-wrap .main-nav {
     width: 100%;
     font-size: var(--unit-size);
 }
 
-/* TODO FIX THIS */
+.notice {
-.notes-wrap .note-post {
+    display: flex;
-    order: 2;
+    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);
 }

templates/base.html.twig

@@ -69,7 +69,6 @@
                                           <label for="toggle-right" id='right-panel'></label>
                                     </div>
                                     <div class='rss'>
-                                          <hr>
                                           <div>
                                           </div>
                                     </div>

templates/left/left.html.twig

@@ -16,7 +16,6 @@
         </div>
         <div class='navbar'>
           <div class="left-nav">
-            <hr>
               <div class='profile'>
                 <a href="{{ path('settings_avatar') }}">
                   <img src='{{ user_avatar }}' alt="Your avatar." class="icon icon-avatar">

templates/network/public.html.twig

@@ -8,9 +8,12 @@
 
 {% block stylesheets %}
     {{ parent() }}
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}" media="screen and (min-width: 1300px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public.css') }}"
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}" media="screen and (max-width: 1300px)">
+          media="screen and (min-width: 1300px)">
-    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}" media="screen and (max-width: 750px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_mid.css') }}"
+          media="screen and (max-width: 1300px)">
+    <link rel='stylesheet' type='text/css' href="{{ asset('assets/css/network/public_small.css') }}"
+          media="screen and (max-width: 750px)">
 {% endblock %}
 
 {% block header %}
@@ -22,66 +25,72 @@
 {% endblock %}
 
 {% block body %}
-<div class="content">
+    <div class="content">
-  <div class="main">
-    <nav class='main-nav'>
-      <ul>
-        <li>
-          <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
-        </li>
-        <li>
-          <a href="#">Groups</a>
-        </li>
-        <li>
-          <a href="#">People</a>
-        </li>
-      </ul>
-    </nav>
-    <hr>
-      <div class="notes-wrap">
-        <nav class='main-nav'>
-          <ul>
-            <li>
-              <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
-            </li>
-            <li>
-              <a href="#">Home</a>
-            </li>
-            <li>
-              <a href="#">Network</a>
-            </li>
-          </ul>
-        </nav>
         {% if post_form is defined %}
-          <div class="note-post">
+            <div class="note-post">
-            {{ form(post_form) }}
+                {{ form(post_form) }}
-          </div>
+            </div>
         {% endif %}
-        <div class="timeline-nav">
+        <div class="main">
-          <div class="notes">
+            <nav class='main-nav'>
-            {% if notes is defined and notes is not empty %}
+                <ul>
-              {% for note in notes %}
+                    <li>
-                <div>
+                        <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Timeline</a>
-                  <img src="{{ note.getAvatarUrl() }}" alt="{{ note.getActorNickname() }}'s avatar" width="64px">
+                    </li>
-                  <b>{{ note.getActorNickname() }}</b>
+                    <li>
-                  <div>{{ note.getContent() }}</div>
+                        <a href="#">Groups</a>
-                  {% set id = note.getId() - 1 %}
+                    </li>
-                  {% for attachment in attachments[id] %}
+                    <li>
-                    <div>
+                        <a href="#">People</a>
-                      <i> {{ attachment.getTitle() }} </i>
+                    </li>
+                </ul>
+            </nav>
+            <div class="notes-wrap">
+                <nav class='main-nav'>
+                    <ul>
+                        <li>
+                            <a href="{{ path('main_all') }}" class='hover-effect {{ active('main_all') }}'>Public</a>
+                        </li>
+                        <li>
+                            <a href="#">Home</a>
+                        </li>
+                        <li>
+                            <a href="#">Network</a>
+                        </li>
+                    </ul>
+                </nav>
+                <div class="timeline">
+                    <div class="notes">
+                        {% if notes is defined and notes is not empty %}
+                            {% for note in notes %}
+                                <div class="notice">
+                                    <div class="notice-info">
+                                        <a href="{{ path('settings_avatar') }}">
+                                            <img src="{{ note.getAvatarUrl() }}" alt="{{ note.getActorNickname() }}'s avatar">
+                                        </a>
+                                        <b>{{ note.getActorNickname() }}</b>
+                                    </div>
+                                    <div class="notice-content">
+                                        {{ note.getContent() }}
+                                        {% set id = note.getId() - 1 %}
+                                        {% for attachment in attachments[id] %}
+                                            <div>
+                                                <i> {{ attachment.getTitle() }} </i>
+                                            </div>
+                                        {% endfor %}
+                                    </div>
+                                    <div class="notice-actions">
+                                    </div>
+                                </div>
+                            {% endfor %}
+                        {% else %}
+                            <h1>{% trans %}No notes here.{% endtrans %}</h1>
+                        {% endif %}
                     </div>
-                  {% endfor %}
                 </div>
-              {% endfor %}
+            </div>
-            {% else %}
-              {{ 'No notes here.' | trans }}
-            {% endif %}
-          </div>
         </div>
-      </div>
+    </div>
-    </hr>
-  </div>
-</div>
 {% endblock body %}
 
 {% block javascripts %}{% endblock %}