More fixes

- About modal
- Server-side modals
- icon badges
- checkboxes in API forms

InvenTree/InvenTree/static/css/inventree.css

@@ -229,8 +229,6 @@
     padding: 5px 10px;
 }
 
-/* Bootstrap table overrides */
-
 .stock-sub-group td {
     background-color: #ebf4f4;
 }
@@ -392,6 +390,10 @@
     font-size: 90%;
 }
 
+.table-condensed td {
+    padding: .25em .5em;
+}
+
 /* grid display for part images */
 
 .table-img-grid tr {
@@ -436,6 +438,12 @@
     float: right;
 }
 
+.icon-badge {
+    padding-right: 2px;
+    padding-left: 2px;
+    font-size: 125%;
+}
+
 .part-properties > span {
     padding-left: 5px;
     padding-right: 5px;
@@ -473,6 +481,10 @@
     padding-right: 5px;
 }
 
+.form-switch {
+    font-size: 120%;
+}
+
 .media {
     /* padding-top: 15px; */
     overflow: visible;
@@ -1015,4 +1027,9 @@ input[type='number']{
 
 .borderless {
     border: none;
+}
+
+a {
+    text-decoration: none;
+    background-color: transparent;
 }

InvenTree/templates/about.html

@@ -6,11 +6,9 @@
     <div class='modal-dialog'>
         <div class='modal-content'>
             <div class="modal-header">
-              <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+              <img src="{% static 'img/inventree.png' %}" height='40px' style='float: left; padding-right: 25px;' alt='Inventree Logo'>
-                <span aria-hidden="true">&times;</span>
+              <h4>{% trans "InvenTree Version Information" %}</h4>
-              </button>
+              <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='{% trans "Close" %}'></button>
-              <img src="{% static 'img/inventree.png' %}" height='60' style='float: left;' alt='Inventree Logo'>
-              <h3>{% trans "InvenTree Version Information" %}</h3>
             </div>
             <div class='modal-form-content-wrapper'>
                 <div class='modal-form-content'>

InvenTree/templates/js/translated/forms.js

@@ -1815,7 +1815,11 @@ function constructField(name, parameters, options) {
     }
 
     if (parameters.help_text && !options.hideLabels) {
-        html += constructHelpText(name, parameters, options);
+
+        // Boolean values are handled differently!
+        if (parameters.type != 'boolean') {
+            html += constructHelpText(name, parameters, options);
+        }
     }
 
     // Div for error messages
@@ -1990,7 +1994,6 @@ function constructInputOptions(name, classes, type, parameters) {
 
     switch (parameters.type) {
     case 'boolean':
-        opts.push(`style='display: inline-block; width: 20px; margin-right: 20px;'`);
         break;
     case 'integer':
     case 'float':
@@ -2003,6 +2006,15 @@ function constructInputOptions(name, classes, type, parameters) {
 
     if (parameters.multiline) {
         return `<textarea ${opts.join(' ')}></textarea>`;
+    } else if (parameters.type == 'boolean') {
+        return `
+        <div class='form-check form-switch'>
+            <input ${opts.join(' ')}>
+            <label class='form-check-label' for=''>
+                <em><small>${parameters.help_text}</small></em>
+            </label>
+        </div>
+        `;
     } else {
         return `<input ${opts.join(' ')}>`;
     }
@@ -2187,13 +2199,7 @@ function constructRawInput(name, parameters) {
  */
 function constructHelpText(name, parameters) {
     
-    var style = '';
+    var html = `<div id='hint_id_${name}' class='help-block'><i>${parameters.help_text}</i></div>`;
-
-    if (parameters.type == 'boolean') {
-        style = `style='display: inline-block; margin-left: 25px' `;
-    }
-
-    var html = `<div id='hint_id_${name}' ${style}class='help-block'><i>${parameters.help_text}</i></div>`;
 
     return html;
 }

InvenTree/templates/js/translated/helpers.js

@@ -92,7 +92,7 @@ function select2Thumbnail(image) {
  */
 function makeIconBadge(icon, title) {
 
-    var html = `<span class='fas ${icon} float-right' title='${title}'></span>`;
+    var html = `<span class='icon-badge fas ${icon} float-right' title='${title}'></span>`;
 
     return html;
 }

InvenTree/templates/modals.html

@@ -35,10 +35,8 @@
         <div class='modal-dialog'>
             <div class='modal-content'>
                 <div class="modal-header">
-                  <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
+                  <h4 id='modal-title'><em>Form Title Here</em></h4>
-                    <span aria-hidden="true">&times;</span>
+                  <button type='button' class='btn-close' data-bs-dismiss='modal' aria-label='{% trans "Close" %}'></button>
-                  </button>
-                  <h3 id='modal-title'><em>Form Title Here</em></h3>
                 </div>
                 <div class='modal-form-content-wrapper'>
                   <div class='alert alert-block alert-danger' id='form-validation-warning' style="display: none;">