Gr1/husstanden
5
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Stretch sidenav height to 100%

Browse Source
This commit is contained in:
Emily 2019-04-25 21:13:44 +01:00
parent 3df7ee6d4f
commit c4a792ab13
4 changed files with 107 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
static/css/custom.css
View File

@ -1,4 +1,5 @@
body { html, body {
height: 100%;
background-color: #eee; background-color: #eee;
font-family: "Poppins", sans-serif; font-family: "Poppins", sans-serif;
} }

25
static/js/interact.js Normal file
View File

@ -0,0 +1,25 @@
function openCategory(DOM) {
DOM.parentNode.children[1].classList.remove("hidden");
}
function closeCategory(DOM) {
DOM.parentNode.children[1].classList.add("hidden");
}
function toggleCategory(DOM) {
let classes = DOM.parentNode.children[1].classList;
classes[classes.contains("hidden") ? "remove" : "add"]("hidden");
}
/*
function postPageLoad() {
let ent = document.getElementById("sidenav").children[1].children[0].children[0].children;
for (let i = 0; i < ent.length; i++) {
if (!ent[i].children[0].classList.contains("item"))
continue;
ent[i].children[0].onclick = toggleCategory(ent[i].children[0]);
}
}
*/

7
templates/layout/dash.html
View File

@ -10,9 +10,9 @@
<title>Husstanden</title> <title>Husstanden</title>
{% endif %} {% endif %}
</head> </head>
<body> <body style="height:100%">
<div class="p-2"> <div class="p-2" style="height:100%">
<div class="d-flex"> <div class="d-flex" style="height:100%">
<div class="col p-2" style="flex:0 0 320px;"> <div class="col p-2" style="flex:0 0 320px;">
{% include 'layout/includes/side_nav.html' %} {% include 'layout/includes/side_nav.html' %}
</div> </div>
@ -23,5 +23,6 @@
</div> </div>
</div> </div>
{% include 'layout/includes/boot-body.html' %} {% include 'layout/includes/boot-body.html' %}
<script src="{{ url_for('static', filename='js/interact.js') }}"></script>
</body> </body>
</html> </html>

100
templates/layout/includes/side_nav.html
View File

@ -1,4 +1,11 @@
<style> <style>
#sidenav-parent {
display: flex;
flex-direction: column;
height:100%;
min-height: 100%;
}
#sidenav { #sidenav {
background-color: #B507DB; background-color: #B507DB;
border-radius: 4px; border-radius: 4px;
@ -9,7 +16,7 @@
flex-direction: column; flex-direction: column;
max-width: 100%; max-width: 100%;
height: 100%; height: 100%;
} }
#sidenav div { #sidenav div {
@ -17,13 +24,23 @@
flex-direction: column; flex-direction: column;
} }
#sidenav a, #sidenav h4 { #sidenav h4 {
margin-top: 20px;
color: white; color: white;
} }
#sidenav a {
color: #e9d9fc;
line-height: 1;
}
#sidenav a:hover {
color: white;
}
.navlist div, .navlist div > a { .navlist div, .navlist div > a {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
text-decoration: none;
} }
.navlist div > a > span { .navlist div > a > span {
@ -39,10 +56,44 @@
margin-right: 10px; margin-right: 10px;
} }
.navlist .item {
cursor: pointer;
padding-top: 3px;
padding-bottom: 3px;
}
#sidenav .flex-column .flex-column {
margin-left: 30px;
margin-right: 30px;
}
#sidenav .flex-column .flex-column > div {
padding-top: 5px;
padding-bottom: 5px;
padding-right: 30px;
padding-left: 30px;
}
#sidenav .flex-column .flex-column > div > a {
display: list-item;
list-style-type: disc;
}
.page.selected {
background-color: #9F07C1;
border-radius: 100px;
}
.downtab {
}
.hidden { .hidden {
display: none !important; display: none !important;
overflow: hidden !important;
} }
</style> </style>
<div id="sidenav-parent">
<div class="d-flex flex-column" id="sidenav"> <div class="d-flex flex-column" id="sidenav">
<div class="top"> <div class="top">
<!-- Here be logo area --> <!-- Here be logo area -->
@ -53,57 +104,58 @@
<div class="p-2"> <!-- Padding --> <div class="p-2"> <!-- Padding -->
<div class="flex-column"> <div class="flex-column">
<div> <!-- Collection --> <div> <!-- Collection -->
<a href="#dash"> <a class="item" onclick="toggleCategory(this)">
<i class="fa fa-chart-bar"></i><span>Dashboard</span> <i class="fa fa-chart-bar"></i><span>Dashboard</span>
<i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i>
</a> </a>
<div class="hidden"> <!-- Hidden until clicked #dash --> <div class="downtab hidden">
<div class="flex-column"> <div class="flex-column">
<div> <div class="page">
<a href="#dash-test">Test</a> <!-- TODO: Add dot prefix --> <a href="#dash-test">Test</a>
</div> </div>
<div> <div class="page">
<a href="#dash-demo">Demo</a> <a href="#dash-demo">Demo</a>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<h4>Title card</h4> <!-- TODO: Padding and such --> <h4>Title card</h4>
</div> </div>
<div> <div>
<a href="#bills"> <a class="item" onclick="toggleCategory(this)">
<i class="fa fa-chart-bar"></i><span>Bills</span> <i class="fa fa-chart-bar"></i><span>Bills</span>
<i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i>
</a> </a>
<div class="hidden"> <div class="downtab hidden">
<ul> <div class="flex-column">
<li> <div class="page">
<a href="#bills-bills">Bills</a> <a href="#bills-bills">Bills</a>
</li> </div>
<li> <div class="page">
<a href="#bills-log">Log</a> <a href="#bills-log">Log</a>
</li> </div>
</ul> </div>
</div> </div>
</div> </div>
<div> <div>
<a href="#recieps"> <a class="item" onclick="toggleCategory(this)">
<i class="fa fa-chart-bar"></i><span>Recieps</span> <i class="fa fa-chart-bar"></i><span>Recieps</span>
<i class="fas fa-chevron-right"></i> <i class="fas fa-chevron-right"></i>
</a> </a>
<div class="hidden"> <div class="downtab hidden">
<ul> <div class="flex-column">
<li> <div class="page">
<a href="#recieps-recieps">Recieps</a> <a href="#recieps-recieps">Recieps</a>
</li> </div>
<li> <div class="page">
<a href="#recieps-log">Log</a> <a href="#recieps-log">Log</a>
</li> </div>
</ul> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div>