From a8453d76560c7f00fd814831049ccb804bf23cd4 Mon Sep 17 00:00:00 2001
From: Alan Bernstein <alan.aaron.bernstein@gmail.com>
Date: Wed, 26 Apr 2017 11:10:24 -0500
Subject: [PATCH] Replace ugly nav javascript with css

---
 webui/assets/main.js   | 27 ---------------------------
 webui/assets/style.css | 18 ++++++++++++------
 webui/index.html       | 10 +++++-----
 3 files changed, 17 insertions(+), 38 deletions(-)

diff --git a/webui/assets/main.js b/webui/assets/main.js
index 9d60cd41d..570aa8d2d 100644
--- a/webui/assets/main.js
+++ b/webui/assets/main.js
@@ -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")
-    }
-  }
-
 }
 
 
diff --git a/webui/assets/style.css b/webui/assets/style.css
index 689fc919f..24f0e8278 100644
--- a/webui/assets/style.css
+++ b/webui/assets/style.css
@@ -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{
diff --git a/webui/index.html b/webui/index.html
index 344e5e224..1e3346d26 100644
--- a/webui/index.html
+++ b/webui/index.html
@@ -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>