feat: horizontal choices filter attribute (#1092)

Author: lukasvinclav

docs/filters/horizontal.md

@@ -0,0 +1,32 @@
+---
+title: Horizontal layout filter
+order: 5
+description: Horizontal layout for filter choices in the changelist view.
+---
+
+# Horizontal layout filter
+
+Unfold provides a horizontal layout for filter choices in the changelist view. By default, the layout for filter choices is vertical but by providing the `horizontal` attribute set to `True` to the filter class, the layout will be horizontal.
+
+```python
+# admin.py
+
+from django.contrib import admin
+from django.contrib.auth import get_user_model
+from django.contrib.admin.filters import ChoicesFieldListFilter
+
+from unfold.admin import ModelAdmin
+
+
+User = get_user_model()
+
+class HorizontalChoicesFieldListFilter(ChoicesFieldListFilter):
+    horizontal = True # Enable horizontal layout
+
+
+@admin.register(User)
+class UserAdmin(ModelAdmin):
+    list_filter = (
+        ["other_model_field", HorizontalChoicesFieldListFilter],
+    )
+```

src/unfold/templates/admin/filter.html

@@ -11,7 +11,7 @@ <h3 class="font-semibold mb-2 text-font-important-light dark:text-font-important
         {% endif %}
     {% endfor %}
 
-    {% if spec|class_name == "BooleanFieldListFilter" %}
+    {% if spec|class_name == "BooleanFieldListFilter" or spec.horizontal %}
         <ul class="dark:bg-base-900 border border-base-200 flex min-w-20 rounded shadow-sm text-font-default-light dark:border-base-700 dark:text-font-default-dark w-full">
             {% for choice in choices %}
                 <li class="basis-1/3 border-r border-base-200 flex-grow truncate last:border-r-0 dark:border-base-700 {% if choice.selected %}font-semibold text-primary-600 dark:text-primary-500 {% else %}hover:text-base-700 dark:hover:text-base-200{% endif %}">