GNOME.org
 

[damned-lies/bootstrap-5: 7/7] feat: user menu on small screens


commit 78d22c96363f35cc6ef8dbc308b0ab25619c18be
Author: Guillaume Bernard <associations guillaume-bernard fr>
Date:   Thu Oct 6 09:54:33 2022 +0200

    feat: user menu on small screens

 people/templatetags/people.py                      |  4 +-
 templates/base.html                                | 79 +++++++++-------------
 templates/login/login_user_menu_large_screens.html | 17 +++++
 templates/login/login_user_menu_small_screens.html | 18 +++++
 templates/login/login_usermenu.html                | 35 +++++-----
 5 files changed, 89 insertions(+), 64 deletions(-)
---
diff --git a/people/templatetags/people.py b/people/templatetags/people.py
index ec2bcfa9..340f841b 100644
--- a/people/templatetags/people.py
+++ b/people/templatetags/people.py
@@ -31,13 +31,13 @@ def people_image(person):
             qs=urlencode([("s", "80"), ("d", "identicon"), ("r", "g")]),
         )
         tag = format_html(
-            '<img class="rounded-circle avatar" src="{url}" alt="{alt}" crossorigin="anonymous">',
+            '<img class="rounded-circle" src="{url}" alt="{alt}" crossorigin="anonymous">',
             url=url,
             alt=_("avatar icon"),
         )
     elif person and person.image:
         tag = format_html(
-            '<img class="rounded-circle avatar" src="{}" alt="{}" onerror="this.onerror = null; 
this.src=\'{}\'">',
+            '<img class="rounded-circle" src="{}" alt="{}" onerror="this.onerror = null; this.src=\'{}\'">',
             person.image,
             person.name,
             nobody,
diff --git a/templates/base.html b/templates/base.html
index 072fb0d5..9bcec11a 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -40,36 +40,52 @@
             <a class="gnome-navbar-brand" title="{% trans "Back to Damned Lies home page" %}" href="/">
                 <img height="40" src="{% static 'img/gnome-logo.svg' %}" alt="GNOME − Damned Lies">
             </a>
-            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
-                    data-bs-target="#navbar-wrapper-dl-applications" 
aria-controls="navbar-wrapper-dl-applications"
-                    aria-expanded="false" aria-label="Toggle navigation">
-                <span class="navbar-toggler-icon"></span>
-            </button>
-            <div id="navbar-wrapper-dl-applications" class="collapse navbar-collapse my-1 my-sm-0 my-md-0 
my-lg-0 my-xl-0">
+
+            <!--
+              On <= medium screens, collapse applications but display
+              the connected user avatar before the collapse button
+            -->
+            <div class="navbar navbar-right d-flex no-padding d-block d-lg-none d-xl-none">
+                <!-- Only logo visible to open popup -->
+                <ul class="list-unstyled d-none d-sm-block d-md-block my-0">
+                    <li class="nav-item">
+                        {% include "login/login_user_menu_small_screens.html" %}
+                    </li>
+                </ul>
+                <button class="navbar-toggler ms-2" type="button" data-bs-toggle="collapse"
+                        data-bs-target="#navbar-wrapper-dl-applications" 
aria-controls="navbar-wrapper-dl-applications"
+                        aria-expanded="false" aria-label="Toggle navigation">
+                    <span class="navbar-toggler-icon"></span>
+                </button>
+            </div>
+
+            <!-- Django application names -->
+            <div id="navbar-wrapper-dl-applications"
+                 class="collapse navbar-collapse my-1 my-sm-0 my-md-0 my-lg-0 my-xl-0">
                 <ul class="nav navbar-nav">
                     <li class="nav-item">
-                        <a class="nav-link text-white nav-link-dl-app {% if pageSection == "teams" %} 
active{% endif %}"
+                        <a class="nav-link text-white ps-sm-2 ps-md-2 {% if pageSection == "teams" %} 
active{% endif %}"
                            {% if pageSection == "teams" %}aria-current="page"{% endif %}
                            href="{% url 'teams' %}">
                             <span>{% trans "Teams" %}</span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-white nav-link-dl-app {% if pageSection == "languages" %} 
active{% endif %}"
+                        <a class="nav-link text-white ps-sm-2 ps-md-2 {% if pageSection == "languages" %} 
active{% endif %}"
                            {% if pageSection == "languages" %}aria-current="page"{% endif %}
                            href="{% url 'languages' %}">
                             <span>{% trans "Languages" %}</span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-white nav-link-dl-app {% if pageSection == "releases" %} 
active{% endif %}"
+                        <a class="nav-link text-white ps-sm-2 ps-md-2 {% if pageSection == "releases" %} 
active{% endif %}"
                            {% if pageSection == "releases" %}aria-current="page"{% endif %}
                            href="{% url 'releases' %}">
                             <span>{% trans "Release sets" %}</span>
                         </a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link text-white nav-link-dl-app {% if pageSection == "module" %} 
active{% endif %}"
+                        <a class="nav-link text-white ps-sm-2 ps-md-2  {% if pageSection == "module" %} 
active{% endif %}"
                            {% if pageSection == "module" %}aria-current="page"{% endif %}
                            href="{% url 'modules' %}">
                             <span>{% trans "Modules" %}</span>
@@ -77,43 +93,14 @@
                     </li>
                 </ul>
             </div>
-            <div id="navbar-user-profile-and-login-dropdown" class="navbar navbar-right no-padding">
-                <!-- Only logo visible to open popup -->
-                <ul class="navbar-nav d-block d-sm-none">
-                    <li class="nav-item dropdown">
-                        {% if user.is_authenticated %}
-                            <a id="navbar-user-menu" href="#" class="nav-link dropdown-toggle"
-                               role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ user.person|people_image }}
-                            </a>
-                        {% else %}
-                            <a id="navbar-user-menu" href="#" class="nav-link dropdown-toggle"
-                               role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                <img class="rounded-circle" src="{% static 'img/avatar-default.svg' %}"
-                                     alt="GNOME - Damned Lies">
-                            </a>
-                        {% endif %}
-                    </li>
-                </ul>
+
+            <!-- On >= large screens, shows a ”Log In” button or an avatar of the connected user -->
+            <div id="navbar-user-profile-and-login-dropdown"
+                 class="navbar navbar-right no-padding d-none d-lg-block d-xl-block">
                 <!-- Login visible to open popup -->
