Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

feat: improve Cards link behaviour (#153)

Browse Source 
* clickable feature-card when a link is provided

* unclickable card when no link is provided

---------

Co-authored-by: Xin <xin@imfing.com>
This commit is contained in:
LLL 2023-10-27 05:13:24 +07:00 committed by GitHub
parent b5ab4ecdcb
commit ae01ac08b6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
layouts/shortcodes/card.html
View File

@ -49,9 +49,8 @@
<a
class="hextra-card group flex flex-col justify-start overflow-hidden rounded-lg border border-gray-200 text-current no-underline dark:shadow-none hover:shadow-gray-100 dark:hover:shadow-none shadow-gray-100 active:shadow-sm active:shadow-gray-200 transition-all duration-200 {{ $linkClass }}"
href="{{ $href }}"
{{- if $external }}
target="_blank" rel="noreferrer"
{{- if $link -}}
href="{{ $href }}" {{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
{{- end -}}
>
{{- with $image -}}

8
layouts/shortcodes/hextra/feature-card.html
View File

@ -5,9 +5,13 @@
{{- $imageClass := .Get "imageClass" -}}
{{- $style := .Get "style" -}}
{{- $icon := .Get "icon" -}}
{{- $link := .Get "link" -}}
{{- $external := hasPrefix $link "http" -}}
{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
<div
<a
{{ with $link }}href="{{ $href }}" {{ with $external }} target="_blank" rel="noreferrer"{{ end }}{{ end }}
{{ with $style }}style="{{ . | safeCSS }}"{{ end }}
class="{{ $class }} hextra-feature-card relative overflow-hidden rounded-3xl border border-gray-200 hover:border-gray-300 dark:border-neutral-800 dark:hover:border-neutral-700 before:pointer-events-none before:absolute before:inset-0 before:bg-glass-gradient"
>
@ -25,4 +29,4 @@
{{- with $image -}}
<img src="{{ . }}" class="absolute max-w-none {{ $imageClass }}" alt="{{ $title }}" />
{{- end -}}
</div>
</a>