TFC/tfcconnection
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add floating-button shortcode

Browse source 
This shortcode adds a floating button styled like other buttons in
this theme and allows you to move to the appropriate place on the page
or another link.
This commit is contained in:
Chris Cochrun 2023-03-21 17:20:35 -05:00
parent eae2232537
commit be049e4536
2 changed files with 68 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

15
layouts/shortcodes/floating-button.html
View file

@ -2,13 +2,20 @@
{{ $text := .Get "text" -}}
{{ $link := .Get "link" -}}
<a href="{{ $link }}" class="bg-primary-600 w-40 h-12 hover:bg-primary-900 shadow-md hover:shadow-xl hover:!rounded-full text-neutral-300 rounded-full fixed bottom-4 inset-x-1/2 text-center">
<i class="hover:rounded-full">{{ $text }}</i>
<script>
function floatButton() {
document.getElementById("floatbutt").hidden = true;
window.location.href = '{{ $link }}';
}
</script>
<button class="!rounded-md bg-primary-600 px-4 py-2 !text-neutral !no-underline hover:!bg-primary-500 dark:bg-primary-800 dark:hover:!bg-primary-700 fixed bottom-4 right-8" type="button" name="floatbutt" onclick="floatButton()" id="floatbutt">
<i>{{ $text }}</i>
{{ if $icon }}
<span class="relative inline-block align-sub icon">
<span class="relative inline-block align-sub icon flex-auto">
{{ $icon.Content | safeHTML }}
</span>
{{ else }}
{{ errorf `[BLOWFISH] Shortcode "icon" error in "%s": Resource "%s" not found. Check the path is correct or remove the shortcode.` .Page.Path (printf "icons/%s.svg" ($.Get 0)) }}
{{ end }}
</a>
</button>