From e5d416f696de199f65baae431e310e1a2fe63b8c Mon Sep 17 00:00:00 2001
From: Pablo Ferreiro <me@pabloferreiro.es>
Date: Sat, 1 Apr 2023 17:09:12 +0200
Subject: [PATCH] pictures using carousel

---
 README.md                                     |  3 +-
 composer.json                                 |  2 +-
 composer.lock                                 |  2 +-
 styles/carousel.css                           | 68 +++++++++++++++++++
 templates/components/head.latte               |  1 +
 .../components/themes/common/content.latte    | 28 ++++----
 6 files changed, 88 insertions(+), 16 deletions(-)
 create mode 100644 styles/carousel.css

diff --git a/README.md b/README.md
index 59a7a95..fad18a7 100644
--- a/README.md
+++ b/README.md
@@ -40,7 +40,8 @@ Apply to: Main window (address bar)
 * Add custom amount of videos per page
 
 ## Credits
-[TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [TheFrenchGhosty](https://thefrenchghosty.me) ([Github](https://github.com/TheFrenchGhosty)): Initial Dockerfile and fixes to a usable state.
+* [Jennifer Wjertzoch](https://wjertzochjennifer.medium.com): Carousel CSS Implementation
 
 ### External libraries
 * [TikScraperPHP](https://github.com/pablouser1/TikScraperPHP)
diff --git a/composer.json b/composer.json
index a7202ac..f646137 100644
--- a/composer.json
+++ b/composer.json
@@ -1,7 +1,7 @@
 {
     "name": "pablouser1/proxitok",
     "description": "An alternative frontend for TikTok",
-    "version": "2.4.8.0",
+    "version": "2.4.8.1",
     "license": "AGPL-3.0-or-later",
     "type": "project",
     "authors": [
diff --git a/composer.lock b/composer.lock
index 9d71631..a10ffef 100644
--- a/composer.lock
+++ b/composer.lock
@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "edc1f7ddb80ad13369e0536c32518ece",
+    "content-hash": "15a71acabddd2588be9800ae1bb37c92",
     "packages": [
         {
             "name": "bramus/router",
diff --git a/styles/carousel.css b/styles/carousel.css
new file mode 100644
index 0000000..d8ceb51
--- /dev/null
+++ b/styles/carousel.css
@@ -0,0 +1,68 @@
+/*
+CREDITS:
+	CSS Taken from: https://levelup.gitconnected.com/how-to-make-a-fully-accessible-css-only-carousel-40e8bd62032b
+	Author: Jennifer Wjertzoch (https://wjertzochjennifer.medium.com)
+	CodePen: https://codepen.io/jwjertzoch/pen/JjyGeRy
+*/
+
+.carousel {
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+}
+
+.slides {
+  width: 100%;
+  display: flex;
+  overflow-x: scroll;
+  scrollbar-width: none;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+}
+
+.slides::-webkit-scrollbar {
+  display: none;
+}
+
+.slides-item {
+	max-height: 75vh;
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  margin: 0 1rem;
+  position: relative;
+  scroll-snap-align: start;
+  transform: scale(1);
+  transform-origin: center center;
+  transition: transform .5s;
+  width: 100%;
+}
+
+.slides-item img {
+	max-height: 75vh;
+}
+
+.carousel__nav {
+  padding: 1.25rem .5rem;
+}
+
+.slider-nav {
+  align-items: center;
+  background-color: #ddd;
+  border-radius: 50%;
+  color: #000;
+  display: inline-flex;
+  height: 1.5rem;
+  justify-content: center;
+  padding: .5rem;
+  position: relative;
+  text-decoration: none;
+  width: 1.5rem;
+}
+
+.slider-nav:hover,
+.slider-nav:active {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/templates/components/head.latte b/templates/components/head.latte
index 46a172c..dca9c55 100644
--- a/templates/components/head.latte
+++ b/templates/components/head.latte
@@ -31,5 +31,6 @@
 	{/if}
 	<link rel="stylesheet" href="{static('css', 'cssgg.min.css', true)}">
 	<link rel="stylesheet" href="{static('css', 'bulma.min.css', true)}">
+	<link rel="stylesheet" href="{static('css', 'carousel.css')}">
 	<title>{$title} - ProxiTok</title>
 </head>
diff --git a/templates/components/themes/common/content.latte b/templates/components/themes/common/content.latte
index fc37f2a..9ef7827 100644
--- a/templates/components/themes/common/content.latte
+++ b/templates/components/themes/common/content.latte
@@ -3,17 +3,19 @@
 	<source src="{url_stream($item->video->playAddr)}" type="video/mp4" />
 </video>
 {else}
-<div n:class="columns, is-centered, is-vcentered, is-multiline, $isBig ? is-mobile">
-	{foreach $item->imagePost->images as $image}
-	{if $isBig}
-	<div class="column is-half">
-	{else}
-	<div class="column is-one-third-tablet is-one-third-desktop is-one-quarter-widescreen is-one-fifth-fullhd">
-	{/if}
-		<figure class="image">
-			<img width="{$image->imageWidth}" height="{$image->imageHeight}" src="{url_stream($image->imageURL->urlList[0])}" />
-		</figure>
-	</div>
-	{/foreach}
-</div>
+<section class="carousel" aria-label="carousel" Tabindex="0">
+  <div class="slides">
+		{foreach $item->imagePost->images as $i => $image}
+		<div class="slides-item" id="image-{$i + 1}" tabindex="0">
+			<img src="{url_stream($image->imageURL->urlList[0])}" />
+		</div>
+		{/foreach}
+  </div>
+  <div class="carousel__nav">
+		{for $i = 0; $i < count($item->imagePost->images); $i++}
+		<a class="slider-nav" href="#image-{$i + 1}">{$i + 1}</a>
+		{/for}
+  </div>
+  <div class="carousel__skip-message" id="skip-link" tabindex="0"></div>
+</section>
 {/if}