From 0ae39bae9d074f7524f001ee8b7d9f49dba3bea3 Mon Sep 17 00:00:00 2001 From: Ludo Segura Date: Thu, 23 Feb 2023 11:19:32 -0500 Subject: [PATCH] Change rich text section heading to be of type inline_richtext, also moved rte styling into base.css --- assets/base.css | 68 +++++++ assets/component-rte.css | 67 ------- sections/collapsible-content.liquid | 1 - sections/email-signup-banner.liquid | 1 - sections/featured-collection.liquid | 2 - sections/featured-product.liquid | 15 +- sections/footer.liquid | 181 +++++++++++++++---- sections/image-with-text.liquid | 6 +- sections/main-collection-product-grid.liquid | 8 - sections/main-page.liquid | 2 - sections/main-product.liquid | 1 - sections/multicolumn.liquid | 1 - sections/multirow.liquid | 1 - sections/newsletter.liquid | 1 - sections/page.liquid | 2 - sections/rich-text.liquid | 13 +- sections/slideshow.liquid | 165 ++++++++++++----- templates/index.json | 2 +- 18 files changed, 358 insertions(+), 179 deletions(-) delete mode 100644 assets/component-rte.css diff --git a/assets/base.css b/assets/base.css index a3d2d82e519..1c5c3cd1442 100644 --- a/assets/base.css +++ b/assets/base.css @@ -3006,3 +3006,71 @@ details-disclosure > details { outline: transparent solid 1px; } } + +.rte:after { + clear: both; + content: ''; + display: block; +} + +.rte > p:first-child { + margin-top: 0; +} + +.rte > p:last-child { + margin-bottom: 0; +} + +.rte table { + table-layout: fixed; +} + +@media screen and (min-width: 750px) { + .rte table td { + padding-left: 1.2rem; + padding-right: 1.2rem; + } +} + +.rte img { + height: auto; + max-width: 100%; + border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); + border-radius: var(--media-radius); + box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); + margin-bottom: var(--media-shadow-vertical-offset); +} + +.rte ul, +.rte ol { + list-style-position: inside; + padding-left: 2rem; +} + +.rte li { + list-style: inherit; +} + +.rte li:last-child { + margin-bottom: 0; +} + +.rte a { + color: rgba(var(--color-link), var(--alpha-link)); + text-underline-offset: 0.3rem; + text-decoration-thickness: 0.1rem; + transition: text-decoration-thickness var(--duration-short) ease; +} + +.rte a:hover { + color: rgb(var(--color-link)); + text-decoration-thickness: 0.2rem; +} + +.rte blockquote { + display: inline-flex; +} + +.rte blockquote > * { + margin: -0.5rem 0 -0.5rem 0; +} diff --git a/assets/component-rte.css b/assets/component-rte.css deleted file mode 100644 index dc412b63546..00000000000 --- a/assets/component-rte.css +++ /dev/null @@ -1,67 +0,0 @@ -.rte:after { - clear: both; - content: ''; - display: block; -} - -.rte > p:first-child { - margin-top: 0; -} - -.rte > p:last-child { - margin-bottom: 0; -} - -.rte table { - table-layout: fixed; -} - -@media screen and (min-width: 750px) { - .rte table td { - padding-left: 1.2rem; - padding-right: 1.2rem; - } -} - -.rte img { - height: auto; - max-width: 100%; - border: var(--media-border-width) solid rgba(var(--color-foreground), var(--media-border-opacity)); - border-radius: var(--media-radius); - box-shadow: var(--media-shadow-horizontal-offset) var(--media-shadow-vertical-offset) var(--media-shadow-blur-radius) rgba(var(--color-shadow), var(--media-shadow-opacity)); - margin-bottom: var(--media-shadow-vertical-offset); -} - -.rte ul, -.rte ol { - list-style-position: inside; - padding-left: 2rem; -} - -.rte li { - list-style: inherit; -} - -.rte li:last-child { - margin-bottom: 0; -} - -.rte a { - color: rgba(var(--color-link), var(--alpha-link)); - text-underline-offset: 0.3rem; - text-decoration-thickness: 0.1rem; - transition: text-decoration-thickness var(--duration-short) ease; -} - -.rte a:hover { - color: rgb(var(--color-link)); - text-decoration-thickness: 0.2rem; -} - -.rte blockquote { - display: inline-flex; -} - -.rte blockquote > * { - margin: -0.5rem 0 -0.5rem 0; -} diff --git a/sections/collapsible-content.liquid b/sections/collapsible-content.liquid index 1e6cc8216b7..01ed143a3f2 100644 --- a/sections/collapsible-content.liquid +++ b/sections/collapsible-content.liquid @@ -1,6 +1,5 @@ {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'collapsible-content.css' | asset_url | stylesheet_tag }} -{{ 'component-rte.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { diff --git a/sections/email-signup-banner.liquid b/sections/email-signup-banner.liquid index eb6be0d2d3c..dcf612e9c90 100644 --- a/sections/email-signup-banner.liquid +++ b/sections/email-signup-banner.liquid @@ -2,7 +2,6 @@ {{ 'component-newsletter.css' | asset_url | stylesheet_tag }} {{ 'newsletter-section.css' | asset_url | stylesheet_tag }} {{ 'section-email-signup-banner.css' | asset_url | stylesheet_tag }} -{{ 'component-rte.css' | asset_url | stylesheet_tag }} {%- style -%} #Banner-{{ section.id }}::after { diff --git a/sections/featured-collection.liquid b/sections/featured-collection.liquid index de0ac378733..dc1dffc8ab3 100644 --- a/sections/featured-collection.liquid +++ b/sections/featured-collection.liquid @@ -1,6 +1,5 @@ {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} -{{ 'component-rte.css' | asset_url | stylesheet_tag }} @@ -48,7 +47,6 @@
-
{%- if section.settings.title != blank -%}

{{ section.settings.title }}

diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid index 1b665db1c1e..490b461e3b9 100644 --- a/sections/featured-product.liquid +++ b/sections/featured-product.liquid @@ -2,7 +2,6 @@ {{ 'section-featured-product.css' | asset_url | stylesheet_tag }} {{ 'component-accordion.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} -{{ 'component-rte.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {%- style -%} @@ -284,9 +283,19 @@ {% assign share_url = product.selected_variant.url | default: product.url | prepend: request.origin %} {% render 'share-button', block: block, share_link: share_url %} {%- when 'variant_picker' -%} - {% render 'product-variant-picker', product: product, block: block, product_form_id: product_form_id, update_url: false %} + {% render 'product-variant-picker', + product: product, + block: block, + product_form_id: product_form_id, + update_url: false + %} {%- when 'buy_buttons' -%} - {%- render 'buy-buttons', block: block, product: product, product_form_id: product_form_id, section_id: section.id -%} + {%- render 'buy-buttons', + block: block, + product: product, + product_form_id: product_form_id, + section_id: section.id + -%} {%- when 'custom_liquid' -%} {{ block.settings.custom_liquid }} {%- when 'rating' -%} diff --git a/sections/footer.liquid b/sections/footer.liquid index ca1fdaaa9ab..5126e05fe25 100644 --- a/sections/footer.liquid +++ b/sections/footer.liquid @@ -4,14 +4,12 @@ - - {%- style -%} @@ -51,7 +49,11 @@ assign only_empty_brand = true endif -%} - {%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social or section.settings.enable_follow_on_shop -%} + {%- if section.blocks.size > 0 + or section.settings.newsletter_enable + or section.settings.show_social + or section.settings.enable_follow_on_shop + -%} {%- unless only_empty_brand -%}
{%- if section.blocks.size > 0 -%} @@ -66,7 +68,10 @@ -%}
{%- for block in section.blocks -%} -
+
{%- if block.settings.heading != blank -%}

{{- block.settings.heading -}}

{%- endif -%} @@ -83,7 +88,10 @@
    {%- for link in block.settings.menu.links -%}
  • - + {{ link.title }}
    • @@ -93,13 +101,21 @@ {%- when 'brand_information' -%}
    {%- if settings.brand_image != blank -%} - {%- assign brand_image_height = settings.brand_image_width | divided_by: settings.brand_image.aspect_ratio -%} -
    - {{ settings.brand_image | image_url: width: 1100 | image_tag: - loading: 'lazy', - widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100', - height: brand_image_height, - width: settings.brand_image_width + {%- assign brand_image_height = settings.brand_image_width + | divided_by: settings.brand_image.aspect_ratio + -%} +
    + {{ + settings.brand_image + | image_url: width: 1100 + | image_tag: + loading: 'lazy', + widths: '50, 100, 150, 200, 300, 400, 550, 800, 1100', + height: brand_image_height, + width: settings.brand_image_width }}
    {%- endif -%} @@ -117,9 +133,12 @@
    {%- if block.settings.image != blank -%} {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%} -
    +
    {{ block.settings.image.alt | escape }} - {%- endcase -%} + {%- endcase -%}
    {%- endfor -%}
    @@ -170,16 +189,34 @@ -
    {%- if form.errors -%} - + {%- endif -%}
    {%- if form.posted_successfully? -%} - + {%- endif -%} {%- endform -%}
    @@ -187,10 +224,10 @@ {%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%} {%- endif -%} @@ -210,10 +247,20 @@ {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
    - {%- for country in localization.available_countries -%} - {%- endfor -%} @@ -227,16 +274,34 @@

    {{ 'localization.country_label' | t }}

    -