From c27dfc2e0c81e851f32be8e8fc122725a0cc0eec Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Mon, 16 Sep 2024 14:52:37 +0200
Subject: [PATCH] swiper - disable autoplay, add arrows

---
 assets/css/src/search.css     |  7 ++++++-
 assets/css/src/swiper.css     | 36 ++++++++++++++++++++++++++++-------
 assets/images/icons/close.svg |  4 ++++
 assets/js/swiper.js           |  3 ---
 site/templates/event.php      |  4 ++--
 5 files changed, 41 insertions(+), 13 deletions(-)
 create mode 100644 assets/images/icons/close.svg

diff --git a/assets/css/src/search.css b/assets/css/src/search.css
index 30b20c5..57a35ea 100644
--- a/assets/css/src/search.css
+++ b/assets/css/src/search.css
@@ -6,18 +6,23 @@
 }
 
 .search-form {
+  position: relative;
   width: fit-content;
   margin: auto;
 }
 
 .search-input {
   border-bottom: var(--border);
-  width: 40vw;
+  width: max(16rem, 40vw);
   margin-right: 2rem;
   padding: 0.3rem 0.5rem;
   font-size: var(--font-size-h2);
 }
 
+.search-input::-webkit-search-cancel-button {
+  display: none;
+}
+
 .search-submit {
   width: 2rem;
   height: 2rem;
diff --git a/assets/css/src/swiper.css b/assets/css/src/swiper.css
index 89d33fe..b2bcc80 100644
--- a/assets/css/src/swiper.css
+++ b/assets/css/src/swiper.css
@@ -1,8 +1,10 @@
 #swiper {
+  position: sticky !important;
+  top: 7rem !important;
   /* https://github.com/nolimits4web/swiper/issues/3599 */
   width: 100%;
   max-width: 100%;
-  max-height: 100vh;
+  max-height: 65vh;
   min-height: 0;
   min-width: 0;
 
@@ -11,28 +13,48 @@
   position: relative;
 }
 
+.swiper-slide {
+  display: flex !important;
+  align-items: center;
+}
+
+/* nav buttons */
 .swiper-button {
   width: 50% !important;
   height: 100% !important;
   top: 0 !important;
+  z-index: 3 !important;
+  margin-top: 0 !important;
 }
-.swiper-button:before,
-.swiper-button:after {
+
+.swiper-button-next:after,
+.swiper-button-prev:after {
   content: "" !important;
 }
 
-.swiper-button-next:hover {
-  cursor: url(../../images/icons/arrow-next.svg) 10 20, auto !important;
+.swiper-button-next {
+  justify-content: flex-end !important;
 }
-.swiper-button-prev:hover {
-  cursor: url(../../images/icons/arrow-prev.svg) 10 20, auto !important;
+.swiper-button-prev {
+  justify-content: flex-start !important;
+}
+
+.swiper-button img {
+  width: 2.5rem;
 }
 
 @media screen and (max-width: 800px) {
+  #swiper {
+    position: static !important;
+  }
   #swiper picture {
     height: 100%;
   }
   #swiper picture img {
     object-fit: contain;
   }
+
+  .swiper-button {
+    display: none !important;
+  }
 }
diff --git a/assets/images/icons/close.svg b/assets/images/icons/close.svg
new file mode 100644
index 0000000..3a78fce
--- /dev/null
+++ b/assets/images/icons/close.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+  <path d="M16.3273 9.87689e-07L18 1.67268L1.67287 17.9998L0.000192507 16.3271L16.3273 9.87689e-07Z" fill="black"/>
+  <path d="M16.3271 17.9998L17.9998 16.3271L1.67268 0L0 1.67268L16.3271 17.9998Z" fill="black"/>
+</svg>
\ No newline at end of file
diff --git a/assets/js/swiper.js b/assets/js/swiper.js
index 0a04281..2a8efc5 100644
--- a/assets/js/swiper.js
+++ b/assets/js/swiper.js
@@ -8,8 +8,5 @@ document.addEventListener("DOMContentLoaded", () => {
     },
     keyboard: true,
     loop: true,
-    autoplay: {
-      delay: 2500,
-    },
   });
 });
diff --git a/site/templates/event.php b/site/templates/event.php
index 99a784d..8baedf8 100644
--- a/site/templates/event.php
+++ b/site/templates/event.php
@@ -18,8 +18,8 @@
       <?php endforeach ?>
     </div>
 
-    <div class="swiper-button swiper-button-prev"></div>
-    <div class="swiper-button swiper-button-next"></div>
+    <button class="swiper-button swiper-button-prev" title="image précédente"><img src="<?= url('assets/images/icons/arrow-prev.svg') ?>" alt=""></button>
+    <button class="swiper-button swiper-button-next" title="image suivante"><img src="<?= url('assets/images/icons/arrow-next.svg') ?>" alt=""></button>
   </div>
   <div class="presentation__text">
     <h2 class="h1 presentation__title"><?= $page->title() ?></h2>