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

Add white square option to autoscrolling images

Browse Source
This commit is contained in:
Kuba Orlik 2025-03-04 13:31:00 +01:00
parent 6b22876b8a
commit 5e901567fe
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
display: flex;
justify-content: center;
margin: 2rem 0;
--gap-between-horizontal-images: 14px;
}
.autoscrolling-images-wrapper {
@ -9,6 +10,18 @@
gap: 24px;
}
.autoscrolling-images--mode-white .autoscrolling-images__img-wrapper {
background-color: white;
}
.autoscrolling-images--mode-white-square .autoscrolling-images__img-wrapper {
background-color: white;
height: unset;
width: 160px;
min-width: 0px;
aspect-ratio: 1/1;
}
.autoscrolling-images__title-wrapper {
max-width: 940px;
display: flex;
@ -92,7 +105,7 @@
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
column-gap: 1rem;
gap: var(--gap-between-horizontal-images);
max-width: 940px;
}
@ -104,7 +117,7 @@
.autoscrolling-images__carousel-page--looping-tail {
position: absolute;
left: 100%;
left: calc(100% + var(--gap-between-horizontal-images));
}
.autoscrolling-images__carousel-page--looping-head {
@ -149,7 +162,7 @@
transform: translateX(0%);
}
100% {
transform: translateX(calc(-100%));
transform: translateX(calc(-100% - var(--gap-between-horizontal-images)));
}
}

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

@ -25,6 +25,7 @@ images.getExampleCount = () => {
const component_arguments = {
title: new ComponentArguments.ShortText(),
imagesPerPage: new ComponentArguments.ShortText().setExampleValues(["6"]),
mode: new ComponentArguments.Enum(["transparent", "white", "white-square"]),
speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
images,
@ -112,7 +113,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
}
toHTML({
args: { title, imagesPerPage, images, speed, desktop_interval },
args: { title, imagesPerPage, images, speed, desktop_interval, mode },
jdd_context: { render_image },
classes,
index,
@ -129,7 +130,11 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
return (
<div
class={["autoscrolling-images", ...classes]}
class={[
"autoscrolling-images",
`autoscrolling-images--mode-${mode}`,
...classes,
]}
style={`--jdd-index: ${index}`}
data-controller="autoscrolling-images"
data-autoscrolling-images-interval={desktop_interval}