drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-25 18:56:49 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(card): add tagIcon and tagBorder options (#791)

Browse Source
This commit is contained in:
Ludovic Fernandez
2025-08-25 17:49:06 +02:00
committed by GitHub
parent c149af0f74
commit 22f81e2470
5 changed files with 32 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
assets/css/compiled/main.css
View File

File diff suppressed because one or more lines are too long

8
assets/css/components/cards.css
View File

@@ -10,11 +10,11 @@
user-select: none;
}
.hextra-card:hover svg {
.hextra-card:hover .hextra-card-icon svg {
color: currentColor;
}
.hextra-card svg {
.hextra-card .hextra-card-icon svg {
width: 1.5rem;
color: #00000033;
transition: color 0.3s ease;
@@ -25,11 +25,11 @@
position: relative;
}
.dark .hextra-card svg {
.dark .hextra-card .hextra-card-icon svg {
color: #ffffff66;
}
.dark .hextra-card:hover svg {
.dark .hextra-card:hover .hextra-card-icon svg {
color: currentColor;
}

31
exampleSite/content/docs/guide/shortcodes/cards.md
View File

@@ -37,14 +37,12 @@ linkTitle: Cards
## Card Parameters
| Parameter | Description |
|------------|---------------------------------------------------------------------------------------|
| `link` | URL (internal or external). |
| `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
| `tag` | Text in tag. |
| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| Parameter | Description |
|-------------|----------------------------------------------------------------------------------------|
| `link` | URL (internal or external). |
| `title` | Title heading for the card. |
| `subtitle` | Subtitle heading (supports Markdown). |
| `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
## Image Card
@@ -72,12 +70,20 @@ For more on Hugo's built in image processing commands, methods, and options see
Card supports adding tags which could be useful to show extra status information.
| Parameter | Description |
|-------------|----------------------------------------------------------------------------------------|
| `tag` | Text in tag. |
| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| `tagIcon` | Icon of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
| `tagBorder` | Border of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
{{< cards >}}
{{< card link="../callout" title="Card with default tag" tag="tag text" >}}
{{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
{{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
{{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" >}}
{{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" >}}
{{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false >}}
{{< card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" >}}
{{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false >}}
{{< /cards >}}
```
@@ -85,8 +91,9 @@ Card supports adding tags which could be useful to show extra status information
{{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
{{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" */>}}
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Internet Image" tag="tag text" tagColor="red" */>}}
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false */>}}
{{</* card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" */>}}
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false */>}}
{{</* /cards */>}}
```

5
layouts/_partials/shortcodes/card.html
View File

@@ -8,6 +8,8 @@
{{- $imageStyle := .imageStyle -}}
{{- $tag := .tag -}}
{{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{- $tagBorder := not (eq .tagBorder false) | default true }}
{{- $tagIcon := .tagIcon -}}
{{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
{{- with $image -}}
@@ -57,7 +59,8 @@
"content" $tag
"color" $tagColor
"class" "hextra-card-tag"
"border" true
"border" $tagBorder
"icon" $tagIcon
)
-}}
{{- end -}}

4
layouts/_shortcodes/card.html
View File

@@ -25,6 +25,8 @@ A shortcode to create a card.
{{- $imageStyle := .Get "imageStyle" -}}
{{- $tag := .Get "tag" -}}
{{- $tagColor := .Get "tagColor" | default (.Get "tagType") | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
{{- $tagBorder := not (eq (.Get "tagBorder") false) | default true }}
{{- $tagIcon := .Get "tagIcon" | default "" -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
@@ -61,5 +63,7 @@ A shortcode to create a card.
"imageStyle" $imageStyle
"tag" $tag
"tagType" $tagColor
"tagBorder" $tagBorder
"tagIcon" $tagIcon
)
-}}