Skip to content
New issue

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

Sign up for GitHub

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

Already on GitHub? Sign in to your account

Remove zen mode references from primary-nav.js and primary_nav.html #12482

Closed
wants to merge 2 commits into from
Closed

Remove zen mode references from primary-nav.js and primary_nav.html #12482

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
4741786
Remove zen mode references from `primary-nav.js` and `primary_nav.html`
ramram-mf Jun 13, 2024
88d5900
Fix `primary_nav-html` indentation to pass `djhtml` linting process.
ramram-mf Jun 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 53 additions & 59 deletions network-api/networkapi/templates/fragments/primary_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,73 @@
{% load primary_active_nav i18n %}

{% if page.zen_nav == True %}<div data-nav-mode="zen" class="zen-mode primary-nav-container">
{% else %}<div class="primary-nav-container">
{% endif %}
<div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
<div class="menu-container xlarge:tw-h-40 tw-py-8 small:tw-pl-0 medium:tw-py-10 xlarge:tw-py-0 {% block menu_container_classes %}{% endblock %}">
{% block menu_content %}
<div class="narrow-screen-menu tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
{% block narrow_screen_menu %}
<div class="narrow-screen-menu-background tw-dark">
<div class="narrow-screen-menu-container ">
<div class="tw-container" role="navigation">
<div class="tw-row">
<div class="tw-flex-grow tw-max-w-full tw-flex-1">
<div class="nav-links pt-3">
{% block narrow_screen_nav_links %}
<div><a class="{% primary_active_nav request menu_root.full_url menu_root.full_url %}" href="{{ menu_root.url }}">{% trans "Home" %}</a></div>
{% include "fragments/nav_links.html" with pre="<div>" post="</div>" %}
{% endblock %}
{% if page.signup == None %}<div class="mt-2"><button class="tw-btn-secondary btn-newsletter">{% trans "Newsletter" %}</button></div>{% endif %}
<div class="primary-nav-container">
<div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
<div class="menu-container xlarge:tw-h-40 tw-py-8 small:tw-pl-0 medium:tw-py-10 xlarge:tw-py-0 {% block menu_container_classes %}{% endblock %}">
{% block menu_content %}
<div class="narrow-screen-menu tw-bg-white hidden xlarge:tw-hidden tw-overflow-y-auto">
{% block narrow_screen_menu %}
<div class="narrow-screen-menu-background tw-dark">
<div class="narrow-screen-menu-container ">
<div class="tw-container" role="navigation">
<div class="tw-row">
<div class="tw-flex-grow tw-max-w-full tw-flex-1">
<div class="nav-links pt-3">
{% block narrow_screen_nav_links %}
<div><a class="{% primary_active_nav request menu_root.full_url menu_root.full_url %}" href="{{ menu_root.url }}">{% trans "Home" %}</a></div>
{% include "fragments/nav_links.html" with pre="<div>" post="</div>" %}
{% endblock %}
{% if page.signup == None %}<div class="mt-2"><button class="tw-btn-secondary btn-newsletter">{% trans "Newsletter" %}</button></div>{% endif %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}
</div>
{% endblock %}
<nav class="tw-container wide-screen-menu-container tw-relative xlarge:tw-h-full tw-bg-white" aria-label="{% trans "main site navigation" context "Tooltip on menu items" %}">
<div class="tw-row tw-h-full tw-justify-between xlarge:tw-items-center">
<div class="col">
<div class="tw-flex tw-flex-row tw-justify-between xlarge:tw-items-center">
<div id="primary-nav-links" class="tw-w-full tw-py-0 xlarge:tw-w-auto xlarge:tw-items-center">
<div class="tw-flex tw-items-center tw-flex-wrap">
<button class="burger tw-z-50 tw-bg-white {% if page.zen_nav is not True %} xlarge:tw-hidden small:tw-ml-0 {% endif %}" aria-label="{% trans 'Open menu' %}">
<span class="burger-bar burger-bar-top"></span>
<span class="burger-bar burger-bar-middle"></span>
<span class="burger-bar burger-bar-bottom"></span>
</button>
{% endblock %}
</div>
{% endblock %}
<nav class="tw-container wide-screen-menu-container tw-relative xlarge:tw-h-full tw-bg-white" aria-label="{% trans "main site navigation" context "Tooltip on menu items" %}">
<div class="tw-row tw-h-full tw-justify-between xlarge:tw-items-center">
<div class="col">
<div class="tw-flex tw-flex-row tw-justify-between xlarge:tw-items-center">
<div id="primary-nav-links" class="tw-w-full tw-py-0 xlarge:tw-w-auto xlarge:tw-items-center">
<div class="tw-flex tw-items-center tw-flex-wrap">
<button class="burger tw-z-50 tw-bg-white xlarge:tw-hidden small:tw-ml-0" aria-label="{% trans 'Open menu' %}">
<span class="burger-bar burger-bar-top"></span>
<span class="burger-bar burger-bar-middle"></span>
<span class="burger-bar burger-bar-bottom"></span>
</button>

