show desktop styled nav on xlarge screens instead of large

network-api/networkapi/templates/fragments/blocks/nav/dropdown.html

@@ -3,15 +3,15 @@
 {% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto tw-transition-all tw-duration-500{% endfragment %}
 {% fragment as dropdown_selector_base %}tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-py-12 tw-px-8 tw-gap-4{% endfragment %}
 
-{% fragment as content_desktop %}large:tw-max-w-[1250px] xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] large:tw-w-full large:tw-px-24 large:tw-hidden{% endfragment %}
-{% fragment as content_desktop_border %}large:tw-border large:tw-border-gray-20{% endfragment %}
+{% fragment as content_desktop %}xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] xlarge:tw-w-full xlarge:tw-px-24 xlarge:tw-hidden{% endfragment %}
+{% fragment as content_desktop_border %}xlarge:tw-border xlarge:tw-border-gray-20{% endfragment %}
 {% comment %} 40 (5rem) is the height of the navbar {% endcomment %}
-{% fragment as content_desktop_positioning %}large:tw-fixed large:tw-top-40 large:tw-left-0 large:tw-right-0 large:tw-mx-auto{% endfragment %}
+{% fragment as content_desktop_positioning %}xlarge:tw-fixed xlarge:tw-top-40 xlarge:tw-left-0 xlarge:tw-right-0 xlarge:tw-mx-auto{% endfragment %}
 
 {% fragment as title_base_typography %}tw-font-sans tw-font-bold tw-text-xl tw-capitalize tw-text-black{% endfragment %}
-{% fragment as title_desktop_typography %}large:tw-text-lg large:tw-text-black{% endfragment %}
+{% fragment as title_desktop_typography %}xlarge:tw-text-lg xlarge:tw-text-black{% endfragment %}
 {% comment %} 2.5rem for half the navbar's height, 14px for half the title's line height, 6px for the title bottom border and 1 px for the dropdown border:{% endcomment %}
-{% fragment as title_underline %}large:tw-border-b-6 large:tw-border-transparent large:tw-h-full large:tw-pt-[calc(2.5rem-14px)] large:tw-pb-[calc(2.5rem-14px-6px+1px)]{% endfragment %}
+{% fragment as title_underline %}xlarge:tw-border-b-6 xlarge:tw-border-transparent xlarge:tw-h-full xlarge:tw-pt-[calc(2.5rem-14px)] xlarge:tw-pb-[calc(2.5rem-14px-6px+1px)]{% endfragment %}
 
 {% get_dropdown_id menu=menu idx=forloop.counter0 as dropdown_id %}
 {% if dropdown_id %}
@@ -22,13 +22,13 @@
      {% block data_class_attribute %}data-{{ style }}-dropdown{% endblock data_class_attribute %}
      data-is-wayfinding-active="{% if is_dropdown_active %}true{% else %}false{% endif %}"
 >
-    <div class="{{ dropdown_selector_base }} large:tw-items-center large:tw-py-0 large:tw-h-full" data-accordion-title>
+    <div class="{{ dropdown_selector_base }} xlarge:tw-items-center xlarge:tw-py-0 xlarge:tw-h-full" data-accordion-title>
         <h5 class="tw-m-0 {{ title_base_typography }} {{ title_desktop_typography }} {{ title_underline }}">{% block title %}{{ value.title }}{% endblock title %}</h5>
-        <img src="{% static "_images/chevron.svg" %}" height="18" width="18" alt="" class="tw-w-8 tw-h-auto tw-rotate-180 tw-transition-transform large:tw-hidden">
+        <img src="{% static "_images/chevron.svg" %}" height="18" width="18" alt="" class="tw-w-8 tw-h-auto tw-rotate-180 tw-transition-transform xlarge:tw-hidden">
     </div>
 
     <div class="{{ content_base_styles }} {{ content_desktop_positioning }} {{ content_desktop }}" data-accordion-content>
-        <div class="tw-px-8 tw-flex tw-flex-col tw-p-0 tw-bg-white tw-gap-8 tw-pt-4 tw-pb-12 large:tw-pb-0 large:tw-pt-0 large:tw-px-0 {{ content_desktop_border }} large:tw-grid large:tw-gap-x-8 large:tw-gap-y-0 {% block grid_columns %}large:tw-w-{{ value.ncols }}/4 large:tw-grid-cols-{{ value.ncols }}{% endblock grid_columns %}">
+        <div class="tw-px-8 tw-flex tw-flex-col tw-p-0 tw-bg-white tw-gap-8 tw-pt-4 tw-pb-12 xlarge:tw-pb-0 xlarge:tw-pt-0 xlarge:tw-px-0 {{ content_desktop_border }} xlarge:tw-grid xlarge:tw-gap-x-8 xlarge:tw-gap-y-0 {% block grid_columns %}xlarge:tw-w-{{ value.ncols }}/4 xlarge:tw-grid-cols-{{ value.ncols }}{% endblock grid_columns %}">
             {% block content %}
                 {% if value.has_overview %}
                     {% include_block value.overview_value with button=value.button %}
