Django Admin Responsivo. Mais um Skin feito com Twitter Bootstrap

Uma tentativa de deixar o Django Admin mais legal ainda

Introdução

Web Design Responsivo, é uma tendência, moda, necessidade. Não importa o que for, se você trabalha com frontend, vai precisar lidar com isso um dia. Até se não vai desenvolver, tenho certeza que em algum momento vai usar um serviço que não oferece uma interface com uma experiência de usuário legal para mobile. Então vai sentir o peso da importância de um layout responsivo.

Para mais informações sobre o assunto leia este artigo, por Sérgio Lopes. Ou se preferir, há muitos outros artigos na web, principalmente em inglês.

Mais Django Admin com cara de Twitter?

Talvez sim. Estou aqui para falar de quando precisei deixar o Django Admin o mínimo responsivo possível, o fiz, e disponibilizei o resultado que teve boa aceitação e creio que seja uma boa continuar mantendo-o e melhorando-o com a ajuda da comunidade.

Para quem quiser contribuir ou acompanhar as atualizações e discussões sobre novas implementações, basta ir ao repositório django-admin-bootstrap do meu github.

Tentei deixar o código dos templates o mais organizado possível e busquei fazer um bom uso das media queries para adaptar o layout conforme o tamanho da tela. Até o momento em que estou publicando este artigo os templates são perfeitamente funcionais com Django 1.4 e já testei com o 1.5 (beta) e me parece estar funcionando tudo tranquilamente.

Como instalar?

A instalação é fácil, suponho que você possua um projeto django já, com alguma(s) app(s) e que você use pip para instalar seus pacotes python, se não, procure usar! :P (saiba mais)

Instale o bootstrap-admin direto do pypi.

>>> pip install bootstrap-admin

Depois adicione bootstrap_admin antes do django.contrib.admin em INSTALLED_APPS. Por exemplo:

INSTALLED_APPS = (
    # ...
    'bootstrap_admin',
    'django.contrib.admin',
    # ...
)

Imagens... eu quero imagens.

Tentei utilizar bem a priorização do conteúdo e funcionalidades conforme a tela diminui. Bem como nas telas grandes as funcionalidades ficam todas visíveis e destacadas. Mas, com certeza, pode ser melhorado ainda.

Dashboard e Changelist

Changeform

Extra: Gerenciador de arquivos e imagens

Eu uso bastante o django-filer para manipular arquivos e imagens. Então personalizei os templates para obter uma melhor experiência de usuário ao utilizá-lo. ( está no github também, confiram o repositório )

Confiram um exemplo:

O wysiwyg editor que aparece nas imagens é uma versão minha do redactor.js, e está no meu github também. O repositório é o django-wysiwyg-redactor.

Update 05/03/2013: Nova versão já disponível no pypi, compatível com django1.5.

blog comments powered by Disqus