scriptoriumadmin/featurebase
1
0
Fork 0
mirror of https://github.com/featurebasedb/featurebase.git synced 2026-09-09 22:51:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Replace ugly nav javascript with css

Browse source
This commit is contained in:
Alan Bernstein 2017-04-26 11:10:24 -05:00
parent f59758f80f
commit a8453d7656
3 changed files with 17 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
webui/assets/main.js
View file

@ -191,33 +191,6 @@ function setNav(e) {
update_cluster_status()
}
// toggle svgs
// show all inactive images
inactive_images = document.getElementsByClassName("nav-image")
for(var i=0; i<inactive_images.length; i++) {
inactive_images[i].classList.add("nav-image-visible")
}
// hide all active images
active_images = document.getElementsByClassName("nav-image-active")
for(var i=0; i<active_images.length; i++) {
active_images[i].classList.remove("nav-image-visible")
}
for(var i=0; i<e.childNodes.length; i++) {
var node = e.childNodes[i]
if(node.tagName != "IMG") {
continue
}
// hide inactive image on clicked element
if(node.classList.contains("nav-image")) {
node.classList.remove("nav-image-visible")
}
// show active image on clicked element
if(node.classList.contains("nav-image-active")) {
node.classList.add("nav-image-visible")
}
}
}

18
webui/assets/style.css
View file

@ -123,15 +123,21 @@ em{
color: #1db598;
}
.nav-image,
.nav-image-active{
display: none;
}
.nav-image-visible{
.nav-item > .nav-image {
display: flex;
}
.nav-item > .nav-image-active {
display: none;
}
.nav-active > .nav-image {
display: none;
}
.nav-active > .nav-image-active {
display: flex;
}
.interface{

10
webui/index.html
View file

@ -17,17 +17,17 @@
<div class="nav">
<div class="nav-item nav-active" id="nav-console" onclick="setNav(this)">
<img style='margin-bottom:10px;' height='40px' src="/assets/nav-console.svg" alt="" class="nav-image">
<img style='margin-bottom:10px;' height='40px' src="/assets/nav-console-active.svg" alt="" class="nav-image nav-image-active nav-image-visible">
<img style='margin-bottom:10px;' height='40px' src="/assets/nav-console-active.svg" alt="" class="nav-image-active">
Console
</div>
<div class="nav-item" id="nav-cluster" onclick="setNav(this)">
<img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster.svg" alt="" class="nav-image nav-image-visible">
<img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster-active.svg" alt="" class="nav-image nav-image-active">
<img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster.svg" alt="" class="nav-image">
<img style='margin-bottom:10px;' height='20px' src="/assets/nav-cluster-active.svg" alt="" class="nav-image-active">
Cluster Admin
</div>
<div class="nav-item" id="nav-documentation" onclick="setNav(this)">
<img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation.svg" alt="" class="nav-image nav-image-visible">
<img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation-active.svg" alt="" class="nav-image nav-image-active">
<img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation.svg" alt="" class="nav-image">
<img style='margin-bottom:10px;' height='30px' src="/assets/nav-documentation-active.svg" alt="" class="nav-image-active">
Documentation
</div>
</div>