Merge pull request #2262 from matmair/ui-tweaks

Small UI tweaks

InvenTree/InvenTree/static/css/inventree.css

@@ -125,12 +125,6 @@
     align-content: center;
 }
 
-.qr-container {
-    width: 100%;
-    align-content: center;
-    object-fit: fill;
-}
-
 .navbar {
     border-bottom: 1px solid #ccc;
     background-color: var(--secondary-color);
@@ -545,6 +539,7 @@
 .inventree-body {
     width: 100%;
     padding: 5px;
+    padding-right: 0;
 }
 
 .inventree-pre-content {
@@ -835,7 +830,7 @@ input[type="submit"] {
 
 .panel {
     box-shadow: 2px 2px #DDD;
-    margin-bottom: 20px;
+    margin-bottom: .75rem;
     background-color: #fff;
     border: 1px solid #ccc;
 }

InvenTree/templates/base.html

@@ -83,7 +83,7 @@
                 </div>
             </div>
         </div>
-        <main class='col ps-md-2 pt-2'>
+        <main class='col ps-md-2 pt-2 pe-2'>
 
             {% block alerts %}
             <div class='notification-area' id='alerts'>

InvenTree/templates/navbar.html

@@ -10,9 +10,6 @@
     <div class="navbar-header clearfix content-heading">
       <a class="navbar-brand" id='logo' href="{% url 'index' %}" style="padding-top: 7px; padding-bottom: 5px;"><img src="{% static 'img/inventree.png' %}" width="32" height="32" style="display:block; margin: auto;"/></a>
     </div>
-    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-objects" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
     <div class="navbar-collapse collapse" id="navbar-objects">
       <ul class="navbar-nav">
         {% if roles.part.view %}
@@ -62,14 +59,19 @@
       </ul>
     </div>
     {% include "search_form.html" %}
-    <ul class='navbar-nav'>
+    <ul class='navbar-nav flex-row'>
       {% if barcodes %}
-      <li id='navbar-barcode-li'>
+      <li class='nav-item' id='navbar-barcode-li'>
         <button id='barcode-scan' class='btn btn-secondary' title='{% trans "Scan Barcode" %}'>
           <span class='fas fa-qrcode'></span>
         </button>
       </li>
       {% endif %}
+      <li class='nav-item' id='navbar-barcode-li'>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-objects" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </li>
       <li class='nav-item dropdown'>
         <a class='nav-link dropdown-toggle' href='#' id='userMenuDropdown' role='button' data-bs-toggle='dropdown'>
           <span class='fas fa-user'></span> <strong>{{ user.get_username }}</strong>
@@ -108,7 +110,6 @@
         </ul>
       </li>
     </ul>
-
   </div>
 </nav>
 

InvenTree/templates/qr_code.html

@@ -3,7 +3,7 @@
 
 <div class='container' style='width: 80%;'>
     {% if qr_data %}
-    <div class='qr-container'>
+    <div class='d-flex justify-content-center'>
         <img src="{% qrcode qr_data %}">
     </div>
     {% else %}