core: improve notification box

Signed-off-by: Skia <skia@libskia.so>

core/static/core/js/script.js

@@ -41,5 +41,5 @@ $( function() {
 } );
 
 function display_notif() {
-    $('#notif').toggle();
+    $('#header_notif').toggle().parent().toggleClass("white");
 }

core/static/core/style.scss

@@ -134,10 +134,18 @@ header {
     }
 
     #header_user_links {
+      display: flex;
       width: 120ch;
       flex: initial;
       text-align: right;
-      margin: 1.2em 0em;
+      margin: 0em;
+      div {
+        display: inline;
+        padding: 1.2em 0em;
+        &:first-child {
+          flex: auto;
+        }
+      }
       a {
         text-decoration: none;
         margin: 0em 1em;
@@ -146,6 +154,49 @@ header {
           color: $secondary-color;
         }
       }
+      .white {
+        background: $white-color;
+      }
+      #header_notif {
+        display: none;
+        position: absolute;
+        max-height: 20em;
+        width: 22em;
+        overflow: auto;
+        list-style-type: none;
+        box-shadow: black 1px 1px 5px;
+        background: white;
+        text-align: left;
+        font-size: 80%;
+        margin: 1.5em 0em 0em -14em;
+        .header_notif_date {
+          font-weight: bold;
+        }
+        .header_notif_time {
+          color: grey;
+        }
+        li {
+          padding: 0.2em;
+          &:hover {
+            background: #bcc;
+          }
+        }
+        li:last-child {
+          text-align: center;
+          a {
+            color: $primary-dark-color;
+            &:hover {
+              color: $primary-light-color;
+            }
+          }
+        }
+        a {
+          margin: 0em;
+          &:hover {
+            color: $primary-dark-color;
+          }
+        }
+      }
     }
   }
 }
@@ -156,18 +207,6 @@ header {
   padding: 0.3em 1%;
 }
 
-#notif {
-  display: none;
-  position: absolute;
-  background: lightgrey;
-  text-align: center;
-  overflow: scroll;
-  max-height: 400px;
-  li:hover {
-    background: #bcc;
-  }
-}
-
 #info_boxes {
   display: flex;
   width: 90%;
@@ -261,32 +300,32 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 160%;
-  margin-left: 50px;
+  margin-left: 0px;
 }
 
 h2 {
   font-size: 150%;
-  margin-left: 40px;
+  margin-left: 10px;
 }
 
 h3 {
   font-size: 140%;
-  margin-left: 30px;
+  margin-left: 20px;
 }
 
 h4 {
   font-size: 130%;
-  margin-left: 20px;
+  margin-left: 30px;
 }
 
 h5 {
   font-size: 120%;
-  margin-left: 10px;
+  margin-left: 40px;
 }
 
 h6 {
   font-size: 110%;
-  margin-left: 0px;
+  margin-left: 50px;
 }
 
 p, pre {

core/templates/core/base.jinja

@@ -72,22 +72,47 @@
                     <input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
                 </form>
                 <div id="header_user_links">
+                    <div>
                       <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
+                    </div>
+                    <div>
                       <a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a>
-                    <ul id="notif">
+                      <ul id="header_notif">
                           {% for n in user.notifications.filter(viewed=False).order_by('-id') %}
-                        <li><a href="{{ url("core:notification", notif_id=n.id) }}">
+                          <li>
-                                <span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{
+                              <a href="{{ url("core:notification", notif_id=n.id) }}">
-                                    n.date|localtime|time(DATETIME_FORMAT) }}</span><br>
+                                  <span class="header_notif_date">
-                                {{ n }}</a></li>
+                                      {{ n.date|localtime|date(DATE_FORMAT) }}
+                                  </span>
+                                  <span class="header_notif_time">
+                                      {{ n.date|localtime|time(DATETIME_FORMAT) }}
+                                  </span>
+                                  <br>
+                                  {{ n }}
+                              </a>
+                          </li>
                           {% endfor %}
-                        <li><a href="{{ url('core:notification_list') }}">{% trans %}View more{% endtrans %}</a>
+                          <li>
-                            <a href="{{ url('core:notification_list') }}?see_all">{% trans %}Mark all as read{% endtrans %}</a></li>
+                              <strong>
+                              <a href="{{ url('core:notification_list') }}">
+                                  {% trans %}View more{% endtrans %}
+                              </a>
+                              <br />
+                              <a href="{{ url('core:notification_list') }}?see_all">
+                                  {% trans %}Mark all as read{% endtrans %}
+                              </a>
+                              </strong>
+                          </li>
                       </ul>
+                    </div>
+                    <div>
                       <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
+                    </div>
+                    <div>
                       <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
                     </div>
                 </div>
+            </div>
             {% endif %}
         </header>
 

core/templates/core/user_tools.jinja

@@ -27,7 +27,6 @@
 <h4>{% trans %}Counters{% endtrans %}</h4>
 <ul>
     {% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %}
-    <h5>{% trans %}General management{% endtrans %}</h5>
     <li><a href="{{ url('counter:admin_list') }}">{% trans %}General counters management{% endtrans %}</a></li>
     <li><a href="{{ url('counter:product_list') }}">{% trans %}Products management{% endtrans %}</a></li>
     <li><a href="{{ url('counter:producttype_list') }}">{% trans %}Product types management{% endtrans %}</a></li>