@@ -44,7 +44,7 @@ <h5 class="tw-m-0 {{ title_base_typography }} {{ title_desktop_typography }} {{
                 of the dropdown. Otherwise it will be rendered together with the overview.
                 {% endcomment %}
                 {% if value.button and not value.has_overview %}
-                    <div class="tw-w-full tw-pb-4 large:tw-col-span-4 large:tw-py-0">
+                    <div class="tw-w-full tw-pb-4 xlarge:tw-col-span-4 xlarge:tw-py-0">
                         {% include_block value.button with style="primary-full-width" %}
                     </div>
                 {% endif %}

network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html

@@ -4,12 +4,12 @@
 
 {% block title %}{% trans "Blog" %}{% endblock title %}
 
-{% block grid_columns %}large:tw-w-3/4 large:tw-grid-cols-3{% endblock grid_columns %}
+{% block grid_columns %}xlarge:tw-w-3/4 xlarge:tw-grid-cols-3{% endblock grid_columns %}
 
 {% block content %}
     {% include "./featured-posts.html" with posts=menu.localized_featured_blog_posts %}
     {% include "./featured-topics.html" with relationships=menu.localized_featured_blog_topics %}
     <div class="tw-w-full tw-pb-4 large:tw-col-span-3 large:tw-py-0">
         {% include "./button.html" with url=menu.blog_button_url label=menu.blog_button_label %}
     </div>
-{% endblock content %}
+{% endblock content %}

network-api/networkapi/templates/fragments/nav/menu.html

@@ -24,7 +24,7 @@
 {% endblock narrow_screen_menu %}
 
 {% block wide_screen_menu %}
-    <div class="tw-hidden large:tw-flex large:tw-flex-row large:tw-items-center large:tw-h-full" data-nav-accordion-menu>
+    <div class="tw-hidden xlarge:tw-flex xlarge:tw-flex-row xlarge:tw-items-center xlarge:tw-h-full" data-nav-accordion-menu>
         {% for dropdown in menu.dropdowns %}
             {% include_block dropdown with style="desktop" %}
         {% endfor %}

network-api/networkapi/templates/fragments/primary_nav.html

@@ -4,9 +4,9 @@
 {% else %}<div class="primary-nav-container">
 {% endif %}
 <div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
-    <div class="menu-container large:tw-h-40 tw-py-8 medium:tw-py-10 large:tw-py-0 {% block menu_container_classes %}{% endblock %}">
+    <div class="menu-container xlarge:tw-h-40 tw-py-8 medium:tw-py-10 xlarge:tw-py-0 {% block menu_container_classes %}{% endblock %}">
         {% block menu_content %}
-            <div class="narrow-screen-menu tw-top-[61px] medium:tw-top-[69px] tw-bg-white hidden d-lg-none tw-overflow-y-auto">
+            <div class="narrow-screen-menu tw-top-[61px] medium:tw-top-[69px] 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 ">
@@ -28,13 +28,13 @@
                 {% endblock %}
             </div>
         {% endblock %}
-        <nav class="tw-container wide-screen-menu-container tw-relative large:tw-h-full tw-bg-white" title="{% trans "main site navigation" context "Tooltip on menu items" %}">
-            <div class="tw-row tw-h-full tw-justify-between large:tw-items-center">
+        <nav class="tw-container wide-screen-menu-container tw-relative xlarge:tw-h-full tw-bg-white" title="{% 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 large:tw-items-center">
-                        <div id="primary-nav-links" class="tw-w-full tw-py-0 large:tw-w-auto large:tw-items-center">
+                    <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 %} large:tw-hidden small:tw-ml-0 {% endif %}" aria-label="{% trans 'Open menu' %}">
+                                <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>
@@ -47,11 +47,11 @@
                                 {% if page.zen_nav == True %}
                                     <div class="wide-screen-menu hidden">
                                 {% else %}
-                                    <div class="wide-screen-menu large:tw-h-full large:tw-flex large:tw-items-center">
+                                    <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-lg-block">
+                                    <div class="nav-links d-none d-xl-block">
                                         {% include "fragments/nav_links.html" %}
                                     </div>
                                 {% endblock %}
