From e5d416f696de199f65baae431e310e1a2fe63b8c Mon Sep 17 00:00:00 2001 From: Pablo Ferreiro 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} + {$title} - ProxiTok 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 @@ {else} -
- {foreach $item->imagePost->images as $image} - {if $isBig} -
- {else} -
- {/if} -
- -
-
- {/foreach} -
+ {/if}