jazzband / jazzband/django-admin2

Message styling

Open
#144 2 comments 0 reactions 0 assignees View on GitHub
Theme
Dominant language
Python
Stars
1.2k
Forks
147
PR merge metrics
No merged PRs in 30d

Description

Bootstrap alerts make a great fit for messages:

![unstyled_message](https://f.cloud.github.com/assets/238952/557065/b970f134-c3e9-11e2-80fc-905946301a24.png)

Becomes:

![message_alert](https://f.cloud.github.com/assets/238952/557067/c00e336c-c3e9-11e2-80d7-a72e1adc5e9f.png)

Usually, I'd do this by setting [`MESSAGE_TAGS`](https://docs.djangoproject.com/en/1.5/ref/contrib/messages/#id1) to directly map message tags to bootstrap alert classes.

```
# Map django message levels to bootstrap alert classes
MESSAGE_TAGS = {
message_constants.DEBUG: 'alert-info',
message_constants.INFO: 'alert-info',
message_constants.SUCCESS: 'alert-success',
message_constants.WARNING: 'alert-error',
message_constants.ERROR: 'alert-error',
}
```

but AFAIK there's no way for a third party app to define settings like this so that they only apply to the app.

I believe using LESS mixins to map default message classes to Bootstrap alert classes, as in the blog post linked by @sehmaschine here https://github.com/twoscoops/django-admin2/issues/125#issuecomment-18207063, would be a great way to approach this. The markup would be something like:

```
# base.html - simplified for clarity
{% for message in messages %}

  • {{ message }}

  • {% endfor %}

    # style.less
    .message-info {
    .alert
    .alert-info
    }

    message-success {
    .alert
    .alert-success
    }
    ...
    ```

    Obviously, this relies on moving to LESS for our styling. The discussion around this is mostly in issue #125.

    Contributor guide

    Open the contributing guide

    Research direction

    Start by reading the discussion in issue #125, then inspect the base.html message markup and the proposed style.less mapping. Confirm the project’s styling direction before changing message classes; done means messages render with the intended Bootstrap alert styling.

    Written by the indexing model from the issue text.

    Assessment

    Tech stack
    bootstrap, django, python
    Domain
    frontend, web-dev
    Issue type
    Feature
    Difficulty
    5/5
    Estimated time
    Over a week
    Activity status
    Stale
    Clarity
    Mostly clear
    Newbie friendliness
    30/100

    Get new issues in your inbox

    A short digest of beginner-friendly GitHub issues.