First attempts at mobile version

src/GuideShell.module.css

@@ -8,16 +8,80 @@
     padding: var(--document-rect-margin);
 }
 
+.main .navbarBurger {
+    color: #EEEEEE;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    appearance: none;
+    background: none;
+    cursor: pointer;
+    display: block;
+    position: relative;
+    flex: 0 auto;
+    aspect-ratio: 1;
+    width: auto;
+    height: calc(100% - 10px);
+    box-sizing: border-box;
+
+    border: 1px solid currentColor;
+    border-radius: 8px;
+    margin: 5px;
+}
+/* Taken from Bulma */
+
+.navbarBurger > span {
+    background-color: currentColor;
+    display: block;
+    height: 1px;
+    left: calc(50% - 8px);
+    position: absolute;
+    transform-origin: center;
+    transition-duration: 86ms;
+    transition-property: background-color, opacity, transform;
+    transition-timing-function: ease-out;
+    width: 16px;
+}
+
+.navbarBurger > span:nth-child(1) {
+    top: calc(50% - 6px)
+}
+
+.navbarBurger > span:nth-child(2) {
+    top: calc(50% - 1px)
+}
+
+.navbarBurger > span:nth-child(3) {
+    top: calc(50% + 4px)
+}
+
+/* Modifers */
+:global(.is-active).navbarBurger > span:nth-child(1) {
+    transform: translateY(5px) rotate(45deg);
+}
+
+:global(.is-active).navbarBurger > span:nth-child(2) {
+    opacity: 0;
+}
+
+:global(.is-active).navbarBurger > span:nth-child(3) {
+    transform: translateY(-5px) rotate(-45deg);
+}
+
 .versionPicker {
     text-align: center;
 }
 
+.topLogoBar {
+    display: flex;
+}
+
 .logo {
     display: flex;
     place-items: center;
     color: var(--color-body-text);
     font-weight: bold;
     cursor: pointer;
+    flex: 1 auto;
 
     line-height: 1.5;
     padding: .5rem .75rem;
@@ -45,3 +109,30 @@
     overflow-y: scroll;
     padding: 5px;
 }
+
+/* this is the same breakpoint that bulma is using for mobile */
+@media (max-width: 768px) {
+    .main {
+        grid-template-columns: 1fr;
+        grid-template-rows: max-content max-content 1fr max-content;
+    }
+
+    :global(:root) {
+        --document-rect-margin: 0 !important;
+    }
+
+
+    /* hide the nav-bar and version picker by default on mobile */
+    .main > aside, .main > .versionPicker {
+        display: none;
+    }
+
+    /* show them again if the menu is expanded */
+    .main.menuExpanded > aside, .main.menuExpanded > .versionPicker {
+        display: initial;
+    }
+    /* but then hide the article... */
+    .main.menuExpanded > article {
+        display: none;
+    }
+}

src/GuideShell.tsx

@@ -3,16 +3,36 @@ import { Link, Outlet } from "react-router-dom";
 import logo from "./assets/logo_00.png";
 import GuideNavBar from "./GuideNavBar.tsx";
 import { useGuide } from "./data/Guide.ts";
