From 43695dba7b631d225b7f301a079a8b6704aea167 Mon Sep 17 00:00:00 2001 From: Lucas Brandstaetter <lucas@brandstaetter.tech> Date: Thu, 28 Nov 2024 00:12:14 +0100 Subject: [PATCH] Update backoffice sidebar - Reorder items to remove event.stopPropagation() - Improve orientation of items with flexbox --- .../locale/de/LC_MESSAGES/django.po | 7 +- .../locale/en/LC_MESSAGES/django.po | 7 +- src/backoffice/static/backoffice.css | 3 +- src/backoffice/templates/backoffice/base.html | 90 +++++++++---------- src/backoffice/views/mixins.py | 27 +++--- 5 files changed, 65 insertions(+), 69 deletions(-) diff --git a/src/backoffice/locale/de/LC_MESSAGES/django.po b/src/backoffice/locale/de/LC_MESSAGES/django.po index 3068f7969..1a8e540a0 100644 --- a/src/backoffice/locale/de/LC_MESSAGES/django.po +++ b/src/backoffice/locale/de/LC_MESSAGES/django.po @@ -901,8 +901,8 @@ msgstr "Abmelden" msgid "nav_login" msgstr "Anmelden" -msgid "All" -msgstr "alle" +msgid "Overview" +msgstr "Übersicht" msgid "backoffice__not_a_conference_member" msgstr "Das Nutzerkonto, mit dem du gerade angemeldet bist, ist zur Zeit nicht mit einem Veranstaltungsticket verknüpft. Wenn Du gerade beim Aufbau hilfst, ist das kein Problem. Denk aber bitte daran, rechtzeitig ein Ticket zu kaufen und dies kurz vor Veranstaltungsbeginn mit deinem Nutzerkonto zu verknüpfen. Ansonsten kannst Du mit diesem Nutzerkonto nicht an der Veranstaltung teilnehmen." @@ -2124,3 +2124,6 @@ msgstr "Sessions" msgid "wa_textures" msgstr "Textures" + +#~ msgid "All" +#~ msgstr "alle" diff --git a/src/backoffice/locale/en/LC_MESSAGES/django.po b/src/backoffice/locale/en/LC_MESSAGES/django.po index 247640a56..317e86584 100644 --- a/src/backoffice/locale/en/LC_MESSAGES/django.po +++ b/src/backoffice/locale/en/LC_MESSAGES/django.po @@ -899,8 +899,8 @@ msgstr "Logout" msgid "nav_login" msgstr "log in" -msgid "All" -msgstr "all" +msgid "Overview" +msgstr "overview" msgid "backoffice__not_a_conference_member" msgstr "The user account you are currently logged in with is not linked to an valid event ticket. If you are helping with the set-up, this is not a problem. But please remember to buy a ticket in time and link it to your user account. Otherwise you will not be able to participate in the event with this user account. Linking the ticket to the user account will be available directly before the event." @@ -2127,3 +2127,6 @@ msgstr "sessions" msgid "wa_textures" msgstr "textures" + +#~ msgid "All" +#~ msgstr "all" diff --git a/src/backoffice/static/backoffice.css b/src/backoffice/static/backoffice.css index 575f11386..96469ab0e 100644 --- a/src/backoffice/static/backoffice.css +++ b/src/backoffice/static/backoffice.css @@ -23,12 +23,11 @@ } #sidebar .list-group-item, -#sidebar .list-group-item > a { +#sidebar .list-group-item a { align-items: center; background: #7386d5; border: none; color: #fff; - display: flex; } #sidebar .list-group-item.active, diff --git a/src/backoffice/templates/backoffice/base.html b/src/backoffice/templates/backoffice/base.html index fdcb86c8d..29a53d4c2 100644 --- a/src/backoffice/templates/backoffice/base.html +++ b/src/backoffice/templates/backoffice/base.html @@ -211,71 +211,61 @@ {% endif %} {% for item in sidebar.items %} - <div class="list-group-item list-group-action {% if item.active %}active{% endif %}" + <div class="list-group-item list-group-action d-inline-flex {% if item.active or item.child_active %}active{% endif %}" {% if item.active %}aria-current="true"{% endif %} - {% if item.children %} aria-expanded="{% if item.expanded %}true{% else %}false{% endif %} - " - data-bs-toggle="collapse" - data-bs-target=".sidebar{{ forloop.counter }}" + {% if item.children %}aria-expanded={% if item.expanded %}"true"{% else %}"false"{% endif %} {% endif %}> - {% if item.link %} - <a href="{{ item.link }}" - class="d-block {{ item.class|join:' ' }}" - onclick="event.stopPropagation()">{{ item.caption }}</a> - {% else %} - {{ item.caption }} - {% endif %} - {% if item.children or item.count != '' or item.add_link %} - {% if item.children %} - <a href="#" - class="sidebar me-auto {{ item.class|join:' ' }} dropdown-toggle" - aria-expanded="{% if item.expanded %}true{% else %}false{% endif %}" - data-bs-toggle="collapse" - data-bs-target=".sidebar{{ forloop.counter }}"> - {% if item.count != '' %} - <span class="badge text-bg-light ms-1">{{ item.count }}</span> - {% else %} - - {% endif %} - </a> + {% if item.link and not item.children %} + <a href="{{ item.link }}" class="flex-grow-1"> {% else %} - <span class="me-auto"> - {% if item.count != '' %} - <span class="badge text-bg-light ms-1">{{ item.count }}</span> - {% else %} - - {% endif %} - </span> - {% endif %} - {% if item.add_link %} - <a href="{{ item.add_link }}" - class="ms-1" - onclick="event.stopPropagation()"> - <i class="bi bi-plus-circle"></i> + <div class="flex-grow-1"> + {% endif %} + <div {% if item.children %}data-bs-toggle="collapse" data-bs-target=".sidebar{{ forloop.counter }}"{% endif %} + class="{{ item.class|join:' ' }}"> + {{ item.caption }} + + <span class="float-end"> + {% if item.children %} + <span class="dropdown-toggle dropdown-toggle-split" + data-bs-toggle="dropdown" + aria-expanded="false"> + <span class="visually-hidden">Toggle Dropdown</span> + </span> + {% endif %} + {% if item.count != '' %}<span class="badge text-bg-light ms-1">{{ item.count }}</span>{% endif %} + </span> + </div> + {% if item.link and not item.children %} </a> - {% endif %} + {% else %} + </div> + {% endif %} + {% if item.add_link %} + <a href="{{ item.add_link }}" class="ms-3 float-end"> + <i class="bi bi-plus-circle"></i> + </a> {% endif %} </div> {% if item.children %} - <div class="sidebar{{ forloop.counter }} collapse{% if item.expanded %} show{% endif %}"> + <div class="sidebar{{ forloop.counter }} collapse {% if item.expanded %}show{% endif %}"> {% if item.link %} - <a class="list-group-item list-group-action justify-content-between child {% if item.active %}active{% endif %}" - href="{{ item.link }}">{% trans "All" %}</a> + <div class="list-group-item list-group-action child d-inline-flex w-100 {% if item.active %}active{% endif %}"> + <a href="{{ item.link }}" class="flex-grow-1">{% trans "Overview" %}</a> + </div> {% endif %} {% for child in item.children %} - <a class="list-group-item list-group-action justify-content-between child {% if child.active %}active{% endif %}" - href="{{ child.link }}"> - <div>{{ child.caption }}</div> + <div class="list-group-item list-group-action child d-inline-flex w-100 {% if child.active %}active{% endif %}"> + <a href="{{ child.link }}" class="flex-grow-1 d-inline-flex"> + <span class="flex-grow-1">{{ child.caption }}</span> + {% if child.count %}<span class="badge text-bg-light ms-auto">{{ child.count }}</span>{% endif %} + </a> {% if child.add_link %} - <a href="{{ child.add_link }}" - class="ms-1" - onclick="event.stopPropagation()"> + <a href="{{ child.add_link }}" class="ms-2" onclick="event.stopPropagation()" nonce={{ request.csp_nonce }}> <i class="bi bi-plus-circle"></i> </a> {% endif %} - {% if child.count %}<span class="badge text-bg-light ms-1">{{ child.count }}</span>{% endif %} - </a> + </div> {% endfor %} </div> {% endif %} diff --git a/src/backoffice/views/mixins.py b/src/backoffice/views/mixins.py index e6b187cf4..c29a4c610 100644 --- a/src/backoffice/views/mixins.py +++ b/src/backoffice/views/mixins.py @@ -426,24 +426,25 @@ def guess_active_sidebar_item(request: HttpRequest, sidebar_items: dict, with_qu query_string = '?' + qs request_url = request.META.get('PATH_INFO') + query_string - for x in sidebar_items: - if request_url == x.get('link'): - x['active'] = True - x['expanded'] = True + for sidebar_item in sidebar_items: + if request_url == sidebar_item.get('link'): + sidebar_item['active'] = True + sidebar_item['expanded'] = True continue - if request_url == x.get('add_link'): - x['active'] = True - x['expanded'] = False + if request_url == sidebar_item.get('add_link'): + sidebar_item['active'] = True + sidebar_item['expanded'] = False continue - if 'children' in x: - for y in x.get('children') or []: - if 'link' in y and y['link'] == request_url: - y['active'] = True - x['expanded'] = True + if 'children' in sidebar_item: + for sidebar_child in sidebar_item.get('children') or []: + if 'link' in sidebar_child and sidebar_child['link'] == request_url: + sidebar_child['active'] = True + sidebar_item['child_active'] = True + sidebar_item['expanded'] = True else: - x['children'] = None + sidebar_item['children'] = None class PasswordMixin: -- GitLab