Revert "[#294] Slider is broken when large images are used. (#298)"

This reverts commit 6518c1c.
civictheme · Nov 25, 2024 · 1f03c47 · 1f03c47
1 parent 6518c1c
commit 1f03c47
Show file tree

Hide file tree

Showing 4 changed files with 120 additions and 119 deletions.
diff --git a/components/00-base/_variables.components.scss b/components/00-base/_variables.components.scss
@@ -1307,7 +1307,6 @@ $ct-slider-border-radius: $ct-border-radius !default;
 $ct-slider-space-horizontal: ct-spacing(7) !default;
 $ct-slider-slide-desktop-min-height: ct-particle(35) !default;
 $ct-slider-slide-mobile-min-height: ct-particle(35) !default;
-$ct-slide-mobile-height: ct-particle(35) !default;
 $ct-slider-mobile-transition: 0.5s !default;
 $ct-slider-desktop-transition: 1s !default;
 $ct-slider-light-background-color: ct-color-light('background-light') !default;

diff --git a/components/03-organisms/slider/slide.twig b/components/03-organisms/slider/slide.twig
@@ -33,119 +33,115 @@
 {% set modifier_class = '%s %s %s'|format(theme_class, image_position_class, modifier_class|default('')) %}
 
 <div class="ct-slide {{ modifier_class -}}" data-slider-slide {% if attributes is not empty %}{{ attributes|raw -}}{% endif %}>
-	<div class="row">
-    {% block image %}
-      {% if image is not empty %}
-		    <div class="col-xxs-12 first {% if image_position == 'right' %}col-m-5 col-m-offset-1 last-m{% else %}col-m-5 first-m{% endif %}">
-          <div class="ct-slide__image">
-            {% include '@atoms/image/image.twig' with {
-              theme: theme,
-              url: image.url,
-              alt: image.alt,
-            } only %}
+  {% block image %}
+    {% if image is not empty %}
+      <div class="ct-slide__image">
+        {% include '@atoms/image/image.twig' with {
+          theme: theme,
+          url: image.url,
+          alt: image.alt,
+        } only %}
+      </div>
+    {% endif %}
+  {% endblock %}
+
+  <div class="ct-slide__wrapper">
+    <div class="ct-slide__inner">
+      {% block content_top %}
+        {% if content_top is not empty %}
+          <div class="ct-slide__content-top">
+            {{- content_top|raw -}}
           </div>
-        </div>
-      {% endif %}
-    {% endblock %}
+        {% endif %}
+      {% endblock %}
 
-    <div class="col-xxs-12 {% if image_position == 'right' %}col-m-5 col-m-offset-1{% else %}col-m-5 col-m-offset-1{% endif %} ct-flex-align-self-center">
-      <div class="ct-slide__inner">
-        {% block content_top %}
-          {% if content_top is not empty %}
-            <div class="ct-slide__content-top">
-              {{- content_top|raw -}}
-            </div>
-          {% endif %}
-        {% endblock %}
+      {% block tags %}
+        {% if tags %}
+          {% include '@molecules/tag-list/tag-list.twig' with {
+            theme: theme,
+            tags: tags,
+            modifier_class: 'ct-slide__tags'
+          } only %}
+        {% endif %}
+      {% endblock %}
 
-        {% block tags %}
-          {% if tags %}
-            {% include '@molecules/tag-list/tag-list.twig' with {
-              theme: theme,
-              tags: tags,
-              modifier_class: 'ct-slide__tags'
-            } only %}
-          {% endif %}
-        {% endblock %}
+      {% block content %}
+        {% if title is not empty %}
+          {% include '@atoms/heading/heading.twig' with {
+            theme: theme,
+            content: title,
+            level: 2,
+            modifier_class: 'ct-slide__title'
+          } only %}
+        {% endif %}
 
-        {% block content %}
-          {% if title is not empty %}
-            {% include '@atoms/heading/heading.twig' with {
-              theme: theme,
-              content: title,
-              level: 2,
-              modifier_class: 'ct-slide__title'
-            } only %}
+        {% block date %}
+          {% if date is not empty %}
+            {% set date_content %}
+              {% include '@base/datetime/datetime.twig' with {
+                start: date,
+                start_iso: date_iso ?? null,
+                end: date_end ?? null,
+                end_iso: date_end_iso ?? null,
+              } only %}
+            {% endset %}
+
+            <div class="ct-slide__date">
+              {% include '@atoms/tag/tag.twig' with {
+                theme: theme,
+                type: date_end ? 'secondary' : 'tertiary',
+                content: date_content,
+                icon: date_end ? 'calendar-2' : null,
+                icon_placement: 'before',
+              } only %}
+            </div>
           {% endif %}
+        {% endblock %}
 
-          {% block date %}
-            {% if date is not empty %}
-              {% set date_content %}
-                {% include '@base/datetime/datetime.twig' with {
-                  start: date,
-                  start_iso: date_iso ?? null,
-                  end: date_end ?? null,
-                  end_iso: date_end_iso ?? null,
-                } only %}
-              {% endset %}
+        {% if content is not empty %}
+          {% include '@atoms/paragraph/paragraph.twig' with {
+            theme: theme,
+            content: content,
+            allow_html: true,
+            modifier_class: 'ct-slide__content',
+          } only %}
+        {% endif %}
 
