Improve discoverability of viewer controls

* more contrast for control bar * always show controls on the initial slide * improve margin for very small view ports (e.g. iframes)
synyx · Nov 9, 2022 · dea725b · dea725b
1 parent 4ce22dc
commit dea725b
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/css/viewer.css b/src/css/viewer.css
@@ -2,6 +2,8 @@
 
 html {
   font-size: calc(60% + 3vmin);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
+    Arial, sans-serif;
 }
 
 html,
@@ -40,19 +42,20 @@ body,
   padding: 1rem;
   background: linear-gradient(
     0deg,
-    rgba(255, 255, 255, 0.5) 0%,
+    rgba(255, 255, 255, 0.8) 50%,
     rgba(255, 255, 255, 0) 100%
   );
 }
 
 @media (hover: hover) {
   .controls {
     opacity: 0.3;
-    transition: opacity 1s;
+    transition: opacity 0.5s;
   }
+  .controls.show,
   .controls:hover {
     opacity: 1;
-    transition: opacity 0.2s;
+    transition: opacity 0.15s;
   }
 }
 
@@ -67,21 +70,22 @@ body,
   color: #fff;
   padding: 0.5rem;
   cursor: pointer;
-  background-color: #0003;
+  background-color: #0005;
 }
 
 @media (hover: hover) {
   .controls button {
-    background-color: #0000;
+    background-color: #0003;
     transition: background-color 0.2s;
   }
 
+  .controls.show button,
   .controls:hover button {
-    background-color: #0003;
+    background-color: #0005;
   }
 
   .controls button:hover {
-    background-color: #0005;
+    background-color: #0008;
   }
 }
 
@@ -90,5 +94,5 @@ body,
 }
 
 .controls .progress {
-  margin: 0 2rem;
+  margin: 0 min(2rem, 5vw);
 }
diff --git a/src/js/viewer/viewer.js b/src/js/viewer/viewer.js
@@ -36,17 +36,24 @@ const poster = (posterUrl, fileType) => {
 
 const controls = (tale, activeSlide) => {
   const currentSlide = activeSlide === undefined ? 0 : activeSlide + 1;
-  return h("div.controls", { on: { click: ev => ev.stopPropagation() } }, [
-    h(
-      "button",
-      { on: { click: () => trigger("slide/fly-to-prev") } },
-      chevronLeft(),
-    ),
-    h("div.progress", `${currentSlide} / ${tale.slides.length}`),
-    h(
-      "button",
-      { on: { click: () => trigger("slide/fly-to-next") } },
-      chevronRight(),
-    ),
-  ]);
+  return h(
+    "div.controls",
+    {
+      class: { show: !currentSlide },
+      on: { click: ev => ev.stopPropagation() },
+    },
+    [
+      h(
+        "button",
+        { on: { click: () => trigger("slide/fly-to-prev") } },
+        chevronLeft(),
+      ),
+      h("div.progress", `${currentSlide} / ${tale.slides.length}`),
+      h(
+        "button",
+        { on: { click: () => trigger("slide/fly-to-next") } },
+        chevronRight(),
+      ),
+    ],
+  );
 };