Merge pull request #1696 from TDT-AG/pr/20180323-luci-app-mwan3-add-boxes-again

luci-app-mwan3: add boxes again and update css in luci-theme-material

2 files changed, 34 insertions, 7 deletions

diff --git a/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm b/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
index 86b5ac696..4ec0edf04 100644
--- a/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
+++ b/applications/luci-app-mwan3/luasrc/view/mwan/overview_status_interface.htm
@@ -15,29 +15,35 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
 				for ( var iface in status.interfaces)
 				{
 					var state = '';
+					var css = ''
 					switch (status.interfaces[iface].status)
 					{
 						case 'online':
 							state = '<%:Online (tracking active)%>';
-							break;
-						case 'notMonitored':
-							state = '<%:Online (tracking off)%>';
+							css = 'success';
 							break;
 						case 'offline':
 							state = '<%:Offline%>';
+							css = 'danger';
 							break;
 						default:
 							state = '<%:Disabled%>';
+							css = 'warning';
 							break;
 					}
 					statusview += String.format(
+						'<div class="alert-message %s">',
+						css
+					);
+					statusview += String.format(
 						'<div><strong>Interface: </strong>%s</div>',
 						iface
 					);
 					statusview += String.format(
-						'<div><strong>Status: </strong>%s</div></br></br>',
+						'<div><strong>Status: </strong>%s</div>',
 						state
 					);
+					statusview += '</div>'
 				}
 				statusDiv.innerHTML = statusview;
 			}
@@ -49,6 +55,17 @@ XHR.poll(5, '<%=luci.dispatcher.build_url("admin", "status", "mwan", "interface_
 	);
 //]]></script>
 
+<style type="text/css">
+	#mwan_status_text > div {
+		display: inline-block;
+		margin: 1rem;
+		padding: 1rem;
+		width: 10rem;
+		float: left;
+		line-height: 125%;
+	}
+</style>
+
 <fieldset id="interface_field" class="cbi-section">
 	<legend><%:MWAN Interfaces%></legend>
 	<div id="mwan_status_text">
diff --git a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
index 545c5fb3f..57bbaf6af 100755
--- a/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
+++ b/themes/luci-theme-material/htdocs/luci-static/material/css/style.css
@@ -253,9 +253,19 @@ header > .container > .brand {
     vertical-align: text-bottom;
 }
 
+.danger {
+    background-color: #FA8072 !important;
+    color: black;
+}
+
 .warning {
-    background-color: #FF7D60 !important;
-    color: #FFF;
+    background-color:  #F0E68C !important;
+    color: black;
+}
+
+.success {
+    background-color: #90EE90 !important;
+    color: black;
 }
 
 .errorbox,
@@ -1546,4 +1556,4 @@ body.lang_pl.node-main-login .cbi-value-title {
     .cbi-value-field .cbi-input-select {
         min-width: 25rem;
     }
-}
\ No newline at end of file
+}