Radish alpha
r
radicle-explorer
rad:z4V1sjrXqjvFdnCUbxPFqd5p4DtH5
Radicle web interface
Radicle
Git
Patches › fa5c8e7e
Add a `noscript` tag for no javascript fallback
Merged did:key:z6MkkfM3...sVz5 opened 1 year ago

For users with no javascript extensions or just straight disabled javascript, we should have some nice looking fallback to at least explain they should enable javascript for radicle-explorer.

check check-visual check-unit-test check-http-client-unit-test check-radicle-httpd check-e2e check-build check-http

👉 Preview 👉 Workflow runs 👉 Branch on GitHub

Activity Changes +43 -0
1 file changed +43 -0 fb851314 → b6501604
modified index.html
@@ -94,8 +94,51 @@
      import { Buffer } from "buffer";

      window.Buffer = Buffer;

    </script>
+
+ 
    <noscript>
+ 
      <style>
+ 
        noscript main {
+ 
          height: 100vh;
+ 
          display: flex;
+ 
          flex-direction: column;
+ 
          justify-content: center;
+ 
          align-items: center;
+ 
          gap: 1.5rem;
+ 
        }
+ 
      </style>
+ 
    </noscript>

  </head>

  <body>

    <script type="module" src="/src/index.ts"></script>
+ 
    <noscript>
+ 
      <main>
+ 
        <svg
+ 
          role="img"
+ 
          height="48"
+ 
          width="48"
+ 
          fill="currentColor"
+ 
          viewBox="0 0 24 24">
+ 
          <path
+ 
            fill-rule="evenodd"
+ 
            clip-rule="evenodd"
+ 
            d="M23 4C23 5.65685 21.6569 7 20 7C18.3431 7 17 5.65685 17 4C17 2.34315 18.3431 1 20 1C21.6569 1 23 2.34315 23 4ZM22 4C22 5.10457 21.1046 6 20 6C18.8954 6 18 5.10457 18 4C18 2.89543 18.8954 2 20 2C21.1046 2 22 2.89543 22 4Z" />
+ 
          <path
+ 
            d="M9 15.5C9 15.7761 8.77614 16 8.5 16C8.22386 16 8 15.7761 8 15.5C8 15.2239 8.22386 15 8.5 15C8.77614 15 9 15.2239 9 15.5Z" />
+ 
          <path
+ 
            d="M10 18.5C10 18.7761 9.77614 19 9.5 19C9.22386 19 9 18.7761 9 18.5C9 18.2239 9.22386 18 9.5 18C9.77614 18 10 18.2239 10 18.5Z" />
+ 
          <path
+ 
            d="M8 10.5C8 10.2239 8.22386 10 8.5 10C8.77614 10 9 10.2239 9 10.5C9 10.7761 8.77614 11 8.5 11C8.22386 11 8 10.7761 8 10.5Z" />
+ 
          <path
+ 
            fill-rule="evenodd"
+ 
            clip-rule="evenodd"
+ 
            d="M6 15V20H2V21H6V22C6 22.5523 7.11929 23 8.5 23C9.88071 23 11 22.5523 11 22V21H20V20H11V17H13.5C14.3284 17 15 16.3284 15 15.5V10.5C15 9.67157 14.3284 9 13.5 9C12.6716 9 12 9.67157 12 10.5V14H11V7.5C11 6.11929 9.88071 5 8.5 5C7.11929 5 6 6.11929 6 7.5V12H5V8.5C5 7.67157 4.32843 7 3.5 7C2.67157 7 2 7.67157 2 8.5V13.5C2 14.3284 2.67157 15 3.5 15H6ZM7 7.5007V12.4993C7.00038 12.2235 7.22409 12 7.5 12C7.77614 12 8 12.2239 8 12.5C8 12.7761 7.77614 13 7.5 13C7.22409 13 7.00038 12.7765 7 12.5007V19.4993C7.00038 19.2235 7.22409 19 7.5 19C7.77614 19 8 19.2239 8 19.5C8 19.7761 7.77614 20 7.5 20C7.22409 20 7.00038 19.7765 7 19.5007V21.7328C7.02935 21.7472 7.06377 21.7627 7.10362 21.7786C7.41104 21.9016 7.9043 22 8.5 22C9.09571 22 9.58896 21.9016 9.89638 21.7786C9.93623 21.7627 9.97065 21.7472 10 21.7328V18.5V16.9146C9.4174 16.7087 9 16.1531 9 15.5C9 14.8469 9.4174 14.2913 10 14.0854V7.5C10 6.67157 9.32843 6 8.5 6C7.67211 6 7.00087 6.6707 7 7.49838C7.00087 7.22298 7.2244 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22409 8 7.00038 7.77652 7 7.5007ZM3.5 14H6V13H4V8.5C4 8.22386 3.77614 8 3.5 8C3.22386 8 3 8.22386 3 8.5V13.5C3 13.7761 3.22386 14 3.5 14ZM13 15H10.5C10.2239 15 10 15.2239 10 15.5C10 15.7761 10.2239 16 10.5 16H13.5C13.7761 16 14 15.7761 14 15.5V10.5C14 10.2239 13.7761 10 13.5 10C13.2239 10 13 10.2239 13 10.5V15Z" />
+ 
        </svg>
+ 
        <div class="title txt-medium txt-bold">Javascript not enabled</div>
+ 
        <div style="text-align: center">
+ 
          <div>Javascript is disabled on your browser.</div>
+ 
          <div>Please enable Javascript to make use of this site.</div>
+ 
        </div>
+ 
      </main>
+ 
    </noscript>

  </body>

</html>