From ab2585c2e249991f04011ef1b4de732faad41980 Mon Sep 17 00:00:00 2001 From: Mavis Ou Date: Fri, 3 May 2024 01:12:16 -0700 Subject: [PATCH] various styling fixes - mostly for desktop nav --- .../fragments/blocks/nav/button.html | 2 +- .../fragments/blocks/nav/column.html | 6 +-- .../fragments/blocks/nav/dropdown.html | 38 +++++++------- .../fragments/blocks/nav/featured-column.html | 6 +-- .../templates/fragments/blocks/nav/item.html | 2 +- .../fragments/blocks/nav/overview.html | 8 +-- .../fragments/nav/blog/blog-dropdown.html | 5 +- .../fragments/nav/blog/featured-posts.html | 2 +- .../templates/fragments/nav/menu.html | 2 +- source/js/components/nav/desktop-dropdown.js | 4 +- tailwind-plugins/site-nav.js | 50 +++++++++++++++++++ tailwind.config.js | 4 +- 12 files changed, 94 insertions(+), 35 deletions(-) create mode 100644 tailwind-plugins/site-nav.js diff --git a/network-api/networkapi/templates/fragments/blocks/nav/button.html b/network-api/networkapi/templates/fragments/blocks/nav/button.html index 49210c0098a..50e49b89ee2 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/button.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/button.html @@ -5,7 +5,7 @@ {% elif style == "primary-full-width" %} {% fragment as nav_button_style %}tw-btn-primary tw-min-w-full tw-py-4 tw-px-8{% 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 tw-p-4 hover:tw-underline{% endfragment %} {% endif %} {% fragment as base_styles %}link-button tw-font-bold tw-text-lg{% endfragment %} diff --git a/network-api/networkapi/templates/fragments/blocks/nav/column.html b/network-api/networkapi/templates/fragments/blocks/nav/column.html index e33576d1fdb..ac74ed38690 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/column.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/column.html @@ -1,9 +1,9 @@ {% 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{% endfragment %} +{% fragment as desktop_layout %}{% endfragment %} -
+
{% block title %}{{ value.title }}{% endblock title %}
{% block content %} diff --git a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html index 9ae3422fb03..a6e794c3a49 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/dropdown.html @@ -1,9 +1,9 @@ {% 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-container tw-overflow-y-auto tw-transition-all tw-duration-500 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-max-w-[1350px] 2xl:tw-max-w-[1600px] xlarge:tw-w-full xlarge:tw-px-24 xlarge:tw-hidden{% 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 %}xlarge:tw-fixed xlarge:tw-top-40 xlarge:tw-left-0 xlarge:tw-right-0 xlarge:tw-mx-auto{% endfragment %} @@ -27,28 +27,32 @@
-
-
- {% 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 %} +
+
+
+ {% 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 %} +
+ {% 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 %} -
+
{% include_block value.button with style="primary-full-width" %}
{% endif %} - {% endblock content %} + {% endblock full_span_button %}
diff --git a/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html b/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html index 09587435fb3..62556f667f2 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/featured-column.html @@ -1,9 +1,9 @@ {% 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-12 tw-bg-gray-02 tw-rounded-2xl{% endfragment %} +{% fragment as desktop_layout %}xlarge:tw-rounded-none xlarge:tw-col-span-1{% endfragment %} -
+
{% block title %}{{ value.title }}{% endblock title %}
{% block content %} diff --git a/network-api/networkapi/templates/fragments/blocks/nav/item.html b/network-api/networkapi/templates/fragments/blocks/nav/item.html index b0b594a2dfb..0afdf087263 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/item.html +++ b/network-api/networkapi/templates/fragments/blocks/nav/item.html @@ -25,7 +25,7 @@ {{ value.label }} {% if value.description %} -

+

{{ value.description }}

{% endif %} diff --git a/network-api/networkapi/templates/fragments/blocks/nav/overview.html b/network-api/networkapi/templates/fragments/blocks/nav/overview.html index c3d244f58da..d2f9fafb2e8 100644 --- a/network-api/networkapi/templates/fragments/blocks/nav/overview.html +++ b/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{% endfragment %} +{% fragment as border_styles %}tw-border-gray-05 tw-border-b-[1px] xlarge:tw-border-b-0 xlarge:tw-border-r-[1px]{% endfragment %} +{% fragment as desktop_layout %}xlarge:tw-border-r{% endfragment %} -
+

{{ value.title }}

{{ value.description|richtext }}
diff --git a/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html b/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html index 667898ea9d9..fd5e21bee06 100644 --- a/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html +++ b/network-api/networkapi/templates/fragments/nav/blog/blog-dropdown.html @@ -4,7 +4,8 @@ {% block title %}{% trans "Blog" %}{% endblock title %} -{% block grid_columns %}xlarge:tw-w-3/4 xlarge: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 %} @@ -13,3 +14,5 @@ {% include "./button.html" with url=menu.blog_button_url label=menu.blog_button_label %}
{% endblock content %} + +{% block full_span_button %}{% endblock full_span_button %} diff --git a/network-api/networkapi/templates/fragments/nav/blog/featured-posts.html b/network-api/networkapi/templates/fragments/nav/blog/featured-posts.html index b9ece941327..fe224f7b082 100644 --- a/network-api/networkapi/templates/fragments/nav/blog/featured-posts.html +++ b/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 %} diff --git a/network-api/networkapi/templates/fragments/nav/menu.html b/network-api/networkapi/templates/fragments/nav/menu.html index 630cf62f37b..e21d6620242 100644 --- a/network-api/networkapi/templates/fragments/nav/menu.html +++ b/network-api/networkapi/templates/fragments/nav/menu.html @@ -29,7 +29,7 @@ {% include_block dropdown with style="desktop" %} {% 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" %} {% endif %}
{% endblock wide_screen_menu %} diff --git a/source/js/components/nav/desktop-dropdown.js b/source/js/components/nav/desktop-dropdown.js index 7c794f6688c..eaada58034a 100644 --- a/source/js/components/nav/desktop-dropdown.js +++ b/source/js/components/nav/desktop-dropdown.js @@ -63,7 +63,7 @@ class NavDesktopDropdown extends Accordion { 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("xlarge:tw-grid"); + this.content.classList.add("xlarge:tw-flex"); this.content.classList.remove("xlarge:tw-hidden"); if (this.isDropdownWayfindingActive === "true") { this.handleWayfindingOpenStyles(); @@ -93,7 +93,7 @@ class NavDesktopDropdown extends Accordion { 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("xlarge:tw-grid"); + this.content.classList.remove("xlarge:tw-flex"); this.content.classList.add("xlarge:tw-hidden"); if (this.isDropdownWayfindingActive === "true") { this.handleWayfindingClosedStyles(); diff --git a/tailwind-plugins/site-nav.js b/tailwind-plugins/site-nav.js new file mode 100644 index 00000000000..01f1106459c --- /dev/null +++ b/tailwind-plugins/site-nav.js @@ -0,0 +1,50 @@ +const plugin = require("tailwindcss/plugin"); + +function shared(theme) { + const media = (breakpoint) => `@media (min-width: ${breakpoint})`; + + return { + ".nav-accordion-content-inner": { + display: "flex", + flexDirection: "column", + background: "white", + gap: theme("gap.8"), + [media(theme("screens.xlarge"))]: { + display: "grid", + gap: `${theme("gap.0")} ${theme("gap.8")}`, + borderLeftWidth: "40px", + borderRightWidth: "40px", + borderLeftColor: theme("colors.white"), + borderRightColor: theme("colors.white"), + "&.has-featured-column": { + borderRightColor: theme("colors.gray.02"), + }, + }, + }, + ".nav-dropdown-column": { + display: "flex", + flexDirection: "column", + alignItems: "start", + flex: "1", + [media(theme("screens.xlarge"))]: { + marginTop: theme("margin.22"), + marginBottom: theme("margin.22"), + }, + "&.featured-column": { + padding: `${theme("padding.8")} ${theme("padding.12")}`, + [media(theme("screens.xlarge"))]: { + marginTop: 0, + marginBottom: 0, + paddingTop: theme("padding.22"), + paddingBottom: theme("padding.22"), + }, + }, + }, + }; +} + +module.exports = [ + plugin(function ({ addComponents, theme }) { + addComponents([shared(theme)]); + }), +]; diff --git a/tailwind.config.js b/tailwind.config.js index 76d0df3cd7f..eb1e3c58fda 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,7 @@ const buttonPlugins = require("./tailwind-plugins/button"); const typePlugins = require("./tailwind-plugins/type"); const glyphPlugins = require("./tailwind-plugins/glyph"); const formControlPlugins = require("./tailwind-plugins/form-control"); +const siteNavPlugins = require("./tailwind-plugins/site-nav"); module.exports = { content: ["./source/js/**/*.{js,jsx}", "./network-api/networkapi/**/*.html"], @@ -21,7 +22,7 @@ module.exports = { { // Handle dynamic grid column sizing on templates (see fragments/blocks/nav/dropdown.html) pattern: /w-(1|2|3|4)\/4/, - variants: ['large', 'hover', 'focus', 'large:hover', 'large:focus'], + variants: ['xlarge', 'large', 'hover', 'focus', 'large:hover', 'large:focus'], }, ], plugins: [ @@ -68,6 +69,7 @@ module.exports = { ...typePlugins, ...glyphPlugins, ...formControlPlugins, + ...siteNavPlugins, require("@tailwindcss/forms")({ strategy: "class" }), ], theme: {