在 header 上移动 Wagtail Admin list_filter - 列表过滤器覆盖 table 数据

Question

我有一个模型，其字段如图所示。我在 wagtail_hooks.py.

中创建了以下 ModelAdmin

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

问题是列表过滤器覆盖了数据。我想知道我能否将此列表过滤器作为下拉列表移动到 header。

Answer 1

好问题，我认为这可能是 Wagtail ModelAdmin 的一个潜在问题，提出问题可能是件好事。 'collapsed state' here.

也有类似的问题

选项 1 - CSS 解决方法

一个快速的、仅 css 的解决方法是 'move' 将内容放在按钮附近的顶部。您可能想要优化以在不同的视口断点内工作，而且这不是最容易访问的解决方案，但它可以让您快速到达那里。

您可以通过 index_view_extra_css 将 css 添加到 ModelAdmin 索引列表。

下面的示例方法假设这是桌面视图，用户可以 'hover' 移动到 header 的列表过滤器。

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 Overriding Templates 文档。

对于基础 index.html 模板，您可以查看 contrib/modeladmin/templates/modeladmin/index.html 的来源。

下面的示例扩展了默认索引模板并使块 filters 不呈现任何内容。然后，查看源代码，复制滤镜的渲染方式并将它们放在 header_extra.

块中

一开始，内容被放入 div 属性 data-dropdown 中，这将在下拉列表中呈现内部内容，第一个元素是 'trigger'，第二个是选项。

注意：这是一个粗略的示例，可能需要进一步的样式和元素属性。

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 %}

在 header 上移动 Wagtail Admin list_filter - 列表过滤器覆盖 table 数据

Move Wagtail Admin list_filter on header - List Filter covering table data

python

wagtail

django-admin-filters

wagtail-admin

选项 1 - CSS 解决方法

选项 2 - 修改模板