update examples header

- changed `<select>` to a custom dropdown
- added `?` icon with description

scripts/demo_assets/static/index.css

@@ -38,37 +38,153 @@ canvas {
   transform: translate(-50%, 0%);
 }
 
+* {
+  font-family: "Inter", sans-serif;
+  color: #f0f0f0;
+}
+
 .header {
   z-index: 1000;
   position: absolute;
-  left: 64px;
+  transform: translate(-50%, 0);
+  left: 50%;
   height: 44px;
 
   display: flex;
   flex-direction: row;
   gap: 4px;
 }
+.header:not(.visible) {
+  display: none;
+}
 
-.header > a {
-  background: unset;
-  padding: 10px;
+.examples {
+  position: relative;
+  top: 11px;
 }
 
-.header > a > img {
+.example-description {
+  margin-top: 6px;
+  height: 40px;
+  border: none;
+  border-radius: 33%;
+}
+.example-description:hover > .example-description-body {
+  display: flex;
+}
+.example-description:hover > .example-description-icon {
+  background: #404040;
+  border: none;
+  border-radius: 50%;
+}
+.example-description-icon {
+  display: flex;
+  justify-content: center;
+  padding: 6px;
+  width: 20px;
+  height: 20px;
+}
+.example-description-body {
+  display: none;
+
+  flex-direction: column;
+  gap: 3px;
+
+  position: absolute;
+  top: 100%;
+
+  background: #1c2123;
+  border: none;
+  border-radius: 6px;
+  padding: 12px;
+
+  width: 280px;
+}
+.example-description-body > p {
+  margin: 0;
+}
+
+a.icon-link {
+  margin: 5px;
+  padding: 5px;
+}
+a.icon-link:hover {
+  background: #404040;
+  border: none;
+  border-radius: 50%;
+}
+img.icon {
   max-height: 100%;
 }
 
-.examples {
+.dropdown {
   position: relative;
-  top: 12px;
 }
 
-.examples > select {
+.dropdown-title {
+  display: flex;
+  gap: 2px;
+  user-select: none;
+  cursor: pointer;
+
+  background: #141414;
   border: none;
   border-radius: 6px;
-  background-color: #212628;
-  color: #cad8de;
+  padding: 2px 5px 2px 8px;
+
+  font-style: normal;
+  font-weight: 435;
+  font-size: 14px;
+  line-height: 16px;
+}
+.dropdown-title > img {
+  width: 16px;
+  height: 16px;
+}
+.dropdown-title:hover {
+  background: #404040;
+}
+.dropdown-title:active {
+  background: #404040;
+}
+
+.dropdown-body {
+  display: none;
+
+  flex-direction: column;
+  gap: 3px;
+
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  background: #1c2123;
+  border: none;
+  border-radius: 6px;
+  padding: 6px;
+
+  user-select: none;
+
+  width: 120px;
+}
+.dropdown-body.visible {
+  display: flex;
+}
+
+.dropdown-entry {
   padding: 2px 5px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  display: flex;
+  justify-content: space-between;
+}
+.dropdown-entry:hover {
+  background: #404040;
+}
+
+a.flat-link {
+  text-decoration: none;
 }
 
 .centered {
@@ -85,7 +201,7 @@ canvas {
   text-align: center;
 }
 
-a {
+a.button {
   display: inline-block;
   background: white;
   color: black;

scripts/demo_assets/static/index.js

@@ -49,6 +49,7 @@ function on_app_started(handle) {
 
   console.debug("App started.");
   document.getElementById("center_text").innerHTML = "";
+  document.getElementById("header_bar").classList.add("visible");
 
   if (window.location !== window.parent.location) {
     window.parent.postMessage("READY", "*");
@@ -119,7 +120,27 @@ function navigate_to_example(name) {
   }
 }
 
-document
-  .querySelector("#examples")
-  .addEventListener("change", ({ target }) => target.value && navigate_to_example(target.value));
+// open/close dropdown
+document.querySelector("#examples").addEventListener("click", () => {
+  const body = document.querySelector(".dropdown-body");
+  if (!body) return;
+  if (body.classList.contains("visible")) {
+    body.classList.remove("visible");
+  } else {
+    body.classList.add("visible");
+  }
+});
+
+// close dropdowns by clicking outside of it
+document.body.addEventListener("click", (event) => {
+  const body = document.querySelector(".dropdown-body");
+  if (!body) return;
+
+  const is_dropdown = (element) =>
+    element instanceof HTMLElement && element.classList.contains("dropdown");
+
+  if (!event.composedPath().find(is_dropdown)) {
+    body.classList.remove("visible");
+  }
+});
 

scripts/demo_assets/templates/example.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<!-- The version of index.html that will be served by app.rerun.io -->
+<!-- The version of index.html that will be served by demo.rerun.io -->
 <html>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
@@ -9,6 +9,9 @@
   <head>
     <link rel="icon" href="/favicon.svg" />
     <title>rerun viewer</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="/index.css" />
   </head>
 
@@ -18,24 +21,38 @@
     <div class="centered" id="mobile_text" style="visibility: hidden">
       <p style="font-size: 16px">Rerun is not yet supported on mobile browsers.</p>
       <p style="font-size: 16px">
-        <a href="#" id="try_anyways">Try anyways</a>
+        <a href="#" class="button" id="try_anyways">Try anyways</a>
       </p>
     </div>
     <div class="centered" id="center_text">
       <p style="font-size: 16px">Loading…</p>
       <div class="lds-dual-ring"></div>
     </div>
-    <div class="header">
+    <div class="header" id="header_bar">
       <div class="examples">
-        <select name="examples" id="examples">
-          <option disabled selected value>Examples</option>
-          {% for entry in examples %}
-          <option value="{{ entry.name }}">{{ entry.name }}</option>
-          {% endfor %}
-        </select>
+        <div class="dropdown" id="examples">
+          <div class="dropdown-title">
+            Examples
+            <img class="icon" src="/caret-down.svg" />
+          </div>
+          <div class="dropdown-body">
+            {% for entry in examples %}
+            <a class="flat-link" href="/examples/{{ entry.name }}">
+              <div class="dropdown-entry" data-link="{{ entry.name }}">
+                {{ entry.title }}
+                <img class="icon" src="/caret-right.svg" />
+              </div>
+            </a>
+            {% endfor %}
+          </div>
+        </div>
       </div>
-      <a href="{{ example.source_url }}">
-        <img src="/github-mark-white.svg" />
+      <div class="example-description">
+        <div class="example-description-icon">?</div>
+        <div class="example-description-body">{{ example.description }}</div>
+      </div>
+      <a class="icon-link" href="{{ example.source_url }}" target="_blank">
+        <img class="icon" src="/github-mark-white.svg" />
       </a>
     </div>