- add a small "sub header" with links

- break out node info and mempool info onto separate pages

public/css/styling.css

@@ -35,3 +35,7 @@ img.header-image {
 	padding: 2px 5px;
 	margin-right: 4px;
 }
+
+#subheader a {
+	margin-right: 20px;
+}

routes/baseActionsRouter.js

@@ -33,25 +33,41 @@ router.get("/", function(req, res) {
 	rpcApi.getInfo().then(function(getinfo) {
 		res.locals.getinfo = getinfo;
 
-		rpcApi.getMempoolInfo().then(function(getmempoolinfo) {
-			res.locals.getmempoolinfo = getmempoolinfo;
-
-			var blockHeights = [];
-			if (getinfo.blocks) {
-				for (var i = 0; i < 10; i++) {
-					blockHeights.push(getinfo.blocks - i);
-				}
+		var blockHeights = [];
+		if (getinfo.blocks) {
+			for (var i = 0; i < 10; i++) {
+				blockHeights.push(getinfo.blocks - i);
 			}
+		}
 
-			rpcApi.getBlocksByHeight(blockHeights).then(function(latestBlocks) {
-				res.locals.latestBlocks = latestBlocks;
+		rpcApi.getBlocksByHeight(blockHeights).then(function(latestBlocks) {
+			res.locals.latestBlocks = latestBlocks;
 
-				res.render("index");
-			});
+			res.render("index");
 		});
 	});
 });
 
+router.get("/node-info", function(req, res) {
+	var client = global.client;
+
+	rpcApi.getInfo().then(function(getinfo) {
+		res.locals.getinfo = getinfo;
+
+		res.render("node-info");
+	});
+});
+
+router.get("/mempool-info", function(req, res) {
+	var client = global.client;
+
+	rpcApi.getMempoolInfo().then(function(getmempoolinfo) {
+		res.locals.getmempoolinfo = getmempoolinfo;
+
+		res.render("mempool-info");
+	});
+});
+
 router.post("/connect", function(req, res) {
 	var host = req.body.host;
 	var port = req.body.port;

views/index.pug

@@ -13,32 +13,12 @@ block content
 	h1 BTC RPC Explorer
 	hr
 
-	ul(class='nav nav-tabs mb-3')
-		li(class="nav-item")
-			a(data-toggle="tab", href="#tab-latest-tx", class="nav-link active", role="tab") Latest Blocks
-		li(class="nav-item")
-			a(data-toggle="tab", href="#tab-getinfo", class="nav-link", role="tab") Node Info
-		li(class="nav-item")
-			a(data-toggle="tab", href="#tab-getmempoolinfo", class="nav-link", role="tab") Mempool Info
+	h3 Latest Blocks
 
-	div(class="tab-content")
-		div(id="tab-latest-tx", class="tab-pane active", role="tabpanel")
-			h3 Latest Blocks
+	- var blocks = latestBlocks;
+	- var blockOffset = 0;
 
-			- var blocks = latestBlocks;
-			- var blockOffset = 0;
+	include includes/blocks-list.pug
 
-			include includes/blocks-list.pug
-
-			hr
-			a(href="/blocks", class="btn btn-primary btn-block") See more
-
-		div(id="tab-getinfo", class="tab-pane", role="tabpanel")
-			h3 Node Info
-
-			include includes/getinfo-table.pug
-
-		div(id="tab-getmempoolinfo", class="tab-pane", role="tabpanel")
-			h3 Mempool Info
-
-			include includes/getmempoolinfo-table.pug
+	hr
+	a(href="/blocks", class="btn btn-primary btn-block") See more

views/layout.pug

@@ -37,6 +37,14 @@ html
 							input(class="form-control form-control-sm mr-sm-2", type="text", name="query", placeholder="block height, block hash, txid", style="width: 300px;")
 							button(class="btn btn-primary btn-sm", type="submit") Search
 
+		div(id="subheader", style="background: red; margin-top: -25px; margin-bottom: 25px; padding: 10px 0;", class="bg-light")
+			div(class="container")
+				a(href="/") Home
+				a(href="/node-info") Node Info
+				a(href="/mempool-info") Mempool Info
+							
+
+			
 		div(class="container")
 			if (userMessage)
 				div(class="alert", class=(userMessageType ? ("alert-"  + userMessageType) : "alert-info"), role="alert")

views/mempool-info.pug

@@ -0,0 +1,18 @@
+extends layout
+
+block headContent
+	title Mempool Info
+	
+block content
+	ol(class="breadcrumb")
+		li(class="breadcrumb-item")
+			a(href="/")
+				strong #{host}
+				span :#{port}
+		li(class="breadcrumb-item active")
+			a(href="/mempool-info") Mempool Info
+
+	h1 Mempool Info
+	hr
+
+	include includes/getmempoolinfo-table.pug

views/node-info.pug

@@ -0,0 +1,18 @@
+extends layout
+
+block headContent
+	title Node Info
+	
+block content
+	ol(class="breadcrumb")
+		li(class="breadcrumb-item")
+			a(href="/")
+				strong #{host}
+				span :#{port}
+		li(class="breadcrumb-item active")
+			a(href="/node-info") Node Info
+
+	h1 Node Info
+	hr
+
+	include includes/getinfo-table.pug