kuba/strona-czynna
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Padding in square scrolling images

Browse Source
This commit is contained in:
Kuba Orlik 2025-03-04 14:29:27 +01:00
parent ff3e3e7bf6
commit ffdd9a8369
2 changed files with 21 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/back/jdd-components/autoscrolling-images/autoscrolling-images.css
View File

@ -17,12 +17,13 @@
.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper, .autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper,
.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper { .autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
img { 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 { .autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
background-color: white; background-color: white;
padding: 16px;
height: unset; height: unset;
width: 160px; width: 160px;
min-width: 0px; min-width: 0px;

23
src/back/jdd-components/autoscrolling-images/autoscrolling-images.jdd.tsx
View File

@ -25,7 +25,11 @@ images.getExampleCount = () => {
const component_arguments = { const component_arguments = {
title: new ComponentArguments.ShortText(), title: new ComponentArguments.ShortText(),
imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]), 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"]), speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]), desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
images, images,
@ -70,10 +74,12 @@ export function renderImagePage({
page, page,
render_image, render_image,
mode = "regular", mode = "regular",
background_mode,
}: { }: {
page: Array<{ image: FilePointer | null; alt: string }>; page: Array<{ image: FilePointer | null; alt: string }>;
render_image: ReturnType<typeof makeJDDContext>["render_image"]; render_image: ReturnType<typeof makeJDDContext>["render_image"];
mode?: "regular" | "looping-tail" | "looping-head"; mode?: "regular" | "looping-tail" | "looping-head";
background_mode: "white" | "white-square" | "transparent";
}): JSX.Element { }): JSX.Element {
return ( return (
<div <div
@ -86,8 +92,10 @@ export function renderImagePage({
<div class="autoscrolling-images__img-wrapper"> <div class="autoscrolling-images__img-wrapper">
{render_image(image.image, { {render_image(image.image, {
container: { container: {
width: 212, ...(background_mode == "white-square"
height: 150, ? { width: 128, height: 128 }
: { width: 212, height: 150 }),
objectFit: "contain", objectFit: "contain",
}, },
alt: image.alt, alt: image.alt,
@ -113,7 +121,14 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { title, imagesPerPage, images, speed, desktop_interval, mode }, args: {
title,
imagesPerPage,
images,
speed,
desktop_interval,
background_mode: mode,
},
jdd_context: { render_image }, jdd_context: { render_image },
classes, classes,
index, index,