Various styling adjustments for new nav (#12296)

* show desktop styled nav on xlarge screens instead of large

* various styling fixes - mostly for desktop nav

* various styling fixes - mostly for mobile nav

* more styling fixes

* fixed link hover padding & added missing bottom border

* more padding fixes

* spacing fixes and changed 'title' to 'aria-label' to avoid tooltip

* spacing fixes

* fix menu-container width on small screen sizes

* fix blog button bottom margin on smaller screen

* adjust bottom padding for sections on mobile nav

* fixed the bug where newsletter button gets hidden if any accordion is open on mobile nav

* fixed linting

* reverted changes related to fixing newsletter button

* added back a missing CSS rule

* commented out some locales for the time being to speed up the tests we have for petition form

* fixed zen mode nav padding regression

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

@@ -1,11 +1,11 @@
 {% load static wagtailadmin_tags %}
 
 {% if style == "primary" %}
-    {% fragment as nav_button_style %}tw-btn-primary tw-py-4 tw-px-8{% endfragment %}
+    {% fragment as nav_button_style %}tw-btn-primary tw-px-8{% endfragment %}
 {% elif style == "primary-full-width" %}
-    {% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-py-4 tw-px-8{% endfragment %}
+    {% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-px-8 tw-mb-12 xlarge:tw-mb-0{% endfragment %}
 {% elif style == "cta" %}
-    {% fragment as nav_button_style %}tw-leading-[130%] tw-text-blue-80 tw-p-2 hover:tw-underline{% endfragment %}
+    {% fragment as nav_button_style %}tw-leading-[130%] tw-text-blue-80 hover:tw-underline {{ link_hover_padding }}{% endfragment %}
 {% endif %}
 
 {% fragment as base_styles %}link-button tw-font-bold tw-text-lg{% endfragment %}

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

@@ -1,17 +1,17 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-8 tw-py-8{% endfragment %}
-{% fragment as desktop_layout %}large:tw-py-22 large:tw-px-12{% endfragment %}
+{% fragment as base_styles %}tw-gap-y-8 xlarge:tw-gap-y-4{% endfragment %}
+{% fragment as desktop_layout %}{% endfragment %}
 
-<div class="{{ base_styles }} {{ desktop_layout }} {% block column_size %}large:tw-col-span-1{% endblock column_size %}">
-    <h6 class="tw-self-stretch tw-px-4">{% block title %}{{ value.title }}{% endblock title %}</h6>
-    <div class="tw-flex tw-flex-col tw-items-start tw-gap-8 tw-self-stretch">
+<div class="tw-nav-dropdown-column {{ base_styles }} {{ desktop_layout }} {% block column_size %}xlarge:tw-col-span-1{% endblock column_size %}">
+    <h6 class="tw-self-stretch {{ link_hover_padding }}">{% block title %}{{ value.title }}{% endblock title %}</h6>
+    <div class="tw-flex tw-flex-col tw-items-start tw-gap-y-14 xlarge:tw-gap-y-10 tw-self-stretch">
         {% block content %}
             {% for item in value.nav_items %}
-                <div class="tw-self-stretch">{% include_block item %}</div>
+                <div class="tw-self-stretch">{% include_block item with link_hover_padding=link_hover_padding %}</div>
             {% endfor %}
             {% if value.has_button %}
-                <div class="tw-self-stretch">{% include_block value.button_value with style="cta" %}</div>
+                <div class="tw-self-stretch">{% include_block value.button_value with style="cta" link_hover_padding=link_hover_padding %}</div>
             {% endif %}
         {% endblock content %}
     </div>

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

@@ -1,17 +1,17 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% 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_base_styles %}tw-overflow-y-auto tw-transition-all tw-duration-500 tw-bg-white xlarge:tw-bg-transparent xlarge:tw-max-w-[1200px]{% endfragment %}
+{% fragment as dropdown_selector_base %}tw-container 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-px-0 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,33 +22,39 @@
      {% 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 %}">
-            {% block content %}
-                {% if value.has_overview %}
-                    {% include_block value.overview_value with button=value.button %}
-                {% endif %}
-                {% for column in value.columns %}
-                    {% include_block column %}
-                {% endfor %}
-                {% if value.has_featured_column %}
-                    {% include_block value.featured_column_value %}
-                {% endif %}
-                {% comment %}
-                If there is a button but no overview, we want to render the button at the bottom
-                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">
-                        {% include_block value.button with style="primary-full-width" %}
-                    </div>
-                {% endif %}
-            {% endblock content %}
+    <div class="{{ content_base_styles }} {{ content_desktop_positioning }} {{ content_desktop }} {{ alignment_class }}" data-accordion-content>
+        <div class="tw-container xlarge:tw-max-w-[1200px] xlarge:tw-px-0">
+            <div class="{% block content_width %} xlarge:tw-w-{{ value.ncols }}/4 {% endblock content_width %} {{ content_desktop_border }}">
+                <div class="tw-nav-accordion-content-inner {% block grid_columns %} xlarge:tw-grid-cols-{{ value.ncols }} {% if value.has_featured_column %}tw-has-featured-column{% endif %}{% endblock grid_columns %}">
+                    {% block content %}
+                        {% if value.has_overview %}
+                            {% include_block value.overview_value with button=value.button %}
+                        {% endif %}
+                        {% for column in value.columns %}
+                            {% include_block column with link_hover_padding=link_hover_padding %}
+                        {% endfor %}
+                        {% if value.has_featured_column %}
+                            {% include_block value.featured_column_value with link_hover_padding=link_hover_padding %}
+                        {% endif %}
+                    {% endblock content %}
+                </div>
+                {% block full_span_button %}
+                    {% comment %}
+                    If there is a button but no overview, we want to render the button at the bottom
+                    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">
+                            {% include_block value.button with style="primary-full-width" %}
+                        </div>
+                    {% endif %}
+                {% endblock full_span_button %}
+            </div>
         </div>
     </div>
 </div>

network-api/networkapi/templates/fragments/blocks/nav/featured-column.html

@@ -1,11 +1,11 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-12 tw-py-8 tw-px-12 tw-bg-gray-02 tw-rounded-2xl{% endfragment %}
-{% fragment as desktop_layout %}large:tw-py-22 large:tw-px-12 large:tw-rounded-none large:tw-col-span-1{% endfragment %}
+{% fragment as base_styles %}tw-gap-y-8 xlarge:tw-gap-y-4 tw-bg-gray-02 tw-rounded-2xl{% endfragment %}
+{% fragment as desktop_layout %}xlarge:tw-rounded-none xlarge:tw-col-span-1{% endfragment %}
 
-<div class="{{ base_styles }} {{ desktop_layout }}">
-    <h6 class="tw-self-stretch tw-px-4">{% block title %}{{ value.title }}{% endblock title %}</h6>
-    <div class="tw-flex tw-flex-col tw-items-start tw-gap-8 tw-self-stretch">
+<div class="tw-nav-dropdown-column tw-featured-column {{ base_styles }} {{ desktop_layout }}">
+    <h6 class="tw-self-stretch {{ link_hover_padding }}">{% block title %}{{ value.title }}{% endblock title %}</h6>
+    <div class="tw-flex tw-flex-col tw-items-start tw-gap-y-14 xlarge:tw-gap-y-10 tw-self-stretch">
         {% block content %}
             {% for item in value.nav_items %}
                 <div class="tw-self-stretch">{% include_block item %}</div>

network-api/networkapi/templates/fragments/blocks/nav/featured-item.html

@@ -3,10 +3,10 @@
 {% fragment as font_styles %}tw-text-xl large:tw-text-lg tw-font-semibold tw-text-black{% endfragment %}
 {% fragment as hover_styles %}group-hover/item:tw-text-blue-80 group-hover/item:tw-underline{% endfragment %}
 
-<div class="tw-group/item tw-flex tw-flex-row tw-self-stretch tw-gap-6 tw-p-4 hover:tw-bg-blue-03">
+<div class="tw-group/item tw-flex tw-flex-row tw-self-stretch tw-gap-6 hover:tw-bg-blue-03 xlarge:hover:tw-rounded {{ link_hover_padding }}">
     {% image value.icon height-18 preserve-svg %}
     <a class="{{ font_styles }} {{ hover_styles }}"
        href="{{ value.url }}" {% if value.is_external %}target="_blank"{% endif %}>
         {{ value.label }}
     </a>
-</div>
+</div>

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

@@ -7,7 +7,7 @@
 
 {% check_if_link_is_active value as link_active %}
 
-<div class="tw-group/item tw-flex tw-flex-col tw-gap-4 tw-p-4 hover:tw-bg-blue-03 hover:tw-rounded">
+<div class="tw-group/item tw-flex tw-flex-col tw-gap-2 xlarge:hover:tw-bg-blue-03 xlarge:hover:tw-rounded {{ link_hover_padding }}">
     <a class="
               {{ font_styles }}
               {% if value.is_external %}
@@ -25,7 +25,7 @@
         {{ value.label }}
     </a>
     {% if value.description %}
-        <p class="tw-font-light tw-text-sm tw-text-gray-80 tw-hidden medium:tw-block">
+        <p class="tw-font-light tw-text-sm tw-text-gray-80 tw-hidden tw-mb-0 medium:tw-block">
             {{ value.description }}
         </p>
     {% endif %}

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

@@ -1,10 +1,10 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-flex tw-flex-col tw-items-start tw-gap-14 tw-pb-16{% endfragment %}
-{% fragment as border_styles %}tw-border-gray-05 tw-border-b-[1px] large:tw-border-b-0 large:tw-border-r-[1px]{% endfragment %}
-{% fragment as desktop_layout %}large:tw-col-span-1 large:tw-my-22 large:tw-pb-0 large:tw-ms-8 large:tw-ps-12 large:tw-pe-8 large:tw-border-r{% endfragment %}
+{% fragment as base_styles %}tw-gap-14 tw-pb-20 xlarge:tw-pb-16 xlarge:tw-pr-8{% endfragment %}
+{% fragment as border_styles %}tw-border-b-gray-05 tw-border-b-[1px] xlarge:tw-pb-0 xlarge:tw-border-b-0 xlarge:tw-border-r-gray-05 xlarge:tw-border-r-[1px]{% endfragment %}
+{% fragment as desktop_layout %}xlarge:tw-border-r{% endfragment %}
 
-<div class="{{ base_styles }} {{ border_styles }} {{ desktop_layout }}">
+<div class="tw-nav-dropdown-column tw-gap {{ base_styles }} {{ border_styles }} {{ desktop_layout }}">
     <div class="tw-flex tw-flex-col tw-items-start tw-gap-10">
         <p class="tw-font-zilla tw-italic tw-font-medium tw-text-2xl tw-text-black tw-my-0 tw-py-0">{{ value.title }}</p>
         <div class="last:[&_p]:tw-mb-0 [&_p]:tw-text-gray-80 [&_p]:tw-text-base [&_p]:tw-font-normal [&_p]:tw-font-sans">{{ value.description|richtext }}</div>

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

@@ -4,12 +4,16 @@
 
 {% block title %}{% trans "Blog" %}{% endblock title %}
 
-{% block grid_columns %}large:tw-w-3/4 large:tw-grid-cols-3{% endblock grid_columns %}
+{% block content_width %} xlarge:tw-w-{{ ncols }}/4 {% endblock content_width %}
+{% block grid_columns %}xlarge:tw-grid-cols-{{ ncols }} tw-has-featured-column{% 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">
+{% endblock content %}
+
+{% block full_span_button %}
+    <div class="tw-w-full">
         {% include "./button.html" with url=menu.blog_button_url label=menu.blog_button_label %}
     </div>
-{% endblock content %}
+{% endblock full_span_button %}

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

@@ -1,6 +1,6 @@
 {% load static wagtailadmin_tags %}
 
-{% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-py-4 tw-px-8{% endfragment %}
+{% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-py-4 tw-px-8 tw-mb-12 xlarge:tw-mb-0{% endfragment %}
 {% fragment as base_styles %}link-button tw-font-bold tw-text-lg{% endfragment %}
 
 <a class="{{ nav_button_style }} {{ base_styles }} after:tw-content-['_→'] after:tw-font-['Nunito_Sans']" href="{{ url }}">{{ label }}</a>

network-api/networkapi/templates/fragments/nav/blog/featured-posts.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans "Featured Posts" %}{% endblock title %}
 
-{% block column_size %}large:tw-col-span-2{% endblock column_size %}
+{% block column_size %}xlarge:tw-col-span-2{% endblock column_size %}
 
 {% block content %}
     {% for post in posts %}

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

@@ -3,12 +3,12 @@
 {% fragment as font_styles %}tw-text-xl large:tw-text-lg tw-font-semibold tw-text-black{% endfragment %}
 {% fragment as hover_styles %}group-hover/item:tw-text-blue-80 group-hover/item:tw-underline{% endfragment %}
 
-<div class="tw-group/item tw-flex tw-flex-col tw-gap-2 tw-p-4 hover:tw-bg-blue-03 hover:tw-rounded">
+<div class="tw-group/item tw-flex tw-flex-col tw-gap-2 xlarge:hover:tw-bg-blue-03 xlarge:hover:tw-rounded {{ link_hover_padding }}">
     {% with topic=post.topics.all|first %}
         <p class="tw-font-sans tw-font-normal tw-text-xs tw-text-gray-40 tw-uppercase tw-my-0">{{ topic.name }}</p>
     {% endwith %}
     <a class="{{ font_styles }} {{ hover_styles }}" href="{% pageurl post %}">{{ post.title }}</a>
     <p class="tw-font-light tw-text-sm tw-text-gray-80 tw-line-clamp-3 tw-hidden medium:tw-block">
         {{ post.get_meta_description }}
     </p>
-</div>
+</div>

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

@@ -3,10 +3,10 @@
 {% fragment as font_styles %}tw-text-xl large:tw-text-lg tw-font-semibold tw-text-black{% endfragment %}
 {% fragment as hover_styles %}group-hover/item:tw-text-blue-80 group-hover/item:tw-underline{% endfragment %}
 
-<div class="tw-group/item tw-flex tw-flex-row tw-self-stretch tw-gap-6 tw-p-4 hover:tw-bg-blue-03">
+<div class="tw-group/item tw-flex tw-flex-row tw-self-stretch tw-gap-6 hover:tw-bg-blue-03 {{ link_hover_padding }}">
     {% image icon height-18 preserve-svg %}
     <a class="{{ font_styles }} {{ hover_styles }}"
        href="{{ topic.url }}">
         {{ topic.name }}
     </a>
-</div>
+</div>

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

@@ -8,13 +8,14 @@
 {% endblock menu_container_classes %}
 
 {% block narrow_screen_menu %}
+    {% fragment as link_hover_padding %}xlarge:tw-p-4{% endfragment %}
     <div class="tw-bg-white tw-min-h-lvh">
-        <div class="tw-flex tw-flex-col tw-divide-y-[1px] tw-divide-gray-20 tw-w-full" data-nav-accordion-menu>
+        <div class="tw-flex tw-flex-col tw-divide-y-[1px] tw-divide-gray-20 tw-border-b tw-border-b-gray-20 tw-w-full" data-nav-accordion-menu>
             {% for dropdown in menu.dropdowns %}
-                {% include_block dropdown with style="mobile" %}
+                {% include_block dropdown with style="mobile" link_hover_padding=link_hover_padding %}
             {% endfor %}
             {% if menu.enable_blog_dropdown %}
-                {% include "fragments/nav/blog/blog-dropdown.html" with style="mobile" %}
+                {% include "fragments/nav/blog/blog-dropdown.html" with style="mobile" link_hover_padding=link_hover_padding %}
             {% endif %}
         </div>
         <div class="tw-flex tw-flex-col tw-items-center tw-p-8 tw-pt-20">
@@ -24,12 +25,14 @@
 {% 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>
+    {% fragment as link_hover_padding %}xlarge:tw-p-4{% endfragment %}
+
+    <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" %}
+            {% include_block dropdown with style="desktop" link_hover_padding=link_hover_padding %}
         {% endfor %}
         {% if menu.enable_blog_dropdown %}
-            {% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" %}
+            {% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" ncols="3" alignment_class="tw-justify-end" link_hover_padding=link_hover_padding %}
         {% endif %}
     </div>
 {% endblock wide_screen_menu %}