From 7e85a11da5c84bf834e77a73eb152938506e264a Mon Sep 17 00:00:00 2001
From: Jason Irish <jirish@dynamicagency.com>
Date: Mon, 21 Nov 2022 21:01:35 -0600
Subject: [PATCH] REFACTOR Bootstrap Templates
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

works “out of the box” in bootstrap. JS requirements can be modified once the controller requirement issue has been determined
---
 css/silverstripe-flexslider.css               | 48 -------------------
 .../FlexSlider/Model/SlideImage_Image.ss      |  9 ++--
 templates/Includes/FlexSlider.ss              | 14 +++---
 3 files changed, 13 insertions(+), 58 deletions(-)
 delete mode 100644 css/silverstripe-flexslider.css

diff --git a/css/silverstripe-flexslider.css b/css/silverstripe-flexslider.css
deleted file mode 100644
index 05cd232..0000000
--- a/css/silverstripe-flexslider.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.slideshow .flexslider {
-    border: none;
-}
-.slideshow .flexslider ul,
-.slideshow .fs-carousel ul{
-    margin: 0;
-}
-.slideshow .flexslider ul li,
-.slideshow .fs-carousel ul li{
-    list-style-type: none;
-    margin: 0;
-}
-.slideshow .flexslider ol,
-.slideshow .fs-carousel ol{
-    list-style-type: none;
-    margin: 0;
-}
-.slideshow .flexslider img, .slideshow .fs-carousel img {
-    border: 0;
-}
-.flexslider .slide {
-    margin-bottom: 10px;
-}
-.slideshow .flexslider a:hover {
-    border-bottom: 0;
-}
-.slideshow .flex-direction-nav a {
-    overflow: visible;
-}
-.slideshow a.flex-next:hover, .fs-carousel a.flex-next:hover {border-bottom: none;}
-
-.slideshow .fs-carousel {position: relative;}
-.slideshow .fs-carousel ul.slides li img {cursor: pointer; width: 100%; height: auto; opacity: 0.9;}
-.slideshow .fs-carousel ul.slides li img:hover {opacity: 1;}
-.slideshow .fs-carousel:hover .flex-direction-nav .flex-prev {
-  opacity: 0.7;
-  left: 10px;
-}
-.slideshow .fs-carousel:hover .flex-direction-nav .flex-prev:hover {
-  opacity: 1;
-}
-.slideshow .fs-carousel:hover .flex-direction-nav .flex-next {
-  opacity: 0.7;
-  right: 10px;
-}
-.slideshow .fs-carousel:hover .flex-direction-nav .flex-next:hover {
-  opacity: 1;
-}
diff --git a/templates/Dynamic/FlexSlider/Model/SlideImage_Image.ss b/templates/Dynamic/FlexSlider/Model/SlideImage_Image.ss
index 461f844..a851b77 100644
--- a/templates/Dynamic/FlexSlider/Model/SlideImage_Image.ss
+++ b/templates/Dynamic/FlexSlider/Model/SlideImage_Image.ss
@@ -1,13 +1,14 @@
 <% if $SlideLink %><% with $SlideLink %><a href="$LinkURL"{$TargetAttr}$ClassAttr title="$Title"><% end_with %><% end_if %>
     <% if $Image %>
-        <img src="$Image.Fill(1200,600).URL" alt="<% if $Headline %>$Headline<% end_if %>">
+        <img src="$Image.Fill(1200,600).URL" alt="<% if $Headline %>$Headline<% end_if %>" class="card-img-top">
     <% end_if %>
 <% if $SlideLink %></a><% end_if %>
-
-<% if $Headline %><h2>$Headline</h2><% end_if %>
-<% if $Description %><p>$Description</p><% end_if %>
+<div class="card-body">
+<% if $Headline %><h2 class="card-title">$Headline</h2><% end_if %>
+<% if $Description %><p class="card-text">$Description</p><% end_if %>
 <% if $SlideLink %>
     <div>
         $SlideLink
     </div>
 <% end_if %>
+</div>
diff --git a/templates/Includes/FlexSlider.ss b/templates/Includes/FlexSlider.ss
index d848977..5616898 100644
--- a/templates/Includes/FlexSlider.ss
+++ b/templates/Includes/FlexSlider.ss
@@ -1,8 +1,7 @@
 <% require css('dynamic/flexslider: thirdparty/flexslider/flexslider.css') %>
-<% require css('dynamic/flexslider: css/silverstripe-flexslider.css') %>
 <% if $SlideShow %>
-    <div class="slideshow">
-        <div class="flexslider">
+    <div class="row slideshow">
+        <div class="flexslider card col-md-12">
             <ul class="slides">
                 <% loop $SlideShow %>
                     <li>
@@ -18,17 +17,20 @@
             </ul>
         </div>
         <% if $ThumbnailNav && $SlideShow.Count > 1 %>
-        <div class="fs-carousel">
+        <div class="fs-carousel col-md-12">
             <ul class="slides">
                 <% loop $SlideShow %>
                     <li>
                         <% if $Image %>
-                            <img src="$Image.URL"  alt="$Image.Title" class="slide">
+                            <img src="$Image.Fill(200,200).URL"  alt="$Image.Title" class="slide">
                         <% end_if %>
                     </li>
                 <% end_loop %>
             </ul>
         </div>
     <% end_if %>
-</div>
+    </div>
+    <% require javascript('//code.jquery.com/jquery-3.6.1.min.js') %>
+    <% require javascript('dynamic/flexslider: thirdparty/flexslider/jquery.flexslider-min.js') %>
 <% end_if %>
+