From 5c709a54161413c743ce79def07565babc0bdf4f Mon Sep 17 00:00:00 2001
From: Skia <skia@libskia.so>
Date: Fri, 1 Sep 2017 18:31:48 +0200
Subject: [PATCH] core: great rework of the header bar

Signed-off-by: Skia <skia@libskia.so>
---
 core/static/core/style.scss    | 177 +++++++++++++++++++--------------
 core/templates/core/base.jinja | 149 +++++++++++++++------------
 2 files changed, 190 insertions(+), 136 deletions(-)

diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index ca5997e3..8234e5de 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -66,42 +66,87 @@ a {
 
 /*--------------------------------HEADER-------------------------------*/
 
-#logo {
-  margin-left: 5%;
-  display: inline-block;
-  width: 185px;
-  height: 100px;
+#header_language_chooser {
+  position: absolute;
+  top: 1em;
+  width: 5%;
+  text-align: center;
+  input {
+    display: block;
+    width: 100%;
+    padding: 0px;
+    margin: 0px;
+  }
+  form {
+    display: block;
+  }
 }
 
 header {
-  display: block;
-  position: absolute;
-  top: 0px;
-  right: 2%;
-  background-color: $secondary-light-color;
-  margin: 0 10px;
-  padding: 0 10px;
-  border-radius: 0 0 10px 10px;
-  ul {
+  width: 90%;
+  margin: 0 auto;
+  display: flex;
+
+  #header_logo {
     display: inline-block;
-    list-style-type: none;
-    margin: 0px;
-    padding-right: 3px;
-    vertical-align: middle;
-  }
-  a {
-    display: inline-block;
-    color: inherit;
-    text-decoration: none;
-    padding: 1em;
-    &:hover {
-      color: $primary-dark-color;
+    flex: none;
+    background-size: 100% 100%;
+    padding: 0.2em;
+    a {
+      display: inline-block;
+      margin: 0px;
+      width: 100%;
+      height: 100%;
     }
   }
-  form {
-    display: inline-block;
-    padding: 1em;
-    width: 150px;
+
+  #header_connect_links {
+    margin: 0.6em 0.6em 0em auto;
+    form {
+      display: inline;
+      width: 100%;
+      label {
+        display: inline;
+      }
+    }
+    a {
+      display: button;
+    }
+  }
+
+  #header_bar {
+    background-color: $secondary-light-color;
+    display: flex;
+    flex: auto;
+    width: 80%;
+
+    #header_bars_infos {
+      width: 35ch;
+      flex: initial;
+      list-style-type: none;
+      margin: 0.2em 0.2em;
+    }
+
+    #header_search {
+      display: inline-block;
+      flex: auto;
+      margin: 0.8em 0em;
+    }
+
+    #header_user_links {
+      width: 120ch;
+      flex: initial;
+      text-align: right;
+      margin: 1.2em 0em;
+      a {
+        text-decoration: none;
+        margin: 0em 1em;
+        color: $black-color;
+        &:hover {
+          color: $secondary-color;
+        }
+      }
+    }
   }
 }
 
@@ -111,18 +156,6 @@ header {
   padding: 0.3em 1%;
 }
 
-#language_chooser {
-  position: absolute;
-  text-align: center;
-  left: 5px;
-  top: 5px;
-  input {
-    margin: 2px;
-    width: 3em;
-    height: 2em;
-  }
-}
-
 #notif {
   display: none;
   position: absolute;
@@ -135,41 +168,35 @@ header {
   }
 }
 