-                <ul class="navbar-nav d-none d-sm-block">
-                    <li class="nav-item">
-                        {% if user.is_authenticated %}
-                            <a id="navbar-user-menu" href="#"
-                               class="nav-link px-0 py-0 avatar" role="button" data-bs-toggle="dropdown"
-                               aria-expanded="false">
-                                {{ user.person|people_image }}
-                            </a>
-                        {% else %}
-                            <a id="navbar-user-menu" href="#"
-                               class="nav-link nav-link-dl-app dropdown-toggle text-white"
-                               role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {% trans "Log in" %}
-                            </a>
-                        {% endif %}
-                        <div id="navbar-user-menu-dropdown" class="dropdown-menu dropdown-menu-end" 
aria-labelledby="navbar-user-menu">
-                            {% include "login/login_usermenu.html" %}
-                        </div>
+                <ul class="navbar-nav d-none d-sm-block d-md-block">
+                    <li class="nav-item">
+                        {% include "login/login_user_menu_large_screens.html" %}
                     </li>
                 </ul>
             </div>
diff --git a/templates/login/login_user_menu_large_screens.html 
b/templates/login/login_user_menu_large_screens.html
new file mode 100644
index 00000000..ed485fc9
--- /dev/null
+++ b/templates/login/login_user_menu_large_screens.html
@@ -0,0 +1,17 @@
+{% load people %}
+
+{% if user.is_authenticated %}
+    <a id="navbar-user-menu" href="#"
+       class="nav-link px-0 py-0 avatar" role="button" data-bs-toggle="dropdown"
+       aria-expanded="false">
+        {{ user.person|people_image }}
+    </a>
+{% else %}
+    <a id="navbar-user-menu" href="#"
+       class="nav-link nav-link-dl-app dropdown-toggle text-white"
+       role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {% trans "Log in" %}
+    </a>
+{% endif %}
+
+{% include "login/login_usermenu.html" %}
diff --git a/templates/login/login_user_menu_small_screens.html 
b/templates/login/login_user_menu_small_screens.html
new file mode 100644
index 00000000..89e8348a
--- /dev/null
+++ b/templates/login/login_user_menu_small_screens.html
@@ -0,0 +1,18 @@
+{% load people %}
+
+{% if user.is_authenticated %}
+    <a id="navbar-user-menu" href="#"
+       class="nav-link px-0 py-0 avatar"
+       role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        {{ user.person|people_image }}
+    </a>
+{% else %}
+    <a id="navbar-user-menu" href="#"
+       class="nav-link nav-link-dl-app dropdown-toggle text-white"
+       role="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <img class="rounded-circle" src="{% static 'img/avatar-default.svg' %}"
+             alt="GNOME - Damned Lies">
+    </a>
+{% endif %}
+
+{% include "login/login_usermenu.html" %}
diff --git a/templates/login/login_usermenu.html b/templates/login/login_usermenu.html
index b501c663..c278262e 100644
--- a/templates/login/login_usermenu.html
+++ b/templates/login/login_usermenu.html
@@ -1,18 +1,21 @@
 {% load people %}
 
-{% if user.is_authenticated %}
-    <a class="dropdown-item" href="{% url 'person_detail_username' user.username %}">
-        {% trans 'User Settings' %}
-    </a>
-    <div class="dropdown-divider"></div>
-    <form class="py-3 px-3" action="{% url 'logout' %}" method="post" class="form">
-        {% csrf_token %}
-        <input type="hidden" name="logout" value="1">
-        <input type="hidden" name="next" value="{{ request.path }}">
-        <div class="form-group">
-            <button type="submit" class="btn btn-danger w-100">{% trans 'Log out' %}</button>
-        </div>
-    </form>
-{% else %}
-    {% include "login/login_popup_form.html" %}
-{% endif %}
+<div id="navbar-user-menu-dropdown" class="dropdown-menu dropdown-menu-end"
+     aria-labelledby="navbar-user-menu">
+    {% if user.is_authenticated %}
+        <a class="dropdown-item" href="{% url 'person_detail_username' user.username %}">
+            {% trans 'User Settings' %}
+        </a>
+        <div class="dropdown-divider"></div>
+        <form class="py-3 px-3" action="{% url 'logout' %}" method="post" class="form">
+            {% csrf_token %}
+            <input type="hidden" name="logout" value="1">
+            <input type="hidden" name="next" value="{{ request.path }}">
+            <div class="form-group">
+                <button type="submit" class="btn btn-danger w-100">{% trans 'Log out' %}</button>
+            </div>
+        </form>
+    {% else %}
+        {% include "login/login_popup_form.html" %}
+    {% endif %}
+</div>
[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]