Merge branch 'mobile-menu-template' into 'master'

[ADD] Mobile menu templates to framework

See merge request allianceauth/allianceauth!1763

allianceauth/corputils/templates/corputils/base.html

@@ -11,7 +11,7 @@
 {% endblock header_nav_brand %}
 
 {% block header_nav_collapse_left %}
-    <li class="nav-item dropdown">
+    <li class="nav-item dropdown mb-2 mb-lg-0">
         <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
             {% translate "Corporations" %}
         </a>
@@ -26,11 +26,7 @@
             {% endfor %}
 
             {% if perms.corputils.add_corpstats %}
-                {% if available.count >= 1 %}
+                <li class="mt-3">
-                    <li>&nbsp;</li>
-                {% endif %}
-
-                <li>
                     <a class="dropdown-item" href="{% url 'corputils:add' %}">
                         {% translate "Add corporation" %}
                     </a>

allianceauth/framework/templates/framework/header/nav-collapse-button.html

@@ -0,0 +1,13 @@
+<li class="nav-item">
+    <a href="{{ url }}" class="nav-link py-lg-0">
+        <span class="btn btn-{{ btn_modifier|default:'primary' }} d-none d-lg-inline-block">
+            {% if fa_icon and icon_on_desktop %}<i class="{{ fa_icon }} me-2"></i>{% endif %}
+            {{ title }}
+        </span>
+
+        <span class="d-inline-block d-lg-none">
+            {% if fa_icon and icon_on_mobile %}<i class="{{ fa_icon }} fa-fw me-2"></i>{% endif %}
+            {{ title }}
+        </span>
+    </a>
+</li>

allianceauth/framework/templates/framework/header/nav-collapse-icon.html

@@ -0,0 +1,12 @@
+<li class="nav-item">
+    <a href="{{ url }}" class="nav-link">
+        <span class="d-none d-lg-inline-block" title="{{ title }}">
+            <i class="{{ fa_icon }}"></i>
+        </span>
+
+        <span class="d-inline-block d-lg-none">
+            {% if icon_on_mobile %}<i class="{{ fa_icon }} me-2 fa-fw"></i>{% endif %}
+            {{ title }}
+        </span>
+    </a>
+</li>

allianceauth/menu/templates/menu/menu-notification-block.html

@@ -5,10 +5,10 @@
 <li class="nav-item" id="menu_item_notifications">
     <a class="nav-link {% navactive request 'notifications:' %}" href="{% url 'notifications:list' %}">
         {% with unread_count=request.user|user_unread_notification_count %}
-            <i class="fa-solid fa-bell{% if unread_count %} text-danger{% endif %}"></i>
+            <i class="fa-solid fa-bell me-2 fa-fw{% if unread_count %} text-danger{% endif %}"></i>
         {% endwith %}
 
-        <span class="d-lg-none d-md-inline m-2">
+        <span class="d-lg-none d-md-inline">
             {% translate "Notifications" %}
         </span>
     </a>

allianceauth/notifications/templates/notifications/list.html

@@ -28,17 +28,13 @@
 {% endblock %}
 
 {% block header_nav_collapse_right %}
-    <li class="nav-item">
+    {% translate "Mark all notifications as read" as nav_item_title %}
-        <a href="{% url 'notifications:mark_all_read' %}" class="nav-link" title="{% translate 'Mark all notifications as read' %}">
+    {% url "notifications:mark_all_read" as nav_item_link %}
-            <i class="fa-solid fa-check-double"></i>
+    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-check-double" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
-        </a>
-    </li>
 
-    <li class="nav-item">
+    {% translate "Delete all read notifications" as nav_item_title %}
-        <a href="{% url 'notifications:delete_all_read' %}" class="nav-link" title="{% translate 'Delete all read notifications' %}">
+    {% url "notifications:mark_all_read" as nav_item_link %}
-            <i class="fa-solid fa-trash-can"></i>
+    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-trash-can" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
-        </a>
-    </li>
 {% endblock %}
 
 {% block content %}

allianceauth/optimer/templates/optimer/management.html

@@ -13,11 +13,9 @@
 
 {% block header_nav_collapse_right %}
     {% if perms.auth.optimer_management %}
-        <li class="nav-item">
+        {% translate "Create Operation" as nav_item_title %}
-            <a class="btn btn-success" href="{% url 'optimer:add' %}">
+        {% url "optimer:add" as nav_item_link %}
-                {% translate "Create Operation" %}
+        {% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True %}
-            </a>
-        </li>
     {% endif %}
 {% endblock header_nav_collapse_right %}
 

allianceauth/srp/templates/srp/data.html

@@ -20,17 +20,15 @@
 
 {% block header_nav_collapse_right %}
     {% if perms.auth.srp_management %}
-        <li class="nav-item">
+        {% if fleet_status == "Completed" %}
-            {% if fleet_status == "Completed" %}
+            {% translate "Mark Incomplete" as nav_item_title %}
-                <a class="btn btn-warning" href="{% url 'srp:mark_uncompleted' fleet_id %}">
+            {% url "srp:mark_uncompleted" fleet_id as nav_item_link %}
-                    {% translate "Mark Incomplete" %}
+            {% include "framework/header/nav-collapse-button.html" with btn_modifier="warning" url=nav_item_link title=nav_item_title %}
-                </a>
+        {% else %}
-            {% else %}
+            {% translate "Mark Completed" as nav_item_title %}
-                <a class="btn btn-success" href="{% url 'srp:mark_completed' fleet_id %}">
+            {% url "srp:mark_completed" fleet_id as nav_item_link %}
-                    {% translate "Mark Completed" %}
+            {% include "framework/header/nav-collapse-button.html" with btn_modifier="warning" url=nav_item_link title=nav_item_title %}
-                </a>
+        {% endif %}
-            {% endif %}
-        </li>
     {% endif %}
 {% endblock header_nav_collapse_right %}
 

allianceauth/srp/templates/srp/management.html

@@ -22,11 +22,9 @@
 {% endblock header_nav_collapse_left %}
 {% block header_nav_collapse_right %}
     {% if perms.srp.add_srpfleetmain or perms.auth.srp_management %}
-        <li class="nav-item">
+        {% translate "Add SRP Fleet" as nav_item_title %}
-            <a class="btn btn-success" href="{% url 'srp:add' %}">
+        {% url "srp:add" as nav_item_link %}
-                {% translate "Add SRP Fleet" %}
+        {% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True %}
-            </a>
-        </li>
     {% endif %}
 {% endblock header_nav_collapse_right %}
 {% block content %}

allianceauth/templates/allianceauth/top-menu-rh-default.html

@@ -1,21 +1,17 @@
 {% load i18n %}
+
 {% if user.is_authenticated %}
-<li class="nav-item">
+    {% translate "Add Character" as nav_item_title %}
-    <a href="{% url 'authentication:add_character' %}" class="nav-link" title="{% translate 'Add Character' %}">
+    {% url "authentication:add_character" as nav_item_link %}
-        <i class="fa-solid fa-user-plus"></i>
+    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-user-plus" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
-        <span class="d-lg-none d-md-inline m-2">{% translate "Add Character" %}</span>
+
-    </a>
+    {% translate "Change Main" as nav_item_title %}
-</li>
+    {% url "authentication:change_main_character" as nav_item_link %}
-<li class="nav-item">
+    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-shuffle" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
-    <a href="{% url 'authentication:change_main_character' %}" class="nav-link" title="{% translate 'Change Main' %}">
-        <i class="fa-solid fa-shuffle"></i>
-        <span class="d-lg-none d-md-inline m-2">{% translate "Change Main" %}</span>
-    </a>
-</li>
 {% else %}
-<li class="nav-item">
+    <li class="nav-item">
-    <a href="{% url 'authentication:login' %}" class="nav-link" title="{% translate 'Sign In' %}">
+        <a href="{% url 'authentication:login' %}" class="nav-link" title="{% translate 'Sign In' %}">
-        <i class="fa-solid fa-right-to-bracket fa-fw "></i> {% translate "Sign In" %}
+            <i class="fa-solid fa-right-to-bracket fa-fw me-2"></i> {% translate "Sign In" %}
-    </a>
+        </a>
-</li>
+    </li>
 {% endif %}

allianceauth/timerboard/templates/timerboard/view.html

@@ -17,11 +17,9 @@
 
 {% block header_nav_collapse_right %}
     {% if perms.auth.timer_management %}
-        <li class="nav-item">
+        {% translate "Create Structure Timer" as nav_item_title %}
-            <a class="btn btn-success" href="{% url 'timerboard:add' %}">
+        {% url "timerboard:add" as nav_item_link %}
-                {% translate "Create Structure Timer" %}
+        {% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True %}
-            </a>
-        </li>
     {% endif %}
 {% endblock header_nav_collapse_right %}
 

docs/development/custom/framework/templates.md

@@ -66,3 +66,53 @@ To use it, you can use the following code in your template:
     </div>
 {% endblock %}
 ```
+
+### Top Navigation Buttons
+
+To ensure a unified style for top navigation buttons, we provide a template partial for this.
+To use it, you can use the following code in your template:
+
+```django
+{% block header_nav_collapse_right %}
+    {% translate "My Awesome Link" as nav_item_title %}
+    {% url "my_app:my_function" as nav_item_link %}
+    {% include "framework/header/nav-collapse-button.html" with btn_modifier="success" url=nav_item_link title=nav_item_title fa_icon="fa-solid fa-plus" icon_on_mobile=True icon_on_desktop=True %}
+{% endblock header_nav_collapse_right %}
+```
+
+This template takes care of the mobile responsiveness and the styling. In mobile view,
+the button will be changed to a text link. The icon will be placed in front of the text
+link if `icon_on_mobile` is set to `True`.
+
+#### Button Parameters
+
+- `btn_modifier`: (Optional) The button modifier class, e.g. `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `link`. Default is `primary`.
+- `url`: The URL the button should point to.
+- `title`: The title of the button.
+- `fa_icon`: (Optional) The FontAwesome icon class to use, e.g. `fa-solid fa-plus`.
+- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.
+- `icon_on_desktop`: (Optional) Boolean to indicate if the icon should be shown on desktop devices in front of the button text. Default is `False`.
+
+### Top Navigation FontAwesome Icons
+
+To ensure a unified style for top navigation FontAwesome icons, we provide a template partial for this.
+To use it, you can use the following code in your template:
+
+```django
+{% block header_nav_collapse_right %}
+    {% translate "My Awesome Link as FontAwesome Icon" as nav_item_title %}
+    {% url "my_app:my_function" as nav_item_link %}
+    {% include "framework/header/nav-collapse-icon.html" with fa_icon="fa-solid fa-check-double" url=nav_item_link title=nav_item_title icon_on_mobile=True %}
+{% endblock header_nav_collapse_right %}
+```
+
+This template takes care of the mobile responsiveness and the styling. In mobile view,
+the icon will be changed to a text link. The icon will be placed in front of the text
+link if `icon_on_mobile` is set to `True`.
+
+#### Icon Parameters
+
+- `fa_icon`: The FontAwesome icon class to use, e.g. `fa-solid fa-check-double`.
+- `url`: The URL the icon should point to.
+- `title`: The title of the icon (used as tooltip).
+- `icon_on_mobile`: (Optional) Boolean to indicate if the icon should be shown on mobile devices in front of the text link. Default is `False`.