Login

Unobtrusvie Foldable Admin Interface

Author:
whiteinge
Posted:
January 24, 2008
Language:
JavaScript
Version:
Not specified
Tags:
admin jquery
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. Add special field lookups to the Admin list_filter display by whiteinge 7 years, 3 months ago
  2. A dict template tag by Batiste 7 years ago
  3. Add extra form elements in your contib admin by sergejdergatsjev 6 years, 5 months ago
  4. admin: edit related object shortcut by christian 7 years, 7 months ago
  5. YUI Loader as Django middleware by akaihola 7 years 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.