Merge pull request #48 from youcan-shop/TH-107

TH-107: All new themes > Slider Content and button can’t change position
youcan-shop · Sep 12, 2024 · d37de7c · d37de7c
2 parents 17e0928 + 844f26d
commit d37de7c
Show file tree

Hide file tree

Showing 18 changed files with 195 additions and 190 deletions.
diff --git a/themes/aura/assets/desktop-slider.css b/themes/aura/assets/desktop-slider.css
@@ -33,15 +33,10 @@
 .yc-slider__desktop .content{
   height:100%;
   display:flex;
-  align-items:center;
-  text-align:center;
   justify-content:center;
-  margin:auto;
-}
-.yc-slider__desktop .content > div{
-  max-width:30rem;
-  position:relative;
-  z-index:3;
+  flex-direction:column;
+  padding:0 250px;
+  text-align:var(--alignment);
 }
 .yc-slider__desktop .content .headers, .yc-slider__desktop .content h3, .yc-slider__desktop .content h2, .yc-slider__desktop .content h1{
   font-weight:700;
@@ -60,12 +55,10 @@
 .yc-slider__desktop .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder{
-  margin-top:2rem;
-  display:flex;
-  text-align:center;
-  justify-content:center;
+.yc-slider__desktop .content .btn-holder {
+  margin-top:1em;
+  text-align:var(--alignment);
 }
-.yc-slider__desktop .content .container > div{
-  max-width:600px;
+.yc-slider__desktop .content .btn-holder a {
+  display:inline-flex;
 }
diff --git a/themes/aura/assets/mobile-slider.css b/themes/aura/assets/mobile-slider.css
@@ -6,14 +6,10 @@
 .yc-slider__mobile .content{
   height:100%;
   display:flex;
-  text-align:center;
   justify-content:center;
-  align-items:center;
-}
-.yc-slider__mobile .content > div{
-  max-width:30rem;
-  position:relative;
-  z-index:3;
+  flex-direction: column;
+  padding:0 20px;
+  text-align:var(--alignment);
 }
 .yc-slider__mobile .content .headers, .yc-slider__mobile .content h3, .yc-slider__mobile .content h2, .yc-slider__mobile .content h1{
   font-weight:700;
@@ -32,7 +28,10 @@
 .yc-slider__mobile .content p{
   margin-top:1rem;
 }
-.yc-slider__mobile .content .btn-holder{
-  margin-top:2rem;
-  text-align:center;
+.yc-slider__desktop .content .btn-holder {
+  margin-top:1em;
+  text-align:var(--alignment);
+}
+.yc-slider__desktop .content .btn-holder a {
+  display:inline-flex;
 }
diff --git a/themes/aura/sections/desktop-slider.liquid b/themes/aura/sections/desktop-slider.liquid
@@ -285,6 +285,26 @@
           "id": "caption",
           "label": "Slider content"
         },
+        {
+          "type": "select",
+          "id": "content_alignment",
+          "label": "Content alignment",
+          "options": [
+            {
+              "value": "center",
+              "label": "Center"
+            },
+            {
+              "value": "left",
+              "label": "Left"
+            },
+            {
+              "value": "right",
+              "label": "Right"
+            }
+          ],
+          "default": "center"
+        },
         {
           "type": "text",
           "id": "button_text",

diff --git a/themes/aura/snippets/slider.liquid b/themes/aura/snippets/slider.liquid
@@ -61,22 +61,21 @@
           {{ block.youcan_attributes }}
         >
           {%- if block.settings.caption %}
-            <div class='content flex items-center h-full w-full slide-box'>
-              <div class='container flex items-center justify-center slide-content-box'>
-                <div>
-                  <div class='caption'>{{ block.settings.caption }}</div>
-                  {% if block.settings.product %}
-                    <div class='btn-holder'>
-                      <a
-                        href='{{ block.settings.product.url }}'
-                        class='yc-btn slide-content-box-button btn-{{ forloop.index }}'
-                      >
-                        {{ block.settings.button_text }}
-                      </a>
-                    </div>
-                  {% endif %}
+            <div 
+              class='content' 
+              style="--alignment: {{ block.settings.content_alignment }}"
+            >
+              <div class='caption w-full'>{{ block.settings.caption }}</div>
+              {% if block.settings.product %}
+                <div class="btn-holder">
+                  <a
+                    href='{{ block.settings.product.url }}'
+                    class='yc-btn slide-content-box-button btn-{{ forloop.index }}'
+                  >
+                    {{ block.settings.button_text }}
+                  </a>
                 </div>
-              </div>
+              {% endif %}
             </div>
           {%- endif %}
         </li>

diff --git a/themes/aura/styles/desktop-slider.scss b/themes/aura/styles/desktop-slider.scss
@@ -33,16 +33,10 @@
   .content {
     height: 100%;
     display: flex;
-    align-items: center;
-    text-align: center;
     justify-content: center;
-    margin: auto;
-
-    & > div {
-      max-width: 30rem;
-      position: relative;
-      z-index: 3;
-    }
+    flex-direction:column;
+    padding:0 250px;
+    text-align:var(--alignment);
 
     .headers {
       font-weight: 700;
@@ -62,10 +56,11 @@
     }
 
     .btn-holder {
-      margin-top: 2rem;
-      display: flex;
-      text-align: center;
-      justify-content: center;
+      margin-top: 1em;
+      text-align: var(--alignment);
+      a {
+        display: inline-flex;
+      }
     }
 
     .container {

diff --git a/themes/aura/styles/mobile-slider.scss b/themes/aura/styles/mobile-slider.scss
@@ -8,15 +8,10 @@
   .content {
     height: 100%;
     display: flex;
-    text-align: center;
     justify-content: center;
-    align-items: center;
-
-    & > div {
-      max-width: 30rem;
-      position: relative;
-      z-index: 3;
-    }
+    flex-direction: column;
+    padding:0 20px;
+    text-align:var(--alignment);
 
     .headers {
       font-weight: 700;
@@ -36,8 +31,11 @@
     }
 
     .btn-holder {
-      margin-top: 2rem;
-      text-align: center;
+      margin-top: 1em;
+      text-align: var(--alignment);
+      a {
+        display: inline-flex;
+      }
     }
   }
 }
diff --git a/themes/harmony/assets/desktop-slider.css b/themes/harmony/assets/desktop-slider.css
@@ -35,20 +35,14 @@
 .yc-slider__desktop .content{
   height:100%;
   display:flex;
-  align-items:center;
-  text-align:center;
   justify-content:center;
-  margin:auto;
-}
-.yc-slider__desktop .content > div{
-  max-width:30rem;
-  position:relative;
-  z-index:3;
+  flex-direction:column;
+  padding:0 250px;
+  text-align:var(--alignment);
 }
 .yc-slider__desktop .content .headers, .yc-slider__desktop .content h3, .yc-slider__desktop .content h2, .yc-slider__desktop .content h1{
   font-weight:700;
   line-height:1.2;
-  margin-bottom:2rem;
 }
 .yc-slider__desktop .content h1{
   font-size:3rem;
@@ -62,12 +56,10 @@
 .yc-slider__desktop .content p{
   margin-top:1rem;
 }
-.yc-slider__desktop .content .btn-holder{
-  margin-top:2rem;
-  display:flex;
-  text-align:center;
-  justify-content:center;
+.yc-slider__desktop .content .btn-holder {
+  margin-top:1em;
+  text-align:var(--alignment);
 }
-.yc-slider__desktop .content .container > div{
-  max-width:600px;
+.yc-slider__desktop .content .btn-holder a {
+  display:inline-flex;
 }
diff --git a/themes/harmony/assets/mobile-slider.css b/themes/harmony/assets/mobile-slider.css
@@ -6,19 +6,14 @@
 .yc-slider__mobile .content{
   height:100%;
   display:flex;
-  text-align:center;
   justify-content:center;
-  align-items:center;
-}
-.yc-slider__mobile .content > div{
-  max-width:30rem;
-  position:relative;
-  z-index:3;
+  flex-direction: column;
+  padding:0 20px;
+  text-align:var(--alignment);
 }
 .yc-slider__mobile .content .headers, .yc-slider__mobile .content h3, .yc-slider__mobile .content h2, .yc-slider__mobile .content h1{
   font-weight:700;
   line-height:1.2;
-  margin-bottom:2rem;
 }
 .yc-slider__mobile .content h1{
   font-size:3rem;
@@ -32,7 +27,10 @@
 .yc-slider__mobile .content p{
   margin-top:1rem;
 }
-.yc-slider__mobile .content .btn-holder{
-  margin-top:2rem;
-  text-align:center;
+.yc-slider__desktop .content .btn-holder {
+  margin-top:1em;
+  text-align:var(--alignment);
+}
+.yc-slider__desktop .content .btn-holder a {
+  display:inline-flex;
 }
diff --git a/themes/harmony/sections/desktop-slider.liquid b/themes/harmony/sections/desktop-slider.liquid
@@ -275,6 +275,26 @@
           "id": "caption",
           "label": "Slider content"
         },
+        {
+          "type": "select",
+          "id": "content_alignment",
+          "label": "Content alignment",
+          "options": [
+            {
+              "value": "center",
+              "label": "Center"
+            },
+            {
+              "value": "left",
+              "label": "Left"
+            },
+            {
+              "value": "right",
+              "label": "Right"
+            }
+          ],
+          "default": "center"
+        },
         {
           "type": "text",
           "id": "button_text",

diff --git a/themes/harmony/snippets/slider.liquid b/themes/harmony/snippets/slider.liquid
@@ -64,22 +64,21 @@
           {{ block.youcan_attributes }}
         >
           {%- if block.settings.caption %}
-            <div class='content flex items-center h-full w-full slide-box'>
-              <div class='container flex items-center justify-center slide-content-box'>
-                <div>
-                  <div class='caption'>{{ block.settings.caption }}</div>
-                  {% if block.settings.product %}
-                    <div class='btn-holder'>
-                      <a
-                        href='{{ block.settings.product.url }}'
-                        class='yc-btn slide-content-box-button btn-{{ forloop.index }}'
-                      >
-                        {{ block.settings.button_text }}
-                      </a>
-                    </div>
-                  {% endif %}
+            <div 
+              class='content' 
+              style="--alignment: {{ block.settings.content_alignment }}"
+            >
+              <div class='caption w-full'>{{ block.settings.caption }}</div>
+              {% if block.settings.product %}
+                <div class="btn-holder">
+                  <a
+                    href='{{ block.settings.product.url }}'
+                    class='yc-btn slide-content-box-button btn-{{ forloop.index }}'
+                  >
+                    {{ block.settings.button_text }}
+                  </a>
                 </div>
-              </div>
+              {% endif %}
             </div>
           {%- endif %}
         </li>

diff --git a/themes/harmony/styles/desktop-slider.scss b/themes/harmony/styles/desktop-slider.scss
@@ -39,16 +39,10 @@
   .content {
     height: 100%;
     display: flex;
-    align-items: center;
-    text-align: center;
     justify-content: center;
-    margin: auto;
-
-    & > div {
-      max-width: 30rem;
-      position: relative;
-      z-index: 3;
-    }
+    flex-direction: column;
+    padding: 0 250px;
+    text-align: var(--alignment);
 
     .headers {
       font-weight: 700;
@@ -68,10 +62,11 @@
     }
 
     .btn-holder {
-      margin-top: 2rem;
-      display: flex;
-      text-align: center;
-      justify-content: center;
+      margin-top: 1em;
+      text-align: var(--alignment);
+      a {
+        display: inline-flex;
+      }
     }
 
     .container {