Tweaks for settings pages

InvenTree/InvenTree/settings.py

@@ -644,7 +644,7 @@ DATE_INPUT_FORMATS = [
 ]
 
 # crispy forms use the bootstrap templates
-CRISPY_TEMPLATE_PACK = 'bootstrap3'
+CRISPY_TEMPLATE_PACK = 'bootstrap4'
 
 # Use database transactions when importing / exporting data
 IMPORT_EXPORT_USE_TRANSACTIONS = True

InvenTree/InvenTree/static/css/inventree.css

@@ -10,6 +10,8 @@
     --label-green: #50aa51;
     --label-grey: #aaa;
     --label-yellow: #fdc82a;
+
+    --bs-body-color: #555;
 }
 
 .login-screen {
@@ -144,18 +146,16 @@
     padding-right: 5px;
 }
 
-.navbar-nav > li {
-    border-left: 1px solid;
-    border-right: 1px solid;
-    border-color: #eee;
-}
-
 .navbar-form {
     padding-right: 3px;
 }
 
+.navbar-light .navbar-nav .nav-link {
+    color: var(--bs-body-color);
+}
+
 #barcode-scan {
-    margin-top: 8px;
+    margin-top: 1px;
 }
 
 .icon-header {
@@ -895,6 +895,16 @@ input[type="submit"] {
     margin-right: 2px;
 }
 
+.btn-secondary {
+    background-color: var(--bs-body-color);
+    border-color: var(--bs-body-color);
+}
+
+.btn-outline-secondary {
+    color: var(--bs-body-color);
+    border-color: var(--bs-body-color);
+}
+
 .btn-small {
     padding: 3px;
     padding-left: 5px;

InvenTree/part/templates/part/category.html

@@ -85,7 +85,6 @@
     </tr>
 </table>
 {% else %}
-<h3>{% trans "Category Details" %}</h3>
 <table class='table table-striped table-condensed'>
     <col width='25'>
     <tr>

InvenTree/part/templates/part/part_base.html

@@ -150,9 +150,9 @@
     <table class='table table-condensed table-striped'>
         <col width='25'>
         <tr>
-            <td><h4><span class='fas fa-boxes'></span></h4></td>
+            <td><h5><span class='fas fa-boxes'></span></h5></td>
-            <td><h4>{% trans "Available Stock" %}</h4></td>
+            <td><h5>{% trans "Available Stock" %}</h5></td>
-            <td><h4>{% decimal available %}{% if part.units %} {{ part.units }}{% endif %}</h4></td>
+            <td><h5>{% decimal available %}{% if part.units %} {{ part.units }}{% endif %}</h5></td>
         </tr>
         <tr>
             <td><span class='fas fa-map-marker-alt'></span></td>
@@ -191,9 +191,9 @@
         {% if not part.is_template %}
         {% if part.assembly %}
         <tr>
-            <td><h4><span class='fas fa-tools'></span></h4></td>
+            <td><h5><span class='fas fa-tools'></span></h5></td>
             <td colspan='2'>
-                <h4>{% trans "Build Status" %}</h4>
+                <h5>{% trans "Build Status" %}</h5>
             </td>
         </tr>
         <tr>
@@ -424,42 +424,4 @@
     });
     {% endif %}
 
-    $("#toggle-part-details").click(function() {
-        if (this.value == 'show') {
-            this.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
-            this.value = 'hide';
-            // Store state of part details section
-            localStorage.setItem("part-details-show", true);
-        } else {
-            this.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
-            this.value = 'show';
-            // Store state of part details section
-            localStorage.setItem("part-details-show", false);
-        }
-    });
-
-    // Load part details section
-    window.onload = function() {
-        details_show = localStorage.getItem("part-details-show")
-
-        if (details_show === 'true') {
-            console.log(details_show)
-            // Get collapsible details section
-            details = document.getElementById('collapsible-part-details');
-            // Add "show" class
-            details.classList.add("in");
-            // Get toggle
-            toggle = document.getElementById('toggle-part-details');
-            // Change state of toggle
-            toggle.innerHTML = '<span class="fas fa-chevron-up"></span> {% trans "Hide Part Details" %}';
-            toggle.value = 'hide';
-        } else {
-            // Get toggle
-            toggle = document.getElementById('toggle-part-details');
-            // Change state of toggle
-            toggle.innerHTML = '<span class="fas fa-chevron-down"></span> {% trans "Show Part Details" %}';
-            toggle.value = 'show';
-        }
-    }
-
 {% endblock %}

