Boolean field labels are no longer clickable so they can't be accidentally toggle the field value

babybuddy/static_src/scss/global.scss

@@ -30,6 +30,10 @@
     }
 }
 
+.boolean-label {
+    pointer-events: none;
+}
+
 // Set default text color for datetime picker.
 .bootstrap-datetimepicker-widget {
     color: $gray-400;

babybuddy/templates/babybuddy/form_field.html

@@ -1,6 +1,6 @@
 {% load widget_tweaks %}
 
-<label for="id_{{ field.name }}" class="col-sm-2 col-form-label">
+<label for="id_{{ field.name }}" class="col-sm-2 col-form-label{% if field|field_type == 'booleanfield' %} boolean-label{% endif %}">
     {% if field|field_type != "booleanfield" %}
         {{ field.label }}
     {% endif %}

static/admin/css/changelists.403ad0c24fa6.css

@@ -1,8 +1,14 @@
 /* CHANGELISTS */
 
 #changelist {
-    position: relative;
-    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 #changelist table {
@@ -21,7 +27,6 @@
 
 .change-list .filtered .results, .change-list .filtered .paginator,
 .filtered #toolbar, .filtered div.xfull {
-    margin-right: 280px;
     width: auto;
 }
 
@@ -30,7 +35,8 @@
 }
 
 #changelist-form .results {
-  overflow-x: auto;
+    overflow-x: auto;
+    width: 100%;
 }
 
 #changelist .toplinks {
@@ -67,7 +73,7 @@
 
 /* TOOLBAR */
 
-#changelist #toolbar {
+#toolbar {
     padding: 8px 10px;
     margin-bottom: 15px;
     border-top: 1px solid #eee;
@@ -76,27 +82,28 @@
     color: #666;
 }
 
-#changelist #toolbar form input {
+#toolbar form input {
     border-radius: 4px;
     font-size: 14px;
     padding: 5px;
     color: #333;
 }
 
-#changelist #toolbar form #searchbar {
+#toolbar #searchbar {
     height: 19px;
     border: 1px solid #ccc;
     padding: 2px 5px;
     margin: 0;
     vertical-align: top;
     font-size: 13px;
+    max-width: 100%;
 }
 
-#changelist #toolbar form #searchbar:focus {
+#toolbar #searchbar:focus {
     border-color: #999;
 }
 
-#changelist #toolbar form input[type="submit"] {
+#toolbar form input[type="submit"] {
     border: 1px solid #ccc;
     font-size: 13px;
     padding: 4px 8px;
@@ -108,12 +115,12 @@
     color: #333;
 }
 
-#changelist #toolbar form input[type="submit"]:focus,
-#changelist #toolbar form input[type="submit"]:hover {
+#toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:hover {
     border-color: #999;
 }
 
-#changelist #changelist-search img {
+#changelist-search img {
     vertical-align: middle;
     margin-right: 4px;
 }
@@ -121,14 +128,11 @@
 /* FILTER COLUMN */
 
 #changelist-filter {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1000;
+    order: 1;
     width: 240px;
     background: #f8f8f8;
     border-left: none;
-    margin: 0;
+    margin: 0 0 0 30px;
 }
 
 #changelist-filter h2 {
@@ -227,6 +231,7 @@
     line-height: 22px;
     margin: 0;
     border-top: 1px solid #ddd;
+    width: 100%;
 }
 
 .paginator a:link, .paginator a:visited {
@@ -266,7 +271,6 @@
 /* ACTIONS */
 
 .filtered .actions {
-    margin-right: 280px;
     border-right: none;
 }
 
@@ -286,6 +290,7 @@
     border-bottom: none;
     line-height: 24px;
     color: #999;
+    width: 100%;
 }
 
 #changelist .actions.selected {

static/admin/css/changelists.css

@@ -1,8 +1,14 @@
 /* CHANGELISTS */
 
 #changelist {
