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 .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;

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

@ -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,