moby/brewlog
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add share button to all detail pages

Browse source 
Copy current URL to clipboard with toast feedback on brew, roast,
roaster, bag, cup, cafe, and gear detail pages.
This commit is contained in:
Jon Seager 2026-02-22 10:17:14 +00:00
parent 7b9cf8147e
commit ee145fffe6
No known key found for this signature in database
2 changed files with 12 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
templates/pages/bag.html
View file

@ -114,6 +114,7 @@
<div <div
class="rounded-lg border bg-surface p-5 md:col-span-2 flex flex-col gap-2 sm:flex-row sm:items-center" class="rounded-lg border bg-surface p-5 md:col-span-2 flex flex-col gap-2 sm:flex-row sm:items-center"
> >
{{ detail::share_button() }}
{% if !bag.closed %} {% if !bag.closed %}
<button <button
type="button" type="button"

35
templates/partials/detail_cards.html
View file

@ -2,34 +2,14 @@
{% macro share_button() %} {% macro share_button() %}
<button <button
onclick="shareLink(this)" type="button"
class="inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium text-text-muted transition hover:bg-surface-alt hover:text-text shrink-0" onclick="navigator.clipboard.writeText(window.location.href).then(() => showToast('Copied to clipboard'))"
class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
> >
<span class="share-icon">{{ icons::clipboard("h-4 w-4 shrink-0") }}</span> {{ icons::clipboard("h-4 w-4") }} Share
<span class="share-icon-check hidden"
>{{ icons::check("h-4 w-4 shrink-0") }}</span
>
<span class="share-label">Share</span>
</button> </button>
{% endmacro %} {% endmacro %}
{% macro share_script() %}
<script>
const shareLink = (btn) => {
navigator.clipboard.writeText(window.location.href).then(() => {
btn.querySelector(".share-icon").classList.add("hidden");
btn.querySelector(".share-icon-check").classList.remove("hidden");
btn.querySelector(".share-label").textContent = "Copied";
setTimeout(() => {
btn.querySelector(".share-icon").classList.remove("hidden");
btn.querySelector(".share-icon-check").classList.add("hidden");
btn.querySelector(".share-label").textContent = "Share";
}, 2000);
});
};
</script>
{% endmacro %}
{% macro coffee_card(roast_name, roaster_name, origin, origin_flag, region, producer, process, tasting_notes, roaster_slug, roast_slug) %} {% macro coffee_card(roast_name, roaster_name, origin, origin_flag, region, producer, process, tasting_notes, roaster_slug, roast_slug) %}
<div class="rounded-lg border bg-surface p-5"> <div class="rounded-lg border bg-surface p-5">
<h2 class="text-lg font-semibold text-text mb-4">Coffee</h2> <h2 class="text-lg font-semibold text-text mb-4">Coffee</h2>
@ -202,6 +182,13 @@
<div <div
class="rounded-lg border bg-surface p-5 flex flex-col gap-2 sm:flex-row sm:items-center" class="rounded-lg border bg-surface p-5 flex flex-col gap-2 sm:flex-row sm:items-center"
> >
<button
type="button"
onclick="navigator.clipboard.writeText(window.location.href).then(() => showToast('Copied to clipboard'))"
class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"
>
{{ icons::clipboard("h-4 w-4") }} Share
</button>
<a <a
href="{{ edit_url }}" href="{{ edit_url }}"
class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1" class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt sm:flex-1"