3

enter image description here I have a model with fields shown in the image. I have created the following ModelAdmin in 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

Issue is that list filter is covering data. I am wondering can i move this list filter to the header as a dropdown.

4

1 回答 1

3

Great question, I think this is probably an underlying issue with Wagtail's ModelAdmin and it might be good to raise an issue. There is a similar issue relating to 'collapsed state' here.

Option 1 - CSS Work around

A quick, css only, work around would be to 'move' the content to the top near the button. You may want to refine to work within different view port breakpoints, plus this would not be the most accessible solution, but it gets you there quickly.

You can add css to the ModelAdmin index listing via index_view_extra_css.

The example approach below makes the assumption that this is the desktop view, and users can 'hover' over the list filter which is moved to the 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;
  }
}

Option 2 - Revise Template

You can go further, modifying the template used (either on a per model or for all index pages basis). See ModelAdmin Overriding Templates docs.

For the underlying index.html template you can see the source of contrib/modeladmin/templates/modeladmin/index.html.

The below example extends the default index template and makes the block filters render nothing. Then, looking at the source, copies the way the filters get rendered and puts them in the block header_extra.

For a bit of a start, the content has been put inside a div with the attribute data-dropdown which will render the inner content inside a dropdown with the first element being the 'trigger' and the second being the options.

Note: this is a rough example and further styling and maybe element attributes will be needed.

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 %}
于 2020-05-23T11:18:50.840 回答