Code

Opened 5 years ago

Closed 9 months ago

#11195 closed New feature (fixed)

add fieldname to admin changelist <td> tags -- eases CSS customization

Reported by: akaihola Owned by: nobody
Component: contrib.admin Version: master
Severity: Normal Keywords: css
Cc: chris@… Triage Stage: Accepted
Has patch: yes Needs documentation: yes
Needs tests: no Patch needs improvement: no
Easy pickings: no UI/UX: yes

Description

The Itch

Currently it's fairly difficult to customize the layout of individual columns in the admin change list view. The <td> and <th> tags are created programmatically, not using templates, and the existing set of id= and class= attributes for cells and their contents don't help in writing simple CSS selectors.

A way to scratch

The attached patch adds a "fieldname_*" class name for each cell of the change list table. This enables simple CSS selectors to match columns by field name.

Use case

A simple example of what this makes possible: Suppose that in order to maximize the width of a text field we want to split a date field into two rows. The "Today | <calendar symbol>" part should be rendered below the date TextInput, not next to it to the right as usual.

A model:

class Poll(models.Model):
    title = models.CharField(max_length=100)
    question = models.CharField(max_length=200)
    pub_date = models.DateField('date published')

The admin definition makes our fields editable in the change list:

class PollAdmin(admin.ModelAdmin):
    list_display = 'title', 'question', 'pub_date',
    list_editable = 'question', 'pub_date',

An "admin/my_app/poll/change_list.html" template for injecting CSS into the change list:

{% extends "admin/change_list.html" %}
{% block extrastyle %}
  {{ block.super }}
  <link rel="stylesheet" type="text/css" href="/css/poll_admin_changelist.css" />
{% endblock extrastyle %}

Custom CSS rules in "MEDIA_ROOT/css/poll_admin_changelist.css":

#changelist td.fieldname_question input { width: 50em; }
#changelist td.fieldname_pub_date span { display: block; }

Without the presented patch this is impossible using only clean and simple CSS definitions since the "fieldname_question" and "fieldname_pub_date" classes are missing.

Cons

A drawback is that the size of the HTML source for a change list page grows by (19 + field name length) bytes for every field, or (11 + field name length) bytes for date/time fields.

Other ways to scratch this itch

For brevity, the class name could be formed from a short prefix and the field index (e.g. "f1", "f2" etc., basically the column number). However, this would break the CSS every time the set of fields is changed.

Another possible approach would be to modify the {% result_list %} inclusion tag (or, more specifically, the django.contrib.admin.templatetags.admin_list.items_for_result() function) to render each cell using an overridable template.

Or, {% result_list %} could replace the "results" list of strings in its context with a list of dicts containing enough information about each field. Cells would be rendered in the "admin/change_list_results.html" template based on those dicts. Customizability would come with the expense of part of the complexity moving from the template tag to the template.

Attachments (8)

11195_admin-changelist-cell-class-fieldname.1.diff (3.5 KB) - added by akaihola 5 years ago.
patch: initial implementation and tests
11195_admin-changelist-cell-class-fieldname.r15458.diff (3.4 KB) - added by akaihola 3 years ago.
Patch and tests updated for Django r15458 (between 1.3b1 and 1.3)
11195.1.diff (5.3 KB) - added by ramiro 3 years ago.
akaihola's patch updated to current trunk status. Changed CSS class name prefix to 'fldname-'
change-list-classes.patch (3.2 KB) - added by vdboor 3 years ago.
Patch that does what I've suggested. Add default classes to the columns, allow setting list_column_classes for the rest.
11195_change_list_thead_classes.patch (1.8 KB) - added by vdboor 3 years ago.
Update change_list, to have a CSS class in the thead. Allows setting column widths.
11195_modeladmin_change_list_classes.patch (4.3 KB) - added by vdboor 3 years ago.
Add a change_list_classes dictionary to the ModelAdmin class.
11195.changelist-cells-css-classes.diff (7.7 KB) - added by julien 3 years ago.
11195.changelist-cells-css-classes.2.diff (7.8 KB) - added by julien 3 years ago.

Download all attachments as: .zip

Change History (20)

Changed 5 years ago by akaihola

patch: initial implementation and tests

comment:1 Changed 5 years ago by SmileyChris

  • Needs documentation unset
  • Needs tests unset
  • Patch needs improvement unset
  • Triage Stage changed from Unreviewed to Design decision needed

Changed 3 years ago by akaihola

Patch and tests updated for Django r15458 (between 1.3b1 and 1.3)

comment:2 follow-up: Changed 3 years ago by julien

#14291 is a dupe.

comment:3 in reply to: ↑ 2 ; follow-up: Changed 3 years ago by akaihola

Replying to julien:

#14291 is a dupe.

vjimw seems to have a patch there as well. We should take a look at it and see if he has found a more elegant solution or thought of corner cases I might have missed.

Changed 3 years ago by ramiro

akaihola's patch updated to current trunk status. Changed CSS class name prefix to 'fldname-'

comment:4 in reply to: ↑ 3 Changed 3 years ago by ramiro

  • Needs documentation set
  • Triage Stage changed from Design decision needed to Accepted

Replying to akaihola:

vjimw seems to have a patch there as well. We should take a look at it and see if he has found a more elegant solution or thought of corner cases I might have missed.

vjimw's patch had no extra functionality compared to yours. Only difference is the class name

I've updated the patch with:

  • Avoid touching the class of the select chebox cell, it is still 'action-checkbox' instead of being renamed to fieldname_action_checkbox'.
  • Changed class name reparator from '_' '-' to be consisten with other CSS class names used in the same view.
  • Shortened the class name prefix from 'fieldname' to 'fldname'. Not completely happy with it, maybe we can use vjimw's approach?
Version 0, edited 3 years ago by ramiro (next)

comment:5 Changed 3 years ago by SmileyChris

  • Severity set to Normal
  • Type set to New feature

comment:6 Changed 3 years ago by vdboor

  • Easy pickings unset

Suggestion.

  • Allows the developers to define a list_column_classes attribute on a ModelAdmin, in case they need to specify a class.
    • Only when it's really needed, the class has to be added.
  • Define a default class in the thead. This allows changing column widths.
    • People can adjust the column widths easily, without having many extra classes in the HTML.
Last edited 3 years ago by vdboor (previous) (diff)

Changed 3 years ago by vdboor

Patch that does what I've suggested. Add default classes to the columns, allow setting list_column_classes for the rest.

Changed 3 years ago by vdboor

Update change_list, to have a CSS class in the thead. Allows setting column widths.

Changed 3 years ago by vdboor

Add a change_list_classes dictionary to the ModelAdmin class.

Changed 3 years ago by julien

comment:7 Changed 3 years ago by julien

@vdboor, list_column_classes sounds interesting but it's probably over-engineering it a bit.

Ideally I would have liked to just have the field name as a CSS class, as it would have been cleaner and also consistent with the DIV.form-row in the change form. But there might have been a clash in the unlikely, yet possible, event where a model had a field called "nowrap". We can't really change the "nowrap" class as it's been documented for a very long time (http://docs.djangoproject.com/en/dev/obsolete/admin-css/?from=olddocs#font-styles-and-alignment).

So, I have updated Ramiro's patch and instead I've appended "-cell" to the field name. It feels a little more semantic and cleaner that way. Also more consistent with the admin-checkbox-column class in the table header.

comment:8 Changed 3 years ago by julien

  • UI/UX set

comment:9 Changed 3 years ago by julien

On a second thought, using a prefix ("cell-xxxx") instead of a suffix ("xxxx-cell") would feel better and seem like better practice. So personally I'd be fine with a prefix even if it wouldn't be consistent with "admin-checkbox-column".

See also #16371 for a related issue.

Changed 3 years ago by julien

comment:10 Changed 3 years ago by julien

The latest patch re-uses one of the earlier suggested ideas, i.e. using a "field-" prefix, as this is more semantic. "cell-" was in fact more about presentation, which is best to avoid.

comment:11 Changed 21 months ago by acdha

  • Cc chris@… added

comment:12 Changed 9 months ago by Julien Phalip <jphalip@…>

  • Resolution set to fixed
  • Status changed from new to closed

In 4e0ff351466fc2d74cc8d1d40ea78da2b3859d0d:

Fixed #11195 -- Added CSS classes to the changelist cells to allow style customizations. Thanks to akaihola, Ramiro Morales and vdboor for their work on the patch.

Add Comment

Modify Ticket

Change Properties
<Author field>
Action
as closed
as The resolution will be set. Next status will be 'closed'
The resolution will be deleted. Next status will be 'new'
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.