-    position: relative;
-    width: 100%;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+}
+
+#changelist .changelist-form-container {
+    flex: 1 1 auto;
+    min-width: 0;
 }
 
 #changelist table {
@@ -21,7 +27,6 @@
 
 .change-list .filtered .results, .change-list .filtered .paginator,
 .filtered #toolbar, .filtered div.xfull {
-    margin-right: 280px;
     width: auto;
 }
 
@@ -30,7 +35,8 @@
 }
 
 #changelist-form .results {
-  overflow-x: auto;
+    overflow-x: auto;
+    width: 100%;
 }
 
 #changelist .toplinks {
@@ -67,7 +73,7 @@
 
 /* TOOLBAR */
 
-#changelist #toolbar {
+#toolbar {
     padding: 8px 10px;
     margin-bottom: 15px;
     border-top: 1px solid #eee;
@@ -76,27 +82,28 @@
     color: #666;
 }
 
-#changelist #toolbar form input {
+#toolbar form input {
     border-radius: 4px;
     font-size: 14px;
     padding: 5px;
     color: #333;
 }
 
-#changelist #toolbar form #searchbar {
+#toolbar #searchbar {
     height: 19px;
     border: 1px solid #ccc;
     padding: 2px 5px;
     margin: 0;
     vertical-align: top;
     font-size: 13px;
+    max-width: 100%;
 }
 
-#changelist #toolbar form #searchbar:focus {
+#toolbar #searchbar:focus {
     border-color: #999;
 }
 
-#changelist #toolbar form input[type="submit"] {
+#toolbar form input[type="submit"] {
     border: 1px solid #ccc;
     font-size: 13px;
     padding: 4px 8px;
@@ -108,12 +115,12 @@
     color: #333;
 }
 
-#changelist #toolbar form input[type="submit"]:focus,
-#changelist #toolbar form input[type="submit"]:hover {
+#toolbar form input[type="submit"]:focus,
+#toolbar form input[type="submit"]:hover {
     border-color: #999;
 }
 
-#changelist #changelist-search img {
+#changelist-search img {
     vertical-align: middle;
     margin-right: 4px;
 }
@@ -121,14 +128,11 @@
 /* FILTER COLUMN */
 
 #changelist-filter {
-    position: absolute;
-    top: 0;
-    right: 0;
-    z-index: 1000;
+    order: 1;
     width: 240px;
     background: #f8f8f8;
     border-left: none;
-    margin: 0;
+    margin: 0 0 0 30px;
 }
 
 #changelist-filter h2 {
@@ -227,6 +231,7 @@
     line-height: 22px;
     margin: 0;
     border-top: 1px solid #ddd;
+    width: 100%;
 }
 
 .paginator a:link, .paginator a:visited {
@@ -266,7 +271,6 @@
 /* ACTIONS */
 
 .filtered .actions {
-    margin-right: 280px;
     border-right: none;
 }
 
@@ -286,6 +290,7 @@
     border-bottom: none;
     line-height: 24px;
     color: #999;
+    width: 100%;
 }
 
 #changelist .actions.selected {

static/admin/css/forms.6230fc2a74ac.css

@@ -430,6 +430,7 @@ body.popup .submit-row {
 
 .inline-related.tabular fieldset.module table {
     width: 100%;
+    overflow-x: scroll;
 }
 
 .last-related fieldset {

static/admin/css/forms.css

@@ -430,6 +430,7 @@ body.popup .submit-row {
 
 .inline-related.tabular fieldset.module table {
     width: 100%;
+    overflow-x: scroll;
 }
 
 .last-related fieldset {

static/admin/css/nav_sidebar.59831780a474.css

@@ -71,6 +71,7 @@
 
 #nav-sidebar .module th {
     width: 100%;
+    overflow-wrap: anywhere;
 }
 
 #nav-sidebar .module th,
@@ -78,6 +79,10 @@
     padding-left: 16px;
 }
 
+#nav-sidebar .module td {
+    white-space: nowrap;
+}
+
 [dir="rtl"] #nav-sidebar .module th,
 [dir="rtl"] #nav-sidebar .module caption {
     padding-left: 8px;
@@ -94,8 +99,21 @@
     background: #ffc;
 }
 
