From cbd88d3659fe23185ff6750bbb780bd331afda91 Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Fri, 3 Mar 2023 20:17:52 +0100
Subject: [PATCH] Rework of the tools page

---
 core/static/user/user_tools.scss     |  42 +++++
 core/templates/core/user_tools.jinja | 263 ++++++++++++++-------------
 2 files changed, 181 insertions(+), 124 deletions(-)
 create mode 100644 core/static/user/user_tools.scss

diff --git a/core/static/user/user_tools.scss b/core/static/user/user_tools.scss
new file mode 100644
index 00000000..ede8eb7e
--- /dev/null
+++ b/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;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/templates/core/user_tools.jinja b/core/templates/core/user_tools.jinja
index 94591c2f..8d184476 100644
--- a/core/templates/core/user_tools.jinja
+++ b/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,137 +10,151 @@
 {% endblock %}
 
 {% block content %}
-<h3>{% trans %}User Tools{% endtrans %}</h3>
+<main>
+    <h3>{% trans %}User Tools{% endtrans %}</h3>
 
-{% if user.can_create_subscription or user.is_root or user.is_board_member %}
-<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>
-    {% endif %}
-    {% if user.can_create_subscription or user.is_root %}
-    <li><a href="{{ url('subscription:subscription') }}">{% trans %}Subscriptions{% endtrans %}</a></li>
-    {% endif %}
-    {% if user.is_board_member or user.is_root %}
-    <li><a href="{{ url('subscription:stats') }}">{% trans %}Subscription stats{% endtrans %}</a></li>
-    <li><a href="{{ url('club:club_new') }}">{% trans %}New club{% endtrans %}</a></li>
-    {% endif %}
-</ul>
-{% endif %}
-
-<h4>{% trans %}Counters{% endtrans %}</h4>
-<ul>
-    {% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %}
-    <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>
-    <li><a href="{{ url('counter:cash_summary_list') }}">{% trans %}Cash register summaries{% endtrans %}</a></li>
-    <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 %}
-    {% 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() %}
-        {% if c.stock %}
-        <a 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>
+    <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>
+                    {% endif %}
+                    {% if user.can_create_subscription or user.is_root %}
+                    <li><a href="{{ url('subscription:subscription') }}">{% trans %}Subscriptions{% endtrans %}</a></li>
+                    {% endif %}
+                    {% if user.is_board_member or user.is_root %}
+                    <li><a href="{{ url('subscription:stats') }}">{% trans %}Subscription stats{% endtrans %}</a></li>
+                    <li><a href="{{ url('club:club_new') }}">{% trans %}New club{% endtrans %}</a></li>
+                    {% endif %}
+                </ul>
+            </div>
         {% endif %}
-    </li>
-    {% endif %}
-    {% endfor %}
-</ul>
 
-<h4>{% trans %}Accounting{% endtrans %}</h4>
-<ul>
-    {% if user.is_in_group(settings.SITH_GROUP_ACCOUNTING_ADMIN_ID) or user.is_root %}
-    <li><a href="{{ url('accounting:refound_account') }}">{% trans %}Refound Account{% endtrans %}</a></li>
-    <li><a href="{{ url('accounting:bank_list') }}">{% trans %}General accounting{% endtrans %}</a></li>
-    <li><a href="{{ url('accounting:co_list') }}">{% trans %}Company list{% endtrans %}</a></li>
-    {% endif %}
+        <div>
+            <h4>{% trans %}Counters{% endtrans %}</h4>
+            <ul>
+                {% if user.is_in_group(settings.SITH_GROUP_COUNTER_ADMIN_ID) or user.is_root %}
+                <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>
+                <li><a href="{{ url('counter:cash_summary_list') }}">{% trans %}Cash register summaries{% endtrans %}</a></li>
+                <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 %}
+                {% 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() %}
+                        {% if c.stock %}
+                        <a 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 %}
+                    </li>
+                    {% 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 %}
+                <li><a href="{{ url('accounting:refound_account') }}">{% trans %}Refound Account{% endtrans %}</a></li>
+                <li><a href="{{ url('accounting:bank_list') }}">{% trans %}General accounting{% endtrans %}</a></li>
+                <li><a href="{{ url('accounting:co_list') }}">{% trans %}Company list{% endtrans %}</a></li>
+                {% endif %}
 
-    {% for m in user.memberships.filter(end_date=None).filter(role__gte=7).all() -%}
-    {%- for b in m.club.bank_accounts.all() %}
-    <li>
-        <strong>{% trans %}Bank account: {% endtrans %}</strong>
-        <a href="{{ url('accounting:bank_details', b_account_id=b.id) }}">{{ b }}</a>
-    </li>
-    {%- endfor %}
+                {% for m in user.memberships.filter(end_date=None).filter(role__gte=7).all() -%}
+                    {%- for b in m.club.bank_accounts.all() %}
+                    <li>
+                        <strong>{% trans %}Bank account: {% endtrans %}</strong>
+                        <a href="{{ url('accounting:bank_details', b_account_id=b.id) }}">{{ b }}</a>
+                    </li>
+                    {%- endfor %}
 
