Login

Unobtrusvie Foldable Admin Interface

Author:
whiteinge
Posted:
January 24, 2008
Language:
JavaScript
Version:
Not specified
Score:
3 (after 3 ratings)

Inspired by snippet 550, this allows you to expand or collapse apps in the main Admin screen. Requires jQuery. If jquery.cookie.js is available it will remember which apps you have expanded.

Recommended usage:

Place the JavaScript in a file called admin-expand.js.

Create templates/admin/base_site.html in your templates directory (which is also a good place to brand your Admin).

Put the following code near the top, and you're done (adjusting file paths as needed).

{% extends "admin/base.html" %}
{% block extrahead %}
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="admin-expand.js"></script>
{% endblock %}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
/* Selectively expands and collapses installed Django apps in the main Django
 * Admin page. If jquery.cookie.js [1] is available, it will remember which apps you
 * have expanded.
 *
 * .. [1] http://dev.jquery.com/browser/trunk/plugins/cookie/jquery.cookie.js
 */

$(document).ready(function() {
    var cookie_name = "admin_expanded";
    var delim = "|";
    var admin_expanded = [];
    var base_selector = $("body.dashboard #content-main .module caption");

    // if the cookie plugin is available
    if ($.isFunction($.cookie)) {
        // put any expanded modules in the expanded list
        $.each(($.cookie(cookie_name) || "").split(delim), function(index, obj) {
            if (obj) { admin_expanded.push(base_selector.filter("caption:contains('"+obj+"')")[0]); }
        });
    }

    // minor usability fix
    base_selector.css("width", "100%").css("cursor", "pointer");

    // collapse all modules that aren't remembered in the cookie
    base_selector.not(admin_expanded).siblings('tbody').hide();

    // toggle on click
    base_selector.click(function(){
        $(this).siblings('tbody').animate({opacity: 'toggle'}, "slow", null, function(){
            // if the cookie plugin is available
            if ($.isFunction($.cookie)) {
                // set or remove this module in the cookie
                t = $(this).siblings('caption').text();
                j = ($.cookie(cookie_name) || "").split(delim);
                if (j.indexOf(t) != -1) {
                    j.splice(j.indexOf(t), 1);
                } else {
                    j.push(t);
                }
                $.cookie(cookie_name, j.join("|"));
            }
        });
    });
});

More like this

  1. Django Collapsed Stacked Inlines by applecat 1 year, 9 months ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 10 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 6 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 7 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 11 years, 11 months ago

Comments

realmac (on February 7, 2008):

If you're already loading the regular admin media, the latest jQuery will already be there. This doesn't quite work as expected in IE but it's passable.

#

ssavelan (on February 26, 2009):

Only works in FF for me, the width of the clickable area is too short in IE/chrome and then when you do click the little sliver to expand the appheader becomes to wide. I wonder if there is a way to fix. js is mostly a mystery to me. This is one of my favorite snippets yet though. Just wish that I make it compatible with the lesser browsers.

#

Please login first before commenting.