Django Admin - Front-End Improvements

[elky]

Hi guys,

I noticed that django admin front-end code needs optimization and a bit fresh look.

I’m front-end developer and here is list of improvements I would like to add:

• HTML/CSS code optimization:

• Replace some images with native CSS3 rules where possible (rounded corners, gradients, shadows) providing fallbacks.

• Refactoring: clean messy code, replace tables with divs where it semantically needs.

• Make django admin mobile friendly (responsive design).

• Use Font Awesome Icons (MIT license) for all icons inside admin area.

• Icon fonts allow to easily change size and style of the icon. This is big advantage in terms of hdpi screens (like Retina) and easy admin theme customization.

• Comparing with small images approach font icons allow to optimize server requests (currently django admin doesn’t have even image sprites for icons).

• Color themes.

Main goals are:

• Keep the same UI - users are used to see this admin as it is. So no any Grapelli-like interface.

• Add some UX improvements like optimize some components for touch devices (increase some components to make them reachable for tap action).

• Optimize code to look it modern in 2014.

I would like to discuss my suggestions with community. If you guys vote for this changes I can personally work on this django admin update.

Thank you

Alex D.

[Tim Graham]

Hi Alex,

I believe most of these changes would be welcome, and I'd be happy to review your work in this area.

There has already been at least a start on using some CSS3 elements:
* Rounded corners: https://github.com/django/django/commit/fb052b528ad5f0a92f7420ab8ade16462b6435fd

There is already an accepted ticket for using an icon font: https://code.djangoproject.com/ticket/20597

Consider starting there or with some other change on the smaller side to get some momentum before tackling bigger issues.

You might find some other ideas among the complete list of accepted tickets for the admin: https://code.djangoproject.com/query?status=assigned&status=new&component=contrib.admin&stage=Accepted

Please expand your proposal here or in individual tickets for each issue to develop a consensus before you start work on a particular item.

Thanks and looking forward to your contributions,
Tim

[Collin Anderson]

I'm not a designer, but I agree the admin could use some tweaks to keep up with the times. (flat design, more mobile friendly, etc). Here are my personal thoughts, in general:




- I like small, gradual changes, changing one thing at a time. Like Tim said, separate tickets.

- If possible, try to avoid changing the html too much, because a lot of people rely on the html structure for js and css.