Refactor build page

InvenTree/InvenTree/static/css/inventree.css

@@ -564,8 +564,6 @@
     margin: 2px;
     padding: 3px;
     object-fit: contain;
-    border: 1px solid #ddd;
-    border-radius: 3px;
 }
 
 .part-thumb-container:hover .part-thumb-overlay {
@@ -974,6 +972,10 @@ input[type="submit"] {
     display: none;
 }
 
+.panel-inventree .card {
+    padding: 10px;
+}
+
 .float-right {
     float: right;
 }

InvenTree/build/templates/build/build_base.html

@@ -14,63 +14,59 @@
 <li class="breadcrumb-item active" aria-current="page"><a href='{% url "build-detail" build.id %}'>{{ build }}</a></li>
 {% endblock %}
 
-{% block heading %}
-<h4>
-    {% trans "Build Order" %}
-    {% if user.is_staff and roles.build.change %}
-    <a  href="{% url 'admin:build_build_change' build.pk %}"><span title="{% trans 'Admin view' %}" class='fas fa-user-shield'></span></a>
-    {% endif %}
-</h4>
-{% endblock %}
-
 {% block details_left %}
-
+<div class='row g-0'>
-<div class='media-left'>
+    <div class='col-md-4'>
-    <img class="part-thumb"
+        <img class="part-thumb"
-    {% if build.part.image %}
+        {% if build.part.image %}
-    src="{{ build.part.image.url }}"
+        src="{{ build.part.image.url }}"
-    {% else %}
+        {% else %}
-    src="{% static 'img/blank_image.png' %}"
+        src="{% static 'img/blank_image.png' %}"
-    {% endif %}/>
+        {% endif %}/>            
-</div>
+    </div>
-
+    <div class='col-md-8'>
-<div class='media-body'>
+        <h4>
-    <div class='btn-group' role='group'>
+            {% trans "Build Order" %} {{ build }}
-        <!-- Printing options -->
+            {% if user.is_staff and roles.build.change %}
-        <div class='btn-group'>
+            <a  href="{% url 'admin:build_build_change' build.pk %}"><span title="{% trans 'Admin view' %}" class='fas fa-user-shield'></span></a>
-            <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+            {% endif %}
-                <span class='fas fa-print'></span> <span class='caret'></span>
+        </h4>
+        <div class='btn-group' role='group'>
+            <!-- Printing options -->
+            <div class='btn-group'>
+                <button id='print-options' title='{% trans "Print actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+                    <span class='fas fa-print'></span> <span class='caret'></span>
+                </button>
+                <ul class='dropdown-menu' role='menu'>
+                    <li><a class='dropdown-item' href='#' id='print-build-report'><span class='fas fa-file-pdf'></span> {% trans "Print build order report" %}</a></li>
+                </ul>
+            </div>
+            <!-- Build actions -->
+            {% if roles.build.change %}
+            <div class='btn-group'>
+                <button id='build-options' title='{% trans "Build actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
+                    <span class='fas fa-tools'></span> <span class='caret'></span>
+                </button>
+                <ul class='dropdown-menu' role='menu'>
+                    <li><a class='dropdown-item' href='#' id='build-edit'><span class='fas fa-edit icon-green'></span> {% trans "Edit Build" %}</a></li>
+                    {% if build.is_active %}
+                    <li><a class='dropdown-item' href='#' id='build-cancel'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel Build" %}</a></li>
+                    {% endif %}
+                    {% if build.status == BuildStatus.CANCELLED and roles.build.delete %}
+                    <li><a class='dropdown-item' href='#' id='build-delete'><span class='fas fa-trash-alt'></span> {% trans "Delete Build" %}</a>
+                    {% endif %}
+                </ul>
+            </div>
+            {% if build.active %}
+            <button id='build-complete' title='{% trans "Complete Build" %}' class='btn btn-success'>
+                <span class='fas fa-check-circle'></span>
             </button>
-            <ul class='dropdown-menu' role='menu'>
+            {% endif %}
-                <li><a class='dropdown-item' href='#' id='print-build-report'><span class='fas fa-file-pdf'></span> {% trans "Print build order report" %}</a></li>
+            {% endif %}
-            </ul>
         </div>
-        <!-- Build actions -->
-        {% if roles.build.change %}
-        <div class='btn-group'>
-            <button id='build-options' title='{% trans "Build actions" %}' class='btn btn-outline-secondary dropdown-toggle' type='button' data-bs-toggle='dropdown'>
-                <span class='fas fa-tools'></span> <span class='caret'></span>
-            </button>
-            <ul class='dropdown-menu' role='menu'>
-                <li><a class='dropdown-item' href='#' id='build-edit'><span class='fas fa-edit icon-green'></span> {% trans "Edit Build" %}</a></li>
-                {% if build.is_active %}
-                <li><a class='dropdown-item' href='#' id='build-cancel'><span class='fas fa-times-circle icon-red'></span> {% trans "Cancel Build" %}</a></li>
-                {% endif %}
-                {% if build.status == BuildStatus.CANCELLED and roles.build.delete %}
-                <li><a class='dropdown-item' href='#' id='build-delete'><span class='fas fa-trash-alt'></span> {% trans "Delete Build" %}</a>
-                {% endif %}
-            </ul>
-        </div>
-        {% if build.active %}
-        <button id='build-complete' title='{% trans "Complete Build" %}' class='btn btn-success'>
-            <span class='fas fa-check-circle'></span>
-        </button>
-        {% endif %}
-        {% endif %}
     </div>
 </div>
 
-
 {% endblock %}
 
 {% block details_right %}

InvenTree/templates/page_base.html

@@ -5,30 +5,28 @@
 
 {% block content %}
 
-<div class='panel panel-default panel-inventree'>
+<div class='panel panel-inventree'>
-    <div class='panel-heading'>
-        {% block heading %}
-        block heading
-        {% endblock %}
-    </div>
     <div class='panel-content'>
-        {% block details %}
         <div class='row'>
             <div class='col-sm-6' id='detail-panel-left'>
-                {% block details_left %}
+                <div class='card'>
-                block details_left
+                    {% block details_left %}
-                {% endblock %}
+                    block details_left
+                    {% endblock %}
+                </div>
             </div>
             <div class='col-sm-6' id='detail-panel-right'>
-                {% block details_right %}
+                <div class='card'>
-                block details_right
+                    {% block details_right %}
-                {% endblock %}
+                    block details_right
+                    {% endblock %}
+                </div>
             </div>
         </div>
-        {% endblock %}
     </div>
 </div>
 
+
 {% block page_content %}
 block page_content
 {% endblock %}