Fixed and improved sticky form controls and pagination style.

admin_interface/templates/admin/base_site.html

@@ -17,6 +17,7 @@ https://github.com/fabiocaccamo/django-admin-interface
 */
 {% include "admin_interface/css/admin-interface.css" %}
 {% include "admin_interface/css/admin-interface-fix.css" %}
+{% include "admin_interface/css/form-controls.css" %}
 {% include "admin_interface/css/list-filter-dropdown.css" %}
 {% include "admin_interface/css/recent-actions.css" %}
 {% include "admin_interface/css/related-modal.css" %}

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

@@ -412,25 +412,6 @@ body.admin-interface .paginator a.showall:visited {
     max-width: 100%;
 }
 
-.admin-interface.sticky-submit.change-form:not(.popup) #main > #nav-sidebar + .content,
-.admin-interface.sticky-pagination.change-list:not(.popup) #main > #nav-sidebar + .content {
-    padding-bottom: 4rem;
-}
-
-.admin-interface.sticky-submit.change-form:not(.popup) #main > #nav-sidebar + .content form fieldset + .submit-row,
-.admin-interface.sticky-pagination.change-list:not(.popup) #main > #nav-sidebar + .content form .results + .paginator {
-    width: 100%;
-    max-width: calc(100% - 28px);
-    bottom: 0;
-    right: 0;
-    margin-bottom: 0;
-    position: fixed;
-}
-
-.admin-interface.sticky-pagination.change-list:not(.popup) #main > #nav-sidebar + .content form .results + .paginator {
-    max-width: calc(100% - 20px);
-}
-
 /* hide nav-sidebar below 1280px to prevent horizontal overflow issues */
 @media (max-width:1279px) {
     .admin-interface #nav-sidebar,
@@ -468,17 +449,6 @@ body.admin-interface .paginator a.showall:visited {
     .admin-interface.change-form:not(.popup) #main.shifted > #nav-sidebar + .content {
         max-width: calc(100% - 360px);
     }
-
-    .admin-interface.sticky-submit.change-form:not(.popup) #main.shifted > #nav-sidebar + .content form fieldset + .submit-row,
-    .admin-interface.sticky-pagination.change-list:not(.popup) #main.shifted > #nav-sidebar + .content form .results + .paginator {
-        max-width: calc(100% - 388px);
-        right: 0;
-        bottom: 0;
-    }
-
-    .admin-interface.sticky-pagination.change-list:not(.popup) #main.shifted > #nav-sidebar + .content form .results + .paginator {
-        max-width: calc(100% - 380px);
-    }
 }
 
 /* fixed related widget and select2 */
@@ -567,14 +537,4 @@ body.admin-interface .paginator a.showall:visited {
     .admin-interface .aligned .form-row .file-upload input[type="file"] {
         margin-top: 5px;
     }
-
-    .admin-interface.sticky-submit.change-form:not(.popup) #main > #nav-sidebar + .content,
-    .admin-interface.sticky-pagination.change-form:not(.popup) #main > #nav-sidebar + .content {
-        padding-bottom: 12rem;
-    }
-
-    .admin-interface.sticky-submit.change-form:not(.popup) #main > #nav-sidebar + .content .submit-row,
-    .admin-interface.sticky-pagination.change-list:not(.popup) #main > #nav-sidebar + .content form .results + .paginator {
-        max-width: calc(100% - 20px);
-    }
 }

admin_interface/templates/admin_interface/css/form-controls.css

@@ -0,0 +1,96 @@
+/* sticky changelist pagination */
+
+.admin-interface.sticky-pagination.change-list #main > .content {
+    padding-bottom: 4.375rem;
+}
+
+.admin-interface.sticky-pagination.change-list #main > .content .results + .paginator {
+    width: 100%;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    padding-left: 15px;
+    padding-right: 15px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    border-radius: 0;
+    border-top: 1px solid #EEEEEE;
+    border-bottom: none;
+    margin: 0;
+}
+
+.admin-interface.sticky-pagination.change-list.popup #main > .content .results + .paginator {
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+@media (min-width:768px) {
+    .admin-interface.sticky-pagination.change-list:not(.popup) #main > .content .results + .paginator {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+}
+
+@media (min-width:1024px) {
+    .admin-interface.sticky-pagination.change-list:not(.popup) #main > .content .results + .paginator {
+        padding-left: 40px;
+        padding-right: 40px;
+    }
+}
+
+@media (min-width:1280px) {
+    .admin-interface.sticky-pagination.change-list:not(.popup) #main.shifted > .content .results + .paginator {
+        width: calc(100% - 359px);
+    }
+}
+
+/* sticky changeform submit */
+
+@media (min-width:768px) {
+    .admin-interface.sticky-pagination.change-form #main > .content {
+        padding-bottom: 4.375rem;
+    }
+
+    .admin-interface.sticky-pagination.change-form #main > .content .submit-row:last-of-type {
+        width: 100%;
+        position: fixed;
+        bottom: 0;
+        right: 0;
+        z-index: 1;
+        box-sizing: border-box;
+        padding-left: 15px;
+        padding-right: 15px;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        border-radius: 0;
+        border-top: 1px solid #EEEEEE;
+        border-bottom: none;
+        margin: 0;
+    }
+
+    .admin-interface.sticky-pagination.change-form.popup #main > .content .submit-row:last-of-type {
+        padding-left: 20px;
+        padding-right: 20px;
+    }
+
+
+    .admin-interface.sticky-pagination.change-form:not(.popup) #main > .content .submit-row:last-of-type {
+        padding-left: 30px;
+        padding-right: 30px;
+    }
+}
+
+@media (min-width:1024px) {
+    .admin-interface.sticky-pagination.change-form:not(.popup) #main > .content .submit-row:last-of-type {
+        padding-left: 40px;
+        padding-right: 40px;
+    }
+}
+
+@media (min-width:1280px) {
+    .admin-interface.sticky-pagination.change-form:not(.popup) #main.shifted > .content .submit-row:last-of-type {
+        width: calc(100% - 359px);
+    }
+}