Remove all zen_mode references from page models and templates (#12492)

* Remove all `zen_mode` references from page models * Create migration for `zen_mode` field removal in page models * Remove zen mode references from `primary-nav.js` and `primary_nav.html` * Fix `primary_nav-html` indentation to pass `djhtml` linting process.
MozillaFoundation · Jun 20, 2024 · 8e507f0 · 8e507f0
1 parent da2d912
commit 8e507f0
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 117 deletions.
diff --git a/network-api/networkapi/templates/fragments/primary_nav.html b/network-api/networkapi/templates/fragments/primary_nav.html
@@ -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>
 
 

diff --git a/network-api/networkapi/wagtailpages/migrations/0138_remove_modularpage_zen_nav_and_more.py b/network-api/networkapi/wagtailpages/migrations/0138_remove_modularpage_zen_nav_and_more.py
@@ -0,0 +1,21 @@
+# Generated by Django 4.2.11 on 2024-06-14 21:12
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailpages", "0137_blogsignup_privacy_notice_cta_privacy_notice"),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name="modularpage",
+            name="zen_nav",
+        ),
+        migrations.RemoveField(
+            model_name="primarypage",
+            name="zen_nav",
+        ),
+    ]
diff --git a/network-api/networkapi/wagtailpages/pagemodels/app_install.py b/network-api/networkapi/wagtailpages/pagemodels/app_install.py
@@ -11,8 +11,6 @@
 
 class AppInstallPage(CampaignPage):
 
-    zen_nav = False
-
     hero_heading = models.CharField(
         max_length=80,
         help_text="Hero story headline",

diff --git a/network-api/networkapi/wagtailpages/pagemodels/base.py b/network-api/networkapi/wagtailpages/pagemodels/base.py
@@ -61,11 +61,6 @@ class PrimaryPage(FoundationBannerInheritanceMixin, BasePage):  # type: ignore
         help_text="For text-heavy pages, turn this on to reduce the overall width of the content on the page.",
     )
 
-    zen_nav = models.BooleanField(
-        default=False,
-        help_text="For secondary nav pages, use this to collapse the primary nav under a toggle hamburger.",
-    )
-
     body = StreamField(base_fields, use_json_field=True)
 
     settings_panels = Page.settings_panels + [
@@ -75,12 +70,6 @@ class PrimaryPage(FoundationBannerInheritanceMixin, BasePage):  # type: ignore
             ],
             classname="collapsible",
         ),
-        MultiFieldPanel(
-            [
-                FieldPanel("zen_nav"),
-            ],
-            classname="collapsible",
-        ),
     ]
 
     content_panels = Page.content_panels + [
@@ -104,7 +93,6 @@ class PrimaryPage(FoundationBannerInheritanceMixin, BasePage):  # type: ignore
         TranslatableField("intro"),
         TranslatableField("body"),
         SynchronizedField("narrowed_page_content"),
-        SynchronizedField("zen_nav"),
     ]
 
     subpage_types = [

diff --git a/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py b/network-api/networkapi/wagtailpages/pagemodels/blog/blog.py
@@ -134,8 +134,6 @@ class BlogPage(BasePage):
 
     tags = ClusterTaggableManager(through=BlogPageTag, blank=True)
 
-    zen_nav = False
-
     hero_image = models.ForeignKey(
         "wagtailimages.Image",
         null=True,

diff --git a/network-api/networkapi/wagtailpages/pagemodels/campaigns.py b/network-api/networkapi/wagtailpages/pagemodels/campaigns.py
@@ -352,7 +352,6 @@ def get_donation_modal_json(self):
         TranslatableField("title"),
         TranslatableField("header"),
         SynchronizedField("narrowed_page_content"),
-        SynchronizedField("zen_nav"),
         TranslatableField("body"),
         TranslatableField("donation_modals"),
     ]
@@ -429,7 +428,6 @@ class BanneredCampaignPage(PrimaryPage):
         TranslatableField("title"),
         SynchronizedField("banner"),
         SynchronizedField("narrowed_page_content"),
-        SynchronizedField("zen_nav"),
         # FIXME: Contingency fix while https://github.com/mozilla/foundation.mozilla.org/pull/7771 is sorted out
         # TranslatableField("cta"),
         TranslatableField("signup"),

diff --git a/network-api/networkapi/wagtailpages/pagemodels/dear_internet.py b/network-api/networkapi/wagtailpages/pagemodels/dear_internet.py
@@ -68,6 +68,4 @@ class DearInternetPage(BasePage):
         SynchronizedField("cta_button_link"),
     ]
 