InvenTree/stock/templates/stock/location.html

@@ -115,7 +115,6 @@
     </tr>
 </table>
 {% else %}
-<h3>{% trans "Stock Details" %}</h3>
 <table class='table table-striped table-condensed'>
     <col width='25'>
     <tr>

InvenTree/templates/InvenTree/settings/barcode.html

@@ -11,7 +11,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="BARCODE_ENABLE" icon="fa-qrcode" %}
     </tbody>

InvenTree/templates/InvenTree/settings/build.html

@@ -11,7 +11,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="BUILDORDER_REFERENCE_PREFIX" %}
         {% include "InvenTree/settings/setting.html" with key="BUILDORDER_REFERENCE_REGEX" %}

InvenTree/templates/InvenTree/settings/currencies.html

@@ -11,7 +11,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="INVENTREE_DEFAULT_CURRENCY" icon="fa-globe" %}
     </tbody>
@@ -45,7 +44,7 @@
                 <form action='{% url "settings-currencies-refresh" %}' method='post'>
                     <div id='refresh-rates-form'>
                         {% csrf_token %}
-                        <button type='submit' id='update-rates' class='btn btn-default float-right'>{% trans "Update Now" %}</button>
+                        <button type='submit' id='update-rates' class='btn btn-outline-secondary float-right'>{% trans "Update Now" %}</button>
                     </div>
                 </form>
             </td>

InvenTree/templates/InvenTree/settings/global.html

@@ -12,7 +12,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="INVENTREE_INSTANCE" icon="fa-info-circle" %}
         {% include "InvenTree/settings/setting.html" with key="INVENTREE_INSTANCE_TITLE" icon="fa-info-circle" %}

InvenTree/templates/InvenTree/settings/header.html

@@ -1,12 +0,0 @@
-{% load i18n %}
-
-<col width='25'>
-<thead>
-    <tr>
-        <th></th>
-        <th>{% trans "Setting" %}</th>
-        <th>{% trans "Value" %}</th>
-        <th>{% trans "Description" %}</th>
-        <th></th>
-    </tr>
-</thead>

InvenTree/templates/InvenTree/settings/login.html

@@ -12,7 +12,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="LOGIN_ENABLE_SSO" icon="fa-info-circle" %}
         {% include "InvenTree/settings/setting.html" with key="LOGIN_ENABLE_PWD_FORGOT" icon="fa-info-circle" %}

InvenTree/templates/InvenTree/settings/part.html

@@ -12,7 +12,6 @@
 <h4>{% trans "Part Options" %}</h4>
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="PART_IPN_REGEX" %}
         {% include "InvenTree/settings/setting.html" with key="PART_ALLOW_DUPLICATE_IPN" %}
@@ -49,7 +48,6 @@
 
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="PART_SHOW_IMPORT" icon="fa-file-upload" %}
     </tbody>

InvenTree/templates/InvenTree/settings/po.html

@@ -9,7 +9,6 @@
 
 {% block content %}
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="PURCHASEORDER_REFERENCE_PREFIX" %}
     </tbody>

InvenTree/templates/InvenTree/settings/report.html

@@ -11,7 +11,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="REPORT_DEFAULT_PAGE_SIZE" %}
         {% include "InvenTree/settings/setting.html" with key="REPORT_DEBUG_MODE" %}

InvenTree/templates/InvenTree/settings/setting.html

@@ -38,7 +38,7 @@
     </td>
     <td>
         <div class='btn-group float-right'>
