Added horizontal scroll to long inlines to prevent full page scroll

README.md

@@ -1,5 +1,5 @@
 #django-admin-interface
-django-admin-interface is a modern **flat admin interface customizable by the admin itself**.
+django-admin-interface is a modern **responsive flat admin interface customizable by the admin itself**.
 
 You can use the builtin **django-theme** or create your own and **customize** **title, logo and colors**.
 
@@ -9,12 +9,13 @@ You can use the builtin **django-theme** or create your own and **customize** **
 
 ##Installation
 - Run `pip install django-admin-interface`
-- Add `admin_interface`, `flat` and `colorfield` to `settings.INSTALLED_APPS` **before** `django.contrib.admin`
+- Add `admin_interface`, `flat_responsive`, `flat` and `colorfield` to `settings.INSTALLED_APPS` **before** `django.contrib.admin`
 ```python
 INSTALLED_APPS = (
     #...
     'admin_interface',
-    'flat',
+    'flat_responsive',
+    'flat', #if django version < 1.9
     'colorfield',
     #...
     'django.contrib.admin',
@@ -40,6 +41,7 @@ INSTALLED_APPS = (
 
 ####Thanks
 - [django-flat-theme](https://github.com/elky/django-flat-theme/)
+- [django-flat-responsive](https://github.com/elky/django-flat-responsive)
 - [django-colorfield](https://github.com/jaredly/django-colorfield/)
 
 ##License

admin_interface/templates/admin/base_site.html

@@ -1,6 +1,11 @@
 {% extends "admin/base.html" %}
 {% load i18n staticfiles admin_interface_tags %}
 
+{% block title %}
+{% get_admin_interface_theme as theme %}
+{% if theme.title %}{% trans theme.title %}{% else %}{% trans 'Django administration' %}{% endif %}
+{% endblock %}
+
 {% block extrastyle %}
 {% get_admin_interface_theme as theme %}
 <style type="text/css">
@@ -65,8 +70,9 @@
         color:{{ theme.css_module_link_color }};
     }
 
-    div.breadcrumbs a:hover,
-    div.breadcrumbs a:active {
+    div.breadcrumbs a:active,
+    div.breadcrumbs a:focus,
+    div.breadcrumbs a:hover {
         color:{{ theme.css_module_link_hover_color }} !important;
     }
 
@@ -96,8 +102,6 @@
         color:{{ theme.css_module_link_hover_color }} !important;
     }
 
-
-    .inline-group h2,
     .inline-group h2 {
         background:{{ theme.css_module_background_color }};
         color:{{ theme.css_module_text_color }};
@@ -122,20 +126,25 @@
     }
 
     .button:active, input[type=submit]:active, input[type=button]:active,
+    .button:focus, input[type=submit]:focus, input[type=button]:focus,
     .button:hover, input[type=submit]:hover, input[type=button]:hover {
         background:{{ theme.css_save_button_background_hover_color }};
         color:{{ theme.css_save_button_text_color }};
+        outline: none;
     }
 
     .button.default, input[type=submit].default, .submit-row input.default {
         background:{{ theme.css_save_button_background_color }};
         color:{{ theme.css_save_button_text_color }};
+        outline: none;
     }
 
     .button.default:active, input[type=submit].default:active,
+    .button.default:focus, input[type=submit].default:focus,
     .button.default:hover, input[type=submit].default:hover {
         background:{{ theme.css_save_button_background_hover_color }};
         color:{{ theme.css_save_button_text_color }};
+        outline: none;
     }
 
     .submit-row a.deletelink:link,
@@ -221,7 +230,7 @@
     }
 
     .login #content {
-        padding:0px 30px 10px 30px !important;
+        padding:10px 30px 10px 30px !important;
     }
 
     /* same lateral padding as in logged view */
@@ -277,6 +286,10 @@
         padding-left:10px !important;
     }
 
+    form .aligned.wide p.help {
+        margin-left: 200px;
+    }
+
     textarea.tinymce ~ p.help {
         margin-top:5px !important;
     }
@@ -285,15 +298,38 @@
         display:table;
     }
 
-    /* fix lateral padding to align text with field labels */
+    /* begin fix issue #13 - Datetime widget broken in long inlines */
+    p.datetime {
+        white-space:nowrap;
+    }
+    /* end fix */
+
+    /* begin fix lateral padding to align text with field labels */
     .module h2,
     .dashboard .module caption,
-    .inline-group h2,
     .module.filtered h2,
     .inline-group h2 {
-        padding:8px 10px;
-        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
+        padding-left:10px;
+        padding-right:10px;
     }
+    /* end fix */
+
+    /* begin fix issue #11 - Inline border bottom should not be rounded */
+    .module h2,
+    .dashboard .module caption,
+    .module.filtered h2 {
+        {% if theme.css_module_rounded_corners %}
+        border-radius:4px;
+        {% endif %}
+    }
+
+    .inline-group h2 {
+        {% if theme.css_module_rounded_corners %}
+        border-bottom-left-radius:0;
+        border-bottom-right-radius:0;
+        {% endif %}
+    }
+    /* end fix */
 
     .module.filtered h2 {
         border-bottom-left-radius:0;
@@ -315,7 +351,9 @@
     }
 
     #content-related {
-        {% if theme.css_module_rounded_corners %}border-radius:4px;{% endif %}
+        {% if theme.css_module_rounded_corners %}
+        border-radius:4px;
+        {% endif %}
     }
 
     /* selector chooseall / clearall color on hover -> just a lighten grey */
@@ -323,26 +361,36 @@
         color:#888888 !important;
     }
 
+    .inline-group {
+        overflow-x:auto;
+    }
+
+    /* begin fix issue #10 - Related widget broken in long tabular inline */
+    .inline-group .tabular .related-widget-wrapper {
+        white-space:nowrap;
+    }
+    /* end fix */
+
     .inline-related h3 {
         padding:6px 10px !important;
     }
 
-    /*
+    /* begin fix issue #12 - Inlines bad delete buttons alignement */
     .inline-group .tabular thead th:last-child:not([class]):not([style]) {
-        text-align:center;
+        text-align:right;
     }
-    */
 
-    /*.inline-group .tabular tr.has_original td.original,   */
     .inline-group .tabular tr td.delete {
-        vertical-align:middle !important;
-        text-align:center !important;
+        text-align:right;
+        padding-right:15px;
     }
 
     .inline-group .tabular tr td.delete a.inline-deletelink {
-        float:none;
-        display:inline-block;
+        margin-top:2px;
+        overflow:hidden;
+        text-indent:9999px;
     }
+    /* end fix */
 
     /* improve django-modeltranslation support - https://github.com/deschler/django-modeltranslation/pull/313/commits */
 
@@ -509,5 +557,11 @@
 
 {% block bodyclass %}admin-interface flat-theme{% endblock %}
 
+{% 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" %}" />
+{% endblock %}
+
 {% block sidebar %}
 {% endblock %}

admin_interface/version.py

@@ -1,4 +1,4 @@
 # -*- coding: utf-8 -*-
 
-__version__ = '0.1.7'
+__version__ = '0.2.0'
 

setup.py

@@ -10,15 +10,16 @@ setup(
     include_package_data=True,
     license='MIT License',
     version=__version__,
-    description='django-admin-interface is a modern flat admin interface customizable by the admin itself.',
+    description='django-admin-interface is a modern responsive flat admin interface customizable by the admin itself.',
     author='Fabio Caccamo',
     author_email='fabio.caccamo@gmail.com',
     url='https://github.com/fabiocaccamo/django-admin-interface',
     download_url='https://github.com/fabiocaccamo/django-admin-interface/archive/%s.tar.gz' % __version__,
-    keywords=['django', 'admin', 'interface', 'ui', 'flat', 'theme', 'custom'],
+    keywords=['django', 'admin', 'interface', 'responsive', 'flat', 'theme', 'custom', 'ui'],
     install_requires=[
-        'django-colorfield==0.1.10',
-        'django-flat-theme==1.1.3'
+        'django-colorfield==0.1.12',
+        'django-flat-theme==1.1.4',
+        'django-flat-responsive==1.2.0'
     ],
     classifiers=[]
 )