720ebcbad3
Add sticky-submit class to the shared edit_form_actions() macro and pb-16 bottom padding to all seven edit form templates, matching the add form pattern for a consistent mobile experience.
247 lines
8.3 KiB
HTML
247 lines
8.3 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
|
|
{% macro share_button() %}
|
|
<button
|
|
onclick="shareLink(this)"
|
|
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"
|
|
>
|
|
<span class="share-icon">{{ icons::clipboard("h-4 w-4 shrink-0") }}</span>
|
|
<span class="share-icon-check hidden"
|
|
>{{ icons::check("h-4 w-4 shrink-0") }}</span
|
|
>
|
|
<span class="share-label">Share</span>
|
|
</button>
|
|
{% 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) %}
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<h2 class="text-lg font-semibold text-text mb-4">Coffee</h2>
|
|
<dl class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<dt class="text-text-muted">Roast</dt>
|
|
<dd class="font-medium">
|
|
{% if !roast_slug.is_empty() %}
|
|
<a
|
|
href="/roasters/{{ roaster_slug }}/roasts/{{ roast_slug }}"
|
|
class="text-accent hover:text-accent-hover transition"
|
|
>{{ roast_name }}</a
|
|
>
|
|
{% else %}
|
|
<span class="text-text">{{ roast_name }}</span>
|
|
{% endif %}
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Roaster</dt>
|
|
<dd class="font-medium">
|
|
<a
|
|
href="/roasters/{{ roaster_slug }}"
|
|
class="text-accent hover:text-accent-hover transition"
|
|
>{{ roaster_name }}</a
|
|
>
|
|
</dd>
|
|
</div>
|
|
{% if origin != "\u{2014}" %}
|
|
<div>
|
|
<dt class="text-text-muted">Origin</dt>
|
|
<dd class="font-medium text-text">
|
|
<span
|
|
>{% if !origin_flag.is_empty() %}
|
|
<span class="mr-1">{{ origin_flag }}</span>
|
|
{% endif %}{{ origin }}</span
|
|
>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if region != "\u{2014}" %}
|
|
<div>
|
|
<dt class="text-text-muted">Region</dt>
|
|
<dd class="font-medium text-text">{{ region }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if producer != "\u{2014}" %}
|
|
<div>
|
|
<dt class="text-text-muted">Producer</dt>
|
|
<dd class="font-medium text-text">{{ producer }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if process != "\u{2014}" %}
|
|
<div>
|
|
<dt class="text-text-muted">Process</dt>
|
|
<dd class="font-medium text-text">{{ process }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
{% if !tasting_notes.is_empty() %}
|
|
<div class="mt-4 flex flex-wrap gap-1.5">
|
|
{% for note in tasting_notes %}
|
|
<span class="{{ note.pill_class }}">{{ note.label }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro map_with_legend(map_countries, map_max, legends) %}
|
|
{% if !map_countries.is_empty() %}
|
|
<div
|
|
class="relative rounded-lg border bg-surface overflow-hidden flex items-center"
|
|
>
|
|
<world-map
|
|
class="block w-full"
|
|
data-countries="{{ map_countries }}"
|
|
data-max="{{ map_max }}"
|
|
></world-map>
|
|
<div
|
|
class="absolute top-2 right-2 flex flex-col gap-1 text-2xs text-text-muted"
|
|
>
|
|
{% for entry in legends %}
|
|
<span class="inline-flex items-center gap-1">
|
|
<span
|
|
class="inline-block h-2.5 w-2.5 rounded-sm bg-accent {{ entry.opacity }}"
|
|
></span>
|
|
{{ entry.label }}
|
|
</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro edit_button(edit_url) %}
|
|
<a
|
|
href="{{ edit_url }}"
|
|
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-accent transition hover:bg-surface-alt"
|
|
>
|
|
{{ icons::pencil("h-4 w-4") }} Edit
|
|
</a>
|
|
{% endmacro %}
|
|
|
|
{% macro delete_button(entity_label, api_path, id) %}
|
|
<div class="rounded-lg border bg-surface p-5 flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt"
|
|
data-on:click="confirm('Delete this {{ entity_label }}? This cannot be undone.') && @delete('{{ api_path }}/{{ id }}')"
|
|
>
|
|
{{ icons::delete("h-4 w-4") }} Delete
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro edit_form_actions() %}
|
|
<p
|
|
data-show="$_submitError"
|
|
data-text="$_submitError"
|
|
style="display:none"
|
|
class="text-sm text-error"
|
|
role="alert"
|
|
></p>
|
|
<div
|
|
data-show="$_submitting"
|
|
style="display:none"
|
|
class="flex items-center justify-center gap-3 py-2 text-sm text-accent"
|
|
>
|
|
{{ icons::spinner("h-5 w-5") }} Saving…
|
|
</div>
|
|
<div class="sticky-submit flex flex-col gap-2" data-show="!$_submitting">
|
|
<button
|
|
type="submit"
|
|
class="inline-flex w-full items-center justify-center gap-2 rounded-md bg-accent px-4 py-2 text-sm font-semibold text-accent-text transition hover:bg-accent-hover disabled:opacity-50"
|
|
>
|
|
{{ icons::check("h-4 w-4") }} Save Changes
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onclick="history.back()"
|
|
class="inline-flex w-full items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-text-secondary transition hover:bg-surface-alt"
|
|
>
|
|
{{ icons::x_mark("h-4 w-4") }} Cancel
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro edit_delete_buttons(edit_url, entity_label, api_path, id) %}
|
|
<div
|
|
class="rounded-lg border bg-surface p-5 flex flex-col gap-2 sm:flex-row sm:items-center"
|
|
>
|
|
<a
|
|
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"
|
|
>
|
|
{{ icons::pencil("h-4 w-4") }} Edit
|
|
</a>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center gap-2 rounded-md border px-4 py-2 text-sm font-medium text-error transition hover:bg-surface-alt sm:flex-1"
|
|
data-on:click="confirm('Delete this {{ entity_label }}? This cannot be undone.') && @delete('{{ api_path }}/{{ id }}')"
|
|
>
|
|
{{ icons::delete("h-4 w-4") }} Delete
|
|
</button>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{% macro roaster_card(name, country, country_flag, city, homepage, roaster_slug) %}
|
|
<div class="rounded-lg border bg-surface p-5">
|
|
<h2 class="text-lg font-semibold text-text mb-4">Roaster</h2>
|
|
<dl class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
|
|
<div>
|
|
<dt class="text-text-muted">Name</dt>
|
|
<dd class="font-medium">
|
|
<a
|
|
href="/roasters/{{ roaster_slug }}"
|
|
class="text-accent hover:text-accent-hover transition"
|
|
>{{ name }}</a
|
|
>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-text-muted">Country</dt>
|
|
<dd class="font-medium text-text">
|
|
<span
|
|
>{% if !country_flag.is_empty() %}
|
|
<span class="mr-1">{{ country_flag }}</span>
|
|
{% endif %}{{ country }}</span
|
|
>
|
|
</dd>
|
|
</div>
|
|
{% if let Some(c) = city %}
|
|
<div>
|
|
<dt class="text-text-muted">City</dt>
|
|
<dd class="font-medium text-text">{{ c }}</dd>
|
|
</div>
|
|
{% endif %}
|
|
{% if let Some(url) = homepage %}
|
|
<div>
|
|
<dt class="text-text-muted">Website</dt>
|
|
<dd class="font-medium">
|
|
<a
|
|
href="{{ url }}"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
class="text-accent hover:text-accent-hover transition"
|
|
>Visit Website</a
|
|
>
|
|
</dd>
|
|
</div>
|
|
{% endif %}
|
|
</dl>
|
|
</div>
|
|
{% endmacro %}
|