diff --git a/hypha/apply/funds/templates/funds/round.html b/hypha/apply/funds/templates/funds/round.html
index 7bb3cb704e412538da5ec0ec67b753a52d850c44..3b266d76dddecc5932b7e0304e354cc2c2520a15 100644
--- a/hypha/apply/funds/templates/funds/round.html
+++ b/hypha/apply/funds/templates/funds/round.html
@@ -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 %}
-
diff --git a/hypha/apply/users/templates/users/login.html b/hypha/apply/users/templates/users/login.html
index a0ebd0729f51051f57575e54f8e7151b77ebfea9..4ad0dea672a542e2d4cb4cc72266fd46fa513a75 100644
--- a/hypha/apply/users/templates/users/login.html
+++ b/hypha/apply/users/templates/users/login.html
@@ -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">
diff --git a/hypha/apply/users/templates/users/password_reset/form.html b/hypha/apply/users/templates/users/password_reset/form.html
index db13698f84311d4fb83b2c687986cefc8e545b9b..b1d130fa82d309f5e50bfab14b7562fa8898a5b9 100644
--- a/hypha/apply/users/templates/users/password_reset/form.html
+++ b/hypha/apply/users/templates/users/password_reset/form.html
@@ -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">
diff --git a/hypha/apply/users/templates/users/passwordless_login_signup.html b/hypha/apply/users/templates/users/passwordless_login_signup.html
index 1d0774c89399cbff3eb30f0d04efb621f5ae87f7..86b1945ca982783cece7aaa5d9d30997855ace46 100644
--- a/hypha/apply/users/templates/users/passwordless_login_signup.html
+++ b/hypha/apply/users/templates/users/passwordless_login_signup.html
@@ -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">
diff --git a/hypha/core/navigation.py b/hypha/core/navigation.py
index 7ffb7f251e65112e30b2c3f044c080d6983a1414..3ad5157e0ac4b5f048bca1610bca910940e760a0 100644
--- a/hypha/core/navigation.py
+++ b/hypha/core/navigation.py
@@ -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": [
{
@@ -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": [
{
diff --git a/hypha/core/templates/core/navigation/primarynav-apply.html b/hypha/core/templates/core/navigation/primarynav-apply.html
index e7fec3ba7a53c0a25fe64e8259f3d04fde133f6c..c85f493320e6cdee05c277e54ec1a7557043630b 100644
--- a/hypha/core/templates/core/navigation/primarynav-apply.html
+++ b/hypha/core/templates/core/navigation/primarynav-apply.html
@@ -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>
diff --git a/hypha/home/templates/apply_home/apply_home_page.html b/hypha/home/templates/apply_home/apply_home_page.html
index 8fcf67bb81519f353b6494af9979dcbfebd3ce8a..7451640777e5c529be9c1f214098c034b9d0068f 100644
--- a/hypha/home/templates/apply_home/apply_home_page.html
+++ b/hypha/home/templates/apply_home/apply_home_page.html
@@ -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>
diff --git a/hypha/static_src/sass/abstracts/_mixins.scss b/hypha/static_src/sass/abstracts/_mixins.scss
index f323fd42812f6da05f03ba80e6cc3f27cfd79e03..c5e3fa48dcc66826e361329bfb1ab9e3a7c24548 100644
--- a/hypha/static_src/sass/abstracts/_mixins.scss
+++ b/hypha/static_src/sass/abstracts/_mixins.scss
@@ -105,7 +105,7 @@
font-size: 15px;
vertical-align: middle;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
padding: 0.25rem 0.75rem;
}
}
@@ -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;
}
}
diff --git a/hypha/static_src/sass/abstracts/_variables.scss b/hypha/static_src/sass/abstracts/_variables.scss
index 02c319c07b8b0948453ad5c50e48c6a028642de2..4f567457c64187a18b971ee1e1f23352c5faa923 100644
--- a/hypha/static_src/sass/abstracts/_variables.scss
+++ b/hypha/static_src/sass/abstracts/_variables.scss
@@ -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
@@ -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;
diff --git a/hypha/static_src/sass/base/_base.scss b/hypha/static_src/sass/base/_base.scss
index 0d48e7a4cfeea9d32083ada8fffad298be1fd684..5277fdcabc22c9e242538ca1f5a082f9340c08d3 100644
--- a/hypha/static_src/sass/base/_base.scss
+++ b/hypha/static_src/sass/base/_base.scss
@@ -29,10 +29,6 @@ p {
details > summary {
cursor: pointer;
margin-block-end: 10px;
-
- &:focus {
- outline: none;
- }
}
.is-invisible,
diff --git a/hypha/static_src/sass/components/_actions-bar.scss b/hypha/static_src/sass/components/_actions-bar.scss
index 84fe762c5122756d682c1bbabd4df479abe1ebc2..93beef102aaa3edf22fc540112c43536f8ac7b28 100644
--- a/hypha/static_src/sass/components/_actions-bar.scss
+++ b/hypha/static_src/sass/components/_actions-bar.scss
@@ -1,7 +1,7 @@
.actions-bar {
width: 100%;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
justify-content: space-between;
}
@@ -11,7 +11,7 @@
margin-block-end: 20px;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
align-items: center;
@@ -37,7 +37,7 @@
&--batch-actions {
display: none;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
opacity: 0;
pointer-events: none;
diff --git a/hypha/static_src/sass/components/_admin-bar.scss b/hypha/static_src/sass/components/_admin-bar.scss
index 5d4feee65caf691d7c8d4a1124d67cfa77f7f92b..434a3110c6965e8fefaa6775d53ab41ee5136e87 100644
--- a/hypha/static_src/sass/components/_admin-bar.scss
+++ b/hypha/static_src/sass/components/_admin-bar.scss
@@ -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;
diff --git a/hypha/static_src/sass/components/_all-reviews-table.scss b/hypha/static_src/sass/components/_all-reviews-table.scss
index 9308f16985a8f10ecd91c91b754b2f1df5300550..1a3d233c87b97daabd41338f1af904e7d404918c 100644
--- a/hypha/static_src/sass/components/_all-reviews-table.scss
+++ b/hypha/static_src/sass/components/_all-reviews-table.scss
@@ -9,7 +9,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
@@ -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;
}
diff --git a/hypha/static_src/sass/components/_all-submissions-table.scss b/hypha/static_src/sass/components/_all-submissions-table.scss
index 0aeeaa69367547c488b282e426ff9a184f42f95b..9b1d940c4bfef3361d9a6797b8b4b0032b3d5e07 100644
--- a/hypha/static_src/sass/components/_all-submissions-table.scss
+++ b/hypha/static_src/sass/components/_all-submissions-table.scss
@@ -9,7 +9,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
@@ -24,17 +24,17 @@
// set column widths
&.title {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 130px;
}
- @include media-query(desktop) {
+ @include media-query(xl) {
width: 260px;
}
}
&.phase {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 150px;
}
}
@@ -42,20 +42,20 @@
&.selected {
@include table-checkbox;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 50px;
padding-inline-end: 0;
}
}
&.comments {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 110px;
}
}
&.organization_name {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 110px;
}
}
@@ -82,12 +82,12 @@
padding-block-start: 15px;
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;
}
}
@@ -103,7 +103,7 @@
text-align: center;
background-color: $color--sky-blue;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 100%;
}
}
@@ -113,7 +113,7 @@
&.comments {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
font-size: 13px;
text-align: center;
@@ -127,7 +127,7 @@
&.reviews_stats {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
}
}
@@ -138,7 +138,7 @@
display: none;
padding-inline-end: 0;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
}
}
@@ -150,13 +150,13 @@
}
&.organization_name {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
padding-inline-start: 15px;
}
}
// arrow to toggle project info - added via js
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
.arrow {
@include triangle(right, $color--primary, 6px);
position: relative;
@@ -180,7 +180,7 @@
display: none;
}
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: none;
}
}
diff --git a/hypha/static_src/sass/components/_button.scss b/hypha/static_src/sass/components/_button.scss
index 760d0b2fea3d248edec6c5a75701ab6fadf2f620..ac05a5ee0633c8e0534bb719f42ce7dabc458e4c 100644
--- a/hypha/static_src/sass/components/_button.scss
+++ b/hypha/static_src/sass/components/_button.scss
@@ -41,10 +41,8 @@
border: 1px solid $color--mid-grey;
padding: 0.5rem 1.2rem;
- &:focus {
- color: $color--light-blue;
- }
-
+ &:active,
+ &:focus,
&:hover {
color: $color--white;
}
@@ -76,7 +74,7 @@
max-width: 250px;
margin: 1rem auto 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: none;
}
}
@@ -98,10 +96,8 @@
color: $color--light-blue;
border: 1px solid $color--mid-grey;
- &:focus {
- color: $color--light-blue;
- }
-
+ &:active,
+ &:focus,
&:hover {
color: $color--white;
}
@@ -142,7 +138,7 @@
transition: none;
width: 100%;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
background: none;
padding: 10px;
border: 0;
@@ -230,7 +226,7 @@
}
}
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: none;
}
}
@@ -256,7 +252,7 @@
border: 1px solid currentcolor;
transition: background-color, color, border, $quick-transition;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin-block-start: 0;
}
@@ -398,7 +394,7 @@
@include button--small;
padding-inline-end: 18px;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
padding-inline-end: 18px;
}
diff --git a/hypha/static_src/sass/components/_card.scss b/hypha/static_src/sass/components/_card.scss
index 82f9349068946f88a4f7173f1795febdb6bf1dce..20852465246fd1feeba5603810fee02af86c455c 100644
--- a/hypha/static_src/sass/components/_card.scss
+++ b/hypha/static_src/sass/components/_card.scss
@@ -32,7 +32,7 @@
align-items: center;
margin-block-end: 1rem;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
margin-inline-start: 1rem;
}
}
diff --git a/hypha/static_src/sass/components/_comment.scss b/hypha/static_src/sass/components/_comment.scss
index 5844b3530e17a1daad532170a9502b905085a929..b8eb6b5c63cdf30c3c6242d0aa27b33a66ff1da3 100644
--- a/hypha/static_src/sass/components/_comment.scss
+++ b/hypha/static_src/sass/components/_comment.scss
@@ -3,7 +3,7 @@
margin-block-end: 20px;
border-block-end: 1px solid $color--light-mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
max-width: 60%;
}
diff --git a/hypha/static_src/sass/components/_dashboard-table.scss b/hypha/static_src/sass/components/_dashboard-table.scss
index 925d3d5ce4bd446f2ff343a95e07900daa613c6e..8463dbcea0f6cb2d1a96da8561f15b5548a63c37 100644
--- a/hypha/static_src/sass/components/_dashboard-table.scss
+++ b/hypha/static_src/sass/components/_dashboard-table.scss
@@ -6,7 +6,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
@@ -43,7 +43,7 @@
display: inline-block;
width: 90px;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: none;
}
}
diff --git a/hypha/static_src/sass/components/_data-block.scss b/hypha/static_src/sass/components/_data-block.scss
index 22b634e8b3adc2bf09aa319a4d1ca48a54183074..a8683841ddfec3e7ae767b66be1f2d818671684e 100644
--- a/hypha/static_src/sass/components/_data-block.scss
+++ b/hypha/static_src/sass/components/_data-block.scss
@@ -7,7 +7,7 @@
padding: 1rem;
background-color: $color--light-blue-90;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
padding: 1rem 2rem;
display: flex;
justify-content: space-between;
@@ -18,7 +18,7 @@
&__body {
padding: 1rem;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
padding: 2rem;
}
}
@@ -28,7 +28,7 @@
font-weight: $weight--bold;
margin: 0 0 1rem;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
margin: 0;
}
}
@@ -57,7 +57,7 @@
&__status {
margin: 0;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: block;
font-weight: $weight--bold;
}
@@ -78,7 +78,7 @@
font-weight: $weight--bold;
white-space: pre;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: none;
}
}
@@ -88,7 +88,7 @@
display: none;
border-block-start: 2px solid $color--light-mid-grey;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: table-header-group;
}
@@ -96,7 +96,7 @@
color: $color--mid-dark-grey;
padding: 10px;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
text-align: left;
}
}
@@ -143,7 +143,7 @@
min-width: 160px;
width: 25%;
- @include media-query(desktop) {
+ @include media-query(xl) {
width: 30%;
}
}
@@ -196,7 +196,7 @@
border-block-end: 2px solid $color--light-grey;
padding: 1rem 0;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
justify-content: space-between;
align-items: center;
@@ -218,7 +218,7 @@
&__info {
margin: 0 1rem 1rem 0;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
margin: 0 1rem 0 0;
flex: 1;
}
@@ -228,7 +228,7 @@
display: flex;
align-items: center;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
justify-content: flex-end;
}
}
@@ -248,7 +248,7 @@
inset-inline-start: -1rem;
inset-block-end: 0;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
width: calc(100% + 4rem);
inset-inline-start: -2rem;
}
diff --git a/hypha/static_src/sass/components/_docs-block.scss b/hypha/static_src/sass/components/_docs-block.scss
index a7ef75972b3ee221a65e2953b5c0b451c35f9ecd..db621662d0939f7c4c6c13e6e87f7a572815a454 100644
--- a/hypha/static_src/sass/components/_docs-block.scss
+++ b/hypha/static_src/sass/components/_docs-block.scss
@@ -25,7 +25,7 @@
margin-block-end: 1rem;
border-block-end: 1px solid $color--mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: flex;
align-items: center;
justify-content: space-between;
@@ -47,7 +47,7 @@
margin-block-end: 1rem;
}
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
&:first-child {
margin: 0 1rem 0 0;
flex: 1;
@@ -62,7 +62,7 @@
&__title {
margin: 0;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
flex: 1;
}
}
@@ -74,7 +74,7 @@
fill: transparent;
margin-inline-end: 0.5rem;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
margin-inline-end: 1rem;
}
}
@@ -112,7 +112,7 @@
}
&__info-text {
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
max-width: 65%;
margin-inline-start: 3rem;
}
@@ -156,7 +156,7 @@
margin: 0 1rem 1rem 0;
}
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
&:first-child {
margin: 0 1rem 0 0;
}
diff --git a/hypha/static_src/sass/components/_feed.scss b/hypha/static_src/sass/components/_feed.scss
index 57218985364a4bafe9dd6ce76e672be8966f5cae..ed8dd60a70de2541f9fa0cd07b33b30e1afe63ca 100644
--- a/hypha/static_src/sass/components/_feed.scss
+++ b/hypha/static_src/sass/components/_feed.scss
@@ -59,7 +59,7 @@
display: block;
margin-inline-end: 10px;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
display: none;
}
}
@@ -79,7 +79,7 @@
align-items: center;
flex-wrap: wrap;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
margin-block-end: 10px;
}
}
@@ -91,7 +91,7 @@
font-weight: $weight--bold;
}
- @include media-query(small-tablet) {
+ @include media-query(sm) {
margin: 0 15px 0 0;
}
@@ -123,7 +123,7 @@
font-size: map-get($font-sizes, milli);
color: $color--black-50;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
width: auto;
margin: 0 20px 0 0;
}
@@ -161,7 +161,7 @@
&__heading {
margin-block-end: 0;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
width: 90%;
font-size: 18px;
}
diff --git a/hypha/static_src/sass/components/_filters.scss b/hypha/static_src/sass/components/_filters.scss
index c7cfb6958072cd1537a831c9f72767e60eb5d1be..dd93e057b091c4cc4a499b6fd469a66199669b62 100644
--- a/hypha/static_src/sass/components/_filters.scss
+++ b/hypha/static_src/sass/components/_filters.scss
@@ -14,7 +14,7 @@
background: $color--white;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: block;
max-height: 0;
transition: max-height $medium-transition;
@@ -40,7 +40,7 @@
justify-content: space-around;
padding: 20px 0;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: none;
}
@@ -63,7 +63,7 @@
}
// stylelint-disable selector-max-id
#show-filters-button {
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: none;
}
}
diff --git a/hypha/static_src/sass/components/_form.scss b/hypha/static_src/sass/components/_form.scss
index aa5bca2fb8d922e19df354c9234f57ab0e032175..e1a8500d3509ba9a3b05525d09275de9432d5a68 100644
--- a/hypha/static_src/sass/components/_form.scss
+++ b/hypha/static_src/sass/components/_form.scss
@@ -26,7 +26,7 @@
max-width: 300px;
margin-block-start: $mobile-gutter;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
max-width: 280px;
margin: 0 0 0 30px;
}
@@ -174,12 +174,12 @@
border-color: $color--mid-grey;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
border: 1px solid $color--mid-grey;
}
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
align-items: flex-start;
padding: 10px 0 30px;
@@ -208,7 +208,7 @@
// so the form can be output in any tag
> * {
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
flex-basis: 225px;
&:not(:last-child) {
@@ -231,7 +231,7 @@
> li {
padding: 0 1rem;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
padding: 0;
}
@@ -240,7 +240,7 @@
margin: 0 auto 1rem;
max-width: 320px;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
display: flex;
max-width: 600px;
@@ -251,7 +251,7 @@
}
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
margin: 0 1rem 0 0;
max-width: initial;
}
@@ -404,7 +404,7 @@
background: $color--error;
z-index: 1;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
position: absolute;
inset-block-start: 0;
inset-inline-end: 0;
@@ -452,7 +452,7 @@
.wmd-preview {
width: 100%;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
max-width: 70%;
}
}
@@ -464,7 +464,7 @@
grid-template-rows: auto auto auto auto;
grid-template-columns: 1fr;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
grid-template-areas: "message attachments" "message visibility";
grid-template-rows: auto auto;
grid-template-columns: 2fr 1fr;
diff --git a/hypha/static_src/sass/components/_funding-block.scss b/hypha/static_src/sass/components/_funding-block.scss
index c6c7d93c68480c6c8ab60812ba72b04cf946dcf1..f448efcd5a657864695c226d0a4e0ef67f261fda 100644
--- a/hypha/static_src/sass/components/_funding-block.scss
+++ b/hypha/static_src/sass/components/_funding-block.scss
@@ -4,7 +4,7 @@
padding: 1rem;
margin-block-end: 1rem;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
padding: 2rem;
display: flex;
justify-content: space-between;
@@ -14,7 +14,7 @@
&__item {
margin: 0 0.5rem 1rem 0;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
margin: 0 0.5rem 0 0;
}
@@ -31,7 +31,7 @@
margin: 0;
font-size: map-get($font-sizes, delta);
- @include media-query(small-tablet) {
+ @include media-query(sm) {
font-size: map-get($font-sizes, beta);
}
}
diff --git a/hypha/static_src/sass/components/_heading.scss b/hypha/static_src/sass/components/_heading.scss
index 3bf61fa95a6b9d99ac9f4e0649f38e7a5cb0cf5f..10e6ce941b199b5afd4c417d2eece0caaf5d64c2 100644
--- a/hypha/static_src/sass/components/_heading.scss
+++ b/hypha/static_src/sass/components/_heading.scss
@@ -29,7 +29,7 @@
font-weight: $weight--normal;
color: transparentize($color--dark-grey, 0.5);
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
flex-direction: row;
margin-block-start: 0;
}
@@ -67,7 +67,7 @@
line-height: 1.1;
text-align: center;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
line-height: auto;
text-align: left;
}
diff --git a/hypha/static_src/sass/components/_hypha-grid.scss b/hypha/static_src/sass/components/_hypha-grid.scss
index 3a8e9e02769305f4e79e6326637aba60bcf14326..d22f73ea6044d8a9796c14f185a37e2753a2d01e 100644
--- a/hypha/static_src/sass/components/_hypha-grid.scss
+++ b/hypha/static_src/sass/components/_hypha-grid.scss
@@ -1,101 +1,75 @@
.hypha-grid {
- display: flex;
- flex-wrap: wrap;
+ display: grid;
+ margin-block-end: 1rem;
+ gap: 10px;
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- > * {
- flex-basis: calc(100% - 20px);
- margin: 10px;
+ &--two {
+ grid-template-columns: 100%;
+ gap: 0.25rem;
- @media all and (min-width: 480px) {
- flex-basis: calc(50% - 20px);
+ @include media-query(md) {
+ grid-template-columns: 1fr 1fr;
}
- @media all and (min-width: 1024px) {
- flex-basis: calc(30% - 20px);
+ &.delete {
+ grid-template-columns: 1fr;
+ }
+
+ .form--comments & {
+ margin: 20px 0 0;
+ gap: 10px;
+ grid-template-columns: 100px 100px;
+ }
+
+ .wrapper--comments & {
+ grid-template-columns: 1fr;
+ }
+
+ + br {
+ display: none;
}
}
&--narrow {
text-align: center;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
text-align: left;
}
}
-}
-
-@supports (display: grid) {
- .hypha-grid {
- display: grid;
- margin-block-end: 1rem;
- gap: 10px;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
- > * {
- flex-basis: initial;
- width: auto;
- margin: 0;
- }
-
- &--two {
- grid-template-columns: 100%;
- gap: 0.25rem;
-
- @include media-query(tablet-portrait) {
- grid-template-columns: 1fr 1fr;
- }
-
- &.delete {
- grid-template-columns: 1fr;
- }
-
- .form--comments & {
- margin: 20px 0 0;
- gap: 10px;
- grid-template-columns: 100px 100px;
- }
+ &--no-margin {
+ margin: 0;
+ }
- .wrapper--comments & {
- grid-template-columns: 1fr;
- }
+ &--proposal-info {
+ grid-template-columns: 100%;
+ gap: 10px;
+ margin: 0 0 1rem;
- + br {
- display: none;
- }
+ @include media-query(sm) {
+ margin: 0 0 1.5rem;
+ grid-template-columns: 1fr 1fr;
}
- &--no-margin {
+ * {
margin: 0;
}
+ }
- &--proposal-info {
- grid-template-columns: 100%;
- gap: 10px;
- margin: 0 0 1rem;
-
- @include media-query(mob-landscape) {
- margin: 0 0 1.5rem;
- grid-template-columns: 1fr 1fr;
- }
-
- * {
- margin: 0;
- }
- }
+ &--status-update {
+ grid-template-columns: 100%;
- &--status-update {
+ @include media-query(sm) {
grid-template-columns: 100%;
-
- @include media-query(mob-landscape) {
- grid-template-columns: 100%;
- }
}
+ }
- &__cell {
- &--span-two {
- @include media-query(mob-landscape) {
- grid-column: auto / span 2;
- }
+ &__cell {
+ &--span-two {
+ @include media-query(sm) {
+ grid-column: auto / span 2;
}
}
}
diff --git a/hypha/static_src/sass/components/_invoice-block.scss b/hypha/static_src/sass/components/_invoice-block.scss
index 6e08cb33dbfdaade7062a653ee09a1c5a0127354..b1ec20c0f517d078a1a5b4d410a1ea8f2d43bac2 100644
--- a/hypha/static_src/sass/components/_invoice-block.scss
+++ b/hypha/static_src/sass/components/_invoice-block.scss
@@ -3,7 +3,7 @@
margin-block-end: 1rem;
border: 1px solid $color--dark-blue;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
display: flex;
justify-content: space-between;
padding: 2rem;
@@ -16,7 +16,7 @@
margin: 0;
}
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
margin: 0 1rem 0 0;
}
}
diff --git a/hypha/static_src/sass/components/_link.scss b/hypha/static_src/sass/components/_link.scss
index 274ce6744a7a366976175287896c7335b61a86f9..7c57ec755b7a3904c21760418a2631f7f18f58c5 100644
--- a/hypha/static_src/sass/components/_link.scss
+++ b/hypha/static_src/sass/components/_link.scss
@@ -70,7 +70,7 @@
font-weight: $weight--bold;
text-align: center;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: none;
}
}
diff --git a/hypha/static_src/sass/components/_list-reveal.scss b/hypha/static_src/sass/components/_list-reveal.scss
index ad79328e0587e6853640d42ea76b819b925c5832..800438fa2b3c93a1390a3ec7e1f767dccbcf33b0 100644
--- a/hypha/static_src/sass/components/_list-reveal.scss
+++ b/hypha/static_src/sass/components/_list-reveal.scss
@@ -5,7 +5,7 @@
background-color: $color--white;
margin-block-end: $mobile-gutter;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
max-width: 70%;
}
}
diff --git a/hypha/static_src/sass/components/_messages.scss b/hypha/static_src/sass/components/_messages.scss
index 29ca99c2e3074019626ed6893bc19c7ccb0fc974..fa05e3e7cb6d882d27dfeec6ec83e952012e3373 100644
--- a/hypha/static_src/sass/components/_messages.scss
+++ b/hypha/static_src/sass/components/_messages.scss
@@ -28,7 +28,7 @@
max-height: 1000px;
background: $color--dark-blue;
- @include media-query(desktop) {
+ @include media-query(xl) {
padding: 15px 30px;
}
diff --git a/hypha/static_src/sass/components/_modal.scss b/hypha/static_src/sass/components/_modal.scss
index d4d67fa4b85719330ca44fc6d850d388b3beb10b..0d204fa2c5a036d62041f8fde5ee15d2d361638a 100644
--- a/hypha/static_src/sass/components/_modal.scss
+++ b/hypha/static_src/sass/components/_modal.scss
@@ -4,7 +4,7 @@
width: calc(100% - 40px);
padding: 0;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
width: 580px;
padding: 30px;
}
diff --git a/hypha/static_src/sass/components/_nav.scss b/hypha/static_src/sass/components/_nav.scss
index 0b6cebf0fe2f3d6ec9b869e1614a04c085f14fc6..ef0ffe5c148432cd2181b0a53b09a0f2ff0e50e0 100644
--- a/hypha/static_src/sass/components/_nav.scss
+++ b/hypha/static_src/sass/components/_nav.scss
@@ -1,46 +1,10 @@
.nav {
- display: flex;
- align-items: center;
- flex-direction: column;
- width: 100%;
- height: 100%;
- font-weight: $weight--semibold;
-
- @include media-query(tablet-portrait) {
- flex-direction: row;
- padding-block-start: 0;
- }
-
- &--primary {
- text-transform: uppercase;
-
- @include media-query(tablet-portrait) {
- flex-direction: row;
- justify-content: center;
- gap: 2rem;
- margin-block-start: 0;
- text-transform: none;
- }
-
- @include media-query(tablet-landscape) {
- gap: 3rem;
- }
- }
-
- &__item {
- @include media-query(tablet-portrait) {
- &:last-child {
- margin-inline-end: 0;
- }
- }
- }
-
&__link {
@extend %h5;
+ display: flex;
position: relative;
- display: inline-block;
- padding: 20px 10px;
- color: $color--white;
+ padding-block: 0.5rem;
+ color: $color--default;
transition: color $transition;
&:focus,
@@ -48,17 +12,7 @@
color: $color--light-blue;
}
- @include media-query(tablet-portrait) {
- display: inline;
- padding: 40px 0;
- color: $color--default;
- }
-
- @include media-query(tablet-landscape) {
- padding: 30px 0;
- }
-
- &--active {
+ @include media-query(md) {
&::after {
position: absolute;
inset-block-end: 0;
diff --git a/hypha/static_src/sass/components/_profile.scss b/hypha/static_src/sass/components/_profile.scss
index 0b79b92433fe361eec562888d7f26ec1f5ad9cd2..654b7d9637406301ebdb07c65850dce382464233 100644
--- a/hypha/static_src/sass/components/_profile.scss
+++ b/hypha/static_src/sass/components/_profile.scss
@@ -1,7 +1,7 @@
.profile {
margin-block-start: $mobile-gutter;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: flex;
margin-block-start: 2rem;
}
@@ -11,7 +11,7 @@
margin-block-end: 2rem;
border-block-end: 1px solid $color--light-mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
width: 50%;
padding-inline-end: 3rem;
margin: 0 3rem 0 0;
diff --git a/hypha/static_src/sass/components/_projects-table.scss b/hypha/static_src/sass/components/_projects-table.scss
index d0da10b8f2185e9bb2d7e019da5ab2e639c68220..6a7945159ead22a387b043ff09f338e8a4926690 100644
--- a/hypha/static_src/sass/components/_projects-table.scss
+++ b/hypha/static_src/sass/components/_projects-table.scss
@@ -6,7 +6,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
}
@@ -18,7 +18,7 @@
display: inline-block;
width: 90px;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: none;
}
}
@@ -41,7 +41,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
@@ -49,7 +49,7 @@
&.selected {
@include table-checkbox;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
width: 50px;
padding-inline-end: 0;
}
@@ -64,7 +64,7 @@
display: inline-block;
width: 90px;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: none;
}
}
@@ -75,7 +75,7 @@
display: none;
padding-inline-end: 0;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
}
}
diff --git a/hypha/static_src/sass/components/_responsive-table.scss b/hypha/static_src/sass/components/_responsive-table.scss
index 7ada157b3a82fe9bb1c10eb2b9c0f38c2b9ec819..ea29019aecbc6ff9fdad83e907468412ebcf3bde 100644
--- a/hypha/static_src/sass/components/_responsive-table.scss
+++ b/hypha/static_src/sass/components/_responsive-table.scss
@@ -4,7 +4,7 @@
thead {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-header-group;
}
diff --git a/hypha/static_src/sass/components/_reviews-summary.scss b/hypha/static_src/sass/components/_reviews-summary.scss
index ed7cc0c0946bef515a67d3f71bbed2b11ce7f3ee..c0f436e9a31db942631518a05c51720c25f6231a 100644
--- a/hypha/static_src/sass/components/_reviews-summary.scss
+++ b/hypha/static_src/sass/components/_reviews-summary.scss
@@ -2,7 +2,7 @@
display: none;
background-color: transparent;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: table;
}
diff --git a/hypha/static_src/sass/components/_revision.scss b/hypha/static_src/sass/components/_revision.scss
index d675828ee649572a3ddc95c899ad5af7886c2052..8a936c13b41adfda916176293fdbc0bfba0cb388 100644
--- a/hypha/static_src/sass/components/_revision.scss
+++ b/hypha/static_src/sass/components/_revision.scss
@@ -2,7 +2,7 @@
margin: 20px 0;
border: 1px solid $color--mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin: 4rem 0;
}
@@ -13,7 +13,7 @@
background: $color--white;
border-block-end: 1px dashed $color--mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
flex-direction: row;
justify-content: space-between;
}
diff --git a/hypha/static_src/sass/components/_round-block.scss b/hypha/static_src/sass/components/_round-block.scss
index a03ee8753c4730da9617fa02e34faf29e18756cd..5003deda7f25942f1cec4e7f35b47c3d3720d9bf 100644
--- a/hypha/static_src/sass/components/_round-block.scss
+++ b/hypha/static_src/sass/components/_round-block.scss
@@ -18,7 +18,7 @@
border-block-end: 1px solid $color--light-mid-grey;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: flex;
&:hover {
@@ -57,7 +57,7 @@
font-weight: $weight--bold;
text-transform: uppercase;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
color: transparent;
flex-basis: auto;
pointer-events: none;
@@ -83,7 +83,7 @@
border: 1px solid $color--light-mid-grey;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
&__title {
flex-basis: 25em;
}
diff --git a/hypha/static_src/sass/components/_section.scss b/hypha/static_src/sass/components/_section.scss
index 137cf4e85600c23b42554bfdb7436ed5ddeb091c..e540005687f6848a7ee517442fca769492da183f 100644
--- a/hypha/static_src/sass/components/_section.scss
+++ b/hypha/static_src/sass/components/_section.scss
@@ -3,7 +3,7 @@
flex-grow: 1;
margin: $mobile-gutter 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding-inline-end: 20px;
margin-block-end: 0;
}
@@ -13,7 +13,7 @@
display: flex;
flex-direction: column;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
flex-direction: row;
justify-content: space-between;
align-items: center;
diff --git a/hypha/static_src/sass/components/_select2.scss b/hypha/static_src/sass/components/_select2.scss
index 6bb2c5f6b1e9b252ad292c02738a65adf56de310..bbaef5bec36cd43020f117a513fed92dc5a67dd3 100644
--- a/hypha/static_src/sass/components/_select2.scss
+++ b/hypha/static_src/sass/components/_select2.scss
@@ -67,7 +67,7 @@
border-block-end: 1px solid $color--mid-grey;
border-radius: 0;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
border: 1px solid $color--mid-grey;
}
}
diff --git a/hypha/static_src/sass/components/_sidebar.scss b/hypha/static_src/sass/components/_sidebar.scss
index fbce15c3c4abc946ec79a51d901304989da2e5da..ba8847b4b688428b231e19e72f4d841aeee5b4b8 100644
--- a/hypha/static_src/sass/components/_sidebar.scss
+++ b/hypha/static_src/sass/components/_sidebar.scss
@@ -1,5 +1,5 @@
.sidebar {
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
width: 345px;
}
@@ -15,7 +15,7 @@
&--actions {
display: none;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: block;
&--instructions {
diff --git a/hypha/static_src/sass/components/_simplified.scss b/hypha/static_src/sass/components/_simplified.scss
index 742457933c4ecebdba09647036092f4f25513fed..d1444299945d21264f041739d45b02b0b83a3e0b 100644
--- a/hypha/static_src/sass/components/_simplified.scss
+++ b/hypha/static_src/sass/components/_simplified.scss
@@ -64,7 +64,7 @@
flex-wrap: wrap;
margin: 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin-block-end: 1rem;
}
@@ -86,7 +86,7 @@
&__wrapper {
padding: $mobile-gutter 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding: 1rem 0;
}
}
@@ -100,7 +100,7 @@
font-weight: $weight--normal;
color: transparentize($color--dark-grey, 0.5);
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
flex-direction: row;
margin-block-start: 0;
}
diff --git a/hypha/static_src/sass/components/_stat-block.scss b/hypha/static_src/sass/components/_stat-block.scss
index 460032fe6022fee20bbd714c8390eef40e1bc469..5d71fd9793c0d127787099ba93e33c4cec4c838c 100644
--- a/hypha/static_src/sass/components/_stat-block.scss
+++ b/hypha/static_src/sass/components/_stat-block.scss
@@ -1,7 +1,7 @@
.stat-block {
$root: &;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: flex;
}
@@ -13,7 +13,7 @@
display: block;
margin: 0 0 1rem;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin: 0 3rem 0 0;
padding: 1.5rem;
}
@@ -23,7 +23,7 @@
}
&:only-child {
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
max-width: calc(100% / 3);
}
}
@@ -41,7 +41,7 @@
margin: 0.5rem 0;
color: var(--color-fg-default);
- @include media-query(small-tablet) {
+ @include media-query(sm) {
margin: 0.5rem 0;
}
}
@@ -51,7 +51,7 @@
font-weight: $weight--bold;
transition: opacity $quick-transition;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
position: absolute;
inset-block-start: 1rem;
inset-inline-end: 1rem;
diff --git a/hypha/static_src/sass/components/_status-bar.scss b/hypha/static_src/sass/components/_status-bar.scss
index 6f365bcc9b6f0c329c71891dca68bfc7412b24f6..8a036df6e7bf5055773d16d2ac47961879b4b8c3 100644
--- a/hypha/static_src/sass/components/_status-bar.scss
+++ b/hypha/static_src/sass/components/_status-bar.scss
@@ -11,12 +11,12 @@
$root: &;
display: none;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: flex;
}
&--mobile {
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: none;
}
}
diff --git a/hypha/static_src/sass/components/_status-block.scss b/hypha/static_src/sass/components/_status-block.scss
index 8cc505b0f8ba9416066e4eeb028d78c4a173c9e1..168d00002b4f9601c8a6695c990c63816f7be59b 100644
--- a/hypha/static_src/sass/components/_status-block.scss
+++ b/hypha/static_src/sass/components/_status-block.scss
@@ -3,7 +3,7 @@
background-color: $color--white;
border: 1px solid $color--light-mid-grey;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: flex;
}
@@ -14,7 +14,7 @@
background-color: $color--white;
transition: background-color $quick-transition;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
border-block-end: 0;
border-inline-end: 1px solid $color--light-mid-grey;
width: 100%;
@@ -24,14 +24,10 @@
flex-direction: column;
}
- @include media-query(desktop) {
+ @include media-query(xl) {
padding: 20px 18px 30px;
}
- @include media-query(laptop-short) {
- padding: 15px 15px 25px;
- }
-
&--active {
border-block-end: 4px solid;
}
@@ -51,7 +47,7 @@
}
&__info {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
margin-block-start: auto;
}
}
diff --git a/hypha/static_src/sass/components/_table.scss b/hypha/static_src/sass/components/_table.scss
index 25e107e39bd64007c7b35dcdf1012c34f1b2d1d7..6819770700ed86c80cc40a0d50c74cc20644d4d4 100644
--- a/hypha/static_src/sass/components/_table.scss
+++ b/hypha/static_src/sass/components/_table.scss
@@ -13,7 +13,7 @@
table-layout: fixed;
tbody {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
tr {
&:hover {
background-color: $color--light-grey;
@@ -39,7 +39,7 @@
border: 1px solid $color--light-mid-grey;
transition: box-shadow 0.15s ease;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
border-block-start: 0;
border-inline-end: 0;
border-block-end: 1px solid $color--light-mid-grey;
@@ -67,7 +67,7 @@
display: block;
width: 100%;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
width: initial;
}
@@ -75,14 +75,14 @@
&.selected {
display: none;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
display: table-cell;
}
}
&.lead {
span {
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
position: relative;
z-index: 1;
display: block;
@@ -111,7 +111,7 @@
th {
padding: 5px 20px;
- @include media-query($table-breakpoint) {
+ @include media-query(lg) {
padding: 15px 10px;
}
diff --git a/hypha/static_src/sass/components/_tabs.scss b/hypha/static_src/sass/components/_tabs.scss
index e14e49bc7c6674bc91a51661c64331089802a917..a8b936a8153672f3dd04dadcba9b42bacfac7505 100644
--- a/hypha/static_src/sass/components/_tabs.scss
+++ b/hypha/static_src/sass/components/_tabs.scss
@@ -30,12 +30,12 @@
background-color,
0.1s ease-out;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
width: 33%;
padding: 15px;
}
- @include media-query(small-tablet) {
+ @include media-query(sm) {
width: auto;
padding: 0.75rem 1rem;
}
@@ -86,7 +86,7 @@
&--right {
display: none;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
display: block;
margin-inline-start: auto;
}
diff --git a/hypha/static_src/sass/components/_wrapper.scss b/hypha/static_src/sass/components/_wrapper.scss
index eaa1739d146e1f0cf644f9003a7b38539d5d44e2..03dfb46e3ad4c07267f6e9ac8306f94ad3eb98b5 100644
--- a/hypha/static_src/sass/components/_wrapper.scss
+++ b/hypha/static_src/sass/components/_wrapper.scss
@@ -23,7 +23,7 @@
padding: 0 $mobile-gutter;
min-height: calc(100vh - 260px - 160px); // viewport - (header + footer)
- @include media-query(desktop) {
+ @include media-query(xl) {
padding: 0;
}
}
@@ -34,7 +34,7 @@
margin-block-end: 2rem;
background: $color--light-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding: 4rem 0;
margin-block-start: 4rem;
margin-block-end: 4rem;
@@ -47,7 +47,7 @@
height: 110px;
fill: $color--white;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: block;
}
@@ -97,7 +97,7 @@
padding: 0;
margin: 2em auto;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
padding: 2rem 17rem 2rem 0;
margin: 1rem auto 3rem;
}
@@ -121,7 +121,7 @@
padding-block-end: 20px;
margin-block-end: 20px;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding-block-end: 3rem;
margin-block-end: 0;
}
@@ -135,7 +135,7 @@
&--inner-space-medium {
padding: 20px 0;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
padding: 2rem 0;
}
@@ -147,7 +147,7 @@
&--inner-space-large {
padding: 20px 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding: 3rem 0;
}
}
@@ -155,7 +155,7 @@
&--inner-space-xl {
padding: 2rem 20px;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding: 4rem 20px;
}
}
@@ -168,7 +168,7 @@
&--outer-space-medium {
margin: 20px 0;
- @include media-query(mob-landscape) {
+ @include media-query(sm) {
margin: 2rem 0;
}
}
@@ -176,7 +176,7 @@
&--outer-space-large {
margin: 20px 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin: 3rem 0;
}
}
@@ -185,7 +185,7 @@
display: flex;
flex-direction: column;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
flex-direction: row;
> div:last-child {
@@ -196,7 +196,7 @@
&--inner {
flex: 1;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding-inline-end: 20px;
}
}
@@ -211,7 +211,7 @@
flex-direction: column;
justify-content: space-between;
- @include media-query(small-tablet) {
+ @include media-query(sm) {
flex-direction: row;
}
}
@@ -246,7 +246,7 @@
justify-content: space-between;
margin-block-end: 20px;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
margin-block-end: 0;
}
}
@@ -259,7 +259,7 @@
padding: 0 20px;
margin-block-start: 50px;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
margin-block-start: 70px;
}
}
@@ -269,7 +269,7 @@
margin-block-end: 15px;
border-block-end: 1px solid $color--mid-grey;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding-block-end: 35px;
margin-block-end: 35px;
}
@@ -282,18 +282,18 @@
&--tabs {
padding: 20px 0;
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
padding: 2rem 0;
}
}
&--table-actions {
- @include media-query(tablet-portrait) {
+ @include media-query(md) {
display: flex;
justify-content: space-between;
}
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
justify-content: flex-end;
}
}
@@ -304,7 +304,7 @@
margin-block-start: 1rem;
align-items: flex-start;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
margin-block-start: 0;
justify-content: flex-end;
flex: 1;
diff --git a/hypha/static_src/sass/layout/_header.scss b/hypha/static_src/sass/layout/_header.scss
index 7c868446016c5fd4c1abcab79b4471ce477742cc..b296cebd6aeab44fd9aed37b24298a396d36eb64 100644
--- a/hypha/static_src/sass/layout/_header.scss
+++ b/hypha/static_src/sass/layout/_header.scss
@@ -1,27 +1,31 @@
.header {
- position: relative;
- padding: 20px;
+ padding: $mobile-gutter;
background-color: var(--color-header-bg);
border-block-end: 1px solid rgb(136 146 171 / 10%);
+ @include media-query(md) {
+ padding: 0 $mobile-gutter;
+ }
+
+ @include media-query(xl) {
+ padding: 0;
+ }
+
+ &--nomenu {
+ padding-block: $mobile-gutter;
+ }
+
&__inner {
- position: relative;
z-index: 10;
display: flex;
+ gap: 1rem;
+ flex-direction: column;
align-items: center;
justify-content: space-between;
width: 100%;
- &--menu-open {
- padding: 20px;
- }
-
- &--mobile-buttons {
- justify-content: flex-end;
-
- @include media-query(tablet-portrait) {
- display: none;
- }
+ @include media-query(md) {
+ flex-direction: row;
}
}
@@ -31,7 +35,7 @@
&--mobile {
width: 60px;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: none;
}
}
@@ -39,72 +43,20 @@
&--desktop {
display: none;
- @include media-query(tablet-landscape) {
+ @include media-query(lg) {
display: block;
width: 215px;
}
}
}
- &__menu-toggle {
- @include media-query(tablet-portrait) {
- display: none;
- }
- }
-
- &__icon {
- &--close-search {
- @extend %is-hidden;
- }
- }
-
- &__button-container {
- display: none;
-
- @include media-query(tablet-portrait) {
- display: flex;
- }
+ &__buttons {
}
&__menus {
+ display: flex;
flex-grow: 1;
-
- &--desktop {
- display: none;
-
- @include media-query(tablet-portrait) {
- display: flex;
- align-items: center;
- justify-content: center;
- }
- }
-
- &--mobile {
- position: fixed;
- inset-block-start: 0;
- inset-inline-start: 0;
- z-index: 10;
- width: 100%;
- height: 100%;
- background: $color--dark-grey;
- opacity: 0;
- transform: translate3d(0, -100%, 0);
- transition-duration: 0.25s;
- transition-property: transform, opacity;
- transition-timing-function: cubic-bezier(0.65, 0.05, 0.36, 1);
-
- &.is-visible {
- opacity: 1;
- transform: translate3d(0, 0%, 0);
-
- @include media-query(tablet-portrait) {
- display: none;
- }
- }
-
- nav {
- width: 100%;
- }
- }
+ align-items: center;
+ justify-content: center;
}
}
diff --git a/hypha/templates/base-apply.html b/hypha/templates/base-apply.html
index 30ca991e982f8c350a02c97ee515336e115a3d29..310615f22355c380386b8ca874e5dbde04030f6d 100644
--- a/hypha/templates/base-apply.html
+++ b/hypha/templates/base-apply.html
@@ -2,161 +2,39 @@
{% load i18n static wagtailcore_tags wagtailimages_tags heroicons %}<!doctype html>
{% block header %}
- <header class="header">
- <div class="header__inner wrapper wrapper--large">
- <a href="{{ settings.core.SystemSettings.site_logo_link|default:"/" }}" aria-label="{% trans "Home link" %}">
- {% if settings.core.SystemSettings.site_logo_default %}
- {% image settings.core.SystemSettings.site_logo_default width-215 as logo_default %}
- <img class="header__logo header__logo--desktop"
- width="215"
- src="{{ logo_default.url }}"
- alt="{{ settings.core.SystemSettings.site_logo_default.alt }}"
- >
- {% if settings.core.SystemSettings.site_logo_mobile %}
- {% image settings.core.SystemSettings.site_logo_mobile width-60 as logo_mobile %}
- <img class="header__logo header__logo--mobile"
- width="60"
- src="{{ logo_mobile.url }}"
- alt="{{ settings.core.SystemSettings.site_logo_mobile.alt }}"
- >
- {% else %}
- <img class="header__logo header__logo--mobile"
- width="60"
- src="{{ logo_default.url }}"
- alt="{{ settings.core.SystemSettings.site_logo_default.alt }}"
- >
- {% endif %}
- {% else %}
- <img class="header__logo header__logo--desktop"
- width="215"
- height="40"
- src="{% static 'images/logo.png' %}"
- alt="{% trans "Hypha logo" %}"
- >
- <img class="header__logo header__logo--mobile"
- width="60" height="60"
- src="{% static 'images/logo-small.png' %}"
- alt="{% trans "Hypha logo" %}"
- >
- {% endif %}
- </a>
-
- <div class="header__inner header__inner--mobile-buttons">
- {% if request.user.is_authenticated %}
- <button class="button button--left-space js-mobile-menu-toggle" aria-haspopup="true">
- <span class="sr-only">{% trans "Open menu" %}</span>
- {% heroicon_outline "bars-3" size=32 stroke_width=2 class="inline" aria_hidden="true" %}
- </button>
- {% else %}
- {% if request.path != '/auth/' and request.path != '/login/' %}
- {% include "includes/user_menu.html" %}
- {% endif %}
- {% endif %}
- </div>
-
- {% block header_menu %}
- <section class="header__menus header__menus--desktop">
- {% include "core/navigation/primarynav-apply.html" %}
- </section>
- {% endblock header_menu %}
-
- <section class="header__menus header__menus--mobile">
- <div class="header__inner header__inner--menu-open">
- <a href="{{ settings.core.SystemSettings.site_logo_link|default:"/" }}" aria-label="Home link">
- {% if settings.core.SystemSettings.site_logo_mobile %}
- {% image settings.core.SystemSettings.site_logo_mobile width-60 as logo_mobile %}
- <img class="header__logo header__logo--mobile"
- width="60"
- src="{{ logo_mobile.url }}"
- alt="{{ settings.core.SystemSettings.site_logo_mobile.alt }}"
- >
- {% else %}
- <img class="header__logo header__logo--mobile"
- width="60"
- height="60"
- src="{% static 'images/logo-small.png' %}"
- alt="{% trans "Hypha logo" %}"
- >
- {% endif %}
- </a>
- <div class="header__inner header__inner--mobile-buttons">
- <button class="button button--left-space js-mobile-menu-close">
- <span class="sr-only">{% trans "Close" %}</span>
- {% heroicon_outline "x-mark" size=32 stroke_width=2 class="inline text-white" aria_hidden="true" %}
- </button>
- </div>
- </div>
-
+ <header
+ class="max-w-[1280px] px-4 py-2 flex gap-4 items-center justify-between mx-auto w-full"
+ x-data="{'showDesktopMenu': false, isDesktop: false, mm: null}"
+ x-init="mm = window.matchMedia(`(min-width: 768px)`); isDesktop = mm.matches; mm.addListener((e) => { isDesktop = e.matches }); "
+ >
+ <a
+ class="py-2 px-0.5"
+ href="{{ settings.core.SystemSettings.site_logo_link|default:"/" }}">
+ {% include 'includes/header-logo.html' %}
+ </a>
+
+ {% block header_menu %}
+ {% if request.user.is_authenticated %}
{% include "core/navigation/primarynav-apply.html" %}
-
- {% if request.user.is_authenticated %}
- <a href="{% url 'users:account' %}" class="button button--transparent button--mobile-standout">
- {% heroicon_micro "user" class="inline align-middle w-4 h-4 me-1" aria_hidden=true %}
- {{ request.user }}
- </a>
- <a href="{% url 'users:logout' %}" class="button button--transparent button--mobile-standout text-center">
- {% trans "Log out" %}
- </a>
- {% endif %}
- </section>
-
- <div class="header__button-container flex h-10 gap-4">
- {% comment %} Todo List {% endcomment %}
- {% if request.user.is_authenticated and request.user.is_apply_staff %}
- <div
- x-data="{open: false}"
- x-init="$watch('open', value => { if (value) { document.getElementById('id-task-list').dispatchEvent(new Event('htmx:fetch')); } })"
- >
- <a href="{% url "todo:list" %}"
- class="flex p-2 rounded-full text-black hover:bg-black hover:text-white transition-colors"
- aria-label="{% trans "Task List" %}"
- aria-haspopup="task_list"
- aria-expanded="false"
- role="button"
- title="{% trans "Click to open your task list" %}"
- @click.prevent="open = ! open"
- >
- {% heroicon_outline "bell-alert" class="inline" aria_hidden="true" %}
- </a>
- <div x-cloak x-show="open" x-transition @click.outside="open = false">
- <div class="relative z-999999">
- <div class="absolute end-0 bg-white border border-gray-200 min-w-[400px] shadow-md max-h-[500px] overflow-y-scroll zeta" role="task_list">
- <div class="p-2 flex justify-between border-b border-gray-100 font-semibold bg-gray-100">
- <span>{% trans "Task List" %}</span>
- </div>
-
- <div
- id="id-task-list"
- hx-get="{% url "todo:list" %}?type=header_dropdown"
- hx-swap="innerHTML"
- hx-trigger="htmx:fetch"
- >
- <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <hr>
- <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <hr>
- <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <hr>
- <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <hr>
- <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- {% endif %}
- {% comment %} Todo List End{% endcomment %}
-
- {% if request.path != '/auth/' and request.path != '/login/' %}
- {% include "includes/user_menu.html" %}
- {% endif %}
- </div>
+ {% endif %}
+ {% endblock %}
+
+ <div class="flex gap-2">
+ {% if request.user.is_authenticated and request.user.is_apply_staff %}
+ {% include "includes/menu-notifications.html" %}
+ {% endif %}
+
+ {% if request.path != '/auth/' and request.path != '/login/' %}
+ {% include "includes/user_menu.html" %}
+ {% endif %}
+
+ <button
+ class="text-center p-1.5 border rounded md:hidden hover:bg-slate-100 transition-colors"
+ @click="showDesktopMenu = true"
+ >
+ <span class="sr-only">{% trans "Menu" %}</span>
+ {% heroicon_outline "bars-3" aria_hidden="true" class="inline align-bottom" %}
+ </button>
</div>
</header>
{% endblock header %}
diff --git a/hypha/templates/includes/header-logo.html b/hypha/templates/includes/header-logo.html
new file mode 100644
index 0000000000000000000000000000000000000000..2acfa4f353d63f78c42f4de0d675173e362c4c48
--- /dev/null
+++ b/hypha/templates/includes/header-logo.html
@@ -0,0 +1,15 @@
+{% load i18n static wagtailimages_tags %}
+
+{% if settings.core.SystemSettings.site_logo_default %}
+ {% image settings.core.SystemSettings.site_logo_default width - 215 as logo_default %}
+ <img class="header__logo header__logo--desktop" width="215" src="{{ logo_default.url }}" alt="{{ settings.core.SystemSettings.site_logo_default.alt }}" />
+ {% if settings.core.SystemSettings.site_logo_mobile %}
+ {% image settings.core.SystemSettings.site_logo_mobile width - 60 as logo_mobile %}
+ <img class="header__logo header__logo--mobile" width="60" src="{{ logo_mobile.url }}" alt="{{ settings.core.SystemSettings.site_logo_mobile.alt }}" />
+ {% else %}
+ <img class="header__logo header__logo--mobile" width="60" src="{{ logo_default.url }}" alt="{{ settings.core.SystemSettings.site_logo_default.alt }}" />
+ {% endif %}
+{% else %}
+ <img class="header__logo header__logo--desktop" width="215" height="40" src="{% static 'images/logo.png' %}" alt="{% trans 'Hypha logo' %}" />
+ <img class="header__logo header__logo--mobile" width="60" height="60" src="{% static 'images/logo-small.png' %}" alt="{% trans 'Hypha logo' %}" />
+{% endif %}
diff --git a/hypha/templates/includes/menu-notifications.html b/hypha/templates/includes/menu-notifications.html
new file mode 100644
index 0000000000000000000000000000000000000000..ca1e1aa34ff6d59f25a150a4d93e612ed659537f
--- /dev/null
+++ b/hypha/templates/includes/menu-notifications.html
@@ -0,0 +1,59 @@
+{% load i18n heroicons %}
+<!-- Notification Bell -->
+<div
+ class="relative inline-block"
+ x-data="{open: false}"
+ x-on:keydown.escape="open = false"
+ x-init="$watch('open', value => { if (value) { document.getElementById('id-task-list').dispatchEvent(new Event('htmx:fetch')); } })"
+>
+ <a href="{% url "todo:list" %}"
+ class="flex p-2 rounded-full transition-all group text-gray-900"
+ aria-label="{% trans "Task List" %}"
+ aria-haspopup="task_list"
+ aria-expanded="false"
+ role="button"
+ title="{% trans "Click to open your task list" %}"
+ @click.prevent="open = ! open"
+ :class="open ? 'bg-gray-900 text-white' : 'hover:bg-slate-200'"
+ >
+ {% heroicon_outline "bell-alert" class="inline group-hover:scale-110 transition-transform" aria_hidden="true" %}
+ </a>
+
+ <!-- panel -->
+ <div
+ class="z-30 shadow-md bg-white border overflow-y-scroll rounded fixed top-0 start-0 end-0 md:absolute md:start-auto md:top-auto md:min-w-[400px] md:max-h-[500px]"
+ x-cloak
+ x-show="open"
+ x-trap="open"
+ x-transition
+ x-transition.origin.top
+ @click.outside="open = false"
+ class="relative "
+ role="task_list"
+ >
+ <header class="subheading border-b px-3 py-2 flex justify-between items-center gap-2 bg-gray-100">
+ <span class="SubMenuHeading font-medium text-inherit">
+ {% trans "Your Tasks" %}
+ </span>
+ <button type="button" @click='open = false' class="appearance-none opacity-70 hover:opacity-100">
+ {% heroicon_solid "x-mark" aria_hidden="true" class="" %}
+ </button>
+ </header>
+
+ <div
+ id="id-task-list"
+ hx-get="{% url "todo:list" %}?type=header_dropdown"
+ hx-swap="innerHTML"
+ hx-trigger="htmx:fetch"
+ >
+ <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ <hr>
+ <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ <hr>
+ <div class="min-h-4 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ <div class="min-h-4 w-2/3 mx-4 my-3 rounded-lg bg-gray-200 animate-pulse"></div>
+ </div>
+ </div>
+</div>
diff --git a/hypha/templates/includes/org_login_button.html b/hypha/templates/includes/org_login_button.html
index 826765fd2aed770015a7510d4013ae3c5598b168..f1e6ffb3117334999c9f7d999f1f43d187a86862 100644
--- a/hypha/templates/includes/org_login_button.html
+++ b/hypha/templates/includes/org_login_button.html
@@ -1,6 +1,6 @@
{% load i18n heroicons %}
<a
- class="button button--secondary button--login"
+ class="button button--secondary button--login mb-4"
href="{% url "social:begin" "google-oauth2" %}{% if next %}?next={{ next }}{% endif %}"
>
{% heroicon_mini "building-office" size=18 class="inline align-text-bottom me-1" aria_hidden=true %}
diff --git a/hypha/templates/includes/user_menu.html b/hypha/templates/includes/user_menu.html
index 3f0b54930b99d42fc5ce85bc1153d1a3c70d7361..3ec7778b0a30d8457d4744996d5c0ede6e301557 100644
--- a/hypha/templates/includes/user_menu.html
+++ b/hypha/templates/includes/user_menu.html
@@ -1,67 +1,75 @@
{% load i18n heroicons %}
{% if request.user.is_authenticated %}
- <div x-data="{ show: false }" class="relative flex">
+ <div x-data="{ show: false }" x-on:keydown.escape="show = false" class="relative flex">
<button
x-on:click="show = ! show"
- class="font-bold flex items-center ps-1 pe-4 hover:bg-black hover:text-white transition-colors rounded-sm"
+ class="font-bold flex items-center transition-all rounded-sm px-1.5 bg-gray-100"
type="button"
+ :class="show ? 'bg-gray-900 text-white' : 'hover:bg-light-blue/30'"
>
- {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 me-1" aria_hidden=true %}
- <span>{{ request.user }}</span>
+ {% heroicon_micro "user-circle" class="inline align-text-bottom w-8 h-8 md:me-1" aria_hidden=true %}
+ <span class="hidden md:inline-block truncate max-w-36">{{ request.user }}</span>
</button>
+
+ <!-- panel -->
<div
x-cloak
x-show="show"
+ x-trap.noautofocus="show"
x-transition
+ x-transition.origin.top
@click.outside="show = false"
- class="min-w-36 absolute block bg-white shadow-xl z-20 border-y rounded-sm end-0 top-10"
+ class="min-w-48 absolute block bg-white shadow-xl z-[100000] border-y rounded-sm end-0 top-10"
>
<a
href="{% url 'users:account' %}"
title="Goto your account"
- class="pe-4 py-3 block text-black ps-3
- focus-visible:outline-dashed outline-1 transition-colors border-r
- hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+ class="px-3 py-2 text-black flex items-center gap-2
+ focus-visible:outline-dashed outline-1 transition-colors border-x
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold group"
>
+ {% heroicon_outline "user" size=18 class="stroke-gray-500 inline group-hover:scale-110 group-hover:stroke-2 group-hover:stroke-dark-blue transition-transform" aria_hidden=true %}
{% trans 'My account' %}
</a>
{% if request.user.is_apply_staff %}
<a
href="{% url 'activity:notifications' %}"
title="Check latest notifications"
- class="pr-4 py-3 block text-black pl-3
- focus-visible:outline-dashed outline-1 transition-colors border-r
- hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+ class="px-3 py-2 text-black flex items-center gap-2
+ focus-visible:outline-dashed outline-1 transition-colors border-x
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold group"
>
+ {% heroicon_outline "bolt" size=18 class="stroke-gray-500 inline group-hover:scale-110 group-hover:stroke-2 group-hover:stroke-dark-blue transition-transform" aria_hidden=true %}
{% trans "Activity feed" %}
</a>
<a
href="{% url "apply:submissions:list-alt" %}?query=flagged:@me"
title="Goto your flagged submissions"
- class="pr-4 py-3 block text-black pl-3
+ class="px-3 py-2 text-black flex items-center gap-2
focus-visible:outline-dashed outline-1 transition-colors border-r
- hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold group"
>
+ {% heroicon_outline "flag" size=18 class="stroke-gray-500 inline group-hover:scale-110 group-hover:stroke-2 group-hover:stroke-dark-blue transition-transform" aria_hidden=true %}
{% trans "My flagged" %}
</a>
<a
href="{% url 'wagtailadmin_home' %}"
title="Goto wagtail admin"
- class="pr-4 py-3 block text-black pl-3
- focus-visible:outline-dashed outline-1 transition-colors border-r
- hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+ class="px-3 py-2 text-black flex items-center gap-2
+ focus-visible:outline-dashed outline-1 transition-colors border-x
+ hover:bg-slate-100 hover:text-dark-blue hover:font-semibold group"
>
- {% trans "Admin" %}
- {% heroicon_micro "wrench-screwdriver" class="ms-2 inline align-text-bottom" %}
+ {% heroicon_outline "cog-6-tooth" size=18 class="stroke-gray-500 inline group-hover:scale-110 group-hover:stroke-2 group-hover:stroke-dark-blue transition-transform" aria_hidden=true %}
+ {% trans "Administration" %}
</a>
{% endif %}
<a
href="{% url 'users:logout' %}"
title="Log out"
- class="pr-4 py-3 block text-black pl-3 focus-visible:outline-dashed
- outline-1 transition-colors border-r
- hover:bg-slate-100 hover:text-dark-blue hover:font-semibold"
+ class="px-3 py-2 block focus-visible:outline-dashed
+ outline-1 transition-all border-x border-t text-center font-semibold text-red-600
+ hover:bg-red-100 hover:text-red-900 hover:font-semibold"
>
{% trans "Log out" %}
</a>