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; display: flex;
justify-content: center; justify-content: center;
margin: 2rem 0; margin: 2rem 0;
--gap-between-horizontal-images: 14px;
} }
.autoscrolling-images-wrapper { .autoscrolling-images-wrapper {
@ -9,6 +10,18 @@
gap: 24px; 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 { .autoscrolling-images__title-wrapper {
max-width: 940px; max-width: 940px;
display: flex; display: flex;
@ -92,7 +105,7 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-evenly; justify-content: space-evenly;
column-gap: 1rem; gap: var(--gap-between-horizontal-images);
max-width: 940px; max-width: 940px;
} }
@ -104,7 +117,7 @@
.autoscrolling-images__carousel-page--looping-tail { .autoscrolling-images__carousel-page--looping-tail {
position: absolute; position: absolute;
left: 100%; left: calc(100% + var(--gap-between-horizontal-images));
} }
.autoscrolling-images__carousel-page--looping-head { .autoscrolling-images__carousel-page--looping-head {
@ -149,7 +162,7 @@
transform: translateX(0%); transform: translateX(0%);
} }
100% { 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 = { 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"]),
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,
@ -112,7 +113,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { title, imagesPerPage, images, speed, desktop_interval }, args: { title, imagesPerPage, images, speed, desktop_interval, mode },
jdd_context: { render_image }, jdd_context: { render_image },
classes, classes,
index, index,
@ -129,7 +130,11 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
return ( return (
<div <div
class={["autoscrolling-images", ...classes]} class={[
"autoscrolling-images",
`autoscrolling-images--mode-${mode}`,
...classes,
]}
style={`--jdd-index: ${index}`} style={`--jdd-index: ${index}`}
data-controller="autoscrolling-images" data-controller="autoscrolling-images"
data-autoscrolling-images-interval={desktop_interval} data-autoscrolling-images-interval={desktop_interval}