From c38400e8a0c8496d2883ad6fd3c84c14ffe5463c Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Thu, 26 Jan 2023 17:41:41 -0500
Subject: [PATCH] Twitter swiper on mobile

---
 src/layouts/index.html                        | 66 ++++++++++++++++++-
 src/layouts/partials/twitter-card-swiper.html |  0
 src/layouts/partials/twitter-grid.html        | 15 +++++
 3 files changed, 80 insertions(+), 1 deletion(-)
 create mode 100644 src/layouts/partials/twitter-card-swiper.html
 create mode 100644 src/layouts/partials/twitter-grid.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index 9a670fe..3375e32 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -820,7 +820,7 @@
         <h2 class="display-3">DON’T JUST TAKE OUR WORD FOR IT… TWITTER’S BEEN SIPPING THE TEA TOO!</h2>
       </div>
     </div>
-    <div class="row">
+    <div class="row twitter-desktop">
       <div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
         {{- partial "twitter-card.html" -}}
         {{- partial "twitter-card.html" -}}
@@ -837,6 +837,19 @@
         {{- partial "twitter-card.html" -}}
       </div>
     </div>
+    <div class="row twitter-mobile">
+      <div class="col">
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+                {{- range .Data.Pages }}
+                    <div class="swiper-slide">
+                        {{- partial "twitter-card.html" . -}}
+                    </div>
+                {{- end }}
+            </div>
+        </div>
+      </div>
+    </div>
   </div>
 </section>
 
@@ -859,6 +872,30 @@
 
 <style>
 
+  @media only screen and (min-width: 576px) {
+
+    .twitter-desktop{
+      visibility: visible;
+    }
+    .twitter-mobile{
+      visibility: hidden;
+      display: none;
+    }
+
+  }
+
+  @media only screen and (max-width: 576px) {
+
+    .twitter-desktop{
+      visibility: hidden;
+      display: none;
+    }
+    .twitter-mobile{
+      visibility: visible;
+    }
+
+  }
+
   .twitter-card{
     border: 2px solid gray;
     border-radius: 10px;
@@ -876,4 +913,31 @@
 
 </style>
 
+
+<section>
+  <div class="container">
+
+  </div>
+</section>
+
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
+
+<script>
+
+  var mySwiper = new Swiper ('.swiper-container', {
+  spaceBetween: 10,
+  freeMode: true,
+  direction: 'horizontal',
+  loop: true,
+  pagination: {
+      el: '.swiper-pagination',
+    },
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+  })
+
+</script>
+
 {{ end }}
diff --git a/src/layouts/partials/twitter-card-swiper.html b/src/layouts/partials/twitter-card-swiper.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/layouts/partials/twitter-grid.html b/src/layouts/partials/twitter-grid.html
new file mode 100644
index 0000000..626854c
--- /dev/null
+++ b/src/layouts/partials/twitter-grid.html
@@ -0,0 +1,15 @@
+<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+</div>
+<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+</div>
+<div class="col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+  {{- partial "twitter-card.html" -}}
+</div>