From b4b7584c14f507beaa1d6ad6b925506a222305f5 Mon Sep 17 00:00:00 2001
From: jordi fita mas <jordi@tandem.blog>
Date: Wed, 20 Dec 2023 20:11:39 +0100
Subject: [PATCH] =?UTF-8?q?Show=20=E2=80=9Cfull=20slides=20in=20the=20caro?=
 =?UTF-8?q?usels,=203=20slides=20in=20the=20biggest=20breakpoint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Customer does not want the next slide to show partially; either it shows
theo whole slide, or not at all.

Had to remove the min-width for campsite type’s spiel, or it would make
the whole thing fall over, i do not know why; possibly because slick
could not reduce the width to its expected value.
---
 web/static/public.css              | 17 +++--------------
 web/templates/public/layout.gohtml |  8 +++++++-
 2 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/web/static/public.css b/web/static/public.css
index b1e9f9b..14ae7c3 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -454,7 +454,6 @@ dl, .nature div + div, .outside_activities > div {
 
 .carousel .spiel {
     font-size: 2.4rem;
-    padding-right: 4rem;
 }
 
 .carousel .spiel p {
@@ -462,7 +461,7 @@ dl, .nature div + div, .outside_activities > div {
     margin-bottom: 2rem;
 }
 
-.carousel figure, .carousel .slick-track > img {
+.carousel .spiel, .carousel figure, .carousel .slick-track > img {
     margin-right: 5rem;
     position: relative;
 }
@@ -488,12 +487,7 @@ dl, .nature div + div, .outside_activities > div {
 
 .carousel .slick-list {
     order: 1;
-    padding: 0 20% 0 0 !important;
-}
-
-.carousel .slick-track {
-    display: flex;
-    align-items: start;
+    margin-right: -5rem;
 }
 
 .carousel.slick-slider {
@@ -688,11 +682,6 @@ dl, .nature div + div, .outside_activities > div {
     align-items: center;
 }
 
-.campsite_type.carousel .spiel {
-    min-width: calc((100vw - 5rem/* main margin */ - 5rem/* booking gap */) * .40111/* flex: .4 of form */ + 5rem /* booking gap again */);
-    flex-shrink: 0;
-}
-
 .campsite_type.carousel .spiel h3 {
     font-size: calc(1.8rem + 1.7vw);
     font-weight: 700;
@@ -1315,4 +1304,4 @@ dt {
 .services_icon a {
   color: var(--accent);
   text-decoration: var(--accent) wavy underline;
-}
\ No newline at end of file
+}
diff --git a/web/templates/public/layout.gohtml b/web/templates/public/layout.gohtml
index f8ff3e9..0555b3c 100644
--- a/web/templates/public/layout.gohtml
+++ b/web/templates/public/layout.gohtml
@@ -128,13 +128,19 @@
     <script>
         jQuery(function () {
             jQuery('.carousel').slick({
-                slidesToShow: 2,
+                slidesToShow: 3,
                 slidesToScroll: 1,
                 infinite: false,
                 arrows: true,
                 prevArrow: '<button type="button" class="slick-prev">←</button>',
                 nextArrow: '<button type="button" class="slick-next">→</button>',
                 responsive: [
+                    {
+                        breakpoint: 1024,
+                        settings: {
+                            slidesToShow: 2,
+                        }
+                    },
                     {
                         breakpoint: 768,
                         settings: {