From b5f2299b8c0d7e5764e9d45b787e75ce3ee80684 Mon Sep 17 00:00:00 2001
From: dr|z3d <z3d@i2pmail.org>
Date: Thu, 26 Aug 2021 04:54:05 +0000
Subject: [PATCH] COnsole: ui cleanups

---
 daemon/HTTPServer.cpp | 12 ++++++------
 webconsole/style.css  | 24 ++++++++++++++++++++----
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/daemon/HTTPServer.cpp b/daemon/HTTPServer.cpp
index 5348e81b..65add91a 100644
--- a/daemon/HTTPServer.cpp
+++ b/daemon/HTTPServer.cpp
@@ -689,8 +689,8 @@ namespace http {
 			bool i2pcontrol;  i2p::config::GetOption("i2pcontrol.enabled", i2pcontrol);
 			if (httpproxy || socksproxy || bob || sam || i2cp || i2pcontrol) {
 				s << "<tr class=\"center sectiontitle configuration\">"
-				  << "<th colspan=\"2\"><span>" << tr("Router Services") << "</span></th></tr>\r\n";
-				s << "<tr><td colspan=\"2\" class=\"center\">";
+				  << "<th colspan=\"2\"><span>" << tr("Router Services") << "</span>\r\n";
+				s << "<div id=\"routerservices\" class=\"center\">";
 				if (httpproxy)
 					s << " <span class=\"routerservice\">HTTP " << tr("Proxy") << "</span> ";
 				if (socksproxy)
@@ -703,7 +703,7 @@ namespace http {
 					s << " <span class=\"routerservice\">I2CP</span> ";
 				if (i2pcontrol)
 					s << " <span class=\"routerservice\">I2PControl</span>";
-				s << "</td></tr>\r\n";
+				s << "</div>\r\n</th></tr>\r\n";
 			}
 /*
 				s << "<tr><td>" << "HTTP " << tr("Proxy")  << "</td><td class='" << (httpproxy  ? "enabled" : "disabled") << "\">" << (httpproxy  ? tr("Enabled") : tr("Disabled")) << "</td></tr>\r\n";
@@ -1162,14 +1162,14 @@ namespace http {
 		s << "<table id=\"tunnelsummary\">\r\n<thead>"
 		  << "<tr><th>" << tr("Type") << "</th>"
 		  << "<th class=\"in\">" << tr("Inbound") << "</th><th class=\"out\">" << tr("Outbound") << "</th>"
-		  << "<th>" << tr("View Details") << "</th></tr>\r\n</thead>\r\n";
+		  << "<th>" << tr("View Details") << "</th></tr></thead>\r\n";
 		s << "<tr><td>" << tr("Local") << "</td><td class=\"in\">" << localInCount << "</td><td class=\"out\">" << localOutCount << "</td>"
 		  << "<td><a class=\"button\" href=\"" << webroot << "?page=" << HTTP_PAGE_LOCAL_TUNNELS << "\">View</a></td></tr>\r\n";
 		if (transitCount > 0) {
 		s << "<tr><td>" << tr("Transit") << "</td><td colspan=\"2\">" << transitCount << "</td>"
 		  << "<td><a class=\"button\" href=\"" << webroot << "?page=" << HTTP_PAGE_TRANSIT_TUNNELS << "\">View</a></td></tr>\r\n";
 		}
-		s << "</td></tr>\r\n</table>\r\n";
+		s << "</table>\r\n";
 		s << "<tr><td class=\"center nopadding\" colspan=\"2\">";
 		ShowI2PTunnels (s);
 		s << "</td></tr>\r\n";
@@ -1289,7 +1289,7 @@ namespace http {
 			s << "  <a id=\"shutdownforce\" class=\"cmd\" href=\"" << webroot << "?cmd="
 			  << HTTP_COMMAND_SHUTDOWN_NOW << "&token=" << token
 			  << "\" data-tooltip=\"" << tr("Force shutdown") << "\">"
-			  << tr("Force shutdown") << "</a></td></tr>\r\n";
+			  << tr("Force shutdown") << "</a></th></tr>\r\n";
 /* TODO graceful shutdown button in header with .notify dialog if transit tunnels
    active to offer option to shutdown immediately
    only one option? displayed in the header
diff --git a/webconsole/style.css b/webconsole/style.css
index cb36d8ee..829e6418 100644
--- a/webconsole/style.css
+++ b/webconsole/style.css
@@ -418,7 +418,7 @@ select, option:hover, option:focus, option:active {
 .routerservice {
 	display: inline-block;
 	margin: 4px 2px;
-	padding: 0 10px 0 25px;
+	padding: 2px 10px 2px 25px;
 	background: #303 var(--yes) no-repeat 8px center / 10px;
 	border-radius: 2px;
 	text-align: left;
@@ -443,7 +443,7 @@ tr:not(.chrome):nth-child(odd), #routerinfos tr:nth-child(odd), #tunnelsummary t
 }
 
 tr#version ~ tr:nth-child(even), .listitem:nth-child(even),
-tr:not(.chrome):nth-child(even), #routerinfos tr:nth-child(even) {
+tr:not(.chrome):nth-child(even), #routerinfos tr:nth-child(even), #tunnelsummary tr:nth-child(odd) {
 	background: linear-gradient(to bottom, rgba(32,0,32,.5), rgba(24,0,24,.5));
 }
 
@@ -511,7 +511,7 @@ th, .slide label {
 	background: var(--th_multicolumn);
 }
 
-.sectiontitle span {
+.sectiontitle span:not(.routerservice) {
 	padding: 4px 12px;
 	min-width: 50%;
 	display: inline-block;
@@ -1116,10 +1116,14 @@ input[type=checkbox]:checked + label::after {
 	margin-top: 9px;
 }
 
-#commands {
+#commands, #routerservices {
 	margin-top: 11px;
 }
 
+#routerservices {
+	background: none;
+}
+
 #consolelang, #maxtransit {
 	margin-top: 16px;
 }
@@ -1248,6 +1252,18 @@ input[type=checkbox]:checked + label::after {
 	background: var(--border);
 }
 
+#tunnelsummary th {
+	background: var(--th_multicolumn);
+}
+
+#tunnelsummary th.in {
+	background: var(--arrow_down) no-repeat center center / 14px, var(--th_multicolumn);
+}
+
+#tunnelsummary th.out {
+	background: var(--arrow_up) no-repeat center center / 14px, var(--th_multicolumn);
+}
+
 #tunnelsummary td {
 	text-align: center;
 }