Переместить Wagtail Admin list_filter в заголовок - Фильтр списка охватывает данные таблицы

Question

У меня есть модель с полями, показанными на картинке. Я создал следующий ModelAdmin в wagtail_hooks.py.

class opportunitiesAdmin(ModelAdmin):
    model = opportunities
    menu_label='Opportunities'
    menu_icon='fa-briefcase'
    list_display = ['reference_no','stage','opportunity_name','expected_value','probability','BDM','sector_code','service_code','source_code','date_entered','close_date']
    list_filter = ('stage',)
    menu_order=435

Проблема в том, что фильтр списка покрывает данные. Мне интересно, могу ли я переместить этот фильтр списка в заголовок в виде раскрывающегося списка.

Answer 1

Отличный вопрос, я думаю, что это, вероятно, основная проблема с трясогузкой. ModelAdminи было бы неплохо поднять вопрос. Существует аналогичный вопрос, связанный с "свернутым состоянием" здесь.

Вариант 1. Обход CSS

Быстрая, только css, работа - это "переместить" контент вверх рядом с кнопкой. Возможно, вы захотите усовершенствовать работу с разными точками останова порта просмотра, к тому же это не будет самым доступным решением, но оно быстро приведет вас к нему.

Вы можете добавить css в ModelAdmin листинг индекса через index_view_extra_css.

В приведенном ниже примере подхода предполагается, что это вид рабочего стола, и пользователи могут "навести курсор" на фильтр списка, который перемещается в заголовок.

wagtail_hooks.py

class opportunitiesAdmin(ModelAdmin):
    model = opportunities
    #...
    index_view_extra_css = ('css/modeladmin-index.css',)

static/css/modeladmin-index.css

@media screen and (min-width: 50em) {
  .changelist-filter {
    position: fixed;
    top: 0;
    right: 15rem;
    z-index: 1;
    background: white;
    transform: translateY(-100vh);
  }

  .changelist-filter h2 {
    margin-top: 1rem;
    transform: translateY(100vh);
  }

  .changelist-filter:hover {
    transform: none;
  }

  .changelist-filter:hover h2 {
    margin-top: 0;
    transform: none;
  }
}

Вариант 2 - Изменить шаблон

Вы можете пойти дальше, изменив используемый шаблон (либо для каждой модели, либо для всех страниц индекса). Видеть ModelAdmin Документы по переопределению шаблонов.

Для основного index.html шаблон, вы можете увидеть источник contrib/modeladmin/templates/modeladmin/index.html.

В приведенном ниже примере расширяется шаблон индекса по умолчанию и блок filtersничего не отображать. Затем, глядя на источник, копирует способ рендеринга фильтров и помещает их в блокheader_extra.

Для начала, контент был помещен в div с атрибутом data-dropdown который будет отображать внутреннее содержимое внутри раскрывающегося списка, где первый элемент является триггером, а второй - параметрами.

Примечание: это грубый пример, и, возможно, потребуются дальнейшие стили и атрибуты элементов.

templates/modeladmin/index.html

{% extends 'modeladmin/index.html' %}
{% load i18n modeladmin_tags %}

{% block header_extra %}

  {% if view.has_filters and all_count %}
    <div {{ self.attrs }} class="c-dropdown" data-dropdown>
      <a href="javascript:void(0)" class="c-dropdown__button u-btn-current">
        <strong>{% trans 'Filter' %}</strong>
        <div data-dropdown-toggle="" class="o-icon c-dropdown__toggle [ icon icon-arrow-down ]"></div>
      </a>
      <div class="c-dropdown__menu u-toggle u-arrow u-arrow--tl u-background">
        {% for spec in view.filter_specs %}{% admin_list_filter view spec %}{% endfor %}
      </div>
    </div>
  {% endif %}

  {{ block.super }}
{% endblock %}

{% block filters %}
  {% comment %} make content blank {% endcomment %}
{% endblock %}