From 15275d24b4734e5113f5e517f9d98bf3b5ba1a86 Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Tue, 23 Feb 2021 18:01:42 +1100 Subject: [PATCH 01/21] Better CSS for side nav bars --- InvenTree/InvenTree/static/css/inventree.css | 27 ++++++++++---- .../static/script/inventree/sidenav.js | 35 ++++++++++++++----- InvenTree/templates/base.html | 26 +++++++++----- 3 files changed, 64 insertions(+), 24 deletions(-) diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index 34c101e86d..bfac59e182 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -589,15 +589,15 @@ } .inventree-pre-content { - width: 100%; - clear: both; + width: auto; } .inventree-content { - padding-left: 5px; - padding-right: 5px; + padding-left: 10px; + padding-right: 10px; padding-top: 5px; - width: auto; + width: 100%; + display: inline-block; transition: 0.1s; } @@ -674,14 +674,27 @@ input[type="submit"] { background-color: #5e7d87; } +.inventree-navs { + display: flex; +} + /* The side navigation menu */ -.sidenav { +.menubar-left { height: 100%; /* 100% Full-height */ width: 0px; /* 0 width - change this with JavaScript */ - position: fixed; /* Stay in place */ + position: relative; /* Stay in place */ background-color: #fff; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ + overflow: hidden; transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */ + left: 0px; + top: 0px; + z-index: 100; + display: inline-block; +} + +.menubar-right { + display: none; } .wrapper { diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js index b2b4a84953..b5fcc70f47 100644 --- a/InvenTree/InvenTree/static/script/inventree/sidenav.js +++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js @@ -67,20 +67,37 @@ 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"; +function openSideNav(navId) { +// document.getElementById("sidenav").style.display = "block"; +// document.getElementById("sidenav").style.width = "250px"; + + if (!navId) { + navId = '#sidenav'; + } + + $(navId).animate({ + width: '250px', + display: 'block' + }, 50); sessionStorage.setItem('inventree-sidenav-state', 'open'); - } -function closeSideNav() { - document.getElementById("sidenav").style.display = "none"; - document.getElementById("sidenav").style.width = "0"; - document.getElementById("inventree-content").style.marginLeft = "0px"; +function closeSideNav(navId) { + + if (!navId) { + navId = '#sidenav'; + } + + $(navId).animate({ + width: 0, + display: 'none', + }, 50); + + //document.getElementById("sidenav").style.display = "none"; + //document.getElementById("sidenav").style.width = "0"; + //document.getElementById("inventree-content").style.marginLeft = "0px"; sessionStorage.setItem('inventree-sidenav-state', 'closed'); } diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index bb78e4a45d..fd0ad840f4 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -72,15 +72,25 @@ InvenTree {% endblock %} -
-{% block sidenav %} -{% endblock %} -
+
-
-{% block content %} - -{% endblock %} + + +
+ {% block content %} + + {% endblock %} + + +
{% block post_content %} {% endblock %} From 0016628b4102b830075fdd65a058b17591784eef Mon Sep 17 00:00:00 2001 From: Oliver Walters Date: Tue, 23 Feb 2021 19:38:28 +1100 Subject: [PATCH 02/21] Keep tree items constrained to a single line --- InvenTree/InvenTree/static/css/inventree.css | 36 ++++++++++++++----- .../static/script/inventree/sidenav.js | 2 +- InvenTree/templates/base.html | 4 +-- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/InvenTree/InvenTree/static/css/inventree.css b/InvenTree/InvenTree/static/css/inventree.css index bfac59e182..df4d59f95b 100644 --- a/InvenTree/InvenTree/static/css/inventree.css +++ b/InvenTree/InvenTree/static/css/inventree.css @@ -206,8 +206,19 @@ font-size: 10px; } +.sidenav-left .badge { + position: absolute; + right: 3px; + margin-right: 5px; +} + .treeview .list-group-item { - padding: 6px 12px; + padding: 10px 5px; +} + +.treeview .list-group-item .indent { + margin-left: 3px; + margin-right: 3px; } .list-group-item-condensed { @@ -678,23 +689,32 @@ input[type="submit"] { display: flex; } -/* The side navigation menu */ -.menubar-left { +.sidenav { height: 100%; /* 100% Full-height */ width: 0px; /* 0 width - change this with JavaScript */ position: relative; /* Stay in place */ - background-color: #fff; /* Black*/ overflow-x: hidden; /* Disable horizontal scroll */ overflow: hidden; transition: 0.1s; /* 0.5 second transition effect to slide in the sidenav */ - left: 0px; - top: 0px; z-index: 100; display: inline-block; + background-color: #fff; /* Black*/ } -.menubar-right { - display: none; +.sidenav li { + white-space: nowrap; + overflow-x: hidden; +} + +/* The side navigation menu */ +.sidenav-left { + left: 0px; + top: 0px; +} + +.sidenav-right { + right: 0px; + top: 0px; } .wrapper { diff --git a/InvenTree/InvenTree/static/script/inventree/sidenav.js b/InvenTree/InvenTree/static/script/inventree/sidenav.js index b5fcc70f47..55daba0d6a 100644 --- a/InvenTree/InvenTree/static/script/inventree/sidenav.js +++ b/InvenTree/InvenTree/static/script/inventree/sidenav.js @@ -76,7 +76,7 @@ function openSideNav(navId) { } $(navId).animate({ - width: '250px', + width: '150px', display: 'block' }, 50); diff --git a/InvenTree/templates/base.html b/InvenTree/templates/base.html index fd0ad840f4..e7743b5ebe 100644 --- a/InvenTree/templates/base.html +++ b/InvenTree/templates/base.html @@ -74,7 +74,7 @@ InvenTree
-