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

ADd cta to icon-grid

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 21:19:30 +02:00
parent 0489e22f14
commit c7153b0729
2 changed files with 40 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css
View File

@ -27,7 +27,7 @@
background-color: var(--tile-bg-color); background-color: var(--tile-bg-color);
display: grid; display: grid;
grid-template-rows: subgrid; grid-template-rows: subgrid;
grid-row: span 3; grid-row: span 2;
flex-flow: column; flex-flow: column;
gap: 32px; gap: 32px;
min-height: 320px; min-height: 320px;
@ -39,6 +39,15 @@
color: var(--tile-fg-color); color: var(--tile-fg-color);
} }
&:has(.icon),
&:has(.icon-tiles__tile__cta) {
grid-row: span 3;
}
&:has(.icon):has(.icon-tiles__tile__cta) {
grid-row: span 4;
}
svg { svg {
width: 48px; width: 48px;
height: 48px; height: 48px;
@ -55,11 +64,27 @@
.description { .description {
font-size: 18px; font-size: 18px;
} }
.icon-tiles__tile__cta {
display: none;
}
} }
a[href].icon-tiles-grid__tile { a[href].icon-tiles-grid__tile {
.icon-tiles__tile__cta {
text-align: right;
display: block;
font-weight: bold;
opacity: 0;
}
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
.icon-tiles__tile__cta {
text-align: right;
opacity: 1;
}
} }
} }
} }

17
src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx
View File

@ -10,7 +10,10 @@ const component_arguments = {
bleed: new Args.Boolean(), bleed: new Args.Boolean(),
tiles: new Args.List( tiles: new Args.List(
new Args.Structured({ new Args.Structured({
icon: new Args.Enum(async () => ["none", ...(await getAllIconNames())]), icon: new Args.Enum(async () => [
"none",
...(await getAllIconNames()),
]).setExampleValues(["none"]),
color: new Args.Enum(async () => color: new Args.Enum(async () =>
getColorVariables().filter( getColorVariables().filter(
(e) => !e.includes("text") && !e.includes("link") (e) => !e.includes("text") && !e.includes("link")
@ -18,7 +21,8 @@ const component_arguments = {
), ),
name: new Args.ShortText(), name: new Args.ShortText(),
description: new Args.ShortText(), description: new Args.ShortText(),
url: new Args.ShortText(), url: new Args.ShortText().setExampleValues([""]),
cta: new Args.ShortText().setExampleValues([""]),
}) })
), ),
} as const; } as const;
@ -56,7 +60,14 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
"" ""
)} )}
<div class="name">{insert_nbsp(tile.name)}</div> <div class="name">{insert_nbsp(tile.name)}</div>
<div class="description">{insert_nbsp(tile.name)}</div> <div class="description">{insert_nbsp(tile.description)}</div>
{tile.cta ? (
<div class="icon-tiles__tile__cta">
{insert_nbsp(tile.cta)}
</div>
) : (
""
)}
</a> </a>
))} ))}
</section> </section>