@@ -63,7 +63,7 @@
                     {% 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-lg-block ml-md-3">{% trans "Newsletter" %}</button>{% endif %}
+                            {% 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 %}
 

source/js/components/nav/desktop-dropdown.js

@@ -23,18 +23,18 @@ class NavDesktopDropdown extends Accordion {
   */
 
   addBaseWayfindingStyles() {
-    this.titleText.classList.remove("large:tw-border-transparent");
-    this.titleText.classList.add("large:tw-border-black");
+    this.titleText.classList.remove("xlarge:tw-border-transparent");
+    this.titleText.classList.add("xlarge:tw-border-black");
   }
 
   handleWayfindingOpenStyles() {
-    this.titleText.classList.remove("large:tw-border-transparent");
-    this.titleText.classList.add("large:tw-border-black");
+    this.titleText.classList.remove("xlarge:tw-border-transparent");
+    this.titleText.classList.add("xlarge:tw-border-black");
   }
 
   handleWayfindingClosedStyles() {
-    this.titleText.classList.remove("large:tw-border-transparent");
-    this.titleText.classList.add("large:tw-border-black");
+    this.titleText.classList.remove("xlarge:tw-border-transparent");
+    this.titleText.classList.add("xlarge:tw-border-black");
   }
 
   getSiblings() {
@@ -59,12 +59,12 @@ class NavDesktopDropdown extends Accordion {
 
   open() {
     super.open();
-    this.titleText.classList.add("large:tw-text-black");
-    this.titleText.classList.add("large:tw-border-black");
-    this.titleText.classList.remove("large:tw-border-transparent");
+    this.titleText.classList.add("xlarge:tw-text-black");
+    this.titleText.classList.add("xlarge:tw-border-black");
+    this.titleText.classList.remove("xlarge:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "true");
-    this.content.classList.add("large:tw-grid");
-    this.content.classList.remove("large:tw-hidden");
+    this.content.classList.add("xlarge:tw-grid");
+    this.content.classList.remove("xlarge:tw-hidden");
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingOpenStyles();
     }
@@ -73,28 +73,28 @@ class NavDesktopDropdown extends Accordion {
     }
     this.siblings.forEach((sibling) => {
       const titleText = sibling.querySelector("[data-accordion-title] h5");
-      titleText.classList.remove("large:tw-text-black");
-      titleText.classList.add("large:tw-text-gray-40");
+      titleText.classList.remove("xlarge:tw-text-black");
+      titleText.classList.add("xlarge:tw-text-gray-40");
       const isSiblingDropdownWayfindingActive =
         sibling.dataset.isWayfindingActive;
       if (isSiblingDropdownWayfindingActive === "true") {
         titleText.classList.remove(
-          "large:tw-border-transparent",
-          "large:tw-border-black"
+          "xlarge:tw-border-transparent",
+          "xlarge:tw-border-black"
         );
-        titleText.classList.add("large:tw-border-gray-40");
+        titleText.classList.add("xlarge:tw-border-gray-40");
       }
     });
   }
 
   close() {
     super.close();
-    this.titleText.classList.remove("large:tw-text-black");
-    this.titleText.classList.remove("large:tw-border-black");
-    this.titleText.classList.add("large:tw-border-transparent");
+    this.titleText.classList.remove("xlarge:tw-text-black");
+    this.titleText.classList.remove("xlarge:tw-border-black");
+    this.titleText.classList.add("xlarge:tw-border-transparent");
     this.accordion.setAttribute("aria-selected", "false");
-    this.content.classList.remove("large:tw-grid");
-    this.content.classList.add("large:tw-hidden");
+    this.content.classList.remove("xlarge:tw-grid");
+    this.content.classList.add("xlarge:tw-hidden");
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingClosedStyles();
     }
@@ -103,16 +103,16 @@ class NavDesktopDropdown extends Accordion {
     }
     this.siblings.forEach((sibling) => {
       const titleText = sibling.querySelector("[data-accordion-title] h5");
-      titleText.classList.add("large:tw-text-black");
-      titleText.classList.remove("large:tw-text-gray-40");
+      titleText.classList.add("xlarge:tw-text-black");
+      titleText.classList.remove("xlarge:tw-text-gray-40");
       const isSiblingDropdownWayfindingActive =
         sibling.dataset.isWayfindingActive;
       if (isSiblingDropdownWayfindingActive === "true") {
         titleText.classList.remove(
-          "large:tw-border-transparent",
-          "large:tw-border-gray-40"
+          "xlarge:tw-border-transparent",
+          "xlarge:tw-border-gray-40"
         );
-        titleText.classList.add("large:tw-border-black");
+        titleText.classList.add("xlarge:tw-border-black");
       }
     });
   }