-
Notifications
You must be signed in to change notification settings - Fork 213
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: sheet filter sticky buttons (#1003)
- Loading branch information
1 parent
37b52ac
commit 02d36b1
Showing
3 changed files
with
39 additions
and
37 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
28 changes: 11 additions & 17 deletions
28
src/unfold/templates/unfold/helpers/change_list_filter.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,31 +1,25 @@ | ||
| {% load i18n admin_list unfold %} | ||
|
|
||
| <div id="changelist-filter" class="backdrop-blur-sm bg-opacity-80 bg-base-900 flex inset-0 z-50 fixed {% if not cl.model_admin.list_filter_sheet %}2xl:pb-24 2xl:bg-transparent 2xl:relative 2xl:!block 2xl:z-10{% endif %}" hx-preserve x-show="filterOpen"> | ||
| <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> | ||
| <div id="changelist-filter-close" class="flex-grow {% if not cl.model_admin.list_filter_sheet %}2xl:hidden{% endif %}" x-on:click="filterOpen = false"></div> | ||
|
|
||
| <div class="bg-white flex m-4 overflow-hidden rounded shadow-sm w-80 dark:bg-base-800 {% if not cl.model_admin.list_filter_sheet %} 2xl:overflow-visible 2xl:border-0 2xl:shadow-none 2xl:sticky 2xl:top-4 2xl:dark:border-base-800 2xl:bg-transparent 2xl:dark:!bg-transparent 2xl:m-0{% endif %}"> | ||
| <div class="flex-grow h-full overflow-auto relative {% if not cl.model_admin.list_filter_sheet %} 2xl:overflow-visible{% endif %}"> | ||
| <div class="px-3 py-2.5 {% if not cl.model_admin.list_filter_sheet %}2xl:px-0{% endif %}"> | ||
| {% if cl.model_admin.list_filter_submit %} | ||
| <form id="filter-form" method="get"> | ||
| {% preserve_filters %} | ||
| {% endif %} | ||
| <{% if cl.model_admin.list_filter_submit %}form id="filter-form" method="get"{% else %}div{% endif %} class="flex flex-col h-full {% if not cl.model_admin.list_filter_sheet %}2xl:px-0{% endif %}"> | ||
| {% if cl.model_admin.list_filter_submit %} | ||
| {% preserve_filters %} | ||
| {% endif %} | ||
|
|
||
| <div class="flex flex-col gap-4 *:mb-0"> | ||
| <div class="flex flex-col grow gap-4 overflow-auto *:mb-0" {% if cl.model_admin.list_filter_sheet %}data-simplebar data-simplebar-direction='rtl'{% endif %}> | ||
| <div class="flex flex-col gap-4 {% if cl.model_admin.list_filter_sheet %}px-3 py-2.5{% endif %} *:mb-0"> | ||
| {% for spec in cl.filter_specs %} | ||
| {% admin_list_filter cl spec %} | ||
| {% endfor %} | ||
| </div> | ||
|
|
||
| {% if cl.model_admin.list_filter_submit %} | ||
| <button type="submit" class="bg-primary-600 block border border-transparent font-medium mt-6 px-3 py-2 rounded text-white w-full"> | ||
| {% trans "Apply Filters" %} | ||
| </button> | ||
| </form> | ||
| {% endif %} | ||
|
|
||
| {% include "unfold/helpers/change_list_filter_actions.html" %} | ||
| </div> | ||
| </div> | ||
|
|
||
| {% include "unfold/helpers/change_list_filter_actions.html" %} | ||
| </{% if cl.model_admin.list_filter_submit %}form{% else %}div{% endif %}> | ||
| </div> | ||
| </div> | ||
| </div> |
46 changes: 27 additions & 19 deletions
46
src/unfold/templates/unfold/helpers/change_list_filter_actions.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,23 +1,31 @@ | ||
| {% load i18n %} | ||
|
|
||
| {% if cl.is_facets_optional or cl.has_active_filters %} | ||
| <span id="changelist-filter-extra-actions" class="flex flex-row gap-2 items-center mt-2"> | ||
| {% if cl.is_facets_optional %} | ||
| {% if cl.add_facets %} | ||
| <a href="{{ cl.remove_facet_link }}" class="hidelink border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Hide counts" %} | ||
| </a> | ||
| {% else %} | ||
| <a href="{{ cl.add_facet_link }}" class="viewlink border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Show counts" %} | ||
| </a> | ||
| <div class="{% if cl.model_admin.list_filter_sheet %}bg-white border-t border-base-200 p-3 py-2.5 dark:bg-base-800 dark:border-base-700{% else %}mt-6{% endif %}"> | ||
| {% if cl.model_admin.list_filter_submit %} | ||
| <button type="submit" class="bg-primary-600 block border border-transparent font-medium px-3 py-2 rounded text-white w-full"> | ||
| {% trans "Apply Filters" %} | ||
| </button> | ||
| {% endif %} | ||
|
|
||
| {% if cl.is_facets_optional or cl.has_active_filters %} | ||
| <span id="changelist-filter-extra-actions" class="flex flex-row gap-2 items-center mt-2"> | ||
| {% if cl.is_facets_optional %} | ||
| {% if cl.add_facets %} | ||
| <a href="{{ cl.remove_facet_link }}" class="hidelink border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Hide counts" %} | ||
| </a> | ||
| {% else %} | ||
| <a href="{{ cl.add_facet_link }}" class="viewlink border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Show counts" %} | ||
| </a> | ||
| {% endif %} | ||
| {% endif %} | ||
| {% endif %} | ||
|
|
||
| {% if cl.has_active_filters %} | ||
| <a href="{{ cl.clear_all_filters_qs }}" class="border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Clear all filters" %} | ||
| </a> | ||
| {% endif %} | ||
| </span> | ||
| {% endif %} | ||
| {% if cl.has_active_filters %} | ||
| <a href="{{ cl.clear_all_filters_qs }}" class="border flex-grow font-medium px-3 py-2 rounded text-center transition-all w-full hover:bg-base-50 lg:w-auto dark:border-base-700 dark:hover:text-base-200"> | ||
| {% trans "Clear all filters" %} | ||
| </a> | ||
| {% endif %} | ||
| </span> | ||
| {% endif %} | ||
| </div> |