-            <button class='btn btn-default btn-edit-setting' pk='{{ setting.pk }}' setting='{{ setting.key.upper }}' title='{% trans "Edit setting" %}' {% if user_setting %}user='{{request.user.id}}'{% endif %}>
+            <button class='btn btn-outline-secondary btn-small btn-edit-setting' pk='{{ setting.pk }}' setting='{{ setting.key.upper }}' title='{% trans "Edit setting" %}' {% if user_setting %}user='{{request.user.id}}'{% endif %}>
                 <span class='fas fa-edit icon-green'></span>
             </button>
         </div>

InvenTree/templates/InvenTree/settings/settings.html

@@ -174,8 +174,8 @@ $('#cat-param-table').inventreeTable({
             title: '{% trans "Default Value" %}',
             sortable: 'true',
             formatter: function(value, row, index, field) {
-                var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-default' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
+                var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-outline-secondary' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
-                var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-default' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
+                var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-outline-secondary' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
 
                 var html = value
                 html += "<div class='btn-group float-right' role='group'>" + bEdit + bDel + "</div>";
@@ -273,8 +273,8 @@ $("#param-table").inventreeTable({
         },
         {
             formatter: function(value, row, index, field) {
-                var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-default' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
+                var bEdit = "<button title='{% trans "Edit Template" %}' class='template-edit btn btn-outline-secondary' type='button' pk='" + row.pk + "'><span class='fas fa-edit'></span></button>";
-                var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-default' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
+                var bDel = "<button title='{% trans "Delete Template" %}' class='template-delete btn btn-outline-secondary' type='button' pk='" + row.pk + "'><span class='fas fa-trash-alt icon-red'></span></button>";
 
                 var html = "<div class='btn-group float-right' role='group'>" + bEdit + bDel + "</div>";
 

InvenTree/templates/InvenTree/settings/so.html

@@ -10,7 +10,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="SALESORDER_REFERENCE_PREFIX" %}
     </tbody>

InvenTree/templates/InvenTree/settings/stock.html

@@ -10,7 +10,6 @@
 {% block content %}
 
 <table class='table table-striped table-condensed'>
-    {% include "InvenTree/settings/header.html" %}
     <tbody>
         {% include "InvenTree/settings/setting.html" with key="STOCK_GROUP_BY_PART" icon="fa-layer-group" %}
         {% include "InvenTree/settings/setting.html" with key="STOCK_ENABLE_EXPIRY" icon="fa-stopwatch" %}

InvenTree/templates/InvenTree/settings/user_homepage.html

@@ -13,7 +13,6 @@
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
-        {% include "InvenTree/settings/header.html" %}
         <tbody>
             {% include "InvenTree/settings/setting.html" with key="HOMEPAGE_PART_STARRED" icon='fa-star' user_setting=True %}
             {% include "InvenTree/settings/setting.html" with key="HOMEPAGE_PART_LATEST" icon='fa-history' user_setting=True %}

InvenTree/templates/InvenTree/settings/user_labels.html

@@ -13,7 +13,6 @@
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
-        {% include "InvenTree/settings/header.html" %}
         <tbody>
             {% include "InvenTree/settings/setting.html" with key="LABEL_INLINE" icon='fa-tag' user_setting=True %}
         </tbody>

InvenTree/templates/InvenTree/settings/user_reports.html

@@ -13,7 +13,6 @@
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
-        {% include "InvenTree/settings/header.html" %}
         <tbody>
             {% include "InvenTree/settings/setting.html" with key="REPORT_INLINE" icon='fa-file-pdf' user_setting=True %}
         </tbody>

InvenTree/templates/InvenTree/settings/user_search.html

@@ -13,7 +13,6 @@
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
-        {% include "InvenTree/settings/header.html" %}
         <tbody>
             {% include "InvenTree/settings/setting.html" with key="SEARCH_PREVIEW_RESULTS" user_setting=True icon='fa-search' %}
             {% include "InvenTree/settings/setting.html" with key="SEARCH_SHOW_STOCK_LEVELS" user_setting=True icon='fa-boxes' %}

InvenTree/templates/InvenTree/settings/user_settings.html

@@ -13,7 +13,6 @@
 
 <div class='row'>
     <table class='table table-striped table-condensed'>
-        {% include "InvenTree/settings/header.html" %}
 
     </table>
 </div>