improve styling and layout

NagiosEnterprises · Nov 6, 2024 · 09a5c95 · 09a5c95
1 parent ca3d839
commit 09a5c95
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 31 deletions.
diff --git a/contrib/exfoliation/stylesheets/common.css b/contrib/exfoliation/stylesheets/common.css
@@ -96,6 +96,22 @@ not important:  blue             aaccff  777777
   --border: #28303E;
   --input: #0D1014;
   --radius: 0.3rem;
+
+  --info-msg-text: #89BDF1;
+  --info-msg-border: #1866B6;
+  --info-msg-bg: #041220;
+
+  --success-msg-text: #40DE7A;
+  --success-msg-border: #147538;
+  --success-msg-bg: #04160A;
+
+  --warning-msg-text: #FFF948;
+  --warning-msg-border: #706C00;
+  --warning-msg-bg: #191900;
+
+  --error-msg-text: #F9B4B5;
+  --error-msg-border: #710B09;
+  --error-msg-bg: #1C0202;
 }
 
 #side {
@@ -161,7 +177,6 @@ a:hover {
   gap: 4px;
   padding: 16px;
   margin: 0;
-  border-right: 1px var(--border) solid;
 }
 
 .navbarlogo {
@@ -305,7 +320,7 @@ ul.navsectionlinks li ul li a:hover {
 }
 
 #updateversioninfo {
-  margin: 15px auto 35px auto;
+  margin: 15px auto 0 auto;
   width: 400px;
 }
 
@@ -314,8 +329,10 @@ ul.navsectionlinks li ul li a:hover {
 }
 
 .updatechecksdisabled {
-  background-color: #FF9F9F;
-  border: 1px solid red;
+  background-color: var(--error-msg-bg);
+  border: 1px solid var(--error-msg-border);
+  color: var(--error-msg-text);
+  border-radius: var(--radius);
   padding: 10px;
 }
 
@@ -324,8 +341,10 @@ ul.navsectionlinks li ul li a:hover {
 }
 
 .updateavailable {
-  background-color: #9FD4FF;
-  border: 1px solid blue;
+  background-color: var(--info-msg-bg);
+  border: 1px solid var(--info-msg-border);
+  color: var(--info-msg-text);
+  border-radius: var(--radius);
   padding: 10px;
 }
 

diff --git a/html/index.php.in b/html/index.php.in
@@ -51,6 +51,8 @@ $this_year = '2024';
 			height: 100vh;
 			width: 200px;
 			border: none;
+			/* I don't like doing this but not sure of a better way */
+			border-right: 1px solid #28303E;
 		}
 
 		iframe[name="main"] {

diff --git a/html/main.php b/html/main.php
@@ -56,7 +56,7 @@ function getCoreStatus() {
 	}
 
 	function setCoreStatusHTML(image, text) {
-		$('#core-status').html(`<span class='dot-${image}'>●</span> ${text}`);
+		$('#core-status').html(`<span class='dot-${image}'>●</span>&nbsp&nbsp${text}`);
 	}
 </script>
 
@@ -78,16 +78,14 @@ function setCoreStatusHTML(image, text) {
 <div id="updateversioninfo">
 <?php
 	$updateinfo = get_update_information();
-	if (!$updateinfo['update_checks_enabled'] || true) {
+	if (!$updateinfo['update_checks_enabled']) {
 ?>
 		<div class="updatechecksdisabled">
 			<div class="warningmessage">Warning: Automatic Update Checks are Disabled!</div>
 			<div class="submessage">Disabling update checks presents a possible security risk.  Visit <a href="https://www.nagios.org/" target="_blank">nagios.org</a> to check for updates manually or enable update checks in your Nagios config file.</a></div>
 		</div>
 <?php
-	} else if (
-		$updateinfo['update_available'] && $this_version < $updateinfo['update_version']
-	) {
+	} else if ($updateinfo['update_available'] && $this_version < $updateinfo['update_version']) {
 ?>
 		<div class="updateavailable">
 			<div class="updatemessage">A new version of Nagios Core is available!</div>

diff --git a/html/stylesheets/common.css b/html/stylesheets/common.css
@@ -200,30 +200,32 @@ div.navsectionheader ul li ul li {
 	margin: 0 0 15px 0;
 	}
 
-#currentversioninfo{
-	font-size: 12pt;
-	}
-#currentversioninfo .product{
-	font-size: 14pt;
-	font-weight: bold;
-	}
-#currentversioninfo .version{
-	font-size: 14pt;
-	font-weight: bold;
-	}
-#currentversioninfo .version b{
+#currentversioninfo {
 	font-size: 14pt;
-	font-weight: bold;
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
 	}
-#currentversioninfo .releasedate{
-	font-size: 11pt;
-	margin: 5px 0 0 0;
-	}
-#currentversioninfo .checkforupdates{
-	font-size: 11pt;
-	font-weight: bold;
+
+#currentversioninfo *{
+	font-size: 12pt;
 	}
 
+#currentversioninfo > div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.dot-enabled {
+  color: #33FF00;
+}
+
+.dot-disabled {
+  color: red;
+}
+
 #updateversioninfo{
 	margin: 15px auto 35px auto;
 	width: 400px;