[#294] Slider issue

components/00-base/_variables.components.scss

@@ -1307,6 +1307,7 @@ $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;

components/03-organisms/slider/slide.twig

@@ -33,115 +33,119 @@
 {% 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 %}>
-  {% 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 class="row ct-slide__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 %}
           </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 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 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>
+      {% endif %}
+    {% endblock %}
 
-            <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 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 %}
 
-        {% 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 %}
+        {% 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 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',
+        {% 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 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 %}
-              {% 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',
+              <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 %}
+
+          {% 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 %}
+
+          {% 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 %}
+        {% block content_bottom %}
+          {% if content_bottom is not empty %}
+            <div class="ct-slide__content-bottom">
+              {{- content_bottom|raw -}}
+            </div>
+          {% endif %}
+        {% endblock %}
+      </div>
     </div>
   </div>
 </div>

components/03-organisms/slider/slider.js

@@ -33,19 +33,19 @@
 CivicThemeSlider.prototype.refresh = function () {
   // Set slide width based on panel width.
   const panelWidth = window.getComputedStyle(this.panel).width;
-  this.slides.forEach((slide) => {
-    slide.style.width = panelWidth;
-  });
+  const panelWidthVal = parseFloat(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;
   });
-  this.showAllSlides();
+
+  // Show all slides temporarily to calculate heights.
+  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
 
   // Set slide position and find largest slide.
   let largestHeight = 0;
@@ -82,15 +82,11 @@
   });
 };
 
-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');
     }
   });
@@ -100,7 +96,7 @@
   const duration = parseFloat(window.getComputedStyle(this.rail).transitionDuration) * 1000;
 
   this.disableSlideInteraction();
-  this.showAllSlides();
+  this.slides.forEach((slide) => slide.removeAttribute('data-slider-slide-hidden'));
 
   // Reset timer and wait for animation to complete.
   clearTimeout(this.animationTimeout);

components/03-organisms/slider/slider.scss

@@ -117,26 +117,30 @@
     }
   }
 
-  #{$root}__image {
-    width: 100%;
-    overflow: hidden;
-    flex-shrink: 0;
-
+  #{$root}__row {
     @include ct-breakpoint(m) {
-      width: ct-particle(60);
+      width: 100%;
     }
+  }
 
-    @include ct-image-fit();
+  #{$root}__inner {
+    padding: ct-spacing(4);
+
+    @include ct-breakpoint(m) {
+      padding: ct-particle(10) 0;
+    }
   }
 
-  #{$root}__wrapper {
-    flex-grow: 1;
-    padding: ct-spacing(4) ct-spacing(3);
-    display: flex;
-    align-items: center;
+  #{$root}__image {
+    height: $ct-slide-mobile-height;
+
+    @include ct-image-fit();
 
     @include ct-breakpoint(m) {
-      padding: (ct-spacing() * 13) ct-spacing(10);
+      @include ct-image-container-square();
+
+      padding: 0;
+      height: 100%;
     }
   }