+.main > #nav-sidebar + .content {
+    max-width: calc(100% - 23px);
+}
+
+.main.shifted > #nav-sidebar + .content {
+    max-width: calc(100% - 299px);
+}
+
 @media (max-width: 767px) {
     #nav-sidebar, #toggle-nav-sidebar {
         display: none;
     }
+
+    .main > #nav-sidebar + .content,
+    .main.shifted > #nav-sidebar + .content {
+        max-width: 100%;
+    }
 }

static/admin/css/nav_sidebar.css

@@ -71,6 +71,7 @@
 
 #nav-sidebar .module th {
     width: 100%;
+    overflow-wrap: anywhere;
 }
 
 #nav-sidebar .module th,
@@ -78,6 +79,10 @@
     padding-left: 16px;
 }
 
+#nav-sidebar .module td {
+    white-space: nowrap;
+}
+
 [dir="rtl"] #nav-sidebar .module th,
 [dir="rtl"] #nav-sidebar .module caption {
     padding-left: 8px;
@@ -94,8 +99,21 @@
     background: #ffc;
 }
 
+.main > #nav-sidebar + .content {
+    max-width: calc(100% - 23px);
+}
+
+.main.shifted > #nav-sidebar + .content {
+    max-width: calc(100% - 299px);
+}
+
 @media (max-width: 767px) {
     #nav-sidebar, #toggle-nav-sidebar {
         display: none;
     }
+
+    .main > #nav-sidebar + .content,
+    .main.shifted > #nav-sidebar + .content {
+        max-width: 100%;
+    }
 }

static/admin/css/responsive.0ed741a014cf.css

@@ -93,14 +93,14 @@ input[type="submit"], button {
 
     /* Changelist */
 
-    #changelist #toolbar {
+    #toolbar {
         border: none;
         padding: 15px;
     }
 
     #changelist-search > div {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         max-width: 480px;
     }
 
@@ -108,15 +108,20 @@ input[type="submit"], button {
         line-height: 22px;
     }
 
-    #changelist #toolbar form #searchbar {
+    #toolbar form #searchbar {
         flex: 1 0 auto;
         width: 0;
         height: 22px;
         margin: 0 10px 0 6px;
     }
 
+    #toolbar form input[type=submit] {
+        flex: 0 1 auto;
+    }
+
     #changelist-search .quiet {
-        width: 100%;
+        width: 0;
+        flex: 1 0 auto;
         margin: 5px 0 0 25px;
     }
 
@@ -159,9 +164,6 @@ input[type="submit"], button {
     .change-list .filtered .paginator,
     .filtered #toolbar,
     .filtered .actions,
-    .filtered div.xfull {
-        margin-right: 230px;
-    }
 
     #changelist .paginator {
         border-top-color: #eee;
@@ -215,7 +217,7 @@ input[type="submit"], button {
     }
 
     textarea {
-        max-width: 518px;
+        max-width: 100%;
         max-height: 120px;
     }
 
@@ -500,25 +502,16 @@ input[type="submit"], button {
     /* Changelist */
 
     #changelist {
-        display: flex;
+        align-items: stretch;
         flex-direction: column;
     }
 
-    #changelist #toolbar {
-        order: 1;
+    #toolbar {
         padding: 10px;
     }
 
-    #changelist .xfull {
-        order: 2;
-    }
-
-    #changelist-form {
-        order: 3;
-    }
-
     #changelist-filter {
-        order: 4;
+        margin-left: 0;
     }
 
     #changelist .actions label {
@@ -534,11 +527,6 @@ input[type="submit"], button {
         flex: 1 0 100%;
     }
 
