Revert global section settings (#911)

* Move vert spacing and remove other section settings * Include collage
Shopify · Dec 16, 2021 · 07d6e4a · 07d6e4a
1 parent 2cb7a1a
commit 07d6e4a
Show file tree

Hide file tree

Showing 10 changed files with 474 additions and 540 deletions.
diff --git a/assets/base.css b/assets/base.css
@@ -277,24 +277,6 @@ body,
   }
 }
 
-.section-wrapper {
-  border-radius: var(--sections-radius);
-  border: var(--sections-border-width) solid rgba(var(--color-foreground), var(--sections-border-opacity));
-  overflow: hidden;
-}
-
-.section-wrapper.section-wrapper--fullwidth {
-  padding-left: 0;
-  padding-right: 0;
-  border-radius: 0;
-  border-left: 0;
-  border-right: 0;
-}
-
-.section-wrapper--padded {
-  padding: 2rem;
-}
-
 .grid-auto-flow {
   display: grid;
   grid-auto-flow: column;

diff --git a/config/settings_schema.json b/config/settings_schema.json
@@ -625,51 +625,6 @@
       }
     ]
   },
-  {
-    "name": "Sections",
-    "settings": [
-      {
-        "type": "range",
-        "id": "sections_spacing",
-        "min": 0,
-        "max": 80,
-        "step": 4,
-        "unit": "px",
-        "label": "Vertical spacing between sections",
-        "default": 40
-      },
-      {
-        "type": "range",
-        "id": "sections_border_opacity",
-        "min": 0,
-        "max": 100,
-        "step": 5,
-        "unit": "%",
-        "label": "Border opacity",
-        "default": 50
-      },
-      {
-        "type": "range",
-        "id": "sections_border_width",
-        "min": 0,
-        "max": 10,
-        "step": 1,
-        "unit": "px",
-        "label": "Border thickness",
-        "default": 0
-      },
-      {
-        "type": "range",
-        "id": "sections_radius",
-        "min": 0,
-        "max": 30,
-        "step": 3,
-        "unit": "px",
-        "label": "Corner radius",
-        "default": 0
-      }
-    ]
-  },
   {
     "name": "t:settings_schema.typography.name",
     "settings": [
@@ -845,6 +800,16 @@
         "default": "1600",
         "label": "t:settings_schema.layout.settings.page_width.label"
       },
+      {
+        "type": "range",
+        "id": "sections_spacing",
+        "min": 0,
+        "max": 40,
+        "step": 4,
+        "unit": "px",
+        "label": "Vertical spacing between sections",
+        "default": 20
+      },
       {
         "type": "paragraph",
         "content": "Affects collection, search and blog pages. Also affects collage, collection, collection list, multicolumn and blog sections."

diff --git a/layout/theme.liquid b/layout/theme.liquid
@@ -97,11 +97,6 @@
 
         --sections-spacing: {{ settings.sections_spacing }}px;
         --sections-safe-spacing: {% if settings.sections_spacing < 15 %}15{% else %}{{settings.sections_spacing}}{% endif %}px;
-        --sections-padding: 20px;
-        --sections-radius: {{ settings.sections_radius }}px;
-        --sections-border-width: {{ settings.sections_border_width }}px;
-        --sections-border-opacity: {{ settings.sections_border_opacity | divided_by: 100.0 }};
-        --sections-border-color: {{ settings.sections_border_color.red }}, {{ settings.sections_border_color.green }}, {{ settings.sections_border_color.blue }};
 
         --popup-drawer-border-width: {{ settings.popup_drawer_border_width }}px;
         --popup-drawer-border-opacity: {{ settings.popup_drawer_border_opacity | divided_by: 100.0 }};

diff --git a/sections/collage.liquid b/sections/collage.liquid
diff --git a/sections/featured-product.liquid b/sections/featured-product.liquid
diff --git a/sections/image-with-text.liquid b/sections/image-with-text.liquid
@@ -44,7 +44,7 @@
                 <a{% if block.settings.button_link == blank %} role="link" aria-disabled="true"{% else %} href="{{ block.settings.button_link }}"{% endif %} class="button{% if block.settings.button_style_secondary %} button--secondary{% else %} button--primary{% endif %}" {{ block.shopify_attributes }}>
                   {{ block.settings.button_label | escape }}
                 </a>
-              {%- endif -%} 
+              {%- endif -%}
           {%- endcase -%}
         {%- endfor -%}
       </div>

diff --git a/sections/newsletter.liquid b/sections/newsletter.liquid
@@ -2,7 +2,7 @@
 {{ 'newsletter-section.css' | asset_url | stylesheet_tag }}
 
 <div class="newsletter center{% if section.settings.full_width == false %} newsletter--narrow page-width{% endif%}">
-  <div class="section-wrapper{% if section.settings.full_width %} section-wrapper--fullwidth{% endif %} newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
+  <div class="newsletter__wrapper color-{{ section.settings.color_scheme }} gradient">
     {%- for block in section.blocks -%}
       {%- case block.type -%}
         {%- when '@app' -%}

diff --git a/sections/page.liquid b/sections/page.liquid
@@ -5,23 +5,21 @@
 <noscript>{{ 'section-main-page.css' | asset_url | stylesheet_tag }}</noscript>
 
 <div class="page-width page-width--narrow">
-  <div class="section-wrapper section-wrapper--padded">
-    <h2 class="page-title">
-      {%- if section.settings.page.title != blank -%}
-        {{ section.settings.page.title | escape }}
-      {%- else -%}
-        Page title
-      {%- endif -%}
-    </h2>
-    <div class="rte">
-      {%- if section.settings.page.content != blank -%}
-        {{ section.settings.page.content }}
-      {%- else -%}
-        <div class='page-placeholder-wrapper placeholder'>
-          {{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
-        </div>
-      {%- endif -%}
-    </div>
+  <h2 class="page-title">
+    {%- if section.settings.page.title != blank -%}
+      {{ section.settings.page.title | escape }}
+    {%- else -%}
+      Page title
+    {%- endif -%}
+  </h2>
+  <div class="rte">
+    {%- if section.settings.page.content != blank -%}
+      {{ section.settings.page.content }}
+    {%- else -%}
+      <div class='page-placeholder-wrapper placeholder'>
+        {{ 'page' | placeholder_svg_tag: 'page-placeholder' }}
+      </div>
+    {%- endif -%}
   </div>
 </div>
 

diff --git a/sections/rich-text.liquid b/sections/rich-text.liquid
@@ -5,7 +5,7 @@
 <noscript>{{ 'section-rich-text.css' | asset_url | stylesheet_tag }}</noscript>
 
 <div class="{% unless section.settings.full_width %}page-width{% endunless %}">
-  <div class="rich-text color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width{% endif %} section-wrapper{% if section.settings.full_width %} section-wrapper--fullwidth{% endif %}">
+  <div class="rich-text color-{{ section.settings.color_scheme }} gradient{% if section.settings.full_width %} rich-text--full-width{% endif %}">
     <div class="rich-text__blocks">
       {%- for block in section.blocks -%}
         {%- case block.type -%}

diff --git a/sections/video.liquid b/sections/video.liquid
@@ -5,44 +5,11 @@
   <div{% if section.settings.full_width %} class="page-width"{% endif %}>
     <h2 class="title">{{ section.settings.heading }}</h2>
   </div>
-  <div class="section-wrapper{% if section.settings.full_width %} section-wrapper--fullwidth{% endif %}">
-    <noscript>
-      <div class="video-section__media"
-        {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
-      >
-        <a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
-          {%- if section.settings.cover_image != blank -%}
-            <img
-              srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
-                {%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
-                {{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
-              src="{{ section.settings.cover_image | img_url: '1920x' }}"
-              sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
-              alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
-              loading="lazy"
-              width="{{ section.settings.cover_image.width }}"
-              height="{{ section.settings.cover_image.height }}"
-            >
-          {%- else -%}
-            {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
-          {%- endif -%}
-        </a>
-      </div>
-    </noscript>
-    <deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
+  <noscript>
+    <div class="video-section__media"
       {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
     >
-      <button
-        id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
-        class="video-section__poster media deferred-media__poster media--landscape"
-        type="button"
-      >
+      <a href="{{ section.settings.video_url }}" class="video-section__poster media media--transparent media--landscape{% if section.settings.cover_image == blank %} video-section__placeholder{% endif %}">
         {%- if section.settings.cover_image != blank -%}
           <img
             srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
@@ -64,19 +31,50 @@
         {%- else -%}
           {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
         {%- endif -%}
-        <span class="deferred-media__poster-button motion-reduce">
-          {%- render 'icon-play' -%}
-        </span>
-      </button>
-      <template>
-        {%- if section.settings.video_url.type == 'youtube' -%}
-          <iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
-        {%- else -%}
-          <iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
-        {%- endif -%}
-      </template>
-    </deferred-media>
-  </div>
+      </a>
+    </div>
+  </noscript>
+  <deferred-media class="video-section__media deferred-media no-js-hidden" data-media-id="{{ section.settings.video_url.id }}"
+    {% if section.settings.cover_image != blank %} style="padding-bottom: {{ 1 | divided_by: section.settings.cover_image.aspect_ratio | times: 100 }}%;"{% endif %}
+  >
+    <button
+      id="Deferred-Poster-Modal-{{ section.settings.video_url.id }}"
+      class="video-section__poster media deferred-media__poster media--landscape"
+      type="button"
+    >
+      {%- if section.settings.cover_image != blank -%}
+        <img
+          srcset="{%- if section.settings.cover_image.width >= 375 -%}{{ section.settings.cover_image | img_url: '375x' }} 375w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 750 -%}{{ section.settings.cover_image | img_url: '750x' }} 750w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 1100 -%}{{ section.settings.cover_image | img_url: '1100x' }} 1100w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 1500 -%}{{ section.settings.cover_image | img_url: '1500x' }} 1500w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 1780 -%}{{ section.settings.cover_image | img_url: '1780x' }} 1780w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 2000 -%}{{ section.settings.cover_image | img_url: '2000x' }} 2000w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 3000 -%}{{ section.settings.cover_image | img_url: '3000x' }} 3000w,{%- endif -%}
+            {%- if section.settings.cover_image.width >= 3840 -%}{{ section.settings.cover_image | img_url: '3840x' }} 3840w,{%- endif -%}
+            {{ section.settings.cover_image | img_url: 'master' }} {{ section.settings.cover_image.width }}w"
+          src="{{ section.settings.cover_image | img_url: '1920x' }}"
+          sizes="{% if section.settings.full_width %}100vw{% else %}(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw{% endif %}"
+          alt="{{ 'sections.video.load_video' | t: description: section.settings.description | escape }}"
+          loading="lazy"
+          width="{{ section.settings.cover_image.width }}"
+          height="{{ section.settings.cover_image.height }}"
+        >
+      {%- else -%}
+        {{ 'collection-2' | placeholder_svg_tag: 'placeholder-svg placeholder' }}
+      {%- endif -%}
+      <span class="deferred-media__poster-button motion-reduce">
+        {%- render 'icon-play' -%}
+      </span>
+    </button>
+    <template>
+      {%- if section.settings.video_url.type == 'youtube' -%}
+        <iframe src="https://www.youtube.com/embed/{{ section.settings.video_url.id }}?enablejsapi=1" class="js-youtube" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
+      {%- else -%}
+        <iframe src="https://player.vimeo.com/video/{{ section.settings.video_url.id }}" class="js-vimeo" allow="autoplay; encrypted-media" allowfullscreen title="{{ section.settings.description | escape }}"></iframe>
+      {%- endif -%}
+    </template>
+  </deferred-media>
 </div>
 
 {% schema %}