-    {% if m.club.club_account.exists() -%}
-    {% for ca in m.club.club_account.all() %}
-    <li>
-        <strong>{% trans %}Club account: {% endtrans %}</strong>
-        <a href="{{ url('accounting:club_details', c_account_id=ca.id) }}">{{ ca }}</a>
-    </li>
-    {%- endfor %}
-    {%- endif -%}
-    {%- endfor %}
-</ul>
+                    {% if m.club.club_account.exists() -%}
+                        {% for ca in m.club.club_account.all() %}
+                        <li>
+                            <strong>{% trans %}Club account: {% endtrans %}</strong>
+                            <a href="{{ url('accounting:club_details', c_account_id=ca.id) }}">{{ ca }}</a>
+                        </li>
+                        {%- endfor %}
+                    {%- 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 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 %}
+                    <li><a href="{{ url('com:weekmail_article') }}">{% trans %}Create weekmail article{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:weekmail') }}">{% trans %}Weekmail{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:weekmail_destinations') }}">{% trans %}Weekmail destinations{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:news_new') }}">{% trans %}Create news{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:news_admin_list') }}">{% trans %}Moderate news{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:alert_edit') }}">{% trans %}Edit alert message{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:info_edit') }}">{% trans %}Edit information message{% endtrans %}</a></li>
+                    <li><a href="{{ url('core:file_moderation') }}">{% trans %}Moderate files{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:mailing_admin') }}">{% trans %}Mailing lists administration{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:poster_list') }}">{% trans %}Posters{% endtrans %}</a></li>
+                    <li><a href="{{ url('com:screen_list') }}">{% trans %}Screens{% endtrans %}</a></li>
+                    {% endif %}
+                    {% if user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID) %}
+                    <li><a href="{{ url('sas:moderation') }}">{% trans %}Moderate pictures{% endtrans %}</a></li>
+                    {% endif %}
+                </ul>
+            </div>
+        {% endif %}
 
-{% 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 %}
-<h4>{% trans %}Communication{% endtrans %}</h4>
-<ul>
-    {% if user.is_in_group(settings.SITH_GROUP_COM_ADMIN_ID) or user.is_root %}
-    <li><a href="{{ url('com:weekmail_article') }}">{% trans %}Create weekmail article{% endtrans %}</a></li>
-    <li><a href="{{ url('com:weekmail') }}">{% trans %}Weekmail{% endtrans %}</a></li>
-    <li><a href="{{ url('com:weekmail_destinations') }}">{% trans %}Weekmail destinations{% endtrans %}</a></li>
-    <li><a href="{{ url('com:news_new') }}">{% trans %}Create news{% endtrans %}</a></li>
-    <li><a href="{{ url('com:news_admin_list') }}">{% trans %}Moderate news{% endtrans %}</a></li>
-    <li><a href="{{ url('com:alert_edit') }}">{% trans %}Edit alert message{% endtrans %}</a></li>
-    <li><a href="{{ url('com:info_edit') }}">{% trans %}Edit information message{% endtrans %}</a></li>
-    <li><a href="{{ url('core:file_moderation') }}">{% trans %}Moderate files{% endtrans %}</a></li>
-    <li><a href="{{ url('com:mailing_admin') }}">{% trans %}Mailing lists administration{% endtrans %}</a></li>
-    <li><a href="{{ url('com:poster_list') }}">{% trans %}Posters{% endtrans %}</a></li>
-    <li><a href="{{ url('com:screen_list') }}">{% trans %}Screens{% endtrans %}</a></li>
-    {% endif %}
-    {% if user.is_in_group(settings.SITH_GROUP_SAS_ADMIN_ID) %}
-    <li><a href="{{ url('sas:moderation') }}">{% trans %}Moderate pictures{% endtrans %}</a></li>
-    {% endif %}
-</ul>
-{% 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.memberships.filter(end_date=None).all().count() > 0 %}
-<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>
-{% 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 %}
 
-{% if user.is_in_group(settings.SITH_GROUP_PEDAGOGY_ADMIN_ID) or user.is_root %}
-<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>
-{% endif %}
-
-<h4>{% trans %}Elections{% endtrans %}</h4>
-<ul>
-    <li><a href="{{ url('election:list') }}">{% trans %}See available elections{% endtrans %}</a></li>
-    <li><a href="{{ url('election:list_archived') }}">{% trans %}See archived elections{% endtrans %}</a></li>
-    {%- if user.is_subscribed -%}
-    <li><a href="{{ url('election:create') }}">{% trans %}Create a new election{% endtrans %}</a></li>
-    {%- endif -%}
-</ul>
-
-<h4>{% trans %}Other tools{% endtrans %}</h4>
-<ul>
-    <li><a href="{{ url('core:to_markdown') }}">{% trans %}Convert dokuwiki/BBcode syntax to Markdown{% endtrans %}</a>
-    </li>
-    <li><a href="{{ url('trombi:user_tools') }}">{% trans %}Trombi tools{% endtrans %}</a></li>
-</ul>
+        <div>
+            <h4>{% trans %}Elections{% endtrans %}</h4>
+            <ul>
+                <li><a href="{{ url('election:list') }}">{% trans %}See available elections{% endtrans %}</a></li>
+                <li><a href="{{ url('election:list_archived') }}">{% trans %}See archived elections{% endtrans %}</a></li>
+                {%- if user.is_subscribed -%}
+                <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>
+                <li><a href="{{ url('trombi:user_tools') }}">{% trans %}Trombi tools{% endtrans %}</a></li>
+            </ul>
+        </div>
+    </div>
+</main>
 {% endblock %}
\ No newline at end of file