Updated CHANGELOG and version.

CHANGELOG.md

@@ -4,6 +4,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.13.7](https://github.com/fabiocaccamo/django-admin-interface/releases/tag/0.13.7) - 2020-10-14
+-  Improved responsive widgets style.
+-  Prevented body horizontal scroll.
+-  Fixed tabular inline horizontal scroll.
+-  Fixed changelist filter min-width.
+-  Fixed changelist and toolbar theme rounded corners.
+-  Fixed calendar and timelist buttons theme color.
+-  Fixed list filter select size.
+-  Fixed content max-width with `django >= 3.1`.
+
 ## [0.13.6](https://github.com/fabiocaccamo/django-admin-interface/releases/tag/0.13.6) - 2020-10-14
 -  Added persian language. #98
 -  Fixed logo max-width on small screens.

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

@@ -1,3 +1,7 @@
+.admin-interface {
+    overflow-x: hidden;
+}
+
 /* fix login */
 .admin-interface.login #container {
     width: 100%;
@@ -67,7 +71,6 @@
 }
 /* end login fix*/
 
-
 .admin-interface #header {
     height:auto;
     min-height:40px;
@@ -209,6 +212,7 @@ body.admin-interface .paginator a.showall:visited {
     .admin-interface form .form-row p.file-upload .clearable-file-input {
         display: block;
         margin-top: 10px;
+        margin-left: 0;
         margin-bottom: -10px;
     }
 
@@ -249,14 +253,18 @@ body.admin-interface .paginator a.showall:visited {
 
 /* LIST FILTER */
 .admin-interface .module.filtered h2 {
-    border-bottom-left-radius:0;
-    border-bottom-right-radius:0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .admin-interface .module.filtered #changelist-filter {
-    border-bottom-left-radius:4px;
-    border-bottom-right-radius:4px;
-    min-width: 200px;
+    min-width: 240px;
+}
+
+@media (max-width: 1024px) {
+    .admin-interface .module.filtered #changelist-filter {
+        min-width: 200px;
+    }
 }
 
 .admin-interface .module.filtered #changelist-filter h2 {
@@ -301,6 +309,23 @@ body.admin-interface .paginator a.showall:visited {
 }
 /* end fix */
 
+/* begin fix tabular inlines horizontal scroll */
+.admin-interface .inline-related.tabular fieldset.module {
+    display: block;
+    overflow-x: scroll;
+    width: 100%;
+    white-space: nowrap;
+    position: relative;
+}
+.admin-interface .inline-related.tabular fieldset.module h2 {
+    position: sticky;
+    left: 0;
+}
+.admin-interface .inline-related.tabular fieldset.module table tbody tr {
+    position: relative;
+}
+/* end fix */
+
 .admin-interface .inline-related h3 {
     padding:6px 10px;
 }
@@ -342,17 +367,6 @@ body.admin-interface .paginator a.showall:visited {
     background-color:#AAAAAA;
 }
 
-/* fix textarea horizontal scroll on Firefox */
-@media (max-width: 767px){
-    .admin-interface .aligned .form-row textarea {
-        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 */
@@ -398,6 +412,11 @@ body.admin-interface .paginator a.showall:visited {
     margin-top: -2px;
 }
 
+.admin-interface .main > #nav-sidebar + .content,
+.admin-interface .main.shifted > #nav-sidebar + .content {
+    max-width: 100%;
+}
+
 /* hide nav-sidebar below 1280px to prevent horizontal overflow issues */
 @media (max-width:1279px) {
     .admin-interface #nav-sidebar,
@@ -436,34 +455,6 @@ body.admin-interface .paginator a.showall:visited {
     }
 }
 
-/* fix related-widget when the nav-sidebar is collapsed */
-@media (max-width:1100px) {
-    .admin-interface.change-form #main .related-widget-wrapper {
-        clear: left;
-        margin-top: 5px;
-    }
-    .admin-interface.change-form #main .related-widget-wrapper + .help {
-        margin-top: 10px;
-        margin-left: 0;
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
-/* fix related-widget when the nav-sidebar is expanded */
-@media (min-width:1280px) and (max-width:1480px) {
-    .admin-interface.change-form:not(.popup) .related-widget-wrapper {
-        clear: left;
-        margin-top: 5px;
-    }
-    .admin-interface.change-form #main.shifted .related-widget-wrapper + .help {
-        margin-top: 10px;
-        margin-left: 0;
-        padding-left: 0;
-        padding-right: 0;
-    }
-}
-
 .admin-interface #nav-sidebar .current-app .section:link,
 .admin-interface #nav-sidebar .current-app .section:visited {
     color: #FFFFCC;
@@ -473,3 +464,82 @@ body.admin-interface .paginator a.showall:visited {
 .admin-interface #nav-sidebar .current-model {
     background: #FFFFCC;
 }
+
+/* fixed related widget and select2 */
+.admin-interface .aligned .form-row .related-widget-wrapper {
+    white-space: nowrap;
+}
+
+.admin-interface .aligned .form-row .related-widget-wrapper .select2-container ~ .related-widget-wrapper-link {
+    margin-left: 0;
+    padding: 4px 8px 6px 8px;
+}
+
+.admin-interface .aligned .form-row .related-widget-wrapper .select2-container + .related-widget-wrapper-link {
+    margin-left: 5px !important;
+}
+
+/* fixed time widget header border radius */
+.admin-interface .clockbox.module h2 {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+@media (max-width: 767px) {
+
+    /* fixed changelist search size when there are search results and .quiet is visible */
+    .admin-interface #changelist-search label img {
+        margin-top: 7px;
+    }
+
+    .admin-interface #changelist-search .quiet {
+        margin: 0 0 0 10px;
+        align-self: center;
+        flex-basis: content;
+    }
+
+    /* fixed responsive widgets */
+    .admin-interface .aligned.collapsed .form-row {
+        display: none;
+    }
+
+    .admin-interface .aligned .form-row > div {
+        display: flex;
+        max-width: 100vw;
+        flex-direction: column;
+        align-items: flex-start;
+    }
+
+    .admin-interface .aligned .form-row .help {
+        margin-left: 0;
+    }
+
+    .admin-interface .aligned .form-row .checkbox-row label {
+        margin: 10px 0 0 0;
+        padding: 0;
+    }
+
+    .admin-interface .aligned .form-row input[type="file"],
+    .admin-interface .aligned .form-row input[type="text"],
+    .admin-interface .aligned .form-row input[type="email"] {
+        width: 100%;
+    }
+
+    /* fix textarea horizontal scroll on Firefox */
+    .admin-interface .aligned .form-row textarea {
+        width: 100% !important;
+        flex: 0 1 auto;
+    }
+
+    .admin-interface .aligned .form-row .datetime input[type="text"] {
+        width: 50%;
+    }
+
+    .admin-interface .aligned .form-row span + .file-upload {
+        margin-top: 10px;
+    }
+
+    .admin-interface .aligned .form-row .file-upload input[type="file"] {
+        margin-top: 5px;
+    }
+}

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

