more styling fixes

MozillaFoundation · May 3, 2024 · b95da07 · b95da07
1 parent 54980e1
commit b95da07
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 31 deletions.
diff --git a/network-api/networkapi/templates/fragments/blocks/nav/column.html b/network-api/networkapi/templates/fragments/blocks/nav/column.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-gap-y-8 tw-mb-8 xlarge:tw-mb-0{% endfragment %}
+{% fragment as base_styles %}tw-gap-y-8{% endfragment %}
 {% fragment as desktop_layout %}{% endfragment %}
 {% fragment as padding_for_hover %}xlarge:tw-p-4{% endfragment %}
 

diff --git a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
@@ -1,6 +1,6 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% fragment as content_base_styles %}tw-container tw-overflow-y-auto tw-transition-all tw-duration-500 xlarge:tw-max-w-[1200px]{% 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 %}xlarge:tw-px-0 xlarge:tw-hidden{% endfragment %}
@@ -28,31 +28,33 @@ <h5 class="tw-m-0 {{ title_base_typography }} {{ title_desktop_typography }} {{
     </div>
 
     <div class="{{ content_base_styles }} {{ content_desktop_positioning }} {{ content_desktop }} {{ alignment_class }}" data-accordion-content>
-        <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 %}
+        <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 %}
+                        {% endfor %}
+                        {% if value.has_featured_column %}
+                            {% include_block value.featured_column_value %}
+                        {% 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 %}
-                    {% for column in value.columns %}
-                        {% include_block column %}
-                    {% endfor %}
-                    {% if value.has_featured_column %}
-                        {% include_block value.featured_column_value %}
-                    {% endif %}
-                {% endblock content %}
+                {% endblock full_span_button %}
             </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>
diff --git a/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html b/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-gap-14 tw-bg-gray-02 tw-rounded-2xl tw-mb-8 xlarge:tw-mb-0{% endfragment %}
+{% fragment as base_styles %}tw-gap-14 tw-bg-gray-02 tw-rounded-2xl{% endfragment %}
 {% fragment as desktop_layout %}xlarge:tw-rounded-none xlarge:tw-col-span-1{% endfragment %}
 
 <div class="tw-nav-dropdown-column tw-featured-column {{ base_styles }} {{ desktop_layout }}">

diff --git a/network-api/networkapi/templates/fragments/blocks/nav/overview.html b/network-api/networkapi/templates/fragments/blocks/nav/overview.html
@@ -1,6 +1,6 @@
 {% load wagtailcore_tags wagtailadmin_tags %}
 
-{% fragment as base_styles %}tw-gap-14 tw-pb-16{% endfragment %}
+{% fragment as base_styles %}tw-gap-14 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 %}
 

diff --git a/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html b/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html
@@ -10,9 +10,10 @@
 {% 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 %}
 
-{% block full_span_button %}{% endblock full_span_button %}
+{% 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 full_span_button %}
diff --git a/tailwind-plugins/site-nav.js b/tailwind-plugins/site-nav.js
@@ -35,6 +35,7 @@ function shared(theme) {
       flexDirection: "column",
       alignItems: "start",
       flex: "1",
+      marginBottom: theme("margin.8"),
       [media(theme("screens.xlarge"))]: {
         marginTop: theme("margin.22"),
         marginBottom: theme("margin.22"),