Updated version

README.md

@@ -17,7 +17,11 @@ django-admin-interface is a modern **responsive flat admin interface customizabl
 - List filter dropdown *(optional)*
 - `NEW` **Related modal** *(instead of the old popup window, optional)*
 - `NEW` **Enviroment label** *(development, testing, staging, production)*
-- Style optimizations for: `django-ckeditor`, `django-modeltranslation`, `sorl-thumbnail`
+- Style optimizations for:
+  - `django-ckeditor`
+  - `django-modeltranslation`
+  - `django-tabbed-admin`
+  - `sorl-thumbnail`
 
 ## Requirements
 - Python 2.7, 3.4, 3.5, 3.6

README.rst

@@ -18,7 +18,11 @@ Features
 - List filter dropdown *(optional)*
 - ``NEW`` **Related modal** (instead of the old popup window, optional)
 - ``NEW`` **Enviroment label** (development, testing, staging, production)
-- Style optimizations for: ``django-ckeditor``, ``django-modeltranslation``, ``sorl-thumbnail``
+- Style optimizations for:
+  - `django-ckeditor`
+  - `django-modeltranslation`
+  - `django-tabbed-admin`
+  - `sorl-thumbnail`
 
 Requirements
 ------------

admin_interface/templates/admin/base_site.html

@@ -19,8 +19,10 @@ https://github.com/fabiocaccamo/django-admin-interface
 {% include "admin_interface/css/list-filter-dropdown.css" %}
 {% include "admin_interface/css/recent-actions.css" %}
 {% include "admin_interface/css/related-modal.css" %}
+{% include "admin_interface/css/jquery.ui.tabs.css" %}
 {% include "admin_interface/css/modeltranslation.css" %}
 {% include "admin_interface/css/sorl-thumbnail.css" %}
+{% include "admin_interface/css/tabbed-admin.css" %}
 {% include "admin_interface/css/ckeditor.css" %}
 {% include "admin_interface/css/tinymce.css" %}
 

admin_interface/templates/admin_interface/css/admin-interface-fix.css

@@ -308,79 +308,28 @@ body.admin-interface .paginator a.showall:visited {
         width: 100% !important;
         flex: 0 1 auto;
     }
+    .admin-interface .aligned .form-row input[type="file"] {
+        width: 100% !important;
+    }
 }
 
 /* improve responsive selector */
 
-/* fix [stacked, not-stacked] equalize horizontal and vertical select padding for selector (stacked and not) */
+/* fix [stacked, not-stacked] equalize horizontal and vertical select padding for selector */
 .admin-interface .selector .selector-available select,
 .admin-interface .selector .selector-chosen select {
     padding: 7px 10px;
     display: block;
 }
 
