From 0c3baf9209fa08348b66782c2d42243445d92775 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:38:36 +0530
Subject: [PATCH 1/7] Update primary nagivation dropdown UX
- Use mouseover for quick access
- Update over states
- Update the urls to that any external urls can also be added via
settings, removes dependeny of `reverse` while specifying urls
- How active page in the dropdown as well, a dark-blue border
---
.../funds/templates/submissions/all.html | 2 +-
hypha/core/navigation.py | 25 ++++++-----
.../core/navigation/primarynav-apply.html | 41 +++++++++++++++----
3 files changed, 48 insertions(+), 20 deletions(-)
diff --git a/hypha/apply/funds/templates/submissions/all.html b/hypha/apply/funds/templates/submissions/all.html
index b1adaadeb6..63a45ae3a9 100644
--- a/hypha/apply/funds/templates/submissions/all.html
+++ b/hypha/apply/funds/templates/submissions/all.html
@@ -262,7 +262,7 @@
<header
hx-target="#main"
hx-swap="outerHTML show:top"
- class="sticky top-0 z-10 mt-3 px-3 py-2 flex flex-wrap items-center justify-between border-x border-t md:gap-5 bg-gray-50 md:text-sm md:font-medium border-gray-200"
+ class="sticky top-0 z-[5] mt-3 px-3 py-2 flex flex-wrap items-center justify-between border-x border-t md:gap-5 bg-gray-50 md:text-sm md:font-medium border-gray-200"
>
<span class="hidden md:inline-flex items-center py-1">
<input
diff --git a/hypha/core/navigation.py b/hypha/core/navigation.py
index 7b3382ea09..7047be8f24 100644
--- a/hypha/core/navigation.py
+++ b/hypha/core/navigation.py
@@ -1,56 +1,61 @@
from django.conf import settings
+from django.urls import reverse
nav_items = [
{
"title": "My Dashboard",
- "url": "dashboard:dashboard",
+ "url": reverse("dashboard:dashboard"),
"permission_method": "has_dashboard_access",
},
{
"title": "Submissions",
- "url": "apply:submissions:overview", # kind of basic url to figure out active tab
+ "url": reverse(
+ "apply:submissions:overview"
+ ), # kind of basic url to figure out active tab
"permission_method": "is_apply_staff_or_reviewer_required",
"sub_items": [
{
"title": "All Submissions",
- "url": "apply:submissions:list",
+ "url": reverse("apply:submissions:list"),
"permission_method": "is_apply_staff_or_reviewer_required",
},
{
"title": "Staff Assignments",
- "url": "apply:submissions:staff_assignments",
+ "url": reverse("apply:submissions:staff_assignments"),
"permission_method": "is_apply_staff",
},
{
"title": "Reviews",
- "url": "apply:submissions:reviewer_leaderboard",
+ "url": reverse("apply:submissions:reviewer_leaderboard"),
"permission_method": "is_apply_staff",
},
{
"title": "Results",
- "url": "apply:submissions:result",
+ "url": reverse("apply:submissions:result"),
"permission_method": "is_apply_staff",
},
],
},
{
"title": "Projects",
- "url": "apply:projects:overview", # kind of basic url to figure out active tab
+ "url": reverse(
+ "apply:projects:overview"
+ ), # kind of basic url to figure out active tab
"permission_method": "is_apply_staff_or_finance_or_contracting",
"sub_items": [
{
"title": "All Projects",
- "url": "apply:projects:all",
+ "url": reverse("apply:projects:all"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
},
{
"title": "Invoices",
- "url": "apply:projects:invoices",
+ "url": reverse("apply:projects:invoices"),
"permission_method": "is_apply_staff_or_finance",
},
{
"title": "Reports",
- "url": "apply:projects:reports:all",
+ "url": reverse("apply:projects:reports:all"),
"permission_method": "is_apply_staff_or_finance",
},
],
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index 03c005f856..29d7b85422 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -4,30 +4,53 @@
<ul class="nav nav--primary" role="menubar">
{% apply_nav_items request.user as nav_items %}
{% for item in nav_items %}
- {% url item.url as target_url%}
- <li class="nav__item" role="presentation">
+ <li class="nav__item"
+ role="presentation"
+ x-data="{open: false}"
+ x-on:mouseover.away="open = false"
+ >
{% if item.sub_items %}
- <div class="relative inline-block" x-data="{open: false}">
- <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}"
- href="{% url item.url %}"
+ <div class="relative inline-block">
+ <a class="nav__link {% if item.url in request.path %}nav__link--active{% endif %}"
+ href="{{item.url}}"
aria-label="{% trans "Menu Item" %}"
aria-haspopup="menu"
aria-expanded="false"
role="menuitem"
+ @mouseover="open = true"
@click.prevent="open = ! open">
{{ item.title }}
- {% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline mr-1" %}
+ <span :class="open ? '[&>svg]:translate-y-1': ''">
+ {% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline mr-1 transition-transform" %}
+ </span>
</a>
- <div x-cloak x-trap="open" x-on:keydown.escape="open = false" x-show="open" x-transition @click.outside="open = false" class="absolute block bg-white min-w-max shadow-lg z-1 mt-7 ">
+ <div
+ x-cloak
+ x-trap.noautofocus="open"
+ x-on:keydown.escape="open = false"
+ x-show="open"
+ x-transition
+ @click.outside="open = false"
+ class="min-w-48 absolute block bg-white shadow-xl z-20 mt-4 border rounded-sm"
+ >
{% for sub_item in item.sub_items %}
- <a class="text-black px-4 py-3 block font-normal hover:bg-mid-grey focus-visible:ring-2" href="{% url sub_item.url %}">
+ <a
+ href="{{ sub_item.url }}"
+ class="pr-4 py-3 block font-normal hover:bg-slate-100
+ focus-visible:outline-dashed border-dark-blue transition-colors
+ {% if sub_item.url == request.path %}
+ pl-3 border-l-4 text-dark-blue font-semibold
+ {% else %}
+ pl-4 text-black hover:text-dark-blue hover:font-semibold
+ {% endif %}"
+ >
{{ sub_item.title }}
</a>
{% endfor %}
</div>
</div>
{% else %}
- <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}" href="{{ target_url }}" role="menuitem">
+ <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}" href="{{ item.url }}" role="menuitem">
{{ item.title }}
</a>
{% endif %}
From 9bcd3bae8bbfdf83b64754044b80398e59f6722c Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:47:09 +0530
Subject: [PATCH 2/7] Use reverse_lazy
---
hypha/core/navigation.py | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/hypha/core/navigation.py b/hypha/core/navigation.py
index 7047be8f24..cddf533437 100644
--- a/hypha/core/navigation.py
+++ b/hypha/core/navigation.py
@@ -1,61 +1,61 @@
from django.conf import settings
-from django.urls import reverse
+from django.urls import reverse_lazy
nav_items = [
{
"title": "My Dashboard",
- "url": reverse("dashboard:dashboard"),
+ "url": reverse_lazy("dashboard:dashboard"),
"permission_method": "has_dashboard_access",
},
{
"title": "Submissions",
- "url": reverse(
+ "url": reverse_lazy(
"apply:submissions:overview"
), # kind of basic url to figure out active tab
"permission_method": "is_apply_staff_or_reviewer_required",
"sub_items": [
{
"title": "All Submissions",
- "url": reverse("apply:submissions:list"),
+ "url": reverse_lazy("apply:submissions:list"),
"permission_method": "is_apply_staff_or_reviewer_required",
},
{
"title": "Staff Assignments",
- "url": reverse("apply:submissions:staff_assignments"),
+ "url": reverse_lazy("apply:submissions:staff_assignments"),
"permission_method": "is_apply_staff",
},
{
"title": "Reviews",
- "url": reverse("apply:submissions:reviewer_leaderboard"),
+ "url": reverse_lazy("apply:submissions:reviewer_leaderboard"),
"permission_method": "is_apply_staff",
},
{
"title": "Results",
- "url": reverse("apply:submissions:result"),
+ "url": reverse_lazy("apply:submissions:result"),
"permission_method": "is_apply_staff",
},
],
},
{
"title": "Projects",
- "url": reverse(
+ "url": reverse_lazy(
"apply:projects:overview"
), # kind of basic url to figure out active tab
"permission_method": "is_apply_staff_or_finance_or_contracting",
"sub_items": [
{
"title": "All Projects",
- "url": reverse("apply:projects:all"),
+ "url": reverse_lazy("apply:projects:all"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
},
{
"title": "Invoices",
- "url": reverse("apply:projects:invoices"),
+ "url": reverse_lazy("apply:projects:invoices"),
"permission_method": "is_apply_staff_or_finance",
},
{
"title": "Reports",
- "url": reverse("apply:projects:reports:all"),
+ "url": reverse_lazy("apply:projects:reports:all"),
"permission_method": "is_apply_staff_or_finance",
},
],
From b50afcf81f4c4470d007d86f17abf6a9be791ffd Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Mon, 12 Feb 2024 17:23:26 +0530
Subject: [PATCH 3/7] Use translated strings on nav
---
hypha/core/navigation.py | 31 +++++++++++++++----------------
1 file changed, 15 insertions(+), 16 deletions(-)
diff --git a/hypha/core/navigation.py b/hypha/core/navigation.py
index cddf533437..0b036c5770 100644
--- a/hypha/core/navigation.py
+++ b/hypha/core/navigation.py
@@ -1,60 +1,59 @@
from django.conf import settings
from django.urls import reverse_lazy
+from django.utils.translation import gettext_lazy as _
nav_items = [
{
- "title": "My Dashboard",
+ "title": _("My Dashboard"),
"url": reverse_lazy("dashboard:dashboard"),
"permission_method": "has_dashboard_access",
},
{
- "title": "Submissions",
- "url": reverse_lazy(
- "apply:submissions:overview"
- ), # kind of basic url to figure out active tab
+ "title": _("Submissions"),
+ # kind of basic url to figure out active tab
+ "url": reverse_lazy("apply:submissions:overview"),
"permission_method": "is_apply_staff_or_reviewer_required",
"sub_items": [
{
- "title": "All Submissions",
+ "title": _("All Submissions"),
"url": reverse_lazy("apply:submissions:list"),
"permission_method": "is_apply_staff_or_reviewer_required",
},
{
- "title": "Staff Assignments",
+ "title": _("Staff Assignments"),
"url": reverse_lazy("apply:submissions:staff_assignments"),
"permission_method": "is_apply_staff",
},
{
- "title": "Reviews",
+ "title": _("Reviews"),
"url": reverse_lazy("apply:submissions:reviewer_leaderboard"),
"permission_method": "is_apply_staff",
},
{
- "title": "Results",
+ "title": _("Results"),
"url": reverse_lazy("apply:submissions:result"),
"permission_method": "is_apply_staff",
},
],
},
{
- "title": "Projects",
- "url": reverse_lazy(
- "apply:projects:overview"
- ), # kind of basic url to figure out active tab
+ "title": _("Projects"),
+ # kind of basic url to figure out active tab
+ "url": reverse_lazy("apply:projects:overview"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
"sub_items": [
{
- "title": "All Projects",
+ "title": _("All Projects"),
"url": reverse_lazy("apply:projects:all"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
},
{
- "title": "Invoices",
+ "title": _("Invoices"),
"url": reverse_lazy("apply:projects:invoices"),
"permission_method": "is_apply_staff_or_finance",
},
{
- "title": "Reports",
+ "title": _("Reports"),
"url": reverse_lazy("apply:projects:reports:all"),
"permission_method": "is_apply_staff_or_finance",
},
From 15a195d0c900fc7328b93a8b6fe487bdb0675781 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Mon, 12 Feb 2024 18:06:37 +0530
Subject: [PATCH 4/7] fix target_url
---
hypha/core/templates/core/navigation/primarynav-apply.html | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index 29d7b85422..ff767986e8 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -50,7 +50,10 @@
</div>
</div>
{% else %}
- <a class="nav__link {% if target_url in request.path %}nav__link--active{% endif %}" href="{{ item.url }}" role="menuitem">
+ <a class="nav__link {% if item.url in request.path %}nav__link--active{% endif %}"
+ href="{{ item.url }}"
+ role="menuitem"
+ >
{{ item.title }}
</a>
{% endif %}
From 108c2bbb94fc0193f33f2fe31daf852d0ae5718e Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Thu, 15 Feb 2024 15:11:32 +0530
Subject: [PATCH 5/7] Fix focus outline width
---
hypha/core/templates/core/navigation/primarynav-apply.html | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index ff767986e8..f54d23aa2a 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -37,7 +37,7 @@
<a
href="{{ sub_item.url }}"
class="pr-4 py-3 block font-normal hover:bg-slate-100
- focus-visible:outline-dashed border-dark-blue transition-colors
+ focus-visible:outline-dashed outline-1 border-dark-blue transition-colors
{% if sub_item.url == request.path %}
pl-3 border-l-4 text-dark-blue font-semibold
{% else %}
From cb857611a78549286a6cce072971ff755080a8af Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Thu, 15 Feb 2024 15:24:26 +0530
Subject: [PATCH 6/7] update the active nav border
---
.../core/templates/core/navigation/primarynav-apply.html | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index f54d23aa2a..58f1740593 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -31,17 +31,17 @@
x-show="open"
x-transition
@click.outside="open = false"
- class="min-w-48 absolute block bg-white shadow-xl z-20 mt-4 border rounded-sm"
+ class="min-w-48 absolute block bg-white shadow-xl z-20 mt-4 border-y rounded-sm"
>
{% for sub_item in item.sub_items %}
<a
href="{{ sub_item.url }}"
class="pr-4 py-3 block font-normal hover:bg-slate-100
- focus-visible:outline-dashed outline-1 border-dark-blue transition-colors
+ focus-visible:outline-dashed outline-1 transition-colors
{% if sub_item.url == request.path %}
- pl-3 border-l-4 text-dark-blue font-semibold
+ border-l-dark-blue bg-slate-100 pl-3 border-l-4 border-r text-dark-blue font-semibold
{% else %}
- pl-4 text-black hover:text-dark-blue hover:font-semibold
+ border-x pl-4 text-black hover:text-dark-blue hover:font-semibold
{% endif %}"
>
{{ sub_item.title }}
From 70751476517a8a42be9618cdec3ee34bda0156f4 Mon Sep 17 00:00:00 2001
From: Saurabh Kumar <theskumar@users.noreply.github.com>
Date: Fri, 16 Feb 2024 14:12:10 +0530
Subject: [PATCH 7/7] Update transition for dropdown reveal/close
---
.../core/templates/core/navigation/primarynav-apply.html | 8 +++++++-
1 file changed, 7 insertions(+), 1 deletion(-)
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index 58f1740593..176b4e8f11 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -29,7 +29,13 @@
x-trap.noautofocus="open"
x-on:keydown.escape="open = false"
x-show="open"
- x-transition
+ x-transition:enter="transition ease-out duration-250"
+ x-transition:enter-start="transform opacity-0 scale-95 -translate-y-3"
+ x-transition:enter-end="transform opacity-100 scale-100 translate-y-0"
+ x-transition:leave="transition ease-in duration-75"
+ x-transition:leave-start="transform opacity-100 scale-100 translate-y-0"
+ x-transition:leave-end="transform opacity-0 scale-95 -translate-y-3"
+ {% comment %} x-transition {% endcomment %}
@click.outside="open = false"
class="min-w-48 absolute block bg-white shadow-xl z-20 mt-4 border-y rounded-sm"
>