add link to and rework visual blocks page

ukane-philemon · ukane-philemon · commit 08a5b3c3c1c2 · 2022-12-06T13:06:38.000+01:00
diff --git a/cmd/dcrdata/internal/explorer/explorerroutes.go b/cmd/dcrdata/internal/explorer/explorerroutes.go
@@ -368,14 +368,16 @@ func (exp *explorerUI) VisualBlocks(w http.ResponseWriter, r *http.Request) {
 
 	str, err := exp.templates.exec("visualblocks", struct {
 		*CommonPageData
-		Info    *types.HomeInfo
-		Mempool *types.TrimmedMempoolInfo
-		Blocks  []*types.TrimmedBlockInfo
+		Info         *types.HomeInfo
+		Mempool      *types.TrimmedMempoolInfo
+		Blocks       []*types.TrimmedBlockInfo
+		VisualBlocks bool
 	}{
 		CommonPageData: exp.commonData(r),
 		Info:           exp.pageData.HomeInfo,
 		Mempool:        mempoolInfo,
 		Blocks:         trimmedBlocks,
+		VisualBlocks:   true,
 	})
 
 	exp.pageData.RUnlock()
diff --git a/cmd/dcrdata/public/scss/visualblocks.scss b/cmd/dcrdata/public/scss/visualblocks.scss
@@ -1,13 +1,3 @@
-#mainContainer {
-  max-width: 100% !important;
-  width: 100%;
-  padding: 0 10%;
-  display: flex;
-  flex-wrap: wrap;
-  margin: 30px 0;
-  align-items: flex-start;
-}
-
 .blocks-section {
   flex-grow: 1;
   flex-basis: 250px;
@@ -186,10 +176,6 @@
   text-decoration: none;
 }
 
-#mainContainer .decimal {
-  margin-left: 0;
-}
-
 .blockhchainWrapper {
   padding: 60px 0;
 }
@@ -326,12 +312,6 @@ body.darkBG {
   }
 }
 
-@media only screen and (max-width: 768px) {
-  #mainContainer {
-    padding: 0 5%;
-  }
-}
-
 @media only screen and (max-width: 576px) {
   .blocks-section {
     padding: 0;
diff --git a/cmd/dcrdata/views/extras.tmpl b/cmd/dcrdata/views/extras.tmpl
@@ -61,7 +61,7 @@
 	<link rel="preload" href="/images/connected.svg?x=65tv3" as="image" type="image/svg+xml" />
 	<link rel="preload" href="/images/disconnected.svg?x=65tv3" as="image" type="image/svg+xml" />
 
-	<link href="/dist/css/style.d8a442444300a678.css" rel="stylesheet">
+	<link href="/dist/css/style.6ce1a39635cc9c19.css" rel="stylesheet">
 
 	<script src="/js/vendor/turbolinks.min.js?v=65tv3"></script>
 </head>
@@ -365,6 +365,10 @@
 				<span class="px-2{{if eq .TimeGrouping "Blocks"}} unstyled-link{{else}} text-secondary{{end}}">Blocks</span>
 				<div class="blocks-selector{{if eq .TimeGrouping "Blocks"}} active{{end}}"></div>
 			</a>
+			<a class="d-inline-block position-relative me-4 py-2 unstyled-link" href="/visualblocks">
+				<span class="px-2{{if .VisualBlocks}} unstyled-link{{else}} text-secondary{{end}}">Visual Blocks</span>
+				<div class="blocks-selector{{if .VisualBlocks}} active{{end}}"></div>
+			</a>
 			<a class="d-inline-block position-relative me-4 py-2 unstyled-link" href="/ticketpricewindows">
 				<span class="separator ps-2 pe-5{{if eq .TimeGrouping "Windows"}} unstyled-link{{else}} text-secondary{{end}}">Windows</span>
 				<div class="separator blocks-selector{{if eq .TimeGrouping "Windows"}} active{{end}}"></div>
diff --git a/cmd/dcrdata/views/visualblocks.tmpl b/cmd/dcrdata/views/visualblocks.tmpl
@@ -3,27 +3,14 @@
 <html lang="en">
 {{ template "html-head" headData .CommonPageData "Decred Block Explorer by dcrdata.org"}}
     {{ template "navbar" . }}
-
-    <div
-        id="mainContainer"
-        class="container py-1"
-        data-controller="time"
-    >
-        <div
-            class="blocks-section"
-            data-controller="visualBlocks"
-            data-visualBlocks-target="root"
-        >
-            <a
-                class="no-underline title fw-bold"
-                href="/blocks"
-                data-visualBlocks-target="title"
-                href="/blocks"
-            >Latest Blocks</a>
-            <div
-                class="blocks-holder"
-                data-visualBlocks-target="box"
-            >
+    {{template "blocksBanner" .}}
+    <div id="mainContainer" class="container main px-1" data-controller="time">
+        <div class="blocks-section" data-controller="visualBlocks" data-visualBlocks-target="root">
+            <span class="h2 d-flex pt-4 px-1 pb-1 pe-2" data-visualBlocks-target="title">
+                Visual Blocks
+                <span class="dcricon-info fs24 ms-3 mt-2" data-visualBlocks-target="tooltip" title="Latest Decred Visual Blocks"></span>
+            </span>
+            <div class="blocks-holder px-md-4" data-visualBlocks-target="box">
                 <!-- add mempool element -->
                 {{with .Mempool}}
                 <div class="block visible" data-visualBlocks-target="block">
