elky / django-flat-responsive

📱 An extension for Django admin that makes interface mobile-friendly. Merged into Django 2.0

Django Flat Responsive

django-flat-responsive is included as part of Django from version 2.0! 🎉

Use this app if your project is powered by an older Django version.

Description

django-flat-responsive is an extension for Django admin and django-flat-theme. This app adds CSS file which contains specific media queries for mobile devices, such as phones and tablets.

Installation

Install via pip: pip install django-flat-responsive

For Django 1.9+

Put flat_responsive app in your INSTALLED_APPS before django.contrib.admin:

INSTALLED_APPS = (
    ...
    'flat_responsive',
    'django.contrib.admin',
    ...
)

For older Django versions

If you use Django version older than 1.9 this app will work properly only in pair with django-flat-theme. Put flat_responsive app in your INSTALLED_APPS before flat:

INSTALLED_APPS = (
    ...
    'flat_responsive',
    'flat',
    'django.contrib.admin',
    ...
)

Important note

⚠️ If you have your own custom base_site.html file, you need to add the following lines to it to make this app work:

{% load admin_static %}
{% block blockbots %}
  {{ block.super }}
  <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <link rel="stylesheet" type="text/css" href="{% static 'admin/css/responsive.css' %}" />
  <link rel="stylesheet" type="text/css" href="{% static "admin/css/responsive_rtl.css" %}" />
{% endblock %}

Compatibility

Works in modern mobile browsers which support CSS Flexbox. Older browser may experience varying levels of graceful degradation.

Testing

Tested with:

Guaranteed works in:

• iOS Safari 9+
• Android Browser 4.4+
• Chrome for iOS 30+
• Chrome for Android 30+
• Firefox for iOS 5.0+
• Firefox for Android 50+
• Windows Phone IE Mobile 11+

If you found any issues or want this app to support other browser versions - please report here.

Screenshots

Login page

---

Dashboard

---

Calendar widget

django-flat-responsive's Issues

It's not working

my django is 1.10.3, but your package doesn't work

datetime widget broken

Before:

Fix:

form .form-row p.datetime {
    ...
    width: 100%;
}

After:

messagelist panel alignement fix

The green message panel that we see when we save a model is not aligned in responsive mode.

Before:

Fix:

ul.messagelist li {
    padding-left: 40px;
    background-position-x: 15px;
}

After:

Demo

Can you provide a demo url for quick testing ?

browser support request. Firefox on android

Hi, as a Firefox enthusiast, I recommend and install it everywhere.
I test my websites mostly against it (with Firefox developer tools).
I think it already works ok with it but it would be cool to have "official" support.
(Even more since Mozilla contributed generously to django [for those who forgot, mozilla contributions]).

file upload input broken due to input width 100%

.aligned .form-row input, 
.aligned .form-row select, 
.aligned .form-row textarea {
    width: 100%;
    margin-right: 0;
    flex: 1 1;
}

Fix:

.aligned .form-row .file-upload input {
    width: auto;
}

filter_horizontal and filter_vertical "Add related" button position

How to reproduce this case: filter horizontal in tabular inline, width > 1024

How to reproduce this case: filter vertical in tabular inline, width > 1024

...and if you want to do another little fix, as you can see in the img above the move-up/move-down control is not centered horizontally.

plus button not shown on mobile

Hi there,

I have a m2m field, but on mobile, the + to add models into, is not shown.
I'm talking about this: https://www.evernote.com/l/AOZhSzYnE3pOa5z5D0MpURw-PJ_xtwemtKM