-    .change-list .filtered .results, .change-list .filtered .paginator,
-    .filtered #toolbar, .filtered .actions, .filtered div.xfull {
-        margin-right: 0;
-    }
-
     #changelist-filter {
         position: static;
         width: auto;

static/admin/css/responsive.css

@@ -93,14 +93,14 @@ input[type="submit"], button {
 
     /* Changelist */
 
-    #changelist #toolbar {
+    #toolbar {
         border: none;
         padding: 15px;
     }
 
     #changelist-search > div {
         display: flex;
-        flex-wrap: wrap;
+        flex-wrap: nowrap;
         max-width: 480px;
     }
 
@@ -108,15 +108,20 @@ input[type="submit"], button {
         line-height: 22px;
     }
 
-    #changelist #toolbar form #searchbar {
+    #toolbar form #searchbar {
         flex: 1 0 auto;
         width: 0;
         height: 22px;
         margin: 0 10px 0 6px;
     }
 
+    #toolbar form input[type=submit] {
+        flex: 0 1 auto;
+    }
+
     #changelist-search .quiet {
-        width: 100%;
+        width: 0;
+        flex: 1 0 auto;
         margin: 5px 0 0 25px;
     }
 
@@ -159,9 +164,6 @@ input[type="submit"], button {
     .change-list .filtered .paginator,
     .filtered #toolbar,
     .filtered .actions,
-    .filtered div.xfull {
-        margin-right: 230px;
-    }
 
     #changelist .paginator {
         border-top-color: #eee;
@@ -215,7 +217,7 @@ input[type="submit"], button {
     }
 
     textarea {
-        max-width: 518px;
+        max-width: 100%;
         max-height: 120px;
     }
 
@@ -500,25 +502,16 @@ input[type="submit"], button {
     /* Changelist */
 
     #changelist {
-        display: flex;
+        align-items: stretch;
         flex-direction: column;
     }
 
-    #changelist #toolbar {
-        order: 1;
+    #toolbar {
         padding: 10px;
     }
 
-    #changelist .xfull {
-        order: 2;
-    }
-
-    #changelist-form {
-        order: 3;
-    }
-
     #changelist-filter {
-        order: 4;
+        margin-left: 0;
     }
 
     #changelist .actions label {
@@ -534,11 +527,6 @@ input[type="submit"], button {
         flex: 1 0 100%;
     }
 
-    .change-list .filtered .results, .change-list .filtered .paginator,
-    .filtered #toolbar, .filtered .actions, .filtered div.xfull {
-        margin-right: 0;
-    }
-
     #changelist-filter {
         position: static;
         width: auto;

static/admin/css/responsive_rtl.css

@@ -23,9 +23,9 @@
     [dir="rtl"] .change-list .filtered .paginator,
     [dir="rtl"] .filtered #toolbar,
     [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
-        margin-right: 0;
-        margin-left: 230px;
+    [dir="rtl"] .filtered .actions,
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
     }
 
     [dir="rtl"] .inline-group ul.tools a.add,
@@ -63,14 +63,6 @@
 /* MOBILE */
 
 @media (max-width: 767px) {
-    [dir="rtl"] .change-list .filtered .results,
-    [dir="rtl"] .change-list .filtered .paginator,
-    [dir="rtl"] .filtered #toolbar,
-    [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
-        margin-left: 0;
-    }
-
     [dir="rtl"] .aligned .related-lookup,
     [dir="rtl"] .aligned .datetimeshortcuts {
         margin-left: 0;
@@ -80,4 +72,9 @@
     [dir="rtl"] .aligned ul {
         margin-right: 0;
     }
+
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+        margin-right: 0;
+    }
 }

static/admin/css/responsive_rtl.e13ae754cceb.css

@@ -23,9 +23,9 @@
     [dir="rtl"] .change-list .filtered .paginator,
     [dir="rtl"] .filtered #toolbar,
     [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
-        margin-right: 0;
-        margin-left: 230px;
+    [dir="rtl"] .filtered .actions,
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
     }
 
     [dir="rtl"] .inline-group ul.tools a.add,
