darklow / django-suit

Modern theme for Django admin interface

Django Suit

Modern theme for Django admin interface.

Django Suit is alternative theme/skin/extension for Django administration interface.

• Project home: http://djangosuit.com/
• Live demo v1: http://djangosuit.com/admin/
• Live demo v2.0 alpha 1: http://v2.djangosuit.com/admin/

License

• Django Suit is licensed under Creative Commons Attribution-NonCommercial 3.0 license.
• Licence and pricing: http://djangosuit.com/pricing/

Docs & Support

• Documentation v2: http://django-suit.readthedocs.org/en/v2/
• Documentation v1: http://django-suit.readthedocs.org/en/latest/
• Support: http://djangosuit.com/support/
• Follow on Twitter to get latest news

Changelog

Note: Django Suit v2.0 is in active development and not yet ready for production use.

Read more here: Todo: Add issue refernce

Contributing

See Contributing documentation

Build Status

Django Suit uses Travis CI to perform tests on different Django and Python versions.

Tested using Python: 2.7-3.4 and PyPy. Django: 1.9+ and Django Suit v2.0 alpha:

Preview

alt:	Django Suit Preview :target: http://v2.djangosuit.com/admin/

django-suit's Issues

Column sort options look awkward in a narrow column

Not so much a bug but more a suggestion: there should be a more elegant option for the sorting tools in table columns. When you have narrow columns that have sorting, the sorting controls look bad and mess up the table header appearance.

Maybe have a small button that pops out the sorting options in stead of displaying them at all times in the column header??

Support to add multiple inline objects

In vanilla django admin if you add an inline to your ModelAdmin you get in a plus sign to add multiple inlines before saving, in django-suit you have to add one, save and continue editing, add another, save and continue editing and so on.
For those of you who can't see vanilla django admin here is an example of what would be seen.
http://blogs.law.harvard.edu/rprasad/files/2011/08/tabular_inline1.png

Allow model names in custom app menu entries

In the following examples, resolve app.model to /admin/app/model/:

[("Custom parent", 'app.model')]

[("Custom parent", '/some/link/'), [("Child 1", 'app.model')]]

Form tabs - allow organize fieldsets and inlines into tabs

Suggest popular packages you would like to be supported by Django Suit

Please suggest packages you would like to be supported. Also vote for packages that are already suggested, so we know which are most wanted. Thank you.

I deleted comments with apps that have been already implemented. Here is the list of currently supported apps:

• django-cms
• django-filer
• django-mptt
• django-reversion
• django-import-export

Documentation and examples:
http://django-suit.readthedocs.org/en/develop/#supported-apps

Install breaks under certain conditions

The setup script imports VERSION number from the __init__.py package file.

Besides the version number, the __init__.py module also contains a bunch of code that is executed whenever DJANGO_SETTINGS_MODULE environment variable is defined and relies on the project settings being correctly configured.

It is not a safe assumption that a valid settings file and all dependencies will be available during the setup stage, even though the DJANGO_SETTINGS_MODULE variable is defined. While it may seem convenient to retrieve the package version number from the package itself, the setup script will be way more reliable if it simply hardcodes the number and does not rely on the package code import and related dependencies.

Sortable inlines by arrow links

First version of sortable inlines will support only "arrows" for sorting.
Drag and drop support will be added in some future versions.

Long labels at end of fieldset mess up layout

When I add a field with a label that overflows the label area for that field at the end of a fieldset, the layout is slightly messed up: The white area of the label area continues into the field values area.

Today link for date fields is off center

The "Today" link for date fields is slightly off from the center when displayed in an inline (which wraps the control in table tags).

Also, is there a way to suppress the "Today" link as I do not need it very often and it eats a lot of real estate...

Expanded StackedInline looks strange

The collapse/hide button of a StackedInline overlaps with the a label of it:

