dd3714f0a1
- Change btn-adjust to grey border with orange text and subtle hover - Add font-family/font-size to .input-field for consistency - Redesign desktop tabs: bordered, orange text, equal width, accent border on active instead of filled background - Redesign mobile tab selector: bordered dropdown with orange text, rounded container, subtle active background
42 lines
2 KiB
HTML
42 lines
2 KiB
HTML
{% import "partials/icons.html" as icons %}
|
|
|
|
<div data-signals:{{ tab_signal }}="'{{ active_type }}'" data-signals:_tabs-open="false">
|
|
<!-- Desktop tabs -->
|
|
<nav class="hidden md:flex gap-1.5" role="tablist">
|
|
{% for tab in tabs %}
|
|
<button
|
|
type="button"
|
|
role="tab"
|
|
class="tab"
|
|
data-class:tab-active="{{ tab_signal_js }} === '{{ tab.key }}'"
|
|
data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'{% if !tab_base_url.is_empty() %}; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}'); @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides: {selector: '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}}){% endif %}"
|
|
>{{ tab.label }}</button>
|
|
{% endfor %}
|
|
</nav>
|
|
<!-- Mobile tab selector -->
|
|
<div class="md:hidden">
|
|
<button
|
|
type="button"
|
|
class="flex w-full items-center justify-between rounded-md border border-accent p-3 text-sm text-accent"
|
|
data-on:click="$_tabsOpen = !$_tabsOpen"
|
|
>
|
|
<span>
|
|
{% for tab in tabs %}
|
|
<span data-show="{{ tab_signal_js }} === '{{ tab.key }}'">{{ tab.label }}</span>
|
|
{% endfor %}
|
|
</span>
|
|
<span data-show="!$_tabsOpen">{{ icons::chevron_down("h-5 w-5") }}</span>
|
|
<span data-show="$_tabsOpen" style="display:none">{{ icons::chevron_up("h-5 w-5") }}</span>
|
|
</button>
|
|
<div class="mt-1 flex flex-col rounded-md border overflow-hidden" data-show="$_tabsOpen" style="display:none">
|
|
{% for tab in tabs %}
|
|
<button
|
|
type="button"
|
|
class="tab-mobile"
|
|
data-class:tab-mobile-active="{{ tab_signal_js }} === '{{ tab.key }}'"
|
|
data-on:click="{{ tab_signal_js }} = '{{ tab.key }}'; $_tabsOpen = false{% if !tab_base_url.is_empty() %}; history.pushState(null, '', '{{ tab_base_url }}{{ tab.key }}'); @get('{{ tab_base_url }}{{ tab.key }}', {responseOverrides: {selector: '{{ tab_fetch_target }}', mode: '{{ tab_fetch_mode }}'}}){% endif %}"
|
|
>{{ tab.label }}</button>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|