-/* fix [not-stacked] selector */
-.admin-interface .selector:not(.stacked) {
-    width: auto;
-    margin-right: 10px;
+/* fix [stacked, not-stacked] select options text overflow */
+.admin-interface .selector .selector-available select option,
+.admin-interface .selector .selector-chosen select option {
+    overflow: hidden;
+    text-overflow: ellipsis;
 }
 
 /* fix [not-stacked] equalize selectors height by adding the height of the .selector-available filter-bar */
 .admin-interface .selector:not(.stacked) .selector-chosen select {
     height: calc(46px + 17.2em) !important;
 }
-
-@media (max-width: 1024px){
-    .admin-interface .related-widget-wrapper-link + .selector:not(.stacked) {
-        width: 100%;
-    }
-}
-
-@media (min-width: 767px) and (max-width: 1124px){
-
-    .admin-interface .selector:not(.stacked) .selector-available,
-    .admin-interface .selector:not(.stacked) .selector-chosen {
-        width: 285px;
-        flex: 0 1 auto;
-    }
-    .admin-interface .selector:not(.stacked) .selector-filter {
-        display: flex;
-        align-items: center;
-    }
-    .admin-interface .selector:not(.stacked) .selector-filter label {
-        margin: 0;
-    }
-    .admin-interface .selector:not(.stacked) .selector-available input {
-        width: auto;
-        flex: 1 1;
-    }
-    .admin-interface .selector:not(.stacked) select {
-        width: 100%;
-    }
-}
-
-/* fix [not-stacked] in tabular inline context */
-.admin-interface .tabular.inline-related .selector:not(.stacked) {
-    width: 795px;
-    float: none;
-    display: inline-block;
-    margin-right: 22px;
-}
-
-.admin-interface .tabular.inline-related .form-row .related-widget-wrapper-link:first-child {
-    float: right;
-    display: inline-block;
-}
-
-/* fix [stacked] in tabular inline context */
-.admin-interface .tabular.inline-related .selector.stacked {
-    width: 480px;
-    float: none;
-    display: inline-block;
-    margin-right: 22px;
-}
-
-/* fix [stacked] chooser align center */
-.admin-interface .selector.stacked .selector-chooser {
-    margin-left:calc(50% - 30px);
-}

admin_interface/templates/admin_interface/css/jquery.ui.tabs.css

@@ -0,0 +1,144 @@
+/*
+* jQuery UI CSS Framework
+* Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about)
+* Dual licensed under the MIT (MIT-LICENSE.txt) and GPL (GPL-LICENSE.txt) licenses.
+* http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.core.css
+*/
+
+/*
+backward compatibility:
+.ui-tabs-selected:      jquery ui <  1.10
+.ui-tabs-active classes jquery ui >= 1.10
+*/
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden { display: none; }
+.ui-helper-hidden-accessible { position: absolute; left: -99999999px; }
+.ui-helper-reset { margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none; }
+.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
+.ui-helper-clearfix { display: inline-block; }
+/* required comment for clearfix to work in Opera \*/
+* html .ui-helper-clearfix { height:1%; }
+.ui-helper-clearfix { display:block; }
+.ui-helper-zfix { width: 100%; height: 100%; top: 0; left: 0; position: absolute; opacity: 0; filter:Alpha(Opacity=0); }
+.ui-state-disabled { cursor: default !important; }
+.ui-icon { display: block; text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; }
+/* http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery.ui.tabs.css */
+.ui-widget-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+.ui-tabs { position: relative; padding: .2em; zoom: 1; } /* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
+.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
+.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
+.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-active, .ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
+.ui-tabs .ui-tabs-nav li.ui-tabs-active a, .ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
+.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
+.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
+.ui-tabs .ui-tabs-hide {
+    position: absolute;
+    display: none;
+}
+
+/* Custom tabs theme */
+.admin-interface .ui-tabs {
+    padding: 0;
+}
+
+.admin-interface .ui-tabs,
+.admin-interface .ui-tabs .ui-widget-header,
+.admin-interface .ui-tabs .ui-widget-header .ui-state-default {
+    border: none;
+    background: transparent;
+}
+
+.admin-interface .ui-tabs .ui-tabs-nav {
+    padding: 10px 0 0 10px;
+    border-bottom: none;
+}
+.admin-interface .ui-tabs .ui-tabs-nav li {
+    margin: 0 0 0 -1px;
+}
+.admin-interface .ui-tabs .ui-tabs-nav li.required {
+    font-weight: bold;
+}
+.admin-interface .ui-tabs .ui-tabs-nav li a {
+    border: 1px solid #eeeeee;
+    background-color: #f8f8f8;
+    border-bottom: none;
+    color: #666666;
+    padding: 7px 14px 8px 14px;
+    margin-top: 1px;
+    -moz-border-radius-topright: 4px;
+    -webkit-border-top-right-radius: 4px;
+    -moz-border-radius-topleft: 4px;
+    -webkit-border-top-left-radius: 4px;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    font-size: 12px;
+    text-transform: uppercase;
+    outline: none;
+}
+
+.admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
+.admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+    padding: 8px 14px 8px 14px;
+    margin-top: 0px;
+    margin-bottom: -1px;
+    font-weight: bold;
+    background-color: #FFFFFF;
+    color: {{ theme.css_module_background_color }};
+    border-bottom: 1px solid #FFFFFF;
+}
+
+.admin-interface .ui-tabs .ui-tabs-panel {
+    border: 1px solid #eeeeee;
+    border-radius: 4px;
+    padding: 10px;
+    margin-bottom: 30px;
+    overflow: hidden;
+}
+
+.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-panel {
+    padding: 8px;
+}
+
+.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-nav {
+    padding-left: 4px;
+}
+
+.admin-interface .inline-group .tabular tr td {
+    vertical-align: bottom;
+}
+
+.admin-interface .inline-group .tabular tr.has_original td.original,
+.admin-interface .inline-group .tabular tr td.delete {
+    vertical-align: top;
+}
+
+.admin-interface .inline-group .tabular .datetime > input {
+    margin-right: 5px;
+}
+
+.admin-interface .inline-group .tabular .datetime br {
+    display: none;
+}
+
+.admin-interface #changelist .row1:not(.selected):hover,
+.admin-interface #changelist .row2:not(.selected):hover {
+    background: #f9f9f9;
+}
+
+.admin-interface .row2 {
+    background: #fcfcfc;
+}
+
+.admin-interface .row2 .ui-tabs .ui-tabs-nav li a {
+    background-color: #f5f5f5;
+    border: 1px solid #ebebeb;
+}
+
+.admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
+.admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
+    background-color: #fcfcfc;
+    border-bottom: 1px solid #fcfcfc;
+}