@@ -63,14 +63,6 @@
 /* MOBILE */
 
 @media (max-width: 767px) {
-    [dir="rtl"] .change-list .filtered .results,
-    [dir="rtl"] .change-list .filtered .paginator,
-    [dir="rtl"] .filtered #toolbar,
-    [dir="rtl"] .filtered div.xfull,
-    [dir="rtl"] .filtered .actions {
-        margin-left: 0;
-    }
-
     [dir="rtl"] .aligned .related-lookup,
     [dir="rtl"] .aligned .datetimeshortcuts {
         margin-left: 0;
@@ -80,4 +72,9 @@
     [dir="rtl"] .aligned ul {
         margin-right: 0;
     }
+
+    [dir="rtl"] #changelist-filter {
+        margin-left: 0;
+        margin-right: 0;
+    }
 }

static/admin/css/rtl.775b89eb85cb.css

@@ -109,15 +109,10 @@ thead th.sorted .text {
 }
 
 #changelist-filter {
-    right: auto;
-    left: 0;
     border-left: none;
     border-right: none;
-}
-
-.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
-    margin-right: 0;
-    margin-left: 280px;
+    margin-left: 0;
+    margin-right: 30px;
 }
 
 #changelist-filter li.selected {
@@ -129,11 +124,6 @@ thead th.sorted .text {
     margin-right: -15px;
 }
 
-.filtered .actions {
-    margin-left: 280px;
-    margin-right: 0;
-}
-
 #changelist table tbody td:first-child, #changelist table tbody th:first-child {
     border-right: none;
     border-left: none;

static/admin/css/rtl.css

@@ -109,15 +109,10 @@ thead th.sorted .text {
 }
 
 #changelist-filter {
-    right: auto;
-    left: 0;
     border-left: none;
     border-right: none;
-}
-
-.change-list .filtered .results, .change-list .filtered .paginator, .filtered #toolbar, .filtered div.xfull {
-    margin-right: 0;
-    margin-left: 280px;
+    margin-left: 0;
+    margin-right: 30px;
 }
 
 #changelist-filter li.selected {
@@ -129,11 +124,6 @@ thead th.sorted .text {
     margin-right: -15px;
 }
 
-.filtered .actions {
-    margin-left: 280px;
-    margin-right: 0;
-}
-
 #changelist table tbody td:first-child, #changelist table tbody th:first-child {
     border-right: none;
     border-left: none;

static/babybuddy/css/app.css

@@ -7617,6 +7617,9 @@ a.text-error:hover, a.text-error:focus {
   background-color: inherit;
   border-color: inherit; }
 
+.boolean-label {
+  pointer-events: none; }
+
 .bootstrap-datetimepicker-widget {
   color: #ced4da; }
 

static/babybuddy/css/app.ddc6abfed408.css

@@ -7617,6 +7617,9 @@ a.text-error:hover, a.text-error:focus {
   background-color: inherit;
   border-color: inherit; }
 
+.boolean-label {
+  pointer-events: none; }
+
 .bootstrap-datetimepicker-widget {
   color: #ced4da; }
 

static/babybuddy/js/app.e50e8057bfa2.js

@@ -66,7 +66,6 @@ BabyBuddy.PullToRefresh = function(ptr) {
 $("form").on("submit", function() {
     $(this).find("button[type='submit']").prop('disabled', true);
 });
-
 /* Baby Buddy Timer
  *
  * Uses a supplied ID to run a timer. The element using the ID must have

static/babybuddy/js/app.js

@@ -66,7 +66,6 @@ BabyBuddy.PullToRefresh = function(ptr) {
 $("form").on("submit", function() {
     $(this).find("button[type='submit']").prop('disabled', true);
 });
-
 /* Baby Buddy Timer
  *
  * Uses a supplied ID to run a timer. The element using the ID must have