[CSS] Follow up of #578 (#589)

core/static/core/header.scss

@@ -193,6 +193,7 @@
         @media (max-width: 1200px) {
           width: 100%;
           flex-direction: row-reverse;
+          justify-content: flex-end;
         }
 
         >a>img {
@@ -202,16 +203,32 @@
         }
 
         >.options {
+          display: flex;
+          flex-direction: column;
+          gap: 2px;
+
+          >.username {
+            display: flex;
+            justify-content: flex-end;
+            gap: 5px;
+
+            >a {
+              color: white;
+
+              &:hover {
+                color: #1a78b3;
+              }
+            }
+          }
+
+          >.links {
             width: 100%;
             display: flex;
             justify-content: flex-end;
-          flex-direction: column;
             gap: 5px;
 
             @media (max-width: 1200px) {
               justify-content: flex-start;
-            flex-direction: row;
-            gap: 15px;
             }
 
             >a {
@@ -232,6 +249,7 @@
             }
           }
         }
+      }
 
       >.notification {
         height: 100%;
@@ -288,6 +306,7 @@
             display: flex;
             flex-direction: column;
             gap: 10px;
+            min-height: 20px;
             max-height: 120px;
             overflow-y: auto;
 
@@ -314,6 +333,7 @@
             display: flex;
             justify-content: space-between;
             margin-top: 10px;
+            gap: 5px;
 
             >a {
               color: black;
@@ -324,6 +344,7 @@
               text-align: center;
               align-items: center;
               border-radius: 5px;
+              background-color: #ddd;
 
               &:hover {
                 background-color: rgba(0, 0, 0, .2);

core/static/user/user_tools.scss

@@ -8,6 +8,7 @@ main {
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
+  margin-top: 20px;
   gap: 10px;
 
   > div {
@@ -25,6 +26,55 @@ main {
       display: flex;
       flex-direction: column;
       gap: 10px;
+
+      > .rows {
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+
+        > span {
+          margin-top: 5px;
+        }
+      
+        > span > span,
+        > span {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+          gap: 5px;
+          width: 100%;
+      
+          >.button {
+            font-size: smaller;
+            width: 100%;
+            margin: 0;
+          }
+
+          > span {
+            display: flex;
+            flex-direction: row;
+            width: 100%;
+
+            > .button {
+              width: 100%;
+            }
+          }
+        }
+
+        > span > span {
+          flex-wrap: nowrap;
+        }
+      }
+
+      > .counter {
+        background-color: rgba(0, 0, 0, .05);
+        border-radius: 5px;
+        padding: 10px;
+
+        @media (max-width: 550px) {
+          background-color: rgba(0, 0, 0, .1);
+        }
+      }
     }
   }
 

core/templates/core/base.jinja

@@ -89,9 +89,14 @@
                             <div class="right">
                                 <div class="user">
                                     <div class="options">
+                                        <div class="username">
+                                            <a href="{{ url('core:user_profile', user_id=user.id) }}">{{ user.get_display_name() }}</a>
+                                        </div>
+                                        <div class="links">
                                             <a href="{{ url('core:user_tools') }}">{% trans %}Tools{% endtrans %}</a>
                                             <a href="{{ url('core:logout') }}">{% trans %}Logout{% endtrans %}</a>
                                         </div>
+                                    </div>
                                     <a href="{{ url('core:user_profile', user_id=user.id) }}">
                                          {% if user.profile_pict %}
                                             <img src="{{ user.profile_pict.get_download_url() }}" alt="{% trans %}Profile{% endtrans %}" title="{% trans %}Profile{% endtrans %}" />
@@ -284,7 +289,9 @@
                 {% endblock %}
                 <br>
                 <code class="version">
+                    {% cache 1000 "sith_version" %}
                         {% trans %}Sith version:{% endtrans %}&nbsp;{{ get_sith().version }}
+                    {% endcache %}
                 </code>
             </footer>
         {% endif %}

core/templates/core/user_clubs.jinja

@@ -16,6 +16,8 @@
 	        <td>{% trans %}Role{% endtrans %}</td>
 	        <td>{% trans %}Description{% endtrans %}</td>
 	        <td>{% trans %}Since{% endtrans %}</td>
+            <td></td>
+            <td></td>
     	</tr>
     </thead>
     <tbody>

core/templates/core/user_tools.jinja

@@ -54,19 +54,29 @@
                         <li><a href="{{ url('counter:invoices_call') }}">{% trans %}Invoices call{% endtrans %}</a></li>
                         <li><a href="{{ url('counter:eticket_list') }}">{% trans %}Etickets{% endtrans %}</a></li>
                     {% endif %}
+                </ul>
+                <ul>
                     {% for b in settings.SITH_COUNTER_BARS %}
                         {% if user.is_in_group(b[1]+" admin") %}
-                            <li>
-                                <a href="{{ url('counter:details', counter_id=b[0]) }}">{{ b[1] }}</a> -
-                                <a href="{{ url('counter:admin', counter_id=b[0]) }}">{% trans %}Edit{% endtrans %}</a> -
-                                <a href="{{ url('counter:stats', counter_id=b[0]) }}">{% trans %}Stats{% endtrans %}</a> -
                             {% set c = Counter.objects.filter(id=b[0]).first() %}
+
+                            <li class="rows counter">
+                                <a href="{{ url('counter:details', counter_id=b[0]) }}">{{ b[1] }}</a>
+
+                                <span>
+                                    <span>
+                                        <a class="button" href="{{ url('counter:admin', counter_id=b[0]) }}">{% trans %}Edit{% endtrans %}</a>
+                                        <a class="button" href="{{ url('counter:stats', counter_id=b[0]) }}">{% trans %}Stats{% endtrans %}</a>
                                         {% if c.stock %}
-                                    <a href="{{ url('stock:items_list', stock_id=c.stock.id)}}">Stock</a> -
+                                        <a class="button" href="{{ url('stock:items_list', stock_id=c.stock.id)}}">Stock</a>
-                                    <a href="{{ url('stock:shoppinglist_list', stock_id=c.stock.id)}}">{% trans %}Shopping lists{% endtrans %}</a>
-                                {% else %}
-                                    <a href="{{url('stock:new', counter_id=c.id)}}">{% trans %}Create new stock{% endtrans%}</a>
                                         {% endif %}
+                                    </span>
+                                    {% if c.stock %}
+                                        <a class="button" href="{{ url('stock:shoppinglist_list', stock_id=c.stock.id)}}">{% trans %}Shopping lists{% endtrans %}</a>
+                                    {% else %}
+                                        <a class="button" href="{{url('stock:new', counter_id=c.id)}}">{% trans %}Create new stock{% endtrans%}</a>
+                                    {% endif %}
+                                </span>
                             </li>
                         {% endif %}
                     {% endfor %}
@@ -89,7 +99,7 @@
 
                     {% for m in user.memberships.filter(end_date=None).filter(role__gte=7).all() -%}
                         {%- for b in m.club.bank_accounts.all() %}
-                            <li>
+                            <li class="rows">
                                 <strong>{% trans %}Bank account: {% endtrans %}</strong>
                                 <a href="{{ url('accounting:bank_details', b_account_id=b.id) }}">{{ b }}</a>
                             </li>
@@ -97,7 +107,7 @@
 
                         {% if m.club.club_account.exists() -%}
                             {% for ca in m.club.club_account.all() %}
-                                <li>
+                                <li class="rows">
                                     <strong>{% trans %}Club account: {% endtrans %}</strong>
                                     <a href="{{ url('accounting:club_details', c_account_id=ca.id) }}">{{ ca }}</a>
                                 </li>