-    zen_nav = True
-
     template = "wagtailpages/pages/dear_internet_page.html"
diff --git a/network-api/networkapi/wagtailpages/pagemodels/modular.py b/network-api/networkapi/wagtailpages/pagemodels/modular.py
@@ -23,11 +23,6 @@ class ModularPage(BasePage):
         help_text="For text-heavy pages, turn this on to reduce the overall width of the content on the page.",
     )
 
-    zen_nav = models.BooleanField(
-        default=True,
-        help_text="For secondary nav pages, use this to collapse the primary nav under a toggle hamburger.",
-    )
-
     body = StreamField(base_fields, use_json_field=True)
 
     settings_panels = Page.settings_panels + [
@@ -37,12 +32,6 @@ class ModularPage(BasePage):
             ],
             classname="collapsible",
         ),
-        MultiFieldPanel(
-            [
-                FieldPanel("zen_nav"),
-            ],
-            classname="collapsible",
-        ),
     ]
 
     content_panels = Page.content_panels + [
@@ -60,7 +49,6 @@ class ModularPage(BasePage):
         # Content tab fields
         TranslatableField("header"),
         SynchronizedField("narrowed_page_content"),
-        SynchronizedField("zen_nav"),
     ]
 
     show_in_menus_default = True

diff --git a/network-api/networkapi/wagtailpages/pagemodels/publications/article.py b/network-api/networkapi/wagtailpages/pagemodels/publications/article.py
@@ -307,10 +307,6 @@ def breadcrumb_list(self):
         """
         return Page.objects.ancestor_of(self).type(PublicationPage).live()
 
-    @property
-    def zen_nav(self):
-        return True
-
     @property
     def get_page_titles(self):
         return get_plaintext_titles(None, self.body, "content")

diff --git a/network-api/networkapi/wagtailpages/pagemodels/publications/publication.py b/network-api/networkapi/wagtailpages/pagemodels/publications/publication.py
@@ -286,10 +286,6 @@ def prev_page(self):
                 prev_page = sibling
         return prev_page
 
-    @property
-    def zen_nav(self):
-        return True
-
     def breadcrumb_list(self):
         """
         Get all the parent PublicationPages and return a QuerySet

diff --git a/network-api/networkapi/wagtailpages/pagemodels/youtube.py b/network-api/networkapi/wagtailpages/pagemodels/youtube.py
@@ -66,8 +66,6 @@ class YoutubeRegretsPage(BasePage):
         TranslatableField("regret_stories"),
     ]
 
-    zen_nav = True
-
     template = "wagtailpages/pages/youtube_regrets_page.html"
 
 
@@ -112,15 +110,12 @@ class YoutubeRegretsReporterPage(BasePage):
         TranslatableField("intro_images"),
     ]
 
-    zen_nav = True
-
     template = "wagtailpages/pages/youtube_regrets_reporter_page.html"
 
 
 class YoutubeRegrets2021Page(BasePage):
     template = "wagtailpages/pages/youtube-regrets-2021/youtube_regrets_2021.html"
     max_count = 1
-    zen_nav = True
 
     translatable_fields = [
         # Promote tab fields
@@ -141,7 +136,6 @@ class Meta:
 class YoutubeRegrets2022Page(BasePage):
     template = "wagtailpages/pages/youtube-regrets-2022/youtube_regrets_2022.html"
     max_count = 1
-    zen_nav = True
 
     translatable_fields = [
         # Promote tab fields
@@ -162,7 +156,6 @@ class Meta:
 class YoutubeRegretsReporterExtensionPage(BasePage):
     template = "wagtailpages/pages/regrets-reporter-landing-page/youtube_regrets_reporter_extension.html"
     max_count = 1
-    zen_nav = True
 
     translatable_fields = [
         # Promote tab fields

diff --git a/source/js/primary-nav.js b/source/js/primary-nav.js
@@ -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`);
@@ -75,7 +65,6 @@ let primaryNav = {
     }
 
     function setMenuState(openMenu) {
-      setWideMenuState(openMenu);
       setNarrowMenuState(openMenu);
       setBurgerState(openMenu);
       trackMenuState(openMenu);