I am not that much into CSS/design stuff to fix it myself properly :-(

Missing request context variable in templates.

The request template variable is only available if django.core.context_processors.request is in TEMPLATE_CONTEXT_PROCESSORS, which is not the case by default.

If the variable is not available, the left sidebar menu will only have a 'Home' entry and all apps are missing.

This should be mentioned in the documentation.

Width constraint for div named "branding"

There's a hard set width constraint of 200px for the div named "branding" which displays the value of the setting ADMIN_NAME in the banner.

Although this aligns nicely with the width of the column that holds the menu, it's practically not very convenient. With its larger font setting, any value will soon overflow and the overflow will not be visible leaving a crippled view of the branding.

My suggestion would be to remove that 200px constraint, let the content of the div named "branding" flow into the banner freely and move the div that displays current date and time to the right of the banner.

DjangoUnicodeDecodeError

Hi!

I have error at change list: http://pastebin.com/pjbnvqU7 ('ascii' codec can't decode byte 0xd0 in position 0: ordinal not in range(128). You passed in <django.utils.functional.proxy object at 0xa36c34c> (<class 'django.utils.functional.proxy'>))
I had not problem with grappelli.

Dashboard ideas - share & discuss

Please share you ideas on how should we make alternative dashboard for Django Suit (besides original apps list).
What options should be there, how you should define what's in dashboard.
What dashboard widgets/blocks should be there available by default.
Because needs can differ so much.
Thanks.

Help text for read only fields is printed on next line

When you define a field in the admin as read only, its help text is printed on the next line as opposed to next to the field value. For forms with lots of read only fields this will make the form look a bit silly, but more importantly will waste a lot of real estate.

Not sure whether feasible nor aesthetically pleasing, a better solution might be to have help texts float to the right on the same level as the widget/value they belong to.

Remove string from messages

I propose to drop the "Info!" string added to default info messages - or any additional strings to default messages like warnings and errors for that matter.

As the styling provided by Bootstrap is consistently applied throughout Django Suit, this string looks rather unnecessary and not particularly pretty. My users know that a blue styled message indicates an informational signal from the application.

Alternatively replace the string with one of Glyph icons available in Bootstrap which would look much more polished, although I think they're not really necessary.

Admin save_on_top=True breaks change form

Styling rows in admin lists

It would be a great feature to have the possibility to add styles from Bootstrap -or any CSS styles for that matter- to individual rows in an admin list. If you take this one step further one could also add styles to individual fields.

At this moment this is not possible as the list in Django admin is built by a single admin tag that builds the list -basically a HTML table- from the definitions in admin.py.

New menu config

First feedback: AWESOME! This is really great stuff. Works very well! A few minor things:

1. When using 'url': 'app.model', the active menu item is only highlighted on the model list page, not on instance edit form pages.
2. I don't think '/' is a good indicator for a separator. Why not use something explicit, maybe 'SPACER' or '---'?
3. 'url': 'app.model' seems a bit like magic to me: If the model in question is not found, you'll just the get URL /app.model/ as link target. I suggest making things more explicit here too, maybe using 'model': 'myapp.mymodel'.
4. Could you add the possibility to open a menu item in a new window? I understand that this is a very specific use case but maybe you think it's useful.

Another clipping of a focus frame

For drop down boxes the focus ring gets clipped. This happens when I tab from the text area to the drop down. Strangely, when I tab out of the drop down into the next and then back again into the drop down, the focus ring is properly displayed.

ModelAdmin and has_add_permission set to False

If a model has has_add_permission method set to False...

class MyModelAdmin(admin.ModelAdmin):
    def has_add_permission(self, request):
        return False

...making "+Add" not displaying, the table for this model shrinks and becomes uneven in regard to other models. I don't know how to describe it better so I'll just attach an image.

Way to disable icons

Would be cool to be able to disable icons entirely or only for some links:

'MENU_ICONS': None,  # disable icons entirely

'MENU_ICONS': {'auth': None},  # disable for auth

'MENU_ORDER': [("Foo", '/link/', None)]  # no icon for custom link

Allow cross application menu grouping, including custom app groups and links

1. Allow cross application menu grouping
2. Allow custom app groups with custom url
3. Allow custom link with custom url (just a link to any location)
4. Allow same model to be in multiple groups same time
5. Allow set permission codename for custom app/link
6. This feature won't affect breadcrumbs (location bar) it is just for menu organization.

# Suggestion
SUIT_CONFIG = {
    'MENU_ORDER': (
        ('sites', ),
        ('auth', ('user', 'group',
                  {'name': 'Registration', 'url': '/custom_location/'}
        )),
        (('Custom group', '', 'icon-fire'), ('crm.contact', 'auth.user')),
        (('Logout', 'admin:logout', 'icon-remove'),), # or '/admin/logout'
    )
}

Sorting icons and add button overlapping

The add button and the sorting buttons overlap if the last field is being sorted.
depending on wind sizes the field title might also overlap the button.
My suggestion is to fix this is to shorten the breadcrumb area and put the add button next to it

Write tests please

And use travis-ci.org

Don't ignore "wide" class

If a add the 'wide' CSS class to a fieldset, django-suit should behave similar to how Django does: increase the fields' width.

Mapping fieldsets to tabs

Django Suit currently allows you to use Bootstrap tabs however the functionality within Django is limited. It would be a great feature for crowded forms to map (collections of) fieldsets to tabs.

This will probably have impact on form handling in the admin but would give much more flexibility in designing forms and would create a much better user experience.

Bad fieldset headline rendering

Only applies to first fieldset name, other headlines are fine.

Replace Browser Windows and Browser Alerts with Bootstrap dialogs

Replace all browser windows (e.g. the popup browser windows you get when clicking the green + icon ) and browser alerts (e.g. the Abandon Changes alert) with dialogs rendered by Bootstrap. Browser windows and alerts are very previous decade. They look horrible and in my opinion break the clean interface supplied by Bootstrap.

Adding extra buttons to toolbar on change_form.html

I changed change_form.html to include extra buttons and noticed that the bottom button now has an extra separation line which is not visible in the default setup with only two buttons ("History" and "Add ...").

Not too sure whether this is an Django Suit issue, but I could not find any special styling for the last button.

Just a minor issue...

Django-cms support

It would be great to have django-cms support. It's functional in it's current form but has a bunch of styling issues.

Sortable issues

Hi darklow,

Thanks for django-suit! It's a nice admin theme and I appreciate your approach using Bootstrap. I am glad you're working on the Sortable feature, but unfortunately found two issues:

• Using SortableTabularInline for inlines, if the main object does not extend SortableModelAdmin, the following exception occurs while editing an object:

AttributeError:
type object 'ModelForm' has no attribute 'Meta'

in suit/admin.pu r.54:
self.form.Meta.widgets[self.sortable] = SortableListForm.Meta.widgets[

• Using SortableTabularInline with extra inlines (extra > 0), and submitting an object with empty 'extra' inlines:

Form validation error on empty inline objects.

.. probably because the SortableTabularInline sets the sortable field?

Hope you can take a look at this!

Redirect after login.

It would be good if we could define a page to redirect to after login.

As all areas can be accessed via the sidebar the "home" menu item and page almost become redundant (apart from "my actions"). If we could redirect to one of our apps and remove the "home" link it could help clean up the interface.

Select all in list view

Would be useful to be able to select all the checkboxes in a list - even if just for a single page

Sortables: sortable widget is applied even if inline does not extend SortableTabularInline

Another edge case:

Given the following models:

from django.db import models

class House(models.Model):   
    address = models.TextField()

class Floor(models.Model):
    number = models.IntegerField()

class FloorRel(models.Model):
    house = models.ForeignKey(House)
    position = models.IntegerField()
    floor = models.ForeignKey(Floor)

class Room(models.Model):
    CHOICES = (
        (1, 'One'),
        (2, 'Two'),
    )

    house = models.ForeignKey(House)
    position = models.IntegerField()
    name = models.CharField(max_length=100, blank=False)
    beds = models.IntegerField(choices=CHOICES, default=1)

And the following admin:

from django.contrib import admin
from demo.sortables.models import House, Room, Floor, FloorRel

from suit.admin import SortableModelAdmin, SortableTabularInline

class RoomInline(SortableTabularInline):
    sortable = 'position'
    model = Room

class FloorInline(admin.TabularInline):
    model = FloorRel

class HouseAdmin(admin.ModelAdmin):
    inlines = [RoomInline, FloorInline]

admin.site.register(House, HouseAdmin)

If you create / edit an object, you'll find sorting arrows at the FloorInline 'position' field, even though the FloorInline does not extend from SortableTabularInline

Spacer in MENU_ORDER

Allow grouping of the left menu using a special "Spacer" item:

SUIT_CONFIG = {
    ...,
    'MENU_ORDER': [
        [("Entry 1", '/')],
        [("Entry 2", '/')],
        [("Entry 3", '/')],
        SPACER,
        [("Entry 4", '/')],
        [("Entry 5", '/')],
        SPACER,
        [("Entry 6", '/')],
        [("Entry 7", '/')],
     ]
}

django-suit should have its own login page

The Django admin has its own login page, no matter what you define for LOGIN_URL. Whereas django-suit does not seem to have such thing. Thus, if I'm not logged in and visit mysite.com/admin/, I get redirected to the site's frontend login page, which in turn redirects to the site's frontend after-login page (LOGIN_REDIRECT_URL). I have to visit the admin URL a second time to get into the admin.

A couple thoughts on Search in Django Suit

1. The search field in the top location of the menu bar (very handy, I like it) has a different styling from the search field that appears on change_list.html. If possible apply same styling to search field in change_list.html.

2. To improve the end user experience, add a more meaningful placeholder value in the search fields. At the moment it's anybody's guess on what attributes a search is actually performed. I think this is a standard Django short coming as, if I remember correctly, the standard admin doesn't show any placeholder values either.

3. The search field in the top part of the menu could be improved -possibly- with a drop down button that allows the user to choose the search target. The config could be adapted to something like:

'SEARCH_URL': (
  ('/admin/bookings/booking/', ('Search bookings', 'Guest name')),
  ('/admin/properties/property/', ('Search properties', 'Property name'))
  ... more search options...
)

The first entry should be the default setting. First value is the url towards which the search is performed, the second value is the option that appears in drop down and last one is the placeholder value to display in the search field. Upon selection from the drop down, the search field sets its parameters according to the config values.

4. A really cool feature would be to retain a search history, accessible via the same drop down that sets the search target. The history is session bound and disappears when the session dies/ends. Historic searches can be re-applied by simply selecting them from the drop down. Maybe that's pushing the boat a bit too far, but it would be cool...

5. Move the menu search from the menu area into the top banner and just display the magnifying glass icon. Clicking the icon will pop out a small form with the search field much like the Spotlight feature of OS X. The menu bar is a rather cramped area for hosting a meaningful sized search field in my opinion.

If you want separate issues, just comment and I'll split them up.

Date picker has poor visibility

The date picker popup could do with some more prominent visibility. Due to various shades of grey being applied to the widget and the background make it appear somewhat chameleon like.

Using EnclosedInput with dynamic values from model instance

I quite like the EnclosedInput widget in DS. I needed to apply that to a numeric input field which represents monetary amounts (a specific currency). The value of the currency (GBP, USD, EUR etc.) would be determined by the object that is being edited in the form and is not uniform for each model object. Some are administered in EUR, others in GBP etc...

To get this to work, I created the following init on my form:

    def __init__(self, *args, **kwargs):
        currency = None
        if kwargs.has_key("instance"):
            # Instance is the model object being edited by the form. The currency attribute will have a None value when it is a newly entered instances as the currency property has not been set yet.
            model = kwargs["instance"]
            currency = model.currency
        if currency is None:
            # TODO: Replace this with a default currency from application settings; hard coded for now...
            currency = "GBP"
        super(PropertyForm, self).__init__(*args, **kwargs)
        self._meta.widgets["amount"] = EnclosedInput(
            prepend = currency,
            attrs = {
                'style': 'text-align: right;',
                'class': 'input-small',
            }
        )

The above works but with a flaw. Upon initial display of the form, the EnclosedInput is being ignored and a plain input is being rendered. I have to use the browser Reload button, sometimes two times, to get the EnclosedInput rendered correctly with the currency prepend. Remarkable enough, when I set a breakpoint in order to debug this, this does not happen and the EnclosedInput widget is rendered correctly immediately. This makes it difficult to detect where the root of the problem lies.

Any ideas??

Many thanks...

Global widget replacement

Add option to replace widgets globally, i.e. in all admin change forms. For example, I'd like to replace all textareas with auto-sized textareas.

Filter bar clips focus ring

The filter bar clips the top pixels of the drop down lists when they have focus. See attached.

Menu separator not visible in Firefox

Sortables: sortable field is set on empty inlines with only default values

With regard to the sortables feature:

Given the following models:

from django.db import models

class House(models.Model):   
    address = models.TextField()

class Room(models.Model):
    CHOICES = (
        (1, 'One'),
        (2, 'Two'),
    )

    house = models.ForeignKey(House)
    position = models.IntegerField()
    name = models.CharField(max_length=100, blank=False)
    beds = models.IntegerField(choices=CHOICES, default=1)

And the following admin.py:

from django.contrib import admin
from demo.sortables.models import House, Room

from suit.admin import SortableModelAdmin, SortableTabularInline

class RoomInline(SortableTabularInline):
    sortable = 'position'
    model = Room

class HouseAdmin(admin.ModelAdmin):
    inlines = [RoomInline]

admin.site.register(House, HouseAdmin)

When I try to add a house, without any rooms, the admin reports 'This field is required.' for each name field in the room inline which only has the default value for 'beds' provided.

Apparently, these default values do not pass the ":input[value!=''][type!='hidden']" selector, so the sortable field is set, resulting in Django complaining about empty fields.

More consistent presentation of search fields

To improve the end user experience, add a more meaningful placeholder value in the search fields. At the moment it's anybody's guess on what attributes a search is actually performed. I think this is a standard Django short coming as, if I remember correctly, the standard admin doesn't show any placeholder values either.

Change app name feature

Add a config option to rename apps, e.g.

SUIT_CONFIG = {
    ...
    'APP_NAMES': {
        'auth': "Users and Groups",
        'flatpages': "Static sites",
    },
    ...
}

Layout breaks with read only field with null value

On an entry form with a read only field with a null value, the layout breaks. See attached sample with a read only field Phone number with a null value: white area of label breaks into grey coloured data area.

See also issue 29

Python 3 (with django 1.5) support

Seems there is several old syntax usage in django-suit

      File "suit/templatetags/suit_list.py", line 21
        return u'<li class="disabled"><a href="#" onclick="return false;">..' \
                                                                            ^
    SyntaxError: invalid syntax

      File "suit/templatetags/suit_tags.py", line 60
        displayed = u"<a href='%s'>%s</a>" % (admin_url, displayed)
                                         ^
    SyntaxError: invalid syntax

      File "suit/widgets.py", line 28
        u'<div class="input-append suit-date">%s<span '

Title of first fieldset on change form not correctly positioned

The title of the first field set on a change form overlaps the display area of the bread crumb navigation tool.

"inner-right-column" under tinymce iframe

App: django-tinymce
issue occurs with tinymce_models.HTMLField