Updated version.

.gitattributes

@@ -1 +1,2 @@
-admin_interface/static/ckeditor/* linguist-vendored
+admin_interface/static/admin_interface/magnific-popup/* linguist-vendored=true
+admin_interface/static/ckeditor/* linguist-vendored=true

.travis.yml

@@ -5,16 +5,20 @@ env:
   - TOX_ENV=py27-18
   - TOX_ENV=py27-19
   - TOX_ENV=py27-110
+  - TOX_ENV=py27-111
   - TOX_ENV=py34-17
   - TOX_ENV=py34-18
   - TOX_ENV=py34-19
   - TOX_ENV=py34-110
+  - TOX_ENV=py34-111
   - TOX_ENV=py34-20
-  - TOX_ENV=py34-master
+  - TOX_ENV=py34-21
   - TOX_ENV=py35-18
   - TOX_ENV=py35-19
   - TOX_ENV=py35-110
+  - TOX_ENV=py35-111
   - TOX_ENV=py35-20
+  - TOX_ENV=py35-21
   - TOX_ENV=py35-master
 matrix:
   include:
@@ -22,10 +26,11 @@ matrix:
       env: TOX_ENV=py36-111
     - python: "3.6"
       env: TOX_ENV=py36-20
+    - python: "3.6"
+      env: TOX_ENV=py36-21
     - python: "3.6"
       env: TOX_ENV=py36-master
   allow_failures:
-    - env: TOX_ENV=py34-master
     - env: TOX_ENV=py35-master
     - env: TOX_ENV=py36-master
 install:

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
@@ -96,4 +100,4 @@ You can use [django-apptemplates](https://github.com/bittner/django-apptemplates
 ---
 
 ## License
-Released under [MIT License](LICENSE).
+Released under [MIT License](LICENSE.txt).

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/static/admin/js/popup_response.js

@@ -1,41 +1,48 @@
-/*global opener */
+/* global opener */
 (function() {
     'use strict';
-    var windowRef = window;
+
-    var windowName = windowRef.name;
+    function getModalWindowData()
-    var widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
+    {
-    //var windowNames = windowName.split('____');
+        var windowRef = window;
-    //var widgetName = windowNames[(windowNames.length - 1)];
+        var windowName = windowRef.name;
-    //widgetName = widgetName.replace(/^(change|add|delete|lookup)_/, '');
+        var widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
-    //console.log('dismiss modal and update widget with id: "' + widgetName + '"');
+        var modalRef = {};
-    var modalRef = {};
+        var openerRef = windowRef.opener;
-    var openerRef = windowRef.opener;
+        if (!openerRef) {
-    if(!openerRef){
+            openerRef = windowRef.parent;
-        openerRef = windowRef.parent;
+            modalRef = {
-        modalRef = {
+                name: openerRef.id_to_windowname(widgetName),
-            name: openerRef.id_to_windowname(widgetName),
+                close: function(){
-            close: function(){
+                    openerRef.dismissRelatedObjectModal();
-                openerRef.dismissRelatedObjectModal();
+                }
-            }
+            };
-        };
+        }
+        return { opener:openerRef, modal:modalRef };
     }
+
+    var modalData = getModalWindowData();
+    var modalRef = modalData['modal'];
+    var openerRef = modalData['opener'];
+
     var initData = JSON.parse(document.getElementById('django-admin-popup-response-constants').dataset.popupResponse);
-    switch(initData.action){
+    // console.log(initData);
+    switch (initData.action) {
         case 'change':
-            if( typeof(openerRef.dismissChangeRelatedObjectPopup) == 'function' ){
+            if (typeof(openerRef.dismissChangeRelatedObjectPopup) == 'function') {
                 openerRef.dismissChangeRelatedObjectPopup(modalRef, initData.value, initData.obj, initData.new_value);
             }
             break;
         case 'delete':
-            if( typeof(openerRef.dismissDeleteRelatedObjectPopup) == 'function' ){
+            if (typeof(openerRef.dismissDeleteRelatedObjectPopup) == 'function') {
                 openerRef.dismissDeleteRelatedObjectPopup(modalRef, initData.value);
             }
             break;
         default:
-            if( typeof(openerRef.dismissAddRelatedObjectPopup) == 'function' ){
+            if (typeof(openerRef.dismissAddRelatedObjectPopup) == 'function') {
                 openerRef.dismissAddRelatedObjectPopup(modalRef, initData.value, initData.obj);
             }
-            else if( typeof(openerRef.dismissAddAnotherPopup) == 'function' ){
+            else if (typeof(openerRef.dismissAddAnotherPopup) == 'function') {
                 // django 1.7 compatibility
                 openerRef.dismissAddAnotherPopup(modalRef, initData.value, initData.obj);
             }

admin_interface/static/admin_interface/related-modal/related-modal.js

@@ -1,23 +1,45 @@
-if(typeof django !== 'undefined' && typeof django.jQuery !== 'undefined' )
+if (typeof(django) !== 'undefined' && typeof(django.jQuery) !== 'undefined')
 {
     (function($) {
 
         $(document).ready(function(){
 
-            // create the function that will close the modal
+            function dismissModal()
-            function dismissRelatedObjectModal()
             {
-                // close the popup as modal
                 $.magnificPopup.close();
             }
 
-            // assign the function to a global variable
+            // create the function that will close the modal
+            function dismissRelatedObjectModal()
+            {
+                dismissModal();
+            }
+
+            function dismissRelatedLookupModal(win, chosenId)
+            {
+                var windowRef = win;
+                var windowName = windowRef.name;
+                var widgetName = windowName.replace(/^(change|add|delete|lookup)_/, '');
+                var widgetEl = $('#' + widgetName);
+                var widgetVal = widgetEl.val();
+                if (widgetEl.hasClass('vManyToManyRawIdAdminField') && Boolean(widgetVal)) {
+                    widgetEl.val(widgetVal + ', ' + chosenId);
+                } else {
+                    widgetEl.val(chosenId);
+                }
+                dismissModal();
+            }
+
+            // assign functions to global variables
             window.dismissRelatedObjectModal = dismissRelatedObjectModal;
+            window.dismissRelatedLookupPopup = dismissRelatedLookupModal;
 
             function presentRelatedObjectModal(e)
             {
-                var href = ($(this).attr('href') || '');
+                var linkEl = $(this);
-                if( href == '' ){
+
+                var href = (linkEl.attr('href') || '');
+                if (href == '') {
                     return;
                 }
 
@@ -26,40 +48,57 @@ if(typeof django !== 'undefined' && typeof django.jQuery !== 'undefined' )
                 e.stopImmediatePropagation();
 
                 // remove focus from clicked link
-                $(this).blur();
+                linkEl.blur();
 
                 // use the clicked link id as iframe name
                 // it will be available as window.name in the loaded iframe
-                var iframeName = $(this).attr('id');
+                var iframeName = linkEl.attr('id');
-                // var iframeName = String(window.name + '____' + $(this).attr('id'));
-                // console.log('open modal with name: "' + iframeName + '"');
-
-                // browsers stop loading nested iframes having the same src url
-                // create a random parameter and append it to the src url to prevent it
-                var iframeSrcRandom = String(Math.round(Math.random() * 999999));
                 var iframeSrc = href;
 
-                // fix for django 1.7
+                if (e.data.lookup !== true)
-                if( iframeSrc.indexOf('_popup=1') == -1 ){
+                {
-                    iframeSrc += '&_popup=1';
+                    // browsers stop loading nested iframes having the same src url
+                    // create a random parameter and append it to the src url to prevent it
+                    // this workaround doesn't work with related lookup url
+                    var iframeSrcRandom = String(Math.round(Math.random() * 999999));
+                    if( iframeSrc.indexOf('?') === -1 ){
+                        iframeSrc += '?_modal=' + iframeSrcRandom;
+                    } else {
+                        iframeSrc += '&_modal=' + iframeSrcRandom;
+                    }
                 }
 
-                iframeSrc += '&_modal=' + iframeSrcRandom;
+                // fix for django 1.7
+                if (iframeSrc.indexOf('_popup=1') === -1) {
+                    if (iframeSrc.indexOf('?') === -1) {
+                        iframeSrc += '?_popup=1';
+                    } else {
+                        iframeSrc += '&_popup=1';
+                    }
+                }
 
                 // build the iframe html
-                // var iframeHTML = '<iframe id="related-modal" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
                 var iframeHTML = '<iframe id="related-modal-iframe" name="' + iframeName + '" src="' + iframeSrc + '"></iframe>';
-
                 // create the iframe jquery element
                 var iframeEl = $(iframeHTML);
 
+                if (e.data.lookup === true)
+                {
+                    // set current window as iframe opener because
+                    // the callback is called on the opener window
+                    iframeEl.load(function(){
+                        var iframeObj = $(this).get(0);
+                        var iframeWindow = iframeObj.contentWindow;
+                        iframeWindow.opener = window;
+                    });
+                }
+
                 // the modal css class
                 var iframeInternalModalClass = 'related-modal';
 
                 // if the current window is inside an iframe, it means that it is already in a modal,
                 // append an additional css class to the modal to offer more customization
-                if( window.top != window.self )
+                if (window.top != window.self) {
-                {
                     iframeInternalModalClass += ' related-modal__nested';
                 }
 
@@ -79,10 +118,14 @@ if(typeof django !== 'undefined' && typeof django.jQuery !== 'undefined' )
 
             // django 1.7 compatibility
             $('a.add-another').removeAttr('onclick');
-            $('a.add-another').click( presentRelatedObjectModal );
+            $('a.add-another').click({ lookup:false }, presentRelatedObjectModal);
 
             // django 1.8 and above
-            $('a.related-widget-wrapper-link').click( presentRelatedObjectModal );
+            $('a.related-widget-wrapper-link').click({ lookup:false }, presentRelatedObjectModal);
+
+            // raw_id_fields support
+            $('a.related-lookup').unbind('click');
+            $('a.related-lookup').click({ lookup:true }, presentRelatedObjectModal);
         });
 
     })(django.jQuery);

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

@@ -308,6 +308,9 @@ 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 */
@@ -326,68 +329,7 @@ body.admin-interface .paginator a.showall:visited {
     text-overflow: ellipsis;
 }
 
-/* fix [not-stacked] selector */
-.admin-interface .selector:not(.stacked) {
-    width: auto;
-    margin-right: 10px;
-}
-
 /* 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: 767px){
-    .admin-interface .related-widget-wrapper-link + .selector:not(.stacked) {
-        width: 100%;
-    }
-}
-
-@media (min-width: 768px) 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

@@ -43,6 +43,14 @@ backward compatibility:
 .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/templates/admin_interface/css/tabbed-admin.css

@@ -3,9 +3,35 @@ django-tabbed-admin support
 https://github.com/omji/django-tabbed-admin
 */
 
-@media (max-width: 767px){
+/* Hide tabs until ready */
-    /* fix horizontal overflow - responsive.css:563 */
+/*
-    .admin-interface .ui-tabs .ui-tabs-panel[id^=tabs] .aligned .form-row > div {
+.admin-interface #tabs ul {
-        width: 100%;
+    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.2'
+__version__ = '0.7.0'

tox.ini

@@ -1,9 +1,9 @@
 [tox]
 envlist =
     py27-{17,18,19,110,111},
-    py34-{17,18,19,110,111,20,master},
+    py34-{17,18,19,110,111,20,21},
-    py35-{18,19,110,111,20,master},
+    py35-{18,19,110,111,20,21,master},
-    py36-{18,19,110,111,20,master},
+    py36-{18,19,110,111,20,21,master},
 [testenv]
 passenv = CI TRAVIS TRAVIS_*
 deps =
@@ -13,6 +13,7 @@ deps =
     110: Django >= 1.10, < 1.11
     111: Django >= 1.11, < 1.12
     20: Django >= 2.0, < 2.1
+    21: Django >= 2.1, < 2.2
     master: https://github.com/django/django/archive/master.tar.gz
     coverage
     codecov