-              <div class="ct-slide__date">
-                {% include '@atoms/tag/tag.twig' with {
+        {% block links %}
+          {% if links is not empty %}
+            {% set link_items = [] %}
+            {% for link in links %}
+              {% set link_item %}
+                {% include '@atoms/button/button.twig' with {
                   theme: theme,
-                  type: date_end ? 'secondary' : 'tertiary',
-                  content: date_content,
-                  icon: date_end ? 'calendar-2' : null,
-                  icon_placement: 'before',
+                  kind: 'link',
+                  type: loop.index == 1 ? 'primary' : 'secondary',
+                  text: link.text,
+                  url: link.url,
+                  is_external: link.is_external,
+                  is_new_window: link.is_new_window,
+                  modifier_class: 'ct-slide__links__link',
                 } only %}
-              </div>
-            {% endif %}
-          {% endblock %}
+              {% endset %}
+              {% set link_items = link_items|merge([link_item]) %}
+            {% endfor %}
 
-          {% if content is not empty %}
-            {% include '@atoms/paragraph/paragraph.twig' with {
-              theme: theme,
-              content: content,
-              allow_html: true,
-              modifier_class: 'ct-slide__content',
+            {% include '@base/item-list/item-list.twig' with {
+              items: link_items,
+              size: 'small',
+              modifier_class: 'ct-slide__links',
             } only %}
           {% endif %}
-
-          {% block links %}
-            {% if links is not empty %}
-              {% set link_items = [] %}
-              {% for link in links %}
-                {% set link_item %}
-                  {% include '@atoms/button/button.twig' with {
-                    theme: theme,
-                    kind: 'link',
-                    type: loop.index == 1 ? 'primary' : 'secondary',
-                    text: link.text,
-                    url: link.url,
-                    is_external: link.is_external,
-                    is_new_window: link.is_new_window,
-                    modifier_class: 'ct-slide__links__link',
-                  } only %}
-                {% endset %}
-                {% set link_items = link_items|merge([link_item]) %}
-              {% endfor %}
-
-              {% include '@base/item-list/item-list.twig' with {
-                items: link_items,
-                size: 'small',
-                modifier_class: 'ct-slide__links',
-              } only %}
-            {% endif %}
-          {% endblock %}
         {% endblock %}
+      {% endblock %}
 
-        {% block content_bottom %}
-          {% if content_bottom is not empty %}
-            <div class="ct-slide__content-bottom">
-              {{- content_bottom|raw -}}
-            </div>
-          {% endif %}
-        {% endblock %}
-      </div>
+      {% block content_bottom %}
+        {% if content_bottom is not empty %}
+          <div class="ct-slide__content-bottom">
+            {{- content_bottom|raw -}}
+          </div>
+        {% endif %}
+      {% endblock %}
     </div>
   </div>
 </div>
diff --git a/components/03-organisms/slider/slider.js b/components/03-organisms/slider/slider.js
@@ -33,19 +33,19 @@ function CivicThemeSlider(el) {
 CivicThemeSlider.prototype.refresh = function () {
   // Set slide width based on panel width.
   const panelWidth = window.getComputedStyle(this.panel).width;
-  const panelWidthVal = parseFloat(panelWidth);
+  this.slides.forEach((slide) => {
+    slide.style.width = panelWidth;
+  });
 
   // Set the rail width.
+  const panelWidthVal = parseFloat(panelWidth);
   this.rail.style.width = `${this.totalSlides * panelWidthVal}px`;
 
   // Reset slide heights.
   this.slides.forEach((slide) => {
     slide.style.height = null;
-    slide.style.width = panelWidth;
   });
-
-  // Show all slides temporarily to calculate heights.
-  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
+  this.showAllSlides();
 
   // Set slide position and find largest slide.
   let largestHeight = 0;
@@ -82,11 +82,15 @@ CivicThemeSlider.prototype.disableSlideInteraction = function () {
   });
 };
 
+CivicThemeSlider.prototype.showAllSlides = function () {
+  this.slides.forEach((slide) => {
+    slide.setAttribute('data-slider-slide-hidden', true);
+  });
+};
+
 CivicThemeSlider.prototype.hideAllSlidesExceptCurrent = function () {
   this.slides.forEach((slide, idx) => {
     if (idx !== this.currentSlide) {
-      slide.setAttribute('data-slider-slide-hidden', 'true');
-    } else {
       slide.removeAttribute('data-slider-slide-hidden');
     }
   });
@@ -96,7 +100,7 @@ CivicThemeSlider.prototype.updateDisplaySlide = function () {
   const duration = parseFloat(window.getComputedStyle(this.rail).transitionDuration) * 1000;
 
   this.disableSlideInteraction();
-  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
+  this.showAllSlides();
 
   // Reset timer and wait for animation to complete.
   clearTimeout(this.animationTimeout);

diff --git a/components/03-organisms/slider/slider.scss b/components/03-organisms/slider/slider.scss
@@ -117,24 +117,26 @@
     }
   }
 
-  #{$root}__inner {
-    padding: ct-spacing(4);
+  #{$root}__image {
+    width: 100%;
+    overflow: hidden;
+    flex-shrink: 0;
 
     @include ct-breakpoint(m) {
-      padding: ct-particle(10) 0;
+      width: ct-particle(60);
     }
-  }
-
-  #{$root}__image {
-    height: $ct-slide-mobile-height;
 
     @include ct-image-fit();
+  }
 
-    @include ct-breakpoint(m) {
-      @include ct-image-container-square();
+  #{$root}__wrapper {
+    flex-grow: 1;
+    padding: ct-spacing(4) ct-spacing(3);
+    display: flex;
+    align-items: center;
 
-      padding: 0;
-      height: 100%;
+    @include ct-breakpoint(m) {
+      padding: (ct-spacing() * 13) ct-spacing(10);
     }
   }