Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update primary nagivation dropdown UX #3769

Merged
merged 7 commits into from
Feb 22, 2024
Merged

Update primary nagivation dropdown UX #3769

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
0c3baf9
Update primary nagivation dropdown UX
theskumar Feb 12, 2024
9bcd3ba
Use reverse_lazy
theskumar Feb 12, 2024
b50afcf
Use translated strings on nav
theskumar Feb 12, 2024
15a195d
fix target_url
theskumar Feb 12, 2024
108c2bb
Fix focus outline width
theskumar Feb 15, 2024
cb85761
update the active nav border
theskumar Feb 15, 2024
7075147
Update transition for dropdown reveal/close
theskumar Feb 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion hypha/apply/funds/templates/submissions/all.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
44 changes: 24 additions & 20 deletions hypha/core/navigation.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,60 @@
from django.conf import settings
from django.urls import reverse_lazy
from django.utils.translation import gettext_lazy as _

nav_items = [
{
"title": "My Dashboard",
"url": "dashboard:dashboard",
"title": _("My Dashboard"),
"url": reverse_lazy("dashboard:dashboard"),
"permission_method": "has_dashboard_access",
},
{
"title": "Submissions",
"url": "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",
"url": "apply:submissions:list",
"title": _("All Submissions"),
"url": reverse_lazy("apply:submissions:list"),
"permission_method": "is_apply_staff_or_reviewer_required",
},
{
"title": "Staff Assignments",
"url": "apply:submissions:staff_assignments",
"title": _("Staff Assignments"),
"url": reverse_lazy("apply:submissions:staff_assignments"),
"permission_method": "is_apply_staff",
},
{
"title": "Reviews",
"url": "apply:submissions:reviewer_leaderboard",
"title": _("Reviews"),
"url": reverse_lazy("apply:submissions:reviewer_leaderboard"),
"permission_method": "is_apply_staff",
},
{
"title": "Results",
"url": "apply:submissions:result",
"title": _("Results"),
"url": reverse_lazy("apply:submissions:result"),
"permission_method": "is_apply_staff",
},
],
},
{
"title": "Projects",
"url": "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",
"url": "apply:projects:all",
"title": _("All Projects"),
"url": reverse_lazy("apply:projects:all"),
"permission_method": "is_apply_staff_or_finance_or_contracting",
},
{
"title": "Invoices",
"url": "apply:projects:invoices",
"title": _("Invoices"),
"url": reverse_lazy("apply:projects:invoices"),
"permission_method": "is_apply_staff_or_finance",
},
{
"title": "Reports",
"url": "apply:projects:reports:all",
"title": _("Reports"),
"url": reverse_lazy("apply:projects:reports:all"),
"permission_method": "is_apply_staff_or_finance",
},
],
Expand Down
50 changes: 41 additions & 9 deletions hypha/core/templates/core/navigation/primarynav-apply.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,62 @@
<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: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"
>
{% 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 outline-1 transition-colors
{% if sub_item.url == request.path %}
border-l-dark-blue bg-slate-100 pl-3 border-l-4 border-r text-dark-blue font-semibold
{% else %}
border-x 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 item.url in request.path %}nav__link--active{% endif %}"
href="{{ item.url }}"
role="menuitem"
>
{{ item.title }}
</a>
{% endif %}
Expand Down
Loading