admin_interface/templates/admin_interface/css/modeltranslation.css

@@ -1,65 +1,17 @@
 /*
 django-modeltranslation support
-https://github.com/deschler/django-modeltranslation/pull/313/commits
+https://github.com/deschler/django-modeltranslation
 */
 
 .admin-interface #content h1 select {
-    text-transform:uppercase;
-    margin-left:15px;
+    text-transform: uppercase;
+    margin-left: 15px;
+    min-width: 50px;
 }
 
-.admin-interface .ui-tabs .ui-tabs-nav {
-    padding:10px 0 0 10px;
+.admin-interface .ui-tabs .ui-tabs-panel[id^=tab_id_] {
+    border: none;
+    border-top: 1px solid #eeeeee;
+    padding: 0;
+    margin-bottom: 0;
 }
-
-.admin-interface .ui-tabs .ui-tabs-nav li {
-    margin-left:-1px;
-}
-
-.admin-interface .ui-tabs .ui-tabs-nav li a {
-    outline:none;
-    background-color:#f8f8f8;
-    border:1px solid #eeeeee;
-    border-bottom:none;
-    text-transform:uppercase;
-
-    padding:7px 14px 8px 14px;
-    margin-top:1px;
-}
-
-.admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
-.admin-interface .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
-
-    padding:8px 14px 8px 14px;
-    margin-top:0px;
-    margin-bottom:-1px;
-    font-weight: bold;
-    background-color:#FFFFFF;
-    color:{{ theme.css_module_background_color }};
-
-    border-bottom:1px solid #FFFFFF;
-}
-
-.admin-interface .inline-group .tabular .ui-tabs .ui-tabs-panel {
-    padding:8px;
-}
-
-.admin-interface #changelist .row1:not(.selected):hover,
-.admin-interface #changelist .row2:not(.selected):hover {
-    background:#f9f9f9;
-}
-
-.admin-interface .row2 {
-    background:#fcfcfc;
-}
-
-.admin-interface .row2 .ui-tabs .ui-tabs-nav li a {
-    background-color:#f5f5f5;
-    border:1px solid #ebebeb;
-}
-
-.admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-active a,
-.admin-interface .row2 .ui-tabs .ui-tabs-nav li.ui-tabs-selected a {
-    background-color:#fcfcfc;
-    border-bottom:1px solid #fcfcfc;
-}

admin_interface/templates/admin_interface/css/tabbed-admin.css

@@ -0,0 +1,37 @@
+/*
+django-tabbed-admin support
+https://github.com/omji/django-tabbed-admin
+*/
+
+/* Hide tabs until ready */
+/*
+.admin-interface #tabs ul {
+    display: none;
+}
+
+.admin-interface #tabs ul.ui-tabs-nav {
+    display: block;
+}
+*/
+
+.admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .module.aligned:last-child {
+    margin-bottom: 0;
+}
+
+.admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .module.aligned:last-child .form-row:last-child {
+    border-bottom: none;
+}
+
+@media (max-width: 350px){
+    .admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .vTextField,
+    .admin-interface .inline-related .vTextField {
+        width: 17em;
+    }
+}
+
+@media (max-width: 767px){
+    /* fix horizontal overflow - responsive.css:563 */
+    .admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .aligned .form-row > div:not([class]) {
+        width: 100% !important;
+    }
+}

admin_interface/version.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-__version__ = '0.6.1'
+__version__ = '0.6.3'