Skip to content

Commit

Permalink
feat: Megamenu (#367)
Browse files Browse the repository at this point in the history 
* Remove unused context vars

* Rename MenuItem to SecondaryMenuItem

* Rename migration

* Models for megamenu

* Display the megamenu

* Fix tests

* Restore IAB main menu

* Fix tests
  • Loading branch information
@mgax
mgax authored Dec 21, 2023
1 parent 9d3f4c3 commit 4f00319
Show file tree
Hide file tree
Showing 15 changed files with 455 additions and 100 deletions.
35 changes: 10 additions & 25 deletions ietf/context_processors.py
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
from operator import itemgetter
from django.conf import settings

from wagtail.models import Site

from ietf.blog.models import BlogIndexPage
from ietf.home.models import HomePage, IABHomePage
from ietf.utils.models import MenuItem, SocialMediaSettings
from ietf.utils.models import SecondaryMenuItem, SocialMediaSettings
from ietf.utils.context_processors import get_main_menu


def home_page(site):
Expand All @@ -13,23 +13,11 @@ def home_page(site):
return HomePage.objects.filter(depth=2).first()


def children(item):
return item and item.get_children().live().in_menu()


def menu(site):
items = children(home_page(site))
if items:
for item in items:
item.subitems = children(item)
return items


def secondary_menu(site):
if "iab" in site.hostname:
return []
items = (
MenuItem.objects.order_by("sort_order")
SecondaryMenuItem.objects.order_by("sort_order")
.all()
.select_related("page")
.prefetch_related("sub_menu_items")
Expand All @@ -51,14 +39,11 @@ def social_menu(site):

def global_pages(request):
site = Site.find_for_request(request)
# XXX Return lazy values. This makes a big difference when a page renders
# multiple templates, e.g. when the wagtail userbar is displayed.
return {
"HOME": home_page(site),
"BLOG_INDEX": BlogIndexPage.objects.first(),
"MENU": menu(site),
"SECONDARY_MENU": secondary_menu(site),
"SOCIAL_MENU": social_menu(site),
"BASE_URL": getattr(settings, "WAGTAILADMIN_BASE_URL", ""),
"DEBUG": getattr(settings, "DEBUG", ""),
"FB_APP_ID": getattr(settings, "FB_APP_ID", ""),
"SITE": site,
"HOME": lambda: home_page(site),
"MENU": lambda: get_main_menu(site),
"SECONDARY_MENU": lambda: secondary_menu(site),
"SOCIAL_MENU": lambda: social_menu(site),
}
2 changes: 1 addition & 1 deletion ietf/search/templates/search/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</ol>
</nav>

<h1>Search results for {{ SITE.hostname }}</h1>
<h1>Search results for {{ current_site.hostname }}</h1>
<p class="lead">The search results below include information from the primary public-facing website of the IETF.</p>

<div class="row mb-4">
Expand Down
1 change: 0 additions & 1 deletion ietf/static_src/css/iab.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -167,7 +167,6 @@
}

.dropdown-menu-iab {
margin-top: 36px !important;
top: 0%; //overrides bootstrap default of 100% which was moving the menu
border-radius: 4px;
}
Expand Down
3 changes: 2 additions & 1 deletion ietf/static_src/js/init.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,12 @@ import $ from 'jquery';
import 'jquery-ui/ui/widgets/datepicker';
import * as Popper from '@popperjs/core';

import 'bootstrap';
import * as bootstrap from 'bootstrap';

window.$ = $;
window.jQuery = $;
window.Popper = Popper;
window.bootstrap = bootstrap;

document.documentElement.classList.remove('no-js');

Expand Down
83 changes: 29 additions & 54 deletions ietf/templates/includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
{% load static wagtailcore_tags %}
{% load wagtailcore_tags %}

<header class="header">
<a href="#content" class="visually-hidden visually-hidden-focusable">Skip to main content</a>
<nav
class="navbar navbar-expand-lg"
aria-label="Main"
>
<div class="container">
<div class="container position-relative">
<button
class="navbar-toggler navbar-toggler-light"
type="button"
Expand Down Expand Up @@ -45,52 +45,28 @@
class="collapse navbar-collapse flex-wrap-reverse"
id="navbarSupportedContent"
>
<ul
class="navbar-nav col-12 col-xl-auto justify-content-xl-center flex-grow"
>
{% for item in MENU %}
<li class="nav-item btn-group {% if item.pk == self.pk %} active{% endif %}">
<a
href="{{ item.url }}"
class="nav-link btn text-dark fw-semibold text-uppercase{% if item.subitems %} pe-1{% endif %}"
>
{{ item.title }}
</a>
{% if item.subitems %}
<button
class="btn dropdown-toggle dropdown-toggle-split d-none d-lg-block ps-1 no-js-hide"
id="{{ item.pk }}Dropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
aria-label="Toggle dropdown for {{ item.title }}"
title="Toggle dropdown for {{ item.title }}"
>
</button>
<ul class="dropdown-menu" aria-labelledby="{{ item.pk }}Dropdown">
{% for subitem in item.subitems %}
<li class="dropdown-item position-relative{% if subitem.pk == self.pk %} active{% endif %}">
<a class="text-dark stretched-link" href="{{ subitem.url }}">{{ subitem.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>

{% endfor %}
</ul>
{% include "includes/megamenu.html" %}

<ul class="navbar-nav col-xl-auto">
{% for item in SECONDARY_MENU %}
{% if item.is_dropdown %}
<li class="nav-item btn-group">
{% else %}
<li class="nav-item">
{% endif %}
<a class="nav-link btn text-dark {% if item.is_dropdown %}pe-1{% endif %}" href="{% pageurl item.page %}">{{item.title}}</a>
{% if item.is_dropdown %}
<button
class="nav-link btn text-dark dropdown-toggle dropdown-toggle-split d-none d-lg-block ps-1 no-js-hide"

<li
class="
nav-item
{% if item.is_dropdown %}btn-group dropdown dropdown-hover{% endif %}
"
>
<a
class="
nav-link btn text-dark
{% if item.is_dropdown %}pe-1{% endif %}
"
href="{% pageurl item.page %}"
>{{item.title}}</a>

{% if item.is_dropdown %}
<button
class="nav-link btn text-dark dropdown-toggle d-none d-lg-block ps-1 no-js-hide"
id="{{ item.pk }} Dropdown"
data-bs-toggle="dropdown"
aria-haspopup="true"
Expand All @@ -99,14 +75,16 @@
title="Toggle dropdown for tools"
{{ item.pk }}
></button>

<ul class="dropdown-menu dropdown-menu-right">
{% for sub_menu in item.sub_menu_items.all %}
<li class="dropdown-item position-relative">
<a class="text-dark stretched-link" href="{{ sub_menu.url}}">{{ sub_menu.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% endif %}

</li>
{% endfor %}
<li class="nav-item d-none d-lg-inline-block">
Expand Down Expand Up @@ -136,17 +114,14 @@
<a
href="/endowment/donate-ietf-endowment/"
class="btn btn-primary"
>
Donate
</a>
>Donate</a>
</div>
</div>
<div class="bg-primary rounded nav-item">
<a
href="/endowment/donate-ietf-endowment/"
class="px-3 py-3 d-none d-lg-block text-white">
Donate
</a>
<a
href="/endowment/donate-ietf-endowment/"
class="px-3 py-3 d-none d-lg-block text-white"
>Donate</a>
</div>
</div>
</nav>
Expand Down
7 changes: 6 additions & 1 deletion ietf/templates/includes/header_iab.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,12 @@
class="navbar-nav align-items-center"
>
{% for item in MENU %}
<li class="nav-item nav-item--iab btn-group me-2 {% if item.pk == self.pk %} active{% endif %}">
<li
class="
nav-item nav-item--iab dropdown-hover btn-group me-2
{% if item.pk == self.pk %} active{% endif %}
"
>
<a
href="{{ item.url }}"
class="nav-link nav-link--iab btn text-white iab-navbar-text text-lg-start {% if item.subitems %} pe-1{% endif %}"
Expand Down
95 changes: 95 additions & 0 deletions ietf/templates/includes/megamenu.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
{% load wagtailimages_tags %}

<ul class="navbar-nav col-12 col-xl-auto justify-content-xl-center flex-grow">
{% for item in MENU %}
<li class="nav-item dropdown position-static">
<button
class="
nav-link btn megamenu__toggle
text-dark fw-semibold text-uppercase
{% if item.expandable %}dropdown-toggle pe-1{% endif %}
"
{% if item.expandable %}
id="megamenu-toggle-{{ item.main_menu_item.pk }}"
role="button"
data-bs-toggle="dropdown"
data-bs-auto-close="outside"
aria-expanded="false"
{% else %}
href="{{ item.url }}"
{% endif %}
>
{{ item.title }}
</button>

{% if item.expandable %}
<div
class="dropdown-menu megamenu__menu w-100 px-2"
aria-labelledby="megamenu-toggle-{{ item.pk }}"
>
<div class="container py-3">
<div class="row gx-5">
<div class="col-lg-4 d-none d-lg-block">
<div class="">
<p>{{ item.introduction }}</p>

{% if item.image %}
{% image item.image width-600 as image %}
<img src="{{ image.url }}" class="w-100 object-fit-cover" />
{% endif %}
</div>
</div>
<div class="col-lg-8">
<h5 class="border-bottom mb-1 pb-1">
{% if item.url %}
<a class="dropdown-item" href="{{ item.url }}">
{{ item.title }}
<i class="bi bi-chevron-right"></i>
</a>
{% else %}
{{ item.title }}
{% endif %}
</h5>

<ul class="megamenu__linklist">
{% for link in item.main_section_links %}
<li>
<a class="dropdown-item" href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>

{% for section in item.secondary_sections %}
<h6 class="mt-3 mb-1 pb-1 border-bottom">{{ section.title }}</h6>

<ul class="megamenu__linklist">
{% for link in section.links %}
<li>
<a class="dropdown-item" href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>

{% if request.is_preview and MENU_PREVIEW %}
<script>
window.addEventListener("load", () => {
const toggle = document.querySelector("#megamenu-toggle-{{ MENU_PREVIEW.pk }}");
if (toggle) {
new bootstrap.Dropdown(toggle).show();
}
});
</script>
{% endif %}
46 changes: 43 additions & 3 deletions ietf/templates/includes/styles/header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,48 @@
background-color: darken($dark, 7.5%);
}

.header .navbar-nav .nav-item:hover .dropdown-toggle[aria-expanded="false"] + .dropdown-menu {
display: block;
margin-top: 2.5em;
.dropdown-hover {
&:hover .dropdown-menu {
display: block;
top: 100%;
}
}
}

.megamenu {
&__toggle {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
padding-bottom: 16px;
margin-bottom: -8px;
width: 100%;

&.show {
background: #ddd;
}
}

&__menu {
--bs-dropdown-link-color: rgb(86, 94, 100);

li {
break-inside: avoid-column;
}

.dropdown-item {
display: inline;
padding: 0;
white-space: inherit;
font-weight: inherit;
width: auto;
}
}

&__linklist {
--bs-dropdown-link-color: rgb(86, 94, 100);

@include media-breakpoint-up(md) {
column-count: 2;
}
}
}
Loading

0 comments on commit 4f00319

Please sign in to comment.