django-nucleus 0.1.2
Theme for Django admin
Keywords: django admin theme clean minimal ui sidebar

![Screenshot](https://github.com/lukasvinclav/django-nucleus/raw/master/screenshot-1.jpg)
![Screenshot](https://github.com/lukasvinclav/django-nucleus/raw/master/screenshot-2.jpg)

# django-nucleus

![](https://img.shields.io/badge/Version-0.1.0-orange.svg?style=flat-square)
![](https://img.shields.io/badge/Django-2.1+-green.svg?style=flat-square)
![](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)

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

## Getting started

1. Installation

```bash
pip install django-nucleus
```

or if you are using pipenv

```bash
pipenv install django-nucleus
```

2. Add **nucleus** into **INSTALLED_APPS** in your settings file before **django.contrib.admin**.

3. Update **context_processors** by adding new context processor **nucleus.context_processors.nucleus**

## Nucleus settings

```python
_ = lambda s: s  # Translations in setting file

NUCLEUS = {
    'sidebar': {
        # Title
        'title': _('Custom title'),

        # Footer
        'footer': {
            'title': _('Custom title'),
            'description': _('Longer text displayed below the title'),
        },

        # Navigation
        'navigation': {
            # Application
            'auth': {
                'title': _('Accounts'),  # Override title
                'icon': 'img/custom-icon.svg'  # Optional
            },

            # Model
            'auth.User': {
                'title': _('Users'),
                'icon': 'img/custom-icon.svg'  # Optional
            }        
        }    
    }
}
```

## Custom dashboard page

**apps.py**

```python
from django.contrib.admin.apps import AdminConfig


class AppAdminConfig(AdminConfig):
    default_site = 'app.admin.AppAdmin'
```

**admin.py**

```python
from django.contrib.admin import AdminSite


class AppAdmin(AdminSite):
    def index(self, request, extra_context=None):
        # Update extra_context with new variables
        return super().index(request, extra_context)
```

**settings.py**

```python
INSTALLED_APPS = [
    'app.apps.AppAdminConfig',
    # 'django.contrib.admin',    
]
```

**templates/admin/index.html**

```djangotemplate
{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block bodyclass %}{{ block.super }} dashboard{% endblock %}

{% block breadcrumbs %}{% endblock %}

{% block content %}
 
{% endblock %}
```

## Components

### Heading

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

### Stat item

```python
return render_to_string('nucleus/components/stat_item.html', {
    value: '5269',
    title: 'Units Sold',
    subtitle: 'Avg. 351 per week', 
    label: '-12%',
})
```

### Chart

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

### Signed number

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

### Progress

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

### Label

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

## 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

- [Feather](https://feathericons.com/)
- [django-capture-tag](https://github.com/edoburu/django-capture-tag)
- [Tailwind CSS](https://tailwindcss.com)
- [Nunito](https://fonts.google.com/specimen/Nunito)
- [Chart.js](https://www.chartjs.org/)