Improve CSS for main page

- Breadcrumb now appears above sidenav tree
- Better margin / etc

InvenTree/static/css/inventree.css

@@ -121,13 +121,26 @@
 .navigation {
 }
 
+.breadcrump {
+    margin-bottom: 5px;
+}
+
+.inventree-body {
+    width: 100%;
+    padding: 5px;
+    margin: 10px;
+}
+
+.inventree-pre-content {
+    width: 100%;
+    clear: both;
+}
+
 .inventree-content {
     padding-left: 5px;
     padding-right: 5px;
-    padding-top: 15px;
-    margin-right: 50px;
-    margin-left: 50px;
-    width: 100%;
+    padding-top: 5px;
+    width: auto;
     transition: 0.1s;
 }
 
@@ -173,7 +186,7 @@
     position: fixed; /* Stay in place */
     background-color: #fff; /* Black*/
     overflow-x: hidden; /* Disable horizontal scroll */
-    //transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
+    transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */
 }
 
 .wrapper {

InvenTree/static/script/inventree/sidenav.js

@@ -68,6 +68,7 @@ function loadTree(url, tree, options={}) {
 }
 
 function openSideNav() {
+    document.getElementById("sidenav").style.display = "block";
     document.getElementById("sidenav").style.width = "250px";
     document.getElementById("inventree-content").style.marginLeft = "270px";
 
@@ -77,8 +78,9 @@ function openSideNav() {
 }
 
 function closeSideNav() {
+    document.getElementById("sidenav").style.display = "none";
     document.getElementById("sidenav").style.width = "0";
-    document.getElementById("inventree-content").style.marginLeft = "50px";
+    document.getElementById("inventree-content").style.marginLeft = "0px";
 
     sessionStorage.setItem('inventree-sidenav-state', 'closed');
 }

InvenTree/templates/base.html

@@ -52,19 +52,26 @@ InvenTree
 
 <div class='main body wrapper'>
 
+<div class='inventree-body'>
+
+<div class='containter-fluid inventree-pre-content'>    
+    {% block pre_content %}
+    {% endblock %}
+</div>
+
 <div class='sidenav' id='sidenav'>
 {% block sidenav %}
 {% endblock %}
 </div>
-
+    
 <div class="container container-fluid inventree-content" id='inventree-content'>
-{% block pre_content %}
-{% endblock %}
 {% block content %}
 <!-- Each view fills in here.. -->
 {% endblock %}
+
 {% block post_content %}
 {% endblock %}
+
 </div>
 
 {% include 'modals.html' %}
@@ -72,6 +79,8 @@ InvenTree
 {% include 'notification.html' %}
 </div>
 
+</div>
+
 <!-- Scripts -->
 <script type="text/javascript" src="{% static 'script/jquery_3.3.1_jquery.min.js' %}"></script>
 <script type='text/javascript' src="{% static 'script/jquery.form.min.js' %}"></script>