Перемещение секции фильтра с правой боковой панели на левую боковую панель на странице списка изменений в Django admin

Question

Я работаю над Django. И в Django admin Я хочу изменить направление секции фильтра в списке изменений с правой боковой панели на левую боковую панель, как показано в pi c:

Файл admin.py:

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin


from .models import CustomUser


class CustomUserAdmin(UserAdmin):

    change_form_template = 'change_form.html'

    add_form_template='add_form.html'

    list_display = ('first_name','last_name','email','is_staff', 'is_active',)
    list_filter = ('first_name','email', 'is_staff', 'is_active',)

    search_fields = ('email','first_name','last_name','a1','a2','city','state','pincode')
    ordering = ('first_name',)

    add_fieldsets = (
        ('Personal Information', {
            # To create a section with name 'Personal Information' with mentioned fields
            'description': "",
            'classes': ('wide',),  # To make char fields and text fields of a specific size
            'fields': (('first_name','last_name'),'email','a1','a2','city','state','pincode','check',
                       'password1', 'password2',)}
        ),
        ('Permissions',{
            'description': "",
            'classes': ('wide', 'collapse'),
            'fields':( 'is_staff', 'is_active','date_joined')}),
    )

Есть ли какой-либо способ, с помощью которого секция фильтра может быть смещена, как я упоминал? ?

Заранее спасибо !!

Answer 1

Хорошо, чтобы сделать это, вам нужно добавить следующую строку в ваш файл admin.py:

change_list_template='change_list_form.html'

Итак, ваш файл admin.py будет выглядеть так:

from django.contrib import admin
from django.contrib.auth.admin import UserAdmin


from .models import CustomUser


class CustomUserAdmin(UserAdmin):

    change_list_template='change_list_form.html'

    change_form_template = 'change_form.html'

    add_form_template='add_form.html'

    list_display = ('first_name','last_name','email','is_staff', 'is_active',)
    list_filter = ('first_name','email', 'is_staff', 'is_active',)

    search_fields = ('email','first_name','last_name','a1','a2','city','state','pincode')
    ordering = ('first_name',)

    add_fieldsets = (
        ('Personal Information', {
            # To create a section with name 'Personal Information' with mentioned fields
            'description': "",
            'classes': ('wide',),  # To make char fields and text fields of a specific size
            'fields': (('first_name','last_name'),'email','a1','a2','city','state','pincode','check',
                       'password1', 'password2',)}
        ),
        ('Permissions',{
            'description': "",
            'classes': ('wide', 'collapse'),
            'fields':( 'is_staff', 'is_active','date_joined')}),
    )

После этого go в папку шаблонов и создайте новый файл html по имени: change_list_form.html

Затем в change_list_form.html добавьте следующий код:

{% extends "admin/change_list.html" %}
{% load i18n admin_urls static admin_list %}

{% block content_title %}<h1>Choose a User to Change or Add a new one</h1>{% endblock %}



<!- 944px -->

{% block filters %}
        {% if cl.has_filters %}
<style>@media only screen and (min-width: 1300px) {
.PG1{position:absolute;left:18%;}}</style>
    <div class="PG1 " style="">
          <div id="changelist-filter" style="" class="">
            <h2 style="font-style:italic">Try Filter </h2>
            {% if cl.preserved_filters %}<h3 id="changelist-filter-clear">
              <a href="?{% if cl.is_popup %}_popup=1{% endif %}">&#10006; {% trans "Clear all filters" %}</a>
            </h3>{% endif %}
            {% for spec in cl.filter_specs %}{% admin_list_filter cl spec %}{% endfor %}
          </div>
    </div>
        {% endif %}

      {% endblock %}



{% block search %}
<style>
@media only screen and (min-width: 1300px) {
.PG2{position:absolute;left:20%;top: 5%;width:1016px;}}</style><div style="" class="PG2">{% search_form cl %}</div>{% endblock %}


<form style="" id="changelist-form" method="post"{% if cl.formset and cl.formset.is_multipart %} enctype="multipart/form-data"{% endif %} novalidate>{% csrf_token %}
    {% if cl.formset %}<div>{{ cl.formset.management_form }}</div>{% endif %}

{% block result_list %}
    <style>
@media only screen and (min-width: 1300px) {
.PG3{position:absolute;left:20%;top:20%;width:1016px;}}</style><div style="" class="PG3">{% if action_form and actions_on_top and cl.show_admin_actions %}{% admin_actions %}{% endif %} <!-There will be diff diff effect if we use the range from h1 to h6 tags and for p tag --><br><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"><a style="color:white;background-color:#999999;border-radius:10px;padding:5px 10px 5px 10px;font-size:12px;">CHANGE OUR USER&emsp;<i class="fa fa-pencil" aria-hidden="true" style=""></i></a><br><br>{% result_list cl %} {% if action_form and actions_on_bottom and cl.show_admin_actions %}{% admin_actions %}{% endif %}</div>{% endblock %}</form>

{% block pagination %}
<style>
@media only screen and (min-width: 1300px) {
.PG4{position:absolute;left:20%;top:70%;width:1016px;}}</style><div style="" class="PG4">{% pagination cl %}</div>{% endblock %}

это будет сделайте так, чтобы страница списка изменений выглядела следующим образом:

Примечание. Я сделал так, чтобы она работала только для определенного c диапазона ширины браузера, но Вы можете поставить больше media запросов, чтобы расширить этот эффект для большого диапазона.

Я надеюсь, что это то, что вы хотите.