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

Add heading level configuration to horizontal scroller

Browse Source
This commit is contained in:
Kuba Orlik 2026-01-02 18:06:37 +01:00
parent 5ba6454505
commit 8d80a2fc05
2 changed files with 20 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/back/jdd-components/horizontal-gallery/horizontal-gallery.css
View File

@ -7,10 +7,14 @@
gap: 16px; gap: 16px;
width: 100%; width: 100%;
margin-bottom: 16px; margin-bottom: 16px;
align-items: center;
h2 { h1,
font-size: 32px; h2,
line-height: 48px; h3,
h4,
h5,
h6 {
font-family: var(--font-headings); font-family: var(--font-headings);
text-align: center; text-align: center;
color: var(--color-brand-text-fg); color: var(--color-brand-text-fg);
@ -18,9 +22,8 @@
margin-top: 0; margin-top: 0;
margin-bottom: 0; margin-bottom: 0;
@container (max-width: 600px) { &[data-align="left"] {
font-size: 28px; text-align: left;
line-height: 34px;
} }
} }
@ -46,6 +49,12 @@
} }
} }
&:has([data-align="left"]) {
&::before {
display: none;
}
}
button { button {
border: none; border: none;
background: none; background: none;
@ -74,6 +83,7 @@
max-height: min(75vh, 700px); max-height: min(75vh, 700px);
grid-template-rows: 1fr min-content; grid-template-rows: 1fr min-content;
height: 100%; height: 100%;
min-width: 80px;
} }
&, &,

6
src/back/jdd-components/horizontal-gallery/horizontal-gallery.jdd.tsx
View File

@ -12,6 +12,8 @@ import { PathFilePointer } from "@sealcode/file-manager";
const component_arguments = { const component_arguments = {
title: new ComponentArguments.ShortText(), title: new ComponentArguments.ShortText(),
heading_level: new ComponentArguments.Enum(["h1", "h2", "h3", "h4", "h5", "h6"]),
heading_align: new ComponentArguments.Enum(["left", "center"]),
images: new ComponentArguments.List( images: new ComponentArguments.List(
new ComponentArguments.Structured({ new ComponentArguments.Structured({
image: new ComponentArguments.Image(), image: new ComponentArguments.Image(),
@ -34,7 +36,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { title, images }, args: { title, images, heading_level, heading_align },
classes, classes,
jdd_context: { render_image }, jdd_context: { render_image },
index, index,
@ -72,7 +74,7 @@ export class HorizontalGallery extends Component<typeof component_arguments> {
render: async ({ scroller, markers }) => ( render: async ({ scroller, markers }) => (
<div> <div>
<div class="horizontal-gallery__top-bar"> <div class="horizontal-gallery__top-bar">
<h2>{insert_nbsp(title)}</h2> {`<${heading_level} data-align="${heading_align}">${insert_nbsp(title)}</${heading_level}>`}
<div class="horizontal-gallery__buttons"> <div class="horizontal-gallery__buttons">
<button <button
class="prev-button" class="prev-button"