Skip to content

Commit dae00fd

Browse files
lukasvinclavlukasvinclav
authored
feat: redesigned tab navigation (#1481)
1 parent 4c2cdba commit dae00fd

File tree

4 files changed

+36
-37
lines changed

4 files changed

+36
-37
lines changed

‎src/unfold/static/unfold/css/styles.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/unfold/templates/unfold/components/navigation.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{% if items %}
2-
<nav class="bg-base-100 flex gap-2 p-1 rounded-default text-sm dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
2+
<nav class="bg-base-100 flex gap-1 p-1 rounded-default dark:bg-white/[.04]{% if class %} {{ class }}{% endif %}">
33
{% for item in items %}
4-
<a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-1 rounded-default {% if item.active %} bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark{% else %}text-font-subtle-light dark:text-font-subtle-dark hover:bg-base-700/[.04] dark:hover:bg-white/[.04]{% endif %}">
4+
<a href="{{ item.link }}" class="flex flex-row font-medium items-center px-2.5 py-[5px] rounded-default transition-colors {% if item.active %} bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark{% else %}hover:bg-base-700/[.04] dark:hover:bg-white/[.04]{% endif %}">
55
{% if item.icon %}
66
<span class="material-symbols-outlined{% if item.title %} mr-2{% endif %}">{{ item.icon }}</span>
77
{% endif %}

‎src/unfold/templates/unfold/helpers/tab_items.html‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,46 @@
11
{% load i18n %}
22

33
{% if inlines_list or tabs_list %}
4-
<ul class="border border-base-200 rounded-default flex flex-col max-md:w-full md:flex-row md:border-b-0 md:border-t-0 md:border-l-0 md:border-r-0 dark:border-base-800">
4+
<nav class="bg-base-100 flex flex-col font-medium gap-1 p-1 rounded-default w-full dark:border-base-700 md:flex-row md:w-auto dark:bg-white/[.04]">
55
{% for item in tabs_list %}
66
{% if item.has_permission %}
7-
<li class="border-b border-base-200 last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
8-
<a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}{% if item.inline %}#{{ item.inline|slugify }}{% endif %}"
9-
class="block px-3 py-2 md:py-4 md:px-0 dark:border-base-800 {% if item.active and not item.inline %} border-b font-semibold -mb-px text-primary-600 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-500 md:border-primary-500 dark:md:border-primary-600!{% else %}font-medium hover:text-primary-600 dark:hover:text-primary-500{% endif %}"
10-
{% if item.inline %}
11-
x-on:click="activeTab = '{{ item.inline|slugify }}'"
12-
x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ item.inline|slugify }}'}"
13-
{% endif %}
14-
>
15-
{{ item.title }}
16-
</a>
17-
</li>
7+
<a href="{% if item.link_callback %}{{ item.link_callback }}{% else %}{{ item.link }}{% endif %}{% if item.inline %}#{{ item.inline|slugify }}{% endif %}"
8+
class="flex flex-row font-medium items-center px-2.5 py-[5px] rounded-default transition-colors
9+
{% if item.active and not item.inline %}
10+
bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark
11+
{% else %}
12+
hover:bg-base-700/[.04] dark:hover:bg-white/[.04]
13+
{% endif %}"
14+
{% if item.inline %}
15+
x-on:click="activeTab = '{{ item.inline|slugify }}'"
16+
x-bind:class="{'bg-base-100 text-primary-600 hover:text-primary-500 dark:text-primary-500 dark:bg-white/[.06]': activeTab == '{{ item.inline|slugify }}'}"
17+
{% endif %}
18+
>
19+
{{ item.title }}
20+
</a>
1821
{% endif %}
1922
{% endfor %}
2023

2124
{% if inlines_list %}
22-
<li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
23-
<a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
24-
href="#general"
25-
x-on:click="activeTab = 'general'"
26-
x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == 'general', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != 'general'}">
27-
{% trans "General" %}
28-
</a>
29-
</li>
25+
<a class="flex flex-row items-center px-2.5 py-[5px] rounded-default transition-colors"
26+
href="#general"
27+
x-on:click="activeTab = 'general'"
28+
x-bind:class="{'bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark': activeTab == 'general', 'hover:bg-base-700/[.04] dark:hover:bg-white/[.04]': activeTab != 'general'}">
29+
{% trans "General" %}
30+
</a>
3031

3132
{% for inline in inlines_list %}
32-
<li class="border-b last:border-b-0 md:border-b-0 md:mr-8 dark:border-base-800">
33-
<a class="block cursor-pointer font-medium px-3 py-2 md:py-4 md:px-0"
34-
href="#{{ inline.formset.prefix|slugify }}"
35-
x-on:click="activeTab = '{{ inline.formset.prefix|slugify }}'"
36-
x-bind:class="{'border-b border-base-200 dark:border-base-800 md:border-primary-500 dark:md:border-primary-600! font-semibold -mb-px text-primary-600 dark:text-primary-500': activeTab == '{{ inline.formset.prefix|slugify }}', 'hover:text-primary-600 dark:hover:text-primary-500 dark:border-base-800': activeTab != '{{ inline.formset.prefix|slugify }}'}">
37-
{% if inline.formset.max_num == 1 %}
38-
{{ inline.opts.verbose_name|capfirst }}
39-
{% else %}
40-
{{ inline.opts.verbose_name_plural|capfirst }}
41-
{% endif %}
42-
</a>
43-
</li>
33+
<a class="flex flex-row items-center px-2.5 py-[5px] rounded-default transition-colors"
34+
href="#{{ inline.formset.prefix|slugify }}"
35+
x-on:click="activeTab = '{{ inline.formset.prefix|slugify }}'"
36+
x-bind:class="{'bg-white shadow-xs text-font-important-light hover:bg-white dark:bg-base-900 dark:hover:bg-base-900 dark:text-font-important-dark': activeTab == '{{ inline.formset.prefix|slugify }}', 'hover:bg-base-700/[.04] dark:hover:bg-white/[.04]': activeTab != '{{ inline.formset.prefix|slugify }}'}">
37+
{% if inline.formset.max_num == 1 %}
38+
{{ inline.opts.verbose_name|capfirst }}
39+
{% else %}
40+
{{ inline.opts.verbose_name_plural|capfirst }}
41+
{% endif %}
42+
</a>
4443
{% endfor %}
4544
{% endif %}
46-
</ul>
45+
</nav>
4746
{% endif %}

‎src/unfold/templates/unfold/helpers/tab_list.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
{% if not is_popup %}
44
{% if tabs_list or inlines_list or actions_list or actions_detail or actions_items or nav_global %}
5-
<div class="border-base-200 flex items-start flex-col mb-4 min-h-13 md:border-b dark:md:border-base-800 md:border-l-0 md:flex-row md:items-center">
5+
<div class="flex items-start flex-col mb-4 md:flex-row md:items-center">
66
{% include "unfold/helpers/tab_items.html" %}
77

88
{% include "unfold/helpers/tab_actions.html" %}

0 commit comments

Comments
 (0)