-#alert_box p, #info_box p {
-  margin: 0px;
-  padding: 0px;
+#info_boxes {
+  display: flex;
+  width: 90%;
+  margin: 0 auto;
+  p {
+    margin: 0px;
+    padding: 0px;
+  }
+  #alert_box, #info_box {
+    font-size: smaller;
+    display: inline-block;
+    flex: auto;
+    vertical-align: top;
+    padding: 2px;
+    margin: 0.2em 1.5%;
+    min-width: 10%;
+    max-width: 46%;
+    min-height: 20px;
+  }
+  #info_box {
+    border: solid 1px $primary-neutral-light-color;
+    background: $white-color;
+  }
+  #alert_box {
+    border: solid 1px grey;
+    background: gold;
+  }
 }
 
-#alert_box {
-  font-size: smaller;
-  display: inline-block;
-  border: solid 1px grey;
-  vertical-align: top;
-  padding: 2px;
-  margin: 4px;
-  margin-top: 60px;
-  min-width: 10%;
-  max-width: 30%;
-  min-height: 20px;
-}
-
-#info_box {
-  font-size: smaller;
-  display: inline-block;
-  border: solid 1px $primary-neutral-light-color;
-  vertical-align: top;
-  padding: 2px;
-  margin: 4px;
-  margin-top: 60px;
-  min-width: 10%;
-  max-width: 30%;
-  min-height: 20px;
-  background: $white-color;
-}
-
-#alert_box {
-  background: gold;
-}
 
 /*---------------------------------NAV---------------------------------*/
 
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 31a4d563..0ec3be80 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -14,69 +14,11 @@
     </head>
 
     <body>
+
+        <!-- BEGIN HEADER -->
         {% block header %}
         {% if not popup %}
-        <div id="logo" style="background-image: url('{{ static('core/img/logo.png') }}');">
-            <a style="display: inline-block; width: 100%; height: 100%;" href="{{ url('core:index') }}"></a>
-        </div>
-        {% set sith = get_sith() %}
-        {% if sith.alert_msg %}
-        <div id="alert_box">
-            {{ sith.alert_msg|markdown }}
-        </div>
-        {% endif %}
-        {% if sith.info_msg %}
-        <div id="info_box">
-            {{ sith.info_msg|markdown }}
-        </div>
-        {% endif %}
-        <header>
-            {% if not user.is_authenticated() %}
-            <a href="{{ url('core:login') }}">{% trans %}Login{% endtrans %}</a>
-            <a href="{{ url('core:register') }}">{% trans %}Register{% endtrans %}</a>
-            {% else %}
-            <ul>
-            {% for bar in Counter.objects.filter(type="BAR").all() %}
-                <li>
-                <a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
-                {% if bar.is_inactive(): %}
-                    <span style="color: orange">&#x3f;</span>
-                {% elif bar.is_open(): %}
-                    <span style="color: green">&#x2713;</span>
-                {% else %}
-                    <span style="color: red">&#10007;</span>
-                {% endif %}
-                    {{ bar }}
-                </a>
-                </li>
-            {% endfor %}
-            </ul>
-            <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
-            <a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a>
-            <ul id="notif">
-                {% for n in user.notifications.filter(viewed=False).order_by('-id') %}
-                <li><a href="{{ url("core:notification", notif_id=n.id) }}">
-                        <span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{
-                            n.date|localtime|time(DATETIME_FORMAT) }}</span><br>
-                        {{ n }}</a></li>
-                {% endfor %}
-                <li><a href="{{ url('core:notification_list') }}">{% trans %}View more{% endtrans %}</a>
-                    <a href="{{ url('core:notification_list') }}?see_all">{% trans %}Mark all as read{% endtrans %}</a></li>
-            </ul>
-            <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
-            <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
-            <form action="{{ url('core:search') }}" method="GET">
-                <input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
-                <input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
-            </form>
-            {% endif %}
-        </header>
-        {% else %}
-        <div id="popupheader">{{ user.get_display_name() }}</div>
-        {% endif %}
-        {% endblock %}
-
-        <div id="language_chooser">
+        <div id="header_language_chooser">
             {% for language in LANGUAGES %}
             <form action="{{ url('set_language') }}" method="post">{% csrf_token %}
                 <input name="next" value="{{ request.path }}" type="hidden" />