@@ -282,6 +282,19 @@
     color:{{ theme.css_generic_link_hover_color }};
 }
 
+.admin-interface .module.filtered #toolbar {
+    {% if theme.css_module_rounded_corners %}
+    border-radius: 4px;
+    {% endif %}
+}
+
+.admin-interface .module.filtered #changelist-filter {
+    {% if theme.css_module_rounded_corners %}
+    border-bottom-left-radius: 4px;
+    border-bottom-right-radius: 4px;
+    {% endif %}
+}
+
 .admin-interface .module.filtered #changelist-filter #changelist-filter-clear a:focus,
 .admin-interface .module.filtered #changelist-filter #changelist-filter-clear a:hover {
     color: #666;
@@ -346,3 +359,13 @@
 .admin-interface #toggle-nav-sidebar:active {
     color: {{ theme.css_generic_link_hover_color }};
 }
+
+.admin-interface .calendar td.selected a,
+.admin-interface .calendar td a:active,
+.admin-interface .calendar td a:focus,
+.admin-interface .calendar td a:hover,
+.admin-interface .timelist a:active,
+.admin-interface .timelist a:focus,
+.admin-interface .timelist a:hover {
+    background: {{ theme.css_module_background_color }};
+}

admin_interface/templates/admin_interface/css/list-filter-dropdown.css

@@ -8,7 +8,7 @@ list-filter-dropdown
 }
 
 .admin-interface .list-filter-dropdown select {
-    background-color:#FFFFFF;
-    width:90%;
-    margin-right:5%;
+    background-color: #FFFFFF;
+    width: calc(100% - 30px);
+    margin-right: 15px;
 }

admin_interface/version.py

@@ -1,3 +1,3 @@
 # -*- coding: utf-8 -*-
 
-__version__ = '0.13.6'
+__version__ = '0.13.7'