From dea725b93dff19614dcdd4d12aa4f143a100e338 Mon Sep 17 00:00:00 2001
From: Florian Heft <flo@fam-heft.de>
Date: Wed, 9 Nov 2022 13:22:24 +0100
Subject: [PATCH] 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)
---
 src/css/viewer.css      | 20 ++++++++++++--------
 src/js/viewer/viewer.js | 33 ++++++++++++++++++++-------------
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/src/css/viewer.css b/src/css/viewer.css
index 0dd73773..e0db77ab 100644
--- 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,7 +42,7 @@ 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%
   );
 }
@@ -48,11 +50,12 @@ body,
 @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
index 4d441c55..0adab0d3 100644
--- 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(),
+      ),
+    ],
+  );
 };