From ffdd9a8369697cecb6d0709aecdd117676e7d78c Mon Sep 17 00:00:00 2001
From: Kuba Orlik <kontakt@kuba-orlik.name>
Date: Tue, 4 Mar 2025 14:29:27 +0100
Subject: [PATCH] Padding in square scrolling images

---
 .../autoscrolling-images.css                  |  3 ++-
 .../autoscrolling-images.jdd.tsx              | 23 +++++++++++++++----
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
index 27fb308..d31c1ca 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
@@ -17,12 +17,13 @@
 .autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper,
 .autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
 	img {
-		background: white; // to get rid of weird artifacts on FF
+		background: white; /* to get rid of weird artifacts on FF */
 	}
 }
 
 .autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
 	background-color: white;
+	padding: 16px;
 	height: unset;
 	width: 160px;
 	min-width: 0px;
diff --git a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
index 779784e..56df916 100644
--- a/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
+++ b/src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
@@ -25,7 +25,11 @@ images.getExampleCount = () => {
 const component_arguments = {
 	title: new ComponentArguments.ShortText(),
 	imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]),
-	mode: new ComponentArguments.Enum(["transparent", "white", "white-square"]),
+	background_mode: new ComponentArguments.Enum([
+		"transparent",
+		"white",
+		"white-square",
+	]),
 	speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
 	desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
 	images,
@@ -70,10 +74,12 @@ export function renderImagePage({
 	page,
 	render_image,
 	mode = "regular",
+	background_mode,
 }: {
 	page: Array<{ image: FilePointer | null; alt: string }>;
 	render_image: ReturnType<typeof makeJDDContext>["render_image"];
 	mode?: "regular" | "looping-tail" | "looping-head";
+	background_mode: "white" | "white-square" | "transparent";
 }): JSX.Element {
 	return (
 		<div
@@ -86,8 +92,10 @@ export function renderImagePage({
 				<div class="autoscrolling-images__img-wrapper">
 					{render_image(image.image, {
 						container: {
-							width: 212,
-							height: 150,
+							...(background_mode == "white-square"
+								? { width: 128, height: 128 }
+								: { width: 212, height: 150 }),
+
 							objectFit: "contain",
 						},
 						alt: image.alt,
@@ -113,7 +121,14 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
 	}
 
 	toHTML({
-		args: { title, imagesPerPage, images, speed, desktop_interval, mode },
+		args: {
+			title,
+			imagesPerPage,
+			images,
+			speed,
+			desktop_interval,
+			background_mode: mode,
+		},
 		jdd_context: { render_image },
 		classes,
 		index,