@@ -86,6 +28,91 @@
             {% endfor %}
         </div>
 
+        <header>
+            {% if not user.is_authenticated() %}
+            <div id="header_logo" style="background-image: url('{{
+                static('core/img/logo.png') }}'); width: 185px; height: 100px;">
+                <a href="{{ url('core:index') }}"></a>
+            </div>
+            <div id="header_connect_links">
+                <form method="post" action="{{ url('core:login') }}">
+                {% csrf_token %}
+                <label for="id_username">{% trans %}Username{% endtrans %}</label>
+                    <input id="id_username" maxlength="254" name="username" type="text">
+                <label for="id_password">{% trans %}Password{% endtrans %}</label>
+                    <input type="password" name="password" id="id_password">
+                <input type="submit" value="{% trans %}Login{% endtrans %}">
+                </form>
+                <a href="{{ url('core:register') }}"><button type="button">{% trans %}Register{% endtrans %}</button></a>
+            </div>
+            {% else %}
+            <div id="header_logo" style="background-image: url('{{
+                static('core/img/logo.png') }}'); width: 92px; height: 50px;">
+                <a href="{{ url('core:index') }}"></a>
+            </div>
+            <div id="header_bar">
+                <ul id="header_bars_infos">
+                {% for bar in Counter.objects.filter(type="BAR").all() %}
+                    <li>
+                    <a href="{{ url('counter:activity', counter_id=bar.id) }}" style="padding: 0px">
+                    {% if bar.is_inactive(): %}
+                        <span style="color: orange">&#x3f;</span>
+                    {% elif bar.is_open(): %}
+                        <span style="color: green">&#x2713;</span>
+                    {% else %}
+                        <span style="color: red">&#10007;</span>
+                    {% endif %}
+                        {{ bar }}
+                    </a>
+                    </li>
+                {% endfor %}
+                </ul>
+                <form action="{{ url('core:search') }}" method="GET" id="header_search">
+                    <input type="text" placeholder="{% trans %}Search{% endtrans %}" name="query" id="search" />
+                    <input type="submit" value="{% trans %}Search{% endtrans %}" style="display: none;" />
+                </form>
+                <div id="header_user_links">
+                    <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
+                    <a href="#" onclick="display_notif()">&#x1f514; ({{ user.notifications.filter(viewed=False).count() }})</a>
+                    <ul id="notif">
+                        {% for n in user.notifications.filter(viewed=False).order_by('-id') %}
+                        <li><a href="{{ url("core:notification", notif_id=n.id) }}">
+                                <span style="font-size: small; ">{{ n.date|localtime|date(DATE_FORMAT) }} {{
+                                    n.date|localtime|time(DATETIME_FORMAT) }}</span><br>
+                                {{ n }}</a></li>
+                        {% endfor %}
+                        <li><a href="{{ url('core:notification_list') }}">{% trans %}View more{% endtrans %}</a>
+                            <a href="{{ url('core:notification_list') }}?see_all">{% trans %}Mark all as read{% endtrans %}</a></li>
+                    </ul>
+                    <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
+                    <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
+                </div>
+            </div>
+            {% endif %}
+        </header>
+
+        <div id="info_boxes">
+            {% set sith = get_sith() %}
+            {% if sith.alert_msg %}
+            <div id="alert_box">
+                {{ sith.alert_msg|markdown }}
+            </div>
+            {% endif %}
+            {% if sith.info_msg %}
+            <div id="info_box">
+                {{ sith.info_msg|markdown }}
+            </div>
+            {% endif %}
+        </div>
+
+        {% else %}{# if not popup #}
+        <div id="popupheader">{{ user.get_display_name() }}</div>
+        {% endif %}
+
+
+        {% endblock %}
+        <!-- END HEADER -->
+
         {% block nav %}
         {% if not popup %}
         <nav>