Skip to content

Commit 541a157

Browse files
lukasvinclavlukasvinclav
authored
feat: sidebar filter (#837)
1 parent 99406bd commit 541a157

File tree

6 files changed

+58
-54
lines changed

6 files changed

+58
-54
lines changed

‎src/unfold/admin.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ class ModelAdmin(ModelAdminMixin, BaseModelAdmin):
233233
add_fieldsets = ()
234234
list_horizontal_scrollbar_top = False
235235
list_filter_submit = False
236+
list_filter_sheet = True
236237
list_fullwidth = False
237238
list_disable_select_all = False
238239
list_before_template = None

‎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/styles.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -291,7 +291,7 @@ h3 span:nth-child(3) {
291291
Autocomplete
292292
*******************************************************/
293293
.select2.select2-container {
294-
@apply bg-white border max-w-2xl relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
294+
@apply bg-white border max-w-2xl !min-h-9.5 relative rounded-md shadow-sm !w-full dark:bg-gray-900 dark:border-gray-700;
295295
}
296296

297297
.errors .select2.select2-container {

‎src/unfold/templates/admin/change_list.html‎

Lines changed: 45 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -62,60 +62,62 @@
6262
{% endif %}
6363

6464
<div class="flex -mx-4 module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
65-
<div class="changelist-form-container flex-grow min-w-0 px-4" x-data="{ filterOpen: false }">
66-
{% block date_hierarchy %}
67-
{% if cl.date_hierarchy %}
68-
{% date_hierarchy cl %}
65+
<div class="changelist-form-container flex flex-row flex-grow gap-4 min-w-0 px-4" x-data="{ filterOpen: false }">
66+
<div class="flex-grow min-w-0">
67+
{% block date_hierarchy %}
68+
{% if cl.date_hierarchy %}
69+
{% date_hierarchy cl %}
70+
{% endif %}
71+
{% endblock %}
72+
73+
{% if cl.model_admin.list_before_template %}
74+
{% include cl.model_admin.list_before_template %}
6975
{% endif %}
70-
{% endblock %}
7176

72-
{% if cl.model_admin.list_before_template %}
73-
{% include cl.model_admin.list_before_template %}
74-
{% endif %}
77+
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
78+
{% csrf_token %}
7579

76-
<form id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>
77-
{% csrf_token %}
80+
{% if cl.formset %}
81+
<div>{{ cl.formset.management_form }}</div>
82+
{% endif %}
7883

79-
{% if cl.formset %}
80-
<div>{{ cl.formset.management_form }}</div>
81-
{% endif %}
84+
{% block result_list %}
85+
{% if actions_on_top %}
86+
{% if cl.search_fields or action_form or cl.has_filters %}
87+
<div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
88+
{% block search %}
89+
{% search_form cl %}
90+
{% endblock %}
8291

83-
{% block result_list %}
84-
{% if actions_on_top %}
85-
{% if cl.search_fields or action_form or cl.has_filters %}
86-
<div class="bg-gray-50 flex flex-col gap-3 mb-4 p-3 rounded-md lg:flex-row dark:bg-gray-800">
87-
{% block search %}
88-
{% search_form cl %}
89-
{% endblock %}
90-
91-
{% if action_form %}
92-
{% admin_actions %}
93-
{% endif %}
94-
95-
{% block filters %}
96-
{% if cl.has_filters %}
97-
<a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
98-
{% trans "Filters" %}
99-
100-
<span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
101-
</a>
92+
{% if action_form %}
93+
{% admin_actions %}
10294
{% endif %}
103-
{% endblock %}
104-
</div>
95+
96+
{% block filters %}
97+
{% if cl.has_filters %}
98+
<a class="{% if cl.has_active_filters %}bg-primary-600 border-primary-600 text-white{% else %}bg-white dark:bg-gray-900 dark:border-gray-700{% endif %} border cursor-pointer flex font-medium group items-center px-3 py-2 rounded-md shadow-sm text-sm lg:ml-auto md:mt-0 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = true" x-on:keydown.escape.window="filterOpen = false">
99+
{% trans "Filters" %}
100+
101+
<span class="material-symbols-outlined md-18 ml-auto -mr-1 pl-4 {% if cl.has_active_filters %}text-white{% else %}text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-400 dark:text-gray-500{% endif %}">filter_list</span>
102+
</a>
103+
{% endif %}
104+
{% endblock %}
105+
</div>
106+
{% endif %}
105107
{% endif %}
106-
{% endif %}
107108

108-
{% unfold_result_list cl %}
109+
{% unfold_result_list cl %}
109110

110-
{% block pagination %}
111-
{% pagination cl %}
111+
{% block pagination %}
112+
{% pagination cl %}
113+
{% endblock %}
112114
{% endblock %}
113-
{% endblock %}
114-
</form>
115+
</form>
115116

116-
{% if cl.model_admin.list_after_template %}
117-
{% include cl.model_admin.list_after_template %}
118-
{% endif %}
117+
{% if cl.model_admin.list_after_template %}
118+
{% include cl.model_admin.list_after_template %}
119+
{% endif %}
120+
</div>
119121

120122
{% if cl.has_filters %}
121123
{% include "unfold/change_list_filter.html" %}

‎src/unfold/templates/unfold/change_list_filter.html‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{% load i18n admin_list %}
22

3-
<div id="changelist-filter" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 flex fixed inset-0 z-50" x-show="filterOpen">
4-
<label for="show-filters" id="changelist-filter-close" class="flex-grow" x-on:click="filterOpen = false"></label>
3+
<div id="changelist-filter" class="backdrop-blur-sm bg-opacity-80 bg-gray-900 flex inset-0 z-50 fixed {% if not cl.model_admin.list_filter_sheet %}2xl:bg-transparent 2xl:relative 2xl:!block 2xl:z-10{% endif %}" x-show="filterOpen">
4+
<label for="show-filters" id="changelist-filter-close" class="flex-grow {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false"></label>
55

6-
<div class="bg-white flex mx-4 my-4 overflow-hidden rounded shadow-sm w-96 dark:bg-gray-800">
6+
<div class="bg-white flex m-4 overflow-hidden rounded shadow-sm w-80 dark:bg-gray-800 {% if not cl.model_admin.list_filter_sheet %} 2xl:border 2xl:sticky 2xl:top-4 2xl:dark:border-gray-800 2xl:bg-transparent 2xl:dark:!bg-transparent 2xl:m-0{% endif %}">
77
<div class="flex-grow h-full overflow-auto relative">
8-
<h3 class="border-b flex font-semibold mb-6 px-6 py-4 text-font-important-light text-sm dark:text-font-important-dark dark:border-gray-700">
8+
<h3 class="border-b flex font-semibold mb-4 px-4 py-4 text-font-important-light text-sm dark:text-font-important-dark dark:border-gray-800">
99
{% trans "Filter" %}
1010

1111
{% if cl.is_facets_optional %}
@@ -30,15 +30,14 @@ <h3 class="border-b flex font-semibold mb-6 px-6 py-4 text-font-important-light
3030
</a>
3131
{% endif %}
3232

33-
<a class="cursor-pointer material-symbols-outlined md-18 ml-auto pl-4 text-gray-400 transition-colors hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400" x-on:click="filterOpen = false">
33+
<a class="cursor-pointer material-symbols-outlined md-18 ml-auto pl-4 text-gray-400 transition-colors hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false">
3434
close
3535
</a>
3636
</h3>
3737

38-
<div class="px-6{% if cl.model_admin.list_filter_submit %} pb-16{% endif %}">
38+
<div class="px-4{% if cl.model_admin.list_filter_submit %} {% endif %}">
3939
{% if cl.model_admin.list_filter_submit %}
4040
<form id="filter-form" method="get">
41-
4241
{% if request.GET.q %}
4342
<input type="hidden" name="q" value="{{ request.GET.q }}">
4443
{% endif %}
@@ -48,13 +47,12 @@ <h3 class="border-b flex font-semibold mb-6 px-6 py-4 text-font-important-light
4847
{% endif %}
4948
{% endif %}
5049

51-
5250
{% for spec in cl.filter_specs %}
5351
{% admin_list_filter cl spec %}
5452
{% endfor %}
5553

5654
{% if cl.model_admin.list_filter_submit %}
57-
<div class="bg-gray-50 border-gray-200 border-t bottom-4 fixed px-6 py-3 right-4 rounded-b w-96 dark:bg-gray-700 dark:border-gray-600">
55+
<div class="bottom-4 absolute left-4 right-4 {% if not cl.model_admin.list_filter_sheet %}2xl:left-0 2xl:right-0 2xl:relative 2xl:mt-8{% endif %}">
5856
<button type="submit" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded-md self-end text-sm text-white w-full">
5957
{% trans "Apply Filters" %}
6058
</button>

‎tailwind.config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ module.exports = {
4040
height: {
4141
9.5: "2.375rem",
4242
},
43+
minHeight: {
44+
9.5: "2.375rem",
45+
},
4346
minWidth: {
4447
sidebar: "18rem",
4548
},

0 commit comments

Comments
 (0)