+import { useCallback, useState } from "react";
 
 function GuideShell() {
   const guide = useGuide();
 
+  const [menuExpanded, setMenuExpanded] = useState(false);
+  const toggleMenu = useCallback(() => {
+    setMenuExpanded((expanded) => !expanded);
+  }, []);
+
   return (
-    <main className={css.main}>
-      <Link to="/" className={css.logo}>
-        <img src={logo} alt="" />
-        Applied Energistics 2
-      </Link>
+    <main className={css.main + " " + (menuExpanded ? css.menuExpanded : "")}>
+      <div className={css.topLogoBar}>
+        <Link to="/" className={css.logo}>
+          <img src={logo} alt="" />
+          Applied Energistics 2
+        </Link>
+        {/* burger menu used on mobile devices when the actual navigation bar is hidden*/}
+        <a
+          role="button"
+          className={css.navbarBurger + (menuExpanded ? " is-active" : "")}
+          aria-label="menu"
+          aria-expanded={menuExpanded}
+          onClick={toggleMenu}
+        >
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
       <div>{/* TODO Show title */}</div>
       <aside>
         <GuideNavBar />

src/components/Row.tsx

@@ -2,7 +2,14 @@ import { PropsWithChildren } from "react";
 
 function Row({ children }: PropsWithChildren) {
   return (
-    <div style={{ display: "flex", flexDirection: "row", gap: "15px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        gap: "15px",
+        flexWrap: "wrap",
+      }}
+    >
       {children}
     </div>
   );

src/components/model-viewer/ModelViewerInternal.module.css

@@ -1,12 +1,28 @@
 
 .root {
     position: relative;
+    --modelviewer-width: auto;
+    --modelviewer-height: auto;
+    --modelviewer-aspect-ratio: auto;
+    width: var(--modelviewer-width);
+    height: var(--modelviewer-height);
 }
 
 .root > img {
     position: absolute;
+    width: var(--modelviewer-width);
+    height: var(--modelviewer-height);
 }
 
 .viewport {
     display: inline-block;
-}
+    width: var(--modelviewer-width);
+    height: var(--modelviewer-height);
+}
+
+.root, .root > img, .root > .viewport {
+    width: calc(min(100%, var(--modelviewer-width))) !important;
+    height: auto !important;
+    aspect-ratio: var(--modelviewer-aspect-ratio);
+    overflow: hidden;
+}

src/components/model-viewer/ModelViewerInternal.tsx

@@ -10,6 +10,7 @@ import {
   Box3,
   Camera,
   Euler,
+  GridHelper,
   LineBasicMaterial,
   MathUtils,
   Raycaster,
@@ -31,6 +32,15 @@ import TextureManager from "./TextureManager.ts";
 
 const DEBUG = false;
 
+// Add our CSS variables
+declare module "csstype" {
+  interface Properties {
+    "--modelviewer-width"?: string;
+    "--modelviewer-height"?: string;
+    "--modelviewer-aspect-ratio"?: number;
+  }
+}
+
 export type Annotation = OverlayAnnotation | InWorldAnnotation;
 
 export type OverlayAnnotation = {
@@ -122,6 +132,16 @@ async function initialize(
   const sceneCenter = sceneBounds.getCenter(new Vector3());
   group.position.copy(sceneCenter.clone().negate());
 
+  // Add a plane for orientation
+  if (cameraControls) {
+    const grid = new GridHelper(20, 20, 0xffffffff, 0xffffffff);
+    grid.material = new LineBasicMaterial({
+      transparent: true,
+      opacity: 0.5,
+    });
+    group.add(grid);
+  }
+
   const viewportWidth = viewportEl.offsetWidth;
   const viewportHeight = viewportEl.offsetHeight;
 
@@ -191,6 +211,21 @@ async function initialize(
   renderer.useLegacyLights = true;
   renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 
+  let resizeObserver: ResizeObserver | undefined;
+  if (typeof ResizeObserver !== "undefined") {
+    resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        if (entry.contentBoxSize) {
+          const size = entry.contentBoxSize[0];
+          renderer.setSize(size.inlineSize, size.blockSize);
+        }
+      }
+    });
+    resizeObserver.observe(viewportEl, {
+      box: "content-box",
+    });
+  }
+
   let disposed = false;
 
   const animate = function () {
@@ -218,6 +253,9 @@ async function initialize(
     if (!disposed) {
       console.debug("Disposing model viewer for %s", source);
       disposed = true;
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
       viewportEl.removeChild(renderer.domElement);
       renderer.dispose();
       controls?.dispose();
@@ -326,31 +364,16 @@ function ModelViewerInternal({
           className={css.root}
           style={{
             background,
-            width: guiScaledDimension(width),
-            height: guiScaledDimension(height),
+            "--modelviewer-width": guiScaledDimension(width),
+            "--modelviewer-height": guiScaledDimension(height),
+            "--modelviewer-aspect-ratio": width / height,
           }}
           onMouseMove={onMouseMove}
           onMouseLeave={onMouseLeave}
         >
-          {!initialized && (
-            <img
-              src={placeholder}
-              style={{
-                width: guiScaledDimension(width),
-                height: guiScaledDimension(height),
-              }}
-              alt="Scene placeholder"
-            />
-          )}
-
-          <div
-            className={css.viewport}
-            ref={viewportRef}
-            style={{
-              width: guiScaledDimension(width),
-              height: guiScaledDimension(height),
-            }}
-          ></div>
+          {!initialized && <img src={placeholder} alt="" />}
+
+          <div className={css.viewport} ref={viewportRef}></div>
         </div>
       </MinecraftTooltip>
     </>