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

core/static/core/header.scss

@@ -23,11 +23,11 @@
     flex-direction: row;
     gap: 10px;
 
-    > a {
+    >a {
       color: #fff;
     }
 
-    &:hover > a {
+    &:hover>a {
       color: #1a78b3;
     }
 
@@ -57,11 +57,11 @@
       justify-content: center;
       align-items: flex-start;
 
-      > span:first-child {
+      >span:first-child {
         font-size: 1.43em;
       }
 
-      > span:last-child {
+      >span:last-child {
         font-size: .7em;
       }
     }
@@ -80,12 +80,12 @@
       flex-direction: row;
     }
 
-    > form {
+    >form {
       margin: 0;
       box-sizing: border-box;
       position: relative;
 
-      > input[type=submit] {
+      >input[type=submit] {
         border-radius: 0;
         margin: 0;
         box-sizing: border-box;
@@ -115,7 +115,7 @@
       justify-content: center;
     }
 
-    > .button {
+    >.button {
       box-sizing: border-box;
       height: 35px;
       background-color: transparent;
@@ -137,7 +137,7 @@
     }
   }
 
-  &-disconnected ~ &-lang {
+  &-disconnected~&-lang {
     @media (max-width: 662px) {
       flex-direction: row;
       width: 100%;
@@ -165,8 +165,8 @@
       padding: 0 10px;
     }
 
-    > .right,
+    >.right,
-    > .left {
+    >.left {
       box-sizing: border-box;
       display: flex;
       flex-direction: row;
@@ -179,11 +179,11 @@
       }
     }
 
-    > .right {
+    >.right {
       flex: 1;
       justify-content: flex-end;
 
-      > .user {
+      >.user {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -193,28 +193,45 @@
         @media (max-width: 1200px) {
           width: 100%;
           flex-direction: row-reverse;
+          justify-content: flex-end;
         }
 
-        > a > img {
+        >a>img {
           width: 40px;
           height: 40px;
           border-radius: 50%;
         }
 
-        > .options {
+        >.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 {
+            >a {
               text-align: right;
               color: white;
 
@@ -232,8 +249,9 @@
             }
           }
         }
+      }
 
-      > .notification {
+      >.notification {
         height: 100%;
         width: 55px;
         display: flex;
@@ -241,7 +259,7 @@
         align-items: center;
         position: relative;
 
-        > a {
+        >a {
           color: white;
           position: relative;
           font-size: 25px;
@@ -250,7 +268,7 @@
             color: #1a78b3;
           }
 
-          > span {
+          >span {
             color: white;
             font-size: 14px;
             display: flex;
@@ -267,7 +285,7 @@
           }
         }
 
-        > #header_notif {
+        >#header_notif {
           box-sizing: border-box;
           display: none;
           position: absolute;
@@ -282,17 +300,18 @@
           border-radius: 10px;
           box-shadow: 3px 3px 3px 0 #767676;
 
-          > ul {
+          >ul {
             list-style-type: none;
             margin: 0;
             display: flex;
             flex-direction: column;
             gap: 10px;
+            min-height: 20px;
             max-height: 120px;
             overflow-y: auto;
 
-            > li {
+            >li {
-              > a {
+              >a {
                 .datetime {
                   display: flex;
                   justify-content: flex-start;
@@ -314,8 +333,9 @@
             display: flex;
             justify-content: space-between;
             margin-top: 10px;
+            gap: 5px;
 
-            > a {
+            >a {
               color: black;
               padding: 5px;
               width: 50%;
@@ -324,6 +344,7 @@
               text-align: center;
               align-items: center;
               border-radius: 5px;
+              background-color: #ddd;
 
               &:hover {
                 background-color: rgba(0, 0, 0, .2);
@@ -334,7 +355,7 @@
       }
     }
 
-    > .left {
+    >.left {
       gap: 10px;
       display: flex;
 
@@ -346,7 +367,7 @@
         flex-direction: column-reverse;
       }
 
-      > form {
+      >form {
         margin: 0;
         width: 200px;
 
@@ -354,7 +375,7 @@
           width: 100%;
         }
 
-        > input[type=text] {
+        >input[type=text] {
           box-sizing: border-box;
           max-width: 100%;
           width: 100%;
@@ -370,7 +391,7 @@
     }
   }
 
-  &-connected ~ &-lang {
+  &-connected~&-lang {
     @media (max-width: 1200px) {
       flex-direction: row;
       width: 100%;
@@ -390,7 +411,7 @@
     gap: 20px;
   }
 
-  > li > a {
+  >li>a {
     display: flex;
     color: white;
 
@@ -398,11 +419,11 @@
       color: #1a78b3;
     }
 
-    > span {
+    >span {
       margin-left: 10px;
     }
 
-    > i {
+    >i {
       width: 16px;
       display: flex;
       justify-content: center;

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 {
@@ -15,16 +16,65 @@ main {
     background-color: rgba(0, 0, 0, .05);
     width: 210px;
 
-    >h4 {
+    > h4 {
       text-align: center;
     }
 
-    >ul {
+    > ul {
       list-style-type: none;
       margin: 20px 10px;
       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>