From fd161eeb75d7670c56cc8bbd4a35eac2f1e65b53 Mon Sep 17 00:00:00 2001
From: James Collins <james.collins@outlook.com.au>
Date: Wed, 25 Jan 2023 08:34:45 +1000
Subject: [PATCH] mobile support for carousel

---
 resources/js/components/SMCarousel.vue      |  2 +-
 resources/js/components/SMCarouselSlide.vue | 34 ++++++++++++++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/SMCarousel.vue b/resources/js/components/SMCarousel.vue
index 3a3bd39..574ef3f 100644
--- a/resources/js/components/SMCarousel.vue
+++ b/resources/js/components/SMCarousel.vue
@@ -132,7 +132,7 @@ const disconnectMutationObserver = () => {
     position: relative;
     height: 26rem;
     background: #eee;
-    // overflow: hidden;
+    overflow: hidden;
 
     &:hover {
         .carousel-slide-prev,
diff --git a/resources/js/components/SMCarouselSlide.vue b/resources/js/components/SMCarouselSlide.vue
index dc3d9f2..15767dd 100644
--- a/resources/js/components/SMCarouselSlide.vue
+++ b/resources/js/components/SMCarouselSlide.vue
@@ -7,10 +7,12 @@
         </div>
         <div v-else class="carousel-slide-body">
             <div class="carousel-slide-content">
-                <h3>{{ title }}</h3>
-                <p v-if="content">{{ content }}</p>
-                <div class="carousel-slide-body-buttons">
-                    <SMButton v-if="url" :to="url" :label="cta" />
+                <div class="carousel-slide-content-inner">
+                    <h3>{{ title }}</h3>
+                    <p v-if="content">{{ content }}</p>
+                    <div class="carousel-slide-body-buttons">
+                        <SMButton v-if="url" :to="url" :label="cta" />
+                    </div>
                 </div>
             </div>
         </div>
@@ -97,11 +99,17 @@ handleLoad();
         padding: 1rem;
 
         .carousel-slide-content {
+            display: flex;
+            justify-content: center;
+            align-items: center;
             background-color: rgba(0, 0, 0, 0.75);
+            width: auto;
+            height: auto;
             max-width: 800px;
             padding: 2rem 3rem 1.5rem 3rem;
             margin-bottom: 2rem;
             border-radius: 12px;
+            margin-left: 3rem;
         }
 
         h3 {
@@ -136,4 +144,22 @@ handleLoad();
         }
     }
 }
+
+@media (max-width: 768px) {
+    .carousel-slide {
+        .carousel-slide-body {
+            padding: 0;
+
+            .carousel-slide-content {
+                width: 100%;
+                max-width: 100%;
+                height: 100%;
+                margin: 0;
+                padding-left: 5rem;
+                padding-right: 5rem;
+                border-radius: 0;
+            }
+        }
+    }
+}
 </style>