项目作者: lukasvinclav

项目描述 :
Clean & minimal theme for Django admin with support for custom sidebar and already prepared dashboard components.
高级语言: CSS
项目地址: git://github.com/lukasvinclav/django-nucleus.git
创建时间: 2019-02-23T08:03:17Z
项目社区:https://github.com/lukasvinclav/django-nucleus

开源协议:MIT License

下载


Screenshot
Screenshot

django-nucleus



Django Nucleus is Django admin theme extending default admin CSS styles.

Getting started

  1. Installation
  1. pip install django-nucleus

or if you are using pipenv

  1. pipenv install django-nucleus
  1. Add nucleus into INSTALLED_APPS in your settings file before django.contrib.admin.

  2. Update context_processors by adding new context processor nucleus.context_processors.nucleus

Nucleus settings

  1. _ = lambda s: s # Translations in setting file
  2. NUCLEUS = {
  3. 'sidebar': {
  4. # Title
  5. 'title': _('Custom title'),
  6. # Footer
  7. 'footer': {
  8. 'title': _('Custom title'),
  9. 'description': _('Longer text displayed below the title'),
  10. },
  11. # Navigation
  12. 'navigation': {
  13. # Application
  14. 'auth': {
  15. 'title': _('Accounts'), # Override title
  16. 'icon': 'img/custom-icon.svg' # Optional
  17. },
  18. # Model
  19. 'auth.User': {
  20. 'title': _('Users'),
  21. 'icon': 'img/custom-icon.svg' # Optional
  22. }
  23. }
  24. }
  25. }

Custom dashboard page

apps.py

  1. from django.contrib.admin.apps import AdminConfig
  2. class AppAdminConfig(AdminConfig):
  3. default_site = 'app.admin.AppAdmin'

admin.py

  1. from django.contrib.admin import AdminSite
  2. class AppAdmin(AdminSite):
  3. def index(self, request, extra_context=None):
  4. # Update extra_context with new variables
  5. return super().index(request, extra_context)

settings.py

  1. INSTALLED_APPS = [
  2. 'app.apps.AppAdminConfig',
  3. # 'django.contrib.admin',
  4. ]

templates/admin/index.html

  1. {% extends "admin/base_site.html" %}
  2. {% load i18n static %}
  3. {% block bodyclass %}{{ block.super }} dashboard{% endblock %}
  4. {% block breadcrumbs %}{% endblock %}
  5. {% block content %}
  6. {% endblock %}

Components

Heading

  1. return render_to_string('nucleus/components/heading.html', {
  2. 'title': 'Title,
  3. 'subtitle': 'Subtitle,
  4. 'image': 'img/image.png', # Optional image
  5. 'rounded': True, # Rounded corners, optional
  6. 'initials': 'LV', # Optional text of the image is not available
  7. 'background_color': 'red' # Optional background color
  8. })

Stat item

  1. return render_to_string('nucleus/components/stat_item.html', {
  2. value: '5269',
  3. title: 'Units Sold',
  4. subtitle: 'Avg. 351 per week',
  5. label: '-12%',
  6. })

Chart

  1. return render_to_string('nucleus/components/chart.html', {
  2. series: '{"labels": ["1", "2", "3"], "datasets": [{"data": [1, 2, 3]}]}', # JSON object
  3. height: 360, # Optional
  4. })

Signed number

  1. return render_to_string('nucleus/components/signed_number.html', {
  2. 'value': 21.87, # Value which will be compared
  3. 'display': '$21.87 ', # For example string with currency to display (django-money object)
  4. })

Progress

  1. return render_to_string('nucleus/components/progress.html', {
  2. 'value': 32, # Value in percent in this case it will be (style="width: 32%")
  3. })

Label

  1. return render_to_string('nucleus/components/progress.html', {
  2. 'title': _('Active'),
  3. 'class': 'success', # Optional. Accepted values: success, info, error
  4. })

User avatar

To display user avatar in top right corner before the currently signed user you can implement two methods in user model:

  • get_initials
  • get_avatar

Credits