Address some issues brought up by #1001 (#1005)

tsadpbb · dylan-at-nagios · web-flow · commit e74c39238555 · 2024-11-15T13:50:59.000-06:00
* Add back pid and add styling for update checks

* improve styling and layout

---------

Co-authored-by: dylan-at-nagios &lt;122833930+dylan-at-nagios@users.noreply.github.com&gt;
diff --git a/Changelog b/Changelog
@@ -4,6 +4,7 @@ Nagios Core 4 Change Log
 
 4.5.8 - 2024-XX-XX
 ------------------
+* Improve new exfoliation theme and add back in PID information (Dylan Anderson)
 * Fix issues with downtimes that are both flexible and triggered and improve downtime additions in general (#595) (Dylan Anderson)
 
 4.5.7 - 2024-10-24
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 {
@@ -261,12 +276,6 @@ ul.navsectionlinks li ul li a:hover {
   text-align: center;
 }
 
-#mainbrandsplash {
-  font-size: 12pt;
-  font-weight: bold;
-  margin: 0 0 35px 0;
-}
-
 #maincopy {
   margin: 0 0 15px 0;
 }
@@ -305,7 +314,7 @@ ul.navsectionlinks li ul li a:hover {
 }
 
 #updateversioninfo {
-  margin: 15px auto 35px auto;
+  margin: 15px auto 0 auto;
   width: 400px;
 }
 
@@ -314,8 +323,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 +335,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;
 }
 
@@ -334,8 +347,12 @@ ul.navsectionlinks li ul li a:hover {
   font-weight: bold;
 }
 
-#mainbrandsplash {
-  display: none;
+.dot-enabled {
+  color: #00EE5F;
+}
+
+.dot-disabled {
+  color: red;
 }
 
 #mainsplash {
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('<img src="images/' + image + '.gif" /> ' + text);
+		$('#core-status').html(`<span class='dot-${image}'>●</span>&nbsp&nbsp${text}`);
 	}
 </script>
 
@@ -65,17 +65,12 @@ function setCoreStatusHTML(image, text) {
 
 <body id="splashpage">
 
-
-<div id="mainbrandsplash">
-	<div><span id="core-status"></span></div>
-</div>
-
-
 <div id="currentversioninfo">
 	<div>
 		<div class="version">Version <b><?php echo $this_version; ?></b></div>
 		<div class="releasedate">October 24, 2024</div>
 	</div>
+	<div><span id="core-status"></span></div>
 	<a class="checkforupdates" href="https://www.nagios.org/checkforupdates/?version=<?php echo $this_version; ?>&amp;product=nagioscore" target="_blank">Check for updates</a>
 </div>
 
@@ -90,9 +85,7 @@ function setCoreStatusHTML(image, text) {
 			<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
@@ -190,40 +190,36 @@ div.navsectionheader ul li ul li {
 	text-align: center;
 	}
 	
-#mainbrandsplash{
-	font-size: 12pt;
-	font-weight: bold;
-	margin: 0 0 35px 0;
-	}
-
 #maincopy{
 	margin: 0 0 15px 0;
 	}
 	
-#currentversioninfo{
-	font-size: 12pt;
-	}
-#currentversioninfo .product{
-	font-size: 14pt;
-	font-weight: bold;
-	}
-#currentversioninfo .version{
+#currentversioninfo {
 	font-size: 14pt;
-	font-weight: bold;
+	display: flex;
+	flex-direction: column;
+	gap: 2rem;
 	}
-#currentversioninfo .version b{
-	font-size: 14pt;
-	font-weight: bold;
-	}
-#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;

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,8 @@ $this_year = '2024';`
`51`	`51`	`height: 100vh;`
`52`	`52`	`width: 200px;`
`53`	`53`	`border: none;`
	`54`	`+ /* I don't like doing this but not sure of a better way */`
	`55`	`+ border-right: 1px solid #28303E;`
`54`	`56`	`}`
`55`	`57`
`56`	`58`	`iframe[name="main"] {`