{% block nav_logo %}
<a class="logo text-hide tw-z-50" href="/" aria-label="{% trans "Mozilla Foundation Homepage" %}">{% trans "Mozilla Foundation" %}</a>
{% endblock %}
{% block nav_logo %}
<a class="logo text-hide tw-z-50" href="/" aria-label="{% trans "Mozilla Foundation Homepage" %}">{% trans "Mozilla Foundation" %}</a>
{% endblock %}

{% if page.zen_nav == True %}
<div class="wide-screen-menu hidden">
{% else %}
<div class="wide-screen-menu xlarge:tw-h-full xlarge:tw-flex xlarge:tw-items-center">
{% endif %}

{% block wide_screen_menu %}
<div class="nav-links d-none d-xl-block">
{% include "fragments/nav_links.html" %}
</div>
{% endblock %}
{% block wide_screen_menu %}
<div class="nav-links d-none d-xl-block">
{% include "fragments/nav_links.html" %}
</div>
{% endblock %}

</div>
</div>
</div>
</div>
</div>

{% block donate_and_newsletter %}
<div class="d-flex align-items-center">
<a data-donate-header-button class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate-header">{% trans "Donate" %}</a>
{% if page.signup == None %}<button class="tw-btn-secondary btn-newsletter d-none d-xl-block ml-md-3">{% trans "Newsletter" %}</button>{% endif %}
</div>
{% endblock %}
{% block donate_and_newsletter %}
<div class="d-flex align-items-center">
<a data-donate-header-button class="primary-nav-special-link tw-heart-glyph tw-flex" href="?form=donate-header">{% trans "Donate" %}</a>
{% if page.signup == None %}<button class="tw-btn-secondary btn-newsletter d-none d-xl-block ml-md-3">{% trans "Newsletter" %}</button>{% endif %}
</div>
{% endblock %}

</div>
</div>
</div>
</div>
</div>
</nav>
</nav>

</div>
</div>
</div>
</div>
</div>


Expand Down
11 changes: 0 additions & 11 deletions source/js/primary-nav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,16 +10,6 @@ let primaryNav = {
let navMode = primaryNavContainer.dataset.navMode;
let menuOpen = false;

function setWideMenuState(openMenu) {
if (navMode === `zen`) {
if (openMenu) {
elWideMenu.classList.remove(`hidden`);
} else {
elWideMenu.classList.add(`hidden`);
}
}
}

function setNarrowMenuState(openMenu) {
if (openMenu) {
elNarrowMenu.classList.remove(`hidden`);
Expand Down Expand Up @@ -75,7 +65,6 @@ let primaryNav = {
}

function setMenuState(openMenu) {
setWideMenuState(openMenu);
setNarrowMenuState(openMenu);
setBurgerState(openMenu);
trackMenuState(openMenu);
Expand Down
Loading