Make the status frontend be a link to the stats page

rossjrw · rossjrw · commit 8397be518ef5 · 2024-05-04T20:48:46.000+01:00
diff --git a/stats-frontend/assets/arrow.svg b/stats-frontend/assets/arrow.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1.78em" height="1em" viewBox="0 0 16 9"><path fill="#fff" d="M12.5 5h-9c-.28 0-.5-.22-.5-.5s.22-.5.5-.5h9c.28 0 .5.22.5.5s-.22.5-.5.5"/><path fill="#fff" d="M10 8.5a.47.47 0 0 1-.35-.15c-.2-.2-.2-.51 0-.71l3.15-3.15l-3.15-3.15c-.2-.2-.2-.51 0-.71s.51-.2.71 0l3.5 3.5c.2.2.2.51 0 .71l-3.5 3.5c-.1.1-.23.15-.35.15Z"/></svg>
diff --git a/stats-frontend/status.html b/stats-frontend/status.html
@@ -217,7 +217,7 @@
         --status-icon: var(--status-icon-indeterminate);
       }
 
-      article {
+      .status-container {
         display: grid;
         grid-template-areas: "status header" "status footer";
         grid-template-columns: 3.25rem 10.75rem;
@@ -229,6 +229,35 @@
         background-color: #555;
         box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.5);
         overflow: hidden;
+
+        /* The status container is a link */
+        text-decoration: none;
+        color: white;
+      }
+
+      .status-container h1::after {
+        content: "";
+        background-image: url(assets/arrow.svg);
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+        height: 0.8em;
+        width: 1.6em;
+        display: inline-block;
+
+        transition: opacity ease-in 0.08s, transform ease-in 0.1s;
+        opacity: 0;
+        transform: translateX(-100%);
+      }
+
+      .status-container:hover h1::after {
+        transition: opacity ease-out 0.1s, transform ease-out 0.1s;
+        opacity: 1;
+        transform: none;
+      }
+
+      .status-container:hover header {
+        text-decoration: underline;
       }
 
       aside {
@@ -332,7 +361,7 @@
   </head>
 
   <body>
-    <article>
+    <a class="status-container" href="//notifications.wikidot.com/status" target="_top">
       <aside>
         <div class="icon-logo"></div>
         <div class="icon-status-wrapper">
@@ -349,6 +378,6 @@ <h1>Notifier status</h1>
           Checking...
         </p>
       </footer>
-    </article>
+    </a>
   </body>
 </html>
