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

Icon tiles option to always show CTA

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-19 23:35:06 +02:00
parent d08817c729
commit d1da6d7dc7
2 changed files with 16 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,9 +27,9 @@
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 2; grid-row: span 4;
flex-flow: column; flex-flow: column;
gap: 16px; --gap: 16px;
min-height: 320px; min-height: 320px;
max-width: 400px; max-width: 400px;
text-decoration: none; /* in case it's an a href */ text-decoration: none; /* in case it's an a href */
@ -39,13 +39,8 @@
color: var(--tile-fg-color); color: var(--tile-fg-color);
} }
&:has(.icon), & > * + * {
&:has(.icon-tiles__tile__cta) { margin-top: var(--gap);
grid-row: span 3;
}
&:has(.icon):has(.icon-tiles__tile__cta) {
grid-row: span 4;
} }
svg { svg {
@ -80,7 +75,10 @@
&:hover { &:hover {
transform: scale(1.05); transform: scale(1.05);
}
&:hover,
&.icon-tiles-grid__tile--force-cta {
.icon-tiles__tile__cta { .icon-tiles__tile__cta {
text-align: right; text-align: right;
opacity: 1; opacity: 1;

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

@ -23,6 +23,7 @@ const component_arguments = {
description: new Args.ShortText(), description: new Args.ShortText(),
url: new Args.ShortText().setExampleValues([""]), url: new Args.ShortText().setExampleValues([""]),
cta: new Args.ShortText().setExampleValues([""]), cta: new Args.ShortText().setExampleValues([""]),
always_show_cta: new Args.Boolean().setDefaultValue(false),
}) })
), ),
} as const; } as const;
@ -42,6 +43,7 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
class={[ class={[
"icon-tiles-grid", "icon-tiles-grid",
{ "icon-tiles-grid--bleed": bleed }, { "icon-tiles-grid--bleed": bleed },
...classes, ...classes,
]} ]}
> >
@ -50,7 +52,13 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
<section class="icon-tiles-grid__grid"> <section class="icon-tiles-grid__grid">
{tiles.map((tile) => ( {tiles.map((tile) => (
<a <a
class="icon-tiles-grid__tile" class={[
"icon-tiles-grid__tile",
{
"icon-tiles-grid__tile--force-cta":
tile.always_show_cta,
},
]}
style={`--tile-bg-color: var(${tile.color}); --tile-fg-color: var(${getFgColorVariable(tile.color, 4.2)})`} style={`--tile-bg-color: var(${tile.color}); --tile-fg-color: var(${getFgColorVariable(tile.color, 4.2)})`}
href={tile.url ? tile.url : false} href={tile.url ? tile.url : false}
> >