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

Add endless scroll to desktop view

Browse Source 
Summary: Ref T2954

Reviewers: #testers, kuba-orlik

Reviewed By: #testers, kuba-orlik

Subscribers: kuba-orlik, jenkins-user

Maniphest Tasks: T2954

Differential Revision: https://hub.sealcode.org/D1659
This commit is contained in:
Mateusz Jarczyński 2025-12-12 14:51:08 +01:00
parent 5f2ffb9793
commit 2ac4834b34
2 changed files with 76 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -175,13 +175,7 @@
}
}
@container (width < 1115px) {
.autoscrolling-images__arrow-carousel-container {
right: 0;
}
}
@container (width < 800px) {
.autoscrolling-images.endless {
.autoscrolling-images__arrow-carousel-container {
display: none;
}
@ -220,4 +214,68 @@
.autoscrolling-images__carousel-page--looping-tail {
display: flex;
}
@container (width > 800px) {
.autoscrolling-images__carousel-page {
display: grid !important;
grid-template-rows: repeat(2, auto);
grid-auto-flow: column;
gap: 16px;
}
.autoscrolling-images__img-wrapper:last-child:nth-child(odd) {
grid-row: 1 / span 2; /* take both rows */
align-self: center;
justify-self: center;
}
}
}
.autoscrolling-images:not(.endless) {
@container (width < 1115px) {
.autoscrolling-images__arrow-carousel-container {
right: 0;
}
}
@container (width < 800px) {
.autoscrolling-images__arrow-carousel-container {
display: none;
}
.autoscrolling-images__dots-container {
display: none;
}
.autoscrolling-images__carousel {
max-width: none;
width: max-content;
animation-name: autoscrolling-images-infinite-scroll;
animation-duration: var(--animation-length);
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.autoscrolling-images__carousel-container {
margin: 0;
max-width: calc(100cqw - 20px);
}
.autoscrolling-images__carousel-page {
display: flex;
flex: none !important;
margin: 0;
flex-wrap: nowrap !important;
max-width: none;
}
.autoscrolling-images__img-wrapper {
min-width: 288px;
}
.autoscrolling-images__carousel-page--looping-head,
.autoscrolling-images__carousel-page--looping-tail {
display: flex;
}
}
}

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

@ -32,6 +32,7 @@ const component_arguments = {
]),
speed: new ComponentArguments.ShortText().setExampleValues(["5"]),
desktop_interval: new ComponentArguments.ShortText().setExampleValues(["5"]),
endless: new ComponentArguments.Enum(["true", "false"]),
images,
} as const;
@ -121,7 +122,15 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
}
toHTML({
args: { title, imagesPerPage, images, speed, desktop_interval, background_mode },
args: {
title,
imagesPerPage,
images,
speed,
desktop_interval,
background_mode,
endless,
},
jdd_context: { render_image },
classes,
index,
@ -141,6 +150,7 @@ export class AutoscrollingImages extends Component<typeof component_arguments> {
class={[
"autoscrolling-images",
`autoscrolling-images--mode-${background_mode}`,
endless == "true" ? "endless" : "",
...classes,
]}
style={`--jdd-index: ${index}`}