Skip to content

Commit

Permalink
New mobile menu and sync Hypha media-query breakpoints with tailwind (H…
Browse files Browse the repository at this point in the history
…yphaApp#3994)

Fixes HyphaApp#3993

Co-authored-by: Saurabh Kumar <[email protected]>
  • Loading branch information
frjo and theskumar authored Jul 3, 2024
1 parent c3d5ef4 commit a892b7d
Show file tree
Hide file tree
Showing 54 changed files with 457 additions and 637 deletions.
11 changes: 0 additions & 11 deletions hypha/apply/funds/templates/funds/round.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,3 @@
{% block page_title %}{{ page.get_parent.title }}{% endblock %}

{% block title %}{{ page.get_parent.title }}{% endblock %}

{% block header_menu %}
<section class="header__menus header__menus--desktop">
{% if settings.core.SystemSettings.nav_content %}
{{ settings.core.SystemSettings.nav_content|safe }}
{% else %}
{% include "core/navigation/primarynav-apply.html" %}
{% endif %}
</section>
{% endblock %}

2 changes: 1 addition & 1 deletion hypha/apply/users/templates/users/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
{% block body_class %}bg-white{% endblock %}

{% block content %}
<div class="max-w-2xl hypha-grid bg-white mt-5 md:py-4">
<div class="max-w-2xl bg-white my-5">

<section>
<div class="px-4 pt-4">
Expand Down
2 changes: 1 addition & 1 deletion hypha/apply/users/templates/users/password_reset/form.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

{% block content %}

<section class="mt-5 pt-4">
<section class="my-5 py-4">
<div class="wrapper">
{% if form.non_field_errors %}
<div class="messages">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{% endblock %}

{% block content %}
<div class="max-w-2xl bg-white mt-5 md:py-4">
<div class="max-w-2xl bg-white my-5">

<section class="pt-4 px-5">
<form class="form form--user-login" method="post" hx-post="./" hx-swap="outerHTML" hx-target="#main">
Expand Down
4 changes: 2 additions & 2 deletions hypha/core/navigation.py
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ def get_primary_navigation_items(user):
{
"title": _("Submissions"),
# kind of basic url to figure out active tab
"url": reverse_lazy("apply:submissions:overview"),
"url": reverse_lazy("apply:submissions:list"),
"permission_method": "hypha.apply.users.decorators.is_apply_staff_or_reviewer_required",
"sub_items": [
{
Expand Down Expand Up @@ -71,7 +71,7 @@ def get_primary_navigation_items(user):
{
"title": _("Projects"),
# kind of basic url to figure out active tab
"url": reverse_lazy("apply:projects:overview"),
"url": reverse_lazy("apply:projects:all"),
"permission_method": "hypha.apply.users.decorators.is_apply_staff_or_finance_or_contracting",
"sub_items": [
{
Expand Down
157 changes: 89 additions & 68 deletions hypha/core/templates/core/navigation/primarynav-apply.html
Original file line number Diff line number Diff line change
@@ -1,71 +1,92 @@
{% load i18n apply_tags heroicons %}

{% if request.user.is_authenticated %}
<nav role="navigation" aria-label="Primary" class="w-full">
<ul class="nav nav--primary" role="menubar">
{% primary_navigation_items request.user as nav_items %}
{% for item in nav_items %}
<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">
<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 }}
<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.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"
<nav
aria-label="Primary"
x-show="showDesktopMenu || isDesktop"
x-transition:enter="transition ease-out duration-250"
x-transition:enter-start="transform opacity-0 translate-x-full"
x-transition:enter-end="transform opacity-100 translate-x-0"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="transform opacity-100 translate-x-0"
x-transition:leave-end="transform opacity-0 translate-x-full"
class="fixed md:static pt-10 md:pt-0 top-0 md:top-auto end-0 bottom-0 bg-white z-20 md:z-10 shadow-xl md:shadow-none overflow-y-auto md:overflow-clip"
>
<!-- Mobile Menu Opener -->
<button
class="absolute top-6 end-4 md:hidden border rounded p-1.5 z-30 hover:bg-slate-100 transition-colors"
@click="showDesktopMenu = false"
>
{% heroicon_outline "x-mark" aria_hidden="true" size=24 stroke_width=3 class="inline" %}
</button>

<!-- Menu -->
{% primary_navigation_items request.user as nav_items %}
<ul class="flex flex-col md:gap-8 p-4 md:p-0 md:flex-row" role="menubar">
{% for item in nav_items %}
<li
role="presentation"
x-data="{open: false}"
class="p-0.5"
x-on:mouseover.away="open = false"
>
{% if item.sub_items %}
<a class="nav__link {% if item.url == request. %}nav__link--active{% endif %} has-[> .nav__link--active]:border"
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 }}

<span class="hidden md:block" :class="open ? '[&>svg]:translate-y-0.5': ''">
{% heroicon_outline "chevron-down" aria_hidden="true" size=16 stroke_width=3 class="inline align-baseline ms-1 transition-transform" %}
</span>
</a>

<!-- Submenu -->
<div
role="presentation"
x-cloak
x-trap.noautofocus="open"
x-on:keydown.escape="open = false"
x-show="open || !isDesktop"
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"
@click.outside="open = false"
class="min-w-48 relative md:absolute block bg-white md:shadow-xl z-20 md:border-y rounded-sm"
>
{% for sub_item in item.sub_items %}
<a
href="{{ sub_item.url }}"
role="menuitem"
class="pr-4 py-2 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-l md:border-r pl-4 text-black hover:text-dark-blue hover:font-semibold
{% endif %}"
>
{% 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 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 item.url in request.path %}nav__link--active{% endif %}"
href="{{ item.url }}"
role="menuitem"
>
{{ item.title }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{{ sub_item.title }}
</a>
{% endfor %}
</div>
{% else %}
<a class="nav__link {% if item.url == request.path %}nav__link--active{% endif %}"
href="{{ item.url }}"
role="menuitem"
>
{{ item.title }}
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
11 changes: 0 additions & 11 deletions hypha/home/templates/apply_home/apply_home_page.html
Original file line number Diff line number Diff line change
@@ -1,17 +1,6 @@
{% extends "base-apply.html" %}
% load wagtailcore_tags static %}

{% block header_menu %}
<section class="header__menus header__menus--desktop">
{% if settings.core.SystemSettings.nav_content %}
{{ settings.core.SystemSettings.nav_content|safe }}
{% else %}
{% include "core/navigation/primarynav-apply.html" %}
{% endif %}
</section>
{% endblock %}


{% block content %}
<div class="py-8 lg:py-16 max-w-3xl mx-auto">
<h1 class="font-bold text-5xl text-balance">{{ page.title }}</h1>
Expand Down
6 changes: 3 additions & 3 deletions hypha/static_src/sass/abstracts/_mixins.scss
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@
font-size: 15px;
vertical-align: middle;

@include media-query(tablet-landscape) {
@include media-query(lg) {
padding: 0.25rem 0.75rem;
}
}
Expand All @@ -115,14 +115,14 @@
padding: 2px;
font-size: 12px;

@include media-query(tablet-landscape) {
@include media-query(lg) {
padding: 3px 5px;
}
}

// Wide button mixin
@mixin button--wide {
@include media-query(tablet-landscape) {
@include media-query(lg) {
padding: 0.5em 80px;
}
}
Expand Down
17 changes: 5 additions & 12 deletions hypha/static_src/sass/abstracts/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -104,15 +104,11 @@ $input-box-max-width: 465px;

// Breakpoints
$breakpoints: (
"mob-portrait" "(min-width: 320px)",
"mob-landscape" "(min-width: 480px)",
"small-tablet" "(min-width: 600px)",
"tablet-portrait" "(min-width: 768px)",
"tablet-landscape" "(min-width: 1024px)",
"laptop-short" "(min-width: 1024px) and (max-height: 1280px)",
"desktop" "(min-width: 1320px)",
"desktop-medium" "(min-width: 1920px)",
"desktop-wide" "(min-width: 2556px)"
"sm" "(min-width: 640px)",
"md" "(min-width: 768px)",
"lg" "(min-width: 1024px)",
"xl" "(min-width: 1280px)",
"2xl" "(min-width: 1536px)"
);

// Transition
Expand All @@ -129,9 +125,6 @@ $mobile-gutter: 1.25rem;
// Filters
$filter-dropdown: ".select2 .select2-selection.select2-selection--single";

// Table breakpoint
$table-breakpoint: "tablet-landscape";

// Dropdown height
$dropdown-height: 45px;

Expand Down
4 changes: 0 additions & 4 deletions hypha/static_src/sass/base/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,6 @@ p {
details > summary {
cursor: pointer;
margin-block-end: 10px;

&:focus {
outline: none;
}
}

.is-invisible,
Expand Down
6 changes: 3 additions & 3 deletions hypha/static_src/sass/components/_actions-bar.scss
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.actions-bar {
width: 100%;

@include media-query(tablet-landscape) {
@include media-query(lg) {
display: flex;
justify-content: space-between;
}
Expand All @@ -11,7 +11,7 @@
margin-block-end: 20px;
}

@include media-query(tablet-landscape) {
@include media-query(lg) {
display: flex;
align-items: center;

Expand All @@ -37,7 +37,7 @@
&--batch-actions {
display: none;

@include media-query(tablet-landscape) {
@include media-query(lg) {
display: flex;
opacity: 0;
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion hypha/static_src/sass/components/_admin-bar.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
margin: 0 auto;

&--with-button {
@include media-query(tablet-portrait) {
@include media-query(md) {
display: flex;
align-items: center;
flex-direction: row;
Expand Down
6 changes: 3 additions & 3 deletions hypha/static_src/sass/components/_all-reviews-table.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
thead {
display: none;

@include media-query($table-breakpoint) {
@include media-query(lg) {
display: table-header-group;
}

Expand All @@ -28,12 +28,12 @@
padding-inline-start: 10px;
font-weight: $weight--bold;

@include media-query($table-breakpoint) {
@include media-query(lg) {
display: flex;
align-items: center;
}

@include media-query(desktop) {
@include media-query(xl) {
display: table-cell;
}

Expand Down
Loading

0 comments on commit a892b7d

Please sign in to comment.