inventree/InvenTree
2
0
Fork 0
mirror of https://github.com/inventree/InvenTree.git synced 2025-04-29 12:06:44 +00:00
Code

Better CSS for side nav bars

Browse Source
This commit is contained in:
Oliver Walters 2021-02-23 18:01:42 +11:00
parent ad7a70f033
commit 15275d24b4
3 changed files with 64 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
InvenTree/InvenTree/static/css/inventree.css
View File

@ -589,15 +589,15 @@
} }
.inventree-pre-content { .inventree-pre-content {
width: 100%; width: auto;
clear: both;
} }
.inventree-content { .inventree-content {
padding-left: 5px; padding-left: 10px;
padding-right: 5px; padding-right: 10px;
padding-top: 5px; padding-top: 5px;
width: auto; width: 100%;
display: inline-block;
transition: 0.1s; transition: 0.1s;
} }
@ -674,14 +674,27 @@ input[type="submit"] {
background-color: #5e7d87; background-color: #5e7d87;
} }
.inventree-navs {
display: flex;
}
/* The side navigation menu */ /* The side navigation menu */
.sidenav { .menubar-left {
height: 100%; /* 100% Full-height */ height: 100%; /* 100% Full-height */
width: 0px; /* 0 width - change this with JavaScript */ width: 0px; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */ position: relative; /* Stay in place */
background-color: #fff; /* Black*/ background-color: #fff; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */ overflow-x: hidden; /* Disable horizontal scroll */
overflow: hidden;
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 */
left: 0px;
top: 0px;
z-index: 100;
display: inline-block;
}
.menubar-right {
display: none;
} }
.wrapper { .wrapper {

35
InvenTree/InvenTree/static/script/inventree/sidenav.js
View File

@ -67,20 +67,37 @@ function loadTree(url, tree, options={}) {
}); });
} }
function openSideNav() { function openSideNav(navId) {
document.getElementById("sidenav").style.display = "block"; // document.getElementById("sidenav").style.display = "block";
document.getElementById("sidenav").style.width = "250px"; // document.getElementById("sidenav").style.width = "250px";
document.getElementById("inventree-content").style.marginLeft = "270px";
if (!navId) {
navId = '#sidenav';
}
$(navId).animate({
width: '250px',
display: 'block'
}, 50);
sessionStorage.setItem('inventree-sidenav-state', 'open'); sessionStorage.setItem('inventree-sidenav-state', 'open');
} }
function closeSideNav() { function closeSideNav(navId) {
document.getElementById("sidenav").style.display = "none";
document.getElementById("sidenav").style.width = "0"; if (!navId) {
document.getElementById("inventree-content").style.marginLeft = "0px"; 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'); sessionStorage.setItem('inventree-sidenav-state', 'closed');
} }

26
InvenTree/templates/base.html
View File

@ -72,15 +72,25 @@ InvenTree
{% endblock %} {% endblock %}
</div> </div>
<div class='sidenav' id='sidenav'> <div class='inventree-navs'>
{% block sidenav %}
{% endblock %}
</div>
<div class="container container-fluid inventree-content" id='inventree-content'> <div class='menubar-left' id='sidenav'>
{% block content %} {% block sidenav %}
<!-- Each view fills in here.. --> <!-- Sidenav code here -->
{% endblock %} {% endblock %}
</div>
<div class="container container-fluid inventree-content" id='inventree-content'>
{% block content %}
<!-- Each view fills in here.. -->
{% endblock %}
<div class='menubar-right' id='sidenav-right'>
{% block menubar %}
<!-- Menubar code here -->
{% endblock %}
</div>
</div>
{% block post_content %} {% block post_content %}
{% endblock %} {% endblock %}