Improve webui styling for browser with no Javascript enabled

dsgnr · Nov 11, 2021 · 924b91a · 924b91a
1 parent 8e32c44
commit 924b91a
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 64 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,7 @@ All notable changes to this project will be documented in this file.
 ## Unreleased
 
 - Update package.json dependencies
+- Improve webui styling for when the users browser does not have JavaScript enabled
 
 ## [1.0.5] - 2021-11-07
 

diff --git a/webui/public/index.html b/webui/public/index.html
@@ -1,13 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <title>portchecker.io</title>
-    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" rel="stylesheet" />
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root"></div>
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+  <title>portchecker.io</title>
+  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap" rel="stylesheet" />
+</head>
+<noscript>
+  <body style="background: rgb(33, 33, 33) none repeat scroll 0% 0%; color: #f8f8f8;">
+    <header>
+      <nav>
+        <div class="logo">
+          <a href="/">
+            portchecker.io
+          </a>
+        </div>
+        <div>
+        </div>
+      </nav>
+    </header>
+    <div class="home">
+      <div class="container">
+        <p class="description">
+          portchecker.io is a free utility to check the port status of a given hostname or IP address.
+          </br>
+          In order to use this site in your browser, you will need to enable JavaScript.
+        </p>
+      </div>
+    </div>
+    <footer id="footer">
+      <nav>
+        <div>2021 &copy; Dan Hand (@dsgnr)</div>
+        <div>
+            <a href="https://github.com/dsgnr/portchecker.io" rel="noopener noreferrer" target="_blank">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="github">
+                <path
+                  d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22">
+                </path>
+              </svg>
+            </a>
+        </div>
+      </nav>
+    </footer>
   </body>
+</noscript>
+
+<body>
+  <div id="root"></div>
+</body>
+
 </html>
diff --git a/webui/src/layouts/Footer.js b/webui/src/layouts/Footer.js
@@ -2,25 +2,9 @@ import React from 'react';
 import { css } from '@emotion/react';
 import { ReactComponent as GithubIcon } from '../assets/github.svg';
 
-const footerStyle = css`
-  padding: 40px 16px;
-  & > nav {
-    margin: 0 auto;
-    max-width: 1440px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    svg {
-      width: 2rem;
-      height: 2rem;
-    }
-  }
-`;
-
 const Footer = () => {
   return (
-    <footer css={[footerStyle]}>
+    <footer id="footer">
       <nav>
         <div>{new Date().getFullYear()} &copy; Dan Hand (@dsgnr)</div>
         <div>

diff --git a/webui/src/layouts/Header.js b/webui/src/layouts/Header.js
@@ -10,45 +10,15 @@ import { palette } from '../styles/palette';
 import { useThemeContext } from '../contexts/ThemeContext';
 
 const headerStyle = (isLight) => css`
-  height: 60px;
   ${media.medium} {
     height: 50px;
   }
 
   & > nav {
-    height: 100%;
-    display: flex;
-    padding: 0 12px;
-    margin: 0 auto;
-    max-width: 1440px;
-    align-items: center;
-    justify-content: space-between;
-
-    .logo a {
-      height: 100%;
-      display: flex;
-      align-items: center;
-      font-size: 2rem;
-      font-weight: bold;
-      text-decoration: none;
-
-      svg {
-        width: 2rem;
-        height: 2rem;
-        margin-right: 0.5rem;
-      }
-    }
-
     svg {
       color: ${isLight ? 'inherit' : palette.yellow[4]};
       fill: ${isLight ? palette.yellow[6] : palette.yellow[4]};
     }
-
-    svg.theme {
-      cursor: pointer;
-      display: flex;
-      user-select: none;
-    }
   }
 `;
 

diff --git a/webui/src/styles/index.scss b/webui/src/styles/index.scss
@@ -16,7 +16,7 @@ body,
   flex-direction: column;
 }
 
-#root>main {
+#root > main {
   flex: 1 1;
 }
 
@@ -32,8 +32,43 @@ a {
   width: auto;
 }
 
+header {
+  height: 60px;
+
+  & > nav {
+    height: 100%;
+    display: flex;
+    padding: 0 12px;
+    margin: 0 auto;
+    max-width: 1440px;
+    align-items: center;
+    justify-content: space-between;
+
+    .logo a {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      font-size: 2rem;
+      font-weight: bold;
+      text-decoration: none;
+
+      svg {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 0.5rem;
+      }
+    }
+
+    svg.theme {
+      cursor: pointer;
+      display: flex;
+      user-select: none;
+    }
+  }
+}
 .description {
   text-align: center;
+  line-height: 2;
 }
 
 .input {
@@ -42,7 +77,7 @@ a {
   border-color: #dbdbdb;
   color: #363636;
   border: 1px solid transparent;
-  border-radius: .375em;
+  border-radius: 0.375em;
   box-shadow: none;
   padding: 15px;
 }
@@ -79,7 +114,7 @@ a {
   justify-content: center;
   text-align: center;
   white-space: nowrap;
-  border-radius: .375em;
+  border-radius: 0.375em;
 
   &.is-success {
     background-color: #48c78e;
@@ -99,7 +134,7 @@ a {
   display: inline-block;
   position: relative;
   width: 100%;
-  border-radius: .375em;
+  border-radius: 0.375em;
 }
 
 .results {
@@ -109,19 +144,19 @@ a {
     list-style: none;
   }
   span.is-true {
-      color: #48c78e;
+    color: #48c78e;
   }
   span.is-false {
-      color: #dc3545;
+    color: #dc3545;
   }
 }
 
 .success-box {
-    border-color: #48c78e;
+  border-color: #48c78e;
 }
 
 .pending-box {
-    border-color: #F29339;
+  border-color: #f29339;
 }
 
 .error-box {
@@ -138,6 +173,26 @@ a {
   color: #dc3545;
 }
 
+#footer {
+  padding: 40px 16px;
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+
+  & > nav {
+    margin: 0 auto;
+    max-width: 1440px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    svg {
+      width: 2rem;
+      height: 2rem;
+    }
+  }
+}
+
 @media only screen and (max-width: 768px) {
   .container {
     margin: 150px 5% !important;