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

Make rounded corners optional photo component

Browse Source
This commit is contained in:
Kuba Orlik 2026-08-10 16:05:41 +02:00
parent 8935bcd362
commit 117d09059e
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/back/jdd-components/photo/photo.css
View File

@ -2,7 +2,9 @@
display: flex; /* to get rid of added whitespace */ display: flex; /* to get rid of added whitespace */
picture { picture {
.image-jdd--rounded & {
border-radius: 10px; border-radius: 10px;
}
img { img {
width: auto; width: auto;

12
src/back/jdd-components/photo/photo.jdd.tsx
View File

@ -12,6 +12,7 @@ const component_arguments = {
image: new ComponentArguments.Image(), image: new ComponentArguments.Image(),
alt: new ComponentArguments.ShortText(), alt: new ComponentArguments.ShortText(),
}), }),
rounded_corners: new ComponentArguments.Boolean(),
} as const; } as const;
export class Photo extends Component<typeof component_arguments> { export class Photo extends Component<typeof component_arguments> {
@ -31,13 +32,20 @@ export class Photo extends Component<typeof component_arguments> {
} }
toHTML({ toHTML({
args: { image }, args: { image, rounded_corners },
classes, classes,
jdd_context: { render_image }, jdd_context: { render_image },
index, index,
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable { }: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
return ( return (
<div class={["image-jdd", ...classes]} style={`--jdd-index: ${index}`}> <div
class={[
"image-jdd",
{ "image-jdd--rounded": rounded_corners },
...classes,
]}
style={`--jdd-index: ${index}`}
>
{render_image(image.image, { {render_image(image.image, {
sizesAttr: "100vw", sizesAttr: "100vw",
alt: image.alt, alt: image.alt,