From b76fa4282a3b169cf34fa19c759a43edd1cfa0cd Mon Sep 17 00:00:00 2001 From: Peter Pfeufer Date: Wed, 10 Sep 2025 17:06:36 +0200 Subject: [PATCH] [ADD] Mobile menu templates to framework --- .../corputils/templates/corputils/base.html | 8 +-- .../framework/header/nav-collapse-button.html | 13 +++++ .../framework/header/nav-collapse-icon.html | 12 +++++ .../menu/menu-notification-block.html | 4 +- .../templates/notifications/list.html | 16 +++--- .../optimer/templates/optimer/management.html | 8 ++- allianceauth/srp/templates/srp/data.html | 20 ++++---- .../srp/templates/srp/management.html | 8 ++- .../allianceauth/top-menu-rh-default.html | 30 +++++------ .../timerboard/templates/timerboard/view.html | 8 ++- .../development/custom/framework/templates.md | 50 +++++++++++++++++++ 11 files changed, 116 insertions(+), 61 deletions(-) create mode 100644 allianceauth/framework/templates/framework/header/nav-collapse-button.html create mode 100644 allianceauth/framework/templates/framework/header/nav-collapse-icon.html diff --git a/allianceauth/corputils/templates/corputils/base.html b/allianceauth/corputils/templates/corputils/base.html index 530d3057..1f288c1a 100644 --- a/allianceauth/corputils/templates/corputils/base.html +++ b/allianceauth/corputils/templates/corputils/base.html @@ -11,7 +11,7 @@ {% endblock header_nav_brand %} {% block header_nav_collapse_left %} -
  • +
  • @@ -26,11 +26,7 @@ {% endfor %} {% if perms.corputils.add_corpstats %} - {% if available.count >= 1 %} -
  •  
    • - {% endif %} - -
  • +
  • {% translate "Add corporation" %} diff --git a/allianceauth/framework/templates/framework/header/nav-collapse-button.html b/allianceauth/framework/templates/framework/header/nav-collapse-button.html new file mode 100644 index 00000000..45bcf5b0 --- /dev/null +++ b/allianceauth/framework/templates/framework/header/nav-collapse-button.html @@ -0,0 +1,13 @@ +
  • + + + {% if fa_icon and icon_on_desktop %}{% endif %} + {{ title }} + + + + {% if fa_icon and icon_on_mobile %}{% endif %} + {{ title }} + + +
    • diff --git a/allianceauth/framework/templates/framework/header/nav-collapse-icon.html b/allianceauth/framework/templates/framework/header/nav-collapse-icon.html new file mode 100644 index 00000000..f78f3cef --- /dev/null +++ b/allianceauth/framework/templates/framework/header/nav-collapse-icon.html @@ -0,0 +1,12 @@ +
  • + + + + + + + {% if icon_on_mobile %}{% endif %} + {{ title }} + + +
    • diff --git a/allianceauth/menu/templates/menu/menu-notification-block.html b/allianceauth/menu/templates/menu/menu-notification-block.html index d1b06c3c..fc436e63 100644 --- a/allianceauth/menu/templates/menu/menu-notification-block.html +++ b/allianceauth/menu/templates/menu/menu-notification-block.html @@ -5,10 +5,10 @@
  • - - - -
    • + {% translate "Mark all notifications as read" as nav_item_title %} + {% url "notifications:mark_all_read" 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 %} -
  • - - - -
    • + {% translate "Delete all read notifications" as nav_item_title %} + {% url "notifications:mark_all_read" as nav_item_link %} + {% 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 %} {% endblock %} {% block content %} diff --git a/allianceauth/optimer/templates/optimer/management.html b/allianceauth/optimer/templates/optimer/management.html index 5cfeb20d..9a67ff6e 100644 --- a/allianceauth/optimer/templates/optimer/management.html +++ b/allianceauth/optimer/templates/optimer/management.html @@ -13,11 +13,9 @@ {% block header_nav_collapse_right %} {% if perms.auth.optimer_management %} -
  • - - {% translate "Create Operation" %} - -
    • + {% translate "Create Operation" as nav_item_title %} + {% url "optimer:add" 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 %} {% endif %} {% endblock header_nav_collapse_right %} diff --git a/allianceauth/srp/templates/srp/data.html b/allianceauth/srp/templates/srp/data.html index 1b0ef5b5..cfa2c9a5 100644 --- a/allianceauth/srp/templates/srp/data.html +++ b/allianceauth/srp/templates/srp/data.html @@ -20,17 +20,15 @@ {% block header_nav_collapse_right %} {% if perms.auth.srp_management %} -
  • - {% if fleet_status == "Completed" %} - - {% translate "Mark Incomplete" %} - - {% else %} - - {% translate "Mark Completed" %} - - {% endif %} -
    • + {% if fleet_status == "Completed" %} + {% translate "Mark Incomplete" as nav_item_title %} + {% url "srp:mark_uncompleted" fleet_id as nav_item_link %} + {% include "framework/header/nav-collapse-button.html" with btn_modifier="warning" url=nav_item_link title=nav_item_title %} + {% else %} + {% translate "Mark Completed" as nav_item_title %} + {% url "srp:mark_completed" fleet_id as nav_item_link %} + {% include "framework/header/nav-collapse-button.html" with btn_modifier="warning" url=nav_item_link title=nav_item_title %} + {% endif %} {% endif %} {% endblock header_nav_collapse_right %} diff --git a/allianceauth/srp/templates/srp/management.html b/allianceauth/srp/templates/srp/management.html index 5918673f..ff24a007 100644 --- a/allianceauth/srp/templates/srp/management.html +++ b/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 %} -
  • - - {% translate "Add SRP Fleet" %} - -
    • + {% translate "Add SRP Fleet" as nav_item_title %} + {% url "srp:add" 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 %} {% endif %} {% endblock header_nav_collapse_right %} {% block content %} diff --git a/allianceauth/templates/allianceauth/top-menu-rh-default.html b/allianceauth/templates/allianceauth/top-menu-rh-default.html index 161173db..85fe7e92 100644 --- a/allianceauth/templates/allianceauth/top-menu-rh-default.html +++ b/allianceauth/templates/allianceauth/top-menu-rh-default.html @@ -1,21 +1,17 @@ {% load i18n %} + {% if user.is_authenticated %} -
  • - - - {% translate "Add Character" %} - -
    • -
  • - - - {% translate "Change Main" %} - -
    • + {% translate "Add Character" as nav_item_title %} + {% url "authentication:add_character" as nav_item_link %} + {% 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 %} + + {% translate "Change Main" as nav_item_title %} + {% url "authentication:change_main_character" as nav_item_link %} + {% 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 %} {% else %} -
  • - - {% translate "Sign In" %} - -
    • +
  • + + {% translate "Sign In" %} + +
    • {% endif %} diff --git a/allianceauth/timerboard/templates/timerboard/view.html b/allianceauth/timerboard/templates/timerboard/view.html index 9aa742cd..0bf4d4d6 100644 --- a/allianceauth/timerboard/templates/timerboard/view.html +++ b/allianceauth/timerboard/templates/timerboard/view.html @@ -17,11 +17,9 @@ {% block header_nav_collapse_right %} {% if perms.auth.timer_management %} -
  • - - {% translate "Create Structure Timer" %} - -
    • + {% translate "Create Structure Timer" as nav_item_title %} + {% url "timerboard:add" 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 %} {% endif %} {% endblock header_nav_collapse_right %} diff --git a/docs/development/custom/framework/templates.md b/docs/development/custom/framework/templates.md index c989e53e..0faf00ae 100644 --- a/docs/development/custom/framework/templates.md +++ b/docs/development/custom/framework/templates.md @@ -66,3 +66,53 @@ To use it, you can use the following code in your template: {% 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`.