An admin "redesign"?

This has been on my mind for a while. The last (only?) admin redesign was over 6 years ago now. Quite a lot has changed in that time, not least of which Django’s dropping support for legacy browsers. The current design is functional, and certainly a step up from the one before that didn’t work on smaller devices, but my opinion is growing that it could use a refresh.

The main problem I have when changing admin CSS is that it’s a bit of a hodgepodge. Most of the layout is using float for aligning, but much of the more recently added code is using flexbox instead. Sometimes I’ll come across a float: left in the CSS or a clear class in the HTML that apparently changes nothing if you remove it – but I’m still cautious of doing it in case it affects some particular edge case.

Another issue is that the admin’s HTML can be hard to read. With this type of alignment you often need extra elements for wrappers and so on, and having a lot of nested, unsemantic tags can be hard to visually navigate.

On the more user facing side, while we’ve made some positive changes for accessibility, the existing colour scheme makes getting a really good contrast very difficult. The font size for regular text is too small already, making anything that needs be visually “dimmed” by making the text smaller or the text dimmer makes that text difficult to read (e.g., recent actions, timezone text for datetime fields). With that said, it’s important to give users a choice here, as having a smaller font size can increase productivity (more stuff fits on a single page).

While I like (and prefer, and use) the recently added dark theme, it does seem a bit on the ugly side, with the colours adapted from the light theme colours rather than thought up from scratch. It doesn’t feel as… I don’t know, comforting as other dark themes I see, it feels a little harsh, somehow. The design as a whole is starting to feel a little dated to me.

I’m interested in knowing if there’s any appetite for this, or is it just me?

What I’m proposing, roughly, is to redesign the admin using CSS Grid, more semantic HTML and better accessibility. It shouldn’t need (m)any JS changes, but probably the majority of the HTML and CSS would be rewritten, which is a lot of work, and moreover something that could quite easily cause bugs, and will be backwards incompatible for anyone extending templates. So it’s ideally something we’d not do too often. But I am wondering if the time is about right.

Edit: I remembered there was an earlier thread on this: Modernizing the look and feel of admin - though it didn’t get much attention, and this is a bit more of a proposal.

1 Like

I still didn’t get used to the new design and you want to change it again? :smiley: Joking aside, I guess a full redesign would be okay – a lot has changed wrt HTML etc. Do you think you would need to touch views? If not I think this app could be written as 3rd party app first and then merged back if people like it.

We do not have a very hard stance on backwards compat for contrib apps, but I think that even if we change templates etc we could move the existing admin templates & css into a 3rd party app that people requiring the old structure could use for a while?

I had this exact thought actually. My feeling is it wouldn’t need to touch the views at all (and I’d hope not as they’re rather scary to look at in places) so it could be done as an app as a proof of concept. I just didn’t want to embark on such a big journey without knowing if anyone wants it.

My only concern really with doing this way is that - not being a fork - it’d be more difficult to integrate changes from Django back into it, but hopefully not a huge problem.

I’m curious, why would that be true?

If you create the css files in the same directory structure in an app, Django would find your versions of the css files instead of the defaults. Wouldn’t that let you incrementally test changes by editing your versions instead of the system-provided versions?
Then you would be able to create a diff between them for subsequent integration.

(Or am I missing something?)

I’d like to see such improvements. The admin is one of Django’s selling points so keeping it up to date helps keep Django relevant. I also agree that the small text is a problem.

I believe Tom also wants to make HTML changes, which would mean templates and potentially form widgets. So a bunch of moving pieces.

1 Like

Now I feel like I’m missing something :smiley:

I actually thought I’d get a reasonable diff out of the templates - my thought at the moment is I’d mostly just be removing unnecessary elements/classes/etc. My concern was more for the CSS as it’d probably be written from scratch or appear as though it has been. But after sleeping on it I don’t think missing upstream CSS changes would matter much for a redesign anyway.

I guess I won’t know until I start doing it though, so I suppose I’ll just make a start and see where my motivation intersects with how how annoying it ends up being :slight_smile:

2 Likes

I’d be happy to see modern templates for the admin for sure. I think you are not the only one who thinks the admin look is dated.

I’ve set up a repo for this: GitHub - knyghty/django-admin-refresh: A refresh for the Django admin in... 2022? I hope?

It should be quite easy to test if you already have a project to try it out with.

Caveat: I’m not a designer, I’ve never designed anything (that looks nice) in my life. I’m mostly just winging it with CSS and iterating.

So far I’ve managed to get the index page mostly styled. One contentious thing I’ve changed here is the header (fixed position) and the sidebar, which slides over the content instead of pushing it smaller. I wanted to experiment with this as I could never find a way to get the current sidebar working well on mobile, because at some point the content just gets squished to the point of not being usable. It’s maybe possible to do something like, at small screen sizes, just get rid of the content, but then we’d need more logic because the sidebar shouldn’t stay open between page loads in this case, which gets a little weird in the (admittedly unlikely) case where you change screen sizes between reload (resizing browser or rotating device, perhaps).

So I would like some feedback in particular on this, because it is a major departure from the current design, and I’m neither happy nor unhappy with it as it has both benefits and drawbacks. In particular, without the sidebar on every page it becomes impossible to use the index page for anything other than navigation.

I don’t have a huge amount of spare time at the moment, but I hope to put in a few hours a week. Even so I think that will make for slow progress, so any PRs, ideas, feedback, bug reports, etc. are all welcome, either here, or ideally in the repo.

Here’s a quick list of some of the nicer, less contentious changes so far:

  • Uses the OS system fonts for a comfortable, accessible feel
  • Uses default browser sizes so the user has some initial choice
  • (almost) everything in ems and rems.
  • More CSS variables
  • Flexbox and grid rather than floats and clearfixes
  • I’m trying to fix the inconsistent indentation in the templates since I’m going to be changing all of them
  • Some accessibility enhancements
  • Other things I probably forgot