mirrors/wagtail
mirrors/wagtail
0
0
Fork 0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00
Code Issues Releases Wiki Activity

Improve styles of slim header's search and filters for better vertical alignment

Browse Source
This commit is contained in:
Sage Abdullah 2023-12-14 16:27:03 +00:00 committed by Thibaud Colas
parent 71f826575a
commit 4407c5b5b0
3 changed files with 32 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/scss/components/_filters.scss
View File

@ -23,3 +23,18 @@
grid-row: 1;
}
}
.w-filter-button {
width: theme('spacing.10');
height: theme('spacing.10');
padding: 0;
border: 1px solid theme('borderColor.border-field-default');
border-radius: theme('borderRadius.sm');
color: theme('colors.text-link-default');
background-color: theme('backgroundColor.surface-header');
.icon {
width: theme('fontSize.16');
height: theme('fontSize.16');
}
}

14
client/scss/components/_header.scss
View File

@ -167,3 +167,17 @@
}
}
}
.w-slim-header {
&__search-form {
@apply w-mx-2;
.w-field__wrapper {
@apply w-mb-0;
}
.w-field__input {
@apply w-mt-0;
}
}
}

6
wagtail/admin/templates/wagtailadmin/shared/headers/slim_header.html
View File

@ -60,7 +60,7 @@
<form
action="{{ search_url }}"
method="get"
class="w-mx-2"
class="w-slim-header__search-form"
novalidate
role="search"
data-controller="w-swap"
@ -69,7 +69,7 @@
data-w-swap-target-value="#listing-results"
>
{% for field in search_form %}
{% formattedfield field=field classname="w-mb-0 -w-mt-2.5" sr_only_label=True icon="search" %}
{% formattedfield field=field sr_only_label=True icon="search" %}
{% endfor %}
{% comment %}
Add an initial disabled & hidden submit button so that
@ -84,7 +84,7 @@
{% block filters %}
{% if filters %}
{% fragment as filters_icon %}{% icon name="sliders" title=_("Show filters") %}{% endfragment %}
{% dialog_toggle classname="button button-secondary button--icon" dialog_id="filters-dialog" text=filters_icon %}
{% dialog_toggle classname="w-filter-button" dialog_id="filters-dialog" text=filters_icon %}
{% dialog theme="floating" id="filters-dialog" title=_("Filters") %}
{% include "wagtailadmin/shared/filters.html" %}