front page redesign: polish button interactions

static/index.js

@@ -5,20 +5,26 @@
 function update() {
   // show matching instructions
   // console.log($('.instruction'))
-  for (instr of $('.instruction')) {
-    if (instr.id == 'front-instruction-placeholder') {
-      instr.style.display = 'none'
-      continue
-    }
 
+  let showed = false;
+  for (instr of $('.instruction')) {
     let parts = instr.id.split('-')
     let me = parts[1]
     let them = parts[2]
     // console.log(me, them, $(`#me-${me}`)[0].checked, $(`#them-${them}`)[0].checked)
-    instr.style.display =
-      ($(`#me-${me}`)[0].checked && $(`#them-${them}`)[0].checked)
-      ? 'block' : 'none'
+
+    if ($(`#me-${me}`)[0].checked && $(`#them-${them}`)[0].checked) {
+      instr.style.display = 'block'
+      document.getElementById('front-instructions')
+        .scrollIntoView({behavior: 'smooth', block: 'nearest'})
+      showed = true;
+    } else {
+      instr.style.display = 'none'
+    }
   }
+
+  document.getElementById('front-instruction-placeholder').style.display =
+    (showed) ? 'none' : 'block'
 }
 
 addEventListener('DOMContentLoaded', () => {

static/style.css

@@ -50,7 +50,7 @@
 #topology {
   position: absolute;
   z-index: -1;
-  background-color: #003355;
+  background-color: var(--bg); /* #003355; */
   overflow: clip;
 }
 
@@ -198,14 +198,14 @@ pre .value, code .value, code.value {
 .btn.atproto, .btn.atproto:hover {
   background-color: #2b3e5b;
   /* not disabled: #113a79; */
-  border: 2px solid #2e5884;
+  border: 2px solid #3e6894;
   /* not disabled: #4786c9; */
 }
 
 .btn.nostr, .btn.nostr:hover {
   background-color: #46374F;
   /* not disabled: #491F62; */
-  border: 2px solid #53415E;
+  border: 2px solid #63516E;
   /* not disabled: ; */
 }
 
@@ -222,7 +222,7 @@ pre .value, code .value, code.value {
   height: 1.4em !important;
 }
 
-.front-instructions {
+#front-instructions {
   min-height: 4em;
 }
 

templates/index.html

@@ -27,25 +27,28 @@ bluesky light blue
 <div class="col-sm-8 big">
   <div class="btn-group" role="group" data-toggle="buttons" aria-label="I'm on">
   <label for="me-web" class="btn btn-primary web">
-    <input name="me" id="me-web" type="radio">
+    <!-- autocomplete="off" prevents Firefox from preserving these buttons' state
+         https://github.com/twbs/bootstrap/issues/793
+      -->
+    <input name="me" id="me-web" type="radio" autocomplete="off">
     🌐 <!-- globe_with_meridians -->
     <!-- 🌏 globe_showing_asia-australia -->
     Web
   </label>
   <label for="me-fediverse" class="btn btn-primary fediverse">
-    <input name="me" id="me-fediverse" type="radio">
+    <input name="me" id="me-fediverse" type="radio" autocomplete="off">
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
   <label for="me-atproto" class="btn btn-primary atproto disabled"
          title="Coming soon">
-    <!-- <input name="me" id="me-atproto" type="radio"> -->
+    <!-- <input name="me" id="me-atproto" type="radio" autocomplete="off"> -->
     <img src="/static/atproto_logo.png">
     Bluesky
   </label>
   <label for="me-nostr" class="btn btn-primary nostr disabled"
          title="Coming soon">
-    <!-- <input name="me" id="me-nostr" type="radio"> -->
+    <!-- <input name="me" id="me-nostr" type="radio" autocomplete="off"> -->
     <img src="/static/nostr_logo_transparent.png">
     Nostr
   </label>
@@ -61,23 +64,23 @@ bluesky light blue
 <div class="btn-group" role="group" data-toggle="buttons"
      aria-label="...and I want to follow someone on">
   <label for="them-web" class="btn btn-primary web">
-    <input name="them" id="them-web" type="radio">
+    <input name="them" id="them-web" type="radio" autocomplete="off">
     🌐 Web
   </label>
   <label for="them-fediverse" class="btn btn-primary fediverse">
-    <input name="them" id="them-fediverse" type="radio">
+    <input name="them" id="them-fediverse" type="radio" autocomplete="off">
     <img src="/static/fediverse_logo.svg">
     Fediverse
   </label>
   <label for="them-atproto" class="btn btn-primary atproto disabled"
          title="Coming soon">
-    <!-- <input name="them" id="them-atproto" type="radio"> -->
+    <!-- <input name="them" id="them-atproto" type="radio" autocomplete="off"> -->
     <img src="/static/atproto_logo.png">
     Bluesky
   </label>
   <label for="them-nostr" class="btn btn-primary nostr disabled"
          title="Coming soon">
-    <!-- <input name="them" id="them-nostr" type="radio"> -->
+    <!-- <input name="them" id="them-nostr" type="radio" autocomplete="off"> -->
     <img src="/static/nostr_logo_transparent.png">
     Nostr
   </label>
@@ -86,9 +89,9 @@ bluesky light blue
 </div>
 </div> <!-- front-form -->
 
-<div class="row big front-light front-instructions">
+<div id="front-instructions" class="row big front-light">
 
-<p id="front-instruction-placeholder" class="instruction">
+<p id="front-instruction-placeholder">
   Choose your networks above.
 </p>
 
@@ -105,7 +108,7 @@ bluesky light blue
 </div>
 
 <p id="front-fediverse-web" class="instruction">
-  To follow the web site <span class="handle">example.com</span>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
+  To follow the web site <a class="handle" href="https://example.com/">example.com</a>, search for <span class="handle">@example.com@web.brid.gy</span> on your fediverse instance.
 </p>
 
 <p id="front-fediverse-fediverse" class="instruction">