Rework of the tools page

core/static/user/user_tools.scss

@@ -0,0 +1,42 @@
+main {
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+
+
+  >div {
+    padding: 10px;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, .05);
+    width: 210px;
+
+    >h4 {
+      text-align: center;
+    }
+
+    >ul {
+      list-style-type: none;
+      margin: 20px 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+  }
+
+  @media (max-width: 550px) {
+    >div {
+      width: 100%;
+      background-color: transparent;
+
+      >h4 {
+        text-align: left;
+      }
+    }
+  }
+}

core/templates/core/user_tools.jinja

@@ -2,6 +2,7 @@
 
 {%- block additional_css -%}
 <link rel="stylesheet" href="{{ scss('core/override.scss') }}">
+<link rel="stylesheet" href="{{ scss('user/user_tools.scss') }}">
 {%- endblock -%}
 
 {% block title %}
@@ -9,17 +10,19 @@
 {% endblock %}
 
 {% block content %}
+<main>
     <h3>{% trans %}User Tools{% endtrans %}</h3>
 
+    <div class="container">
         {% if user.can_create_subscription or user.is_root or user.is_board_member %}
+            <div>
                 <h4>{% trans %}Sith management{% endtrans %}</h4>
                 <ul>
                     {% if user.is_root %}
                     <li><a href="{{ url('core:group_list') }}">{% trans %}Groups{% endtrans %}</a></li>
                     <li><a href="{{ url('rootplace:merge') }}">{% trans %}Merge users{% endtrans %}</a></li>
                     <li><a href="{{ url('rootplace:operation_logs') }}">{% trans %}Operation logs{% endtrans %}</a></li>
-    <li><a href="{{ url('rootplace:delete_forum_messages') }}">{% trans %}Delete user's forum messages{% endtrans %}</a>
+                    <li><a href="{{ url('rootplace:delete_forum_messages') }}">{% trans %}Delete user's forum messages{% endtrans %}</a></li>
-    </li>
                     {% endif %}
                     {% if user.can_create_subscription or user.is_root %}
                     <li><a href="{{ url('subscription:subscription') }}">{% trans %}Subscriptions{% endtrans %}</a></li>
@@ -29,8 +32,10 @@
                     <li><a href="{{ url('club:club_new') }}">{% trans %}New club{% endtrans %}</a></li>
                     {% endif %}
                 </ul>
+            </div>
         {% endif %}
 
+        <div>
             <h4>{% trans %}Counters{% endtrans %}</h4>
             <ul>
                 {% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %}
@@ -58,7 +63,8 @@
                     {% endif %}
                 {% endfor %}
             </ul>
-
+        </div>
+        <div>
             <h4>{% trans %}Accounting{% endtrans %}</h4>
             <ul>
                 {% if user.is_in_group(settings.SITH_GROUP_ACCOUNTING_ADMIN_ID) or user.is_root %}
@@ -85,9 +91,9 @@
                     {%- endif -%}
                 {%- endfor %}
             </ul>
-
+        </div>
-{% if user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID) or user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) or
+        {% if user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID) or user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) or user.is_root %}
-user.is_root %}
+            <div>
                 <h4>{% trans %}Communication{% endtrans %}</h4>
                 <ul>
                     {% if user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) or user.is_root %}
@@ -107,25 +113,31 @@ user.is_root %}
                     <li><a href="{{ url('sas:moderation') }}">{% trans %}Moderate pictures{% endtrans %}</a></li>
                     {% endif %}
                 </ul>
+            </div>
         {% endif %}
 
         {% if user.memberships.filter(end_date=None).all().count() > 0 %}
+            <div>
                 <h4>{% trans %}Club tools{% endtrans %}</h4>
                 <ul>
                     {% for m in user.memberships.filter(end_date=None).all() %}
                     <li><a href="{{ url('club:tools', club_id=m.club.id) }}">{{ m.club }}</a></li>
                     {% endfor %}
                 </ul>
+            </div>
         {% endif %}
 
         {% if user.is_in_group(settings.SITH_GROUP_PEDAGOGY_ADMIN_ID) or user.is_root %}
+            <div>
                 <h4>{% trans %}Pedagogy{% endtrans %}</h4>
                 <ul>
                     <li><a href="{{ url('pedagogy:uv_create') }}">{% trans %}Create UV{% endtrans %}</a></li>
                     <li><a href="{{ url('pedagogy:moderation') }}">{% trans %}Moderate comments{% endtrans %}</a></li>
                 </ul>
+            </div>
         {% endif %}
 
+        <div>
             <h4>{% trans %}Elections{% endtrans %}</h4>
             <ul>
                 <li><a href="{{ url('election:list') }}">{% trans %}See available elections{% endtrans %}</a></li>
@@ -134,12 +146,15 @@ user.is_root %}
                 <li><a href="{{ url('election:create') }}">{% trans %}Create a new election{% endtrans %}</a></li>
                 {%- endif -%}
             </ul>
+        </div>
 
+        <div>
             <h4>{% trans %}Other tools{% endtrans %}</h4>
             <ul>
-    <li><a href="{{ url('core:to_markdown') }}">{% trans %}Convert dokuwiki/BBcode syntax to Markdown{% endtrans %}</a>
+                <li><a href="{{ url('core:to_markdown') }}">{% trans %}Convert dokuwiki/BBcode syntax to Markdown{% endtrans %}</a></li>
-    </li>
                 <li><a href="{{ url('trombi:user_tools') }}">{% trans %}Trombi tools{% endtrans %}</a></li>
             </ul>
-
+        </div>
+    </div>
+</main>
 {% endblock %}