ux improvements

viewer/src/lib/data/scenes.json

@@ -1,7 +1,7 @@
 [
     {
         "slug": "boombox",
-        "model": "mv-dream",
+        "model": "",
         "title": "BoomBox",
         "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoomBox/glTF-Binary/BoomBox.glb"
     },
@@ -13,7 +13,7 @@
     },
     {
         "slug": "toycar",
-        "model": "sync-dreamer",
+        "model": "",
         "title": "Toy Car",
         "url": "https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/ToyCar/glTF-Binary/ToyCar.glb"
     }

viewer/src/routes/+page.svelte

@@ -2,8 +2,15 @@
     import { activeTab } from "./store.js";
     import ModelsView from "./components/ModelsView.svelte";
     import ScenesView from "./components/ScenesView.svelte";
+
+    function goHome() {
+        window.location.href = "/";
+    }
 </script>
 
+<div class="banner">
+    <h1 on:pointerdown={goHome}>IGF</h1>
+</div>
 <div class="container">
     <div class="tabs">
         <button on:click={() => activeTab.set("Models")} class={$activeTab === "Models" ? "active" : ""}>Models</button>

viewer/src/routes/models/[slug]/+page.server.ts

@@ -8,8 +8,6 @@ export async function load({ params }) {
     const model = models.find((model: any) => model.slug === params.slug);
     const modelScenes = scenes.filter((scene: any) => scene.model === params.slug);
 
-    if (!modelScenes.length) throw error(404);
-
     return {
         model: model,
         scenes: modelScenes

viewer/src/routes/models/[slug]/+page.svelte

@@ -19,14 +19,16 @@
         image.src = placeholderImage;
     }
 
-    function exit() {
-        window.history.back();
+    function goHome() {
+        window.location.href = "/";
     }
 </script>
 
+<div class="banner">
+    <h1 on:pointerdown={goHome}>IGF</h1>
+</div>
 <div class="container">
     <div class="header">{data.model.title}</div>
-    <div class="exit-button" on:pointerdown={exit}>x</div>
     <div class="model-container">
         <div class="model-info">
             <p class="model-header">Info</p>
@@ -52,25 +54,30 @@
             </table>
         </div>
         <div class="grid-container">
-            <div class="grid">
-                {#each data.scenes as scene}
-                    <a href={`/viewer/${scene.slug}`} class="grid-item">
-                        <img
-                            src={`/thumbnails/${scene.slug}.png`}
-                            alt={scene.title}
-                            class="thumbnail"
-                            on:error={(event) => handleImageError(event)}
-                        />
-                        <div class="title">{scene.title}</div>
-                    </a>
-                {/each}
-            </div>
+            {#if data.scenes.length > 0}
+                <div class="grid">
+                    {#each data.scenes as scene}
+                        <a href={`/viewer/${scene.slug}`} class="grid-item">
+                            <img
+                                src={`/thumbnails/${scene.slug}.png`}
+                                alt={scene.title}
+                                class="thumbnail"
+                                on:error={(event) => handleImageError(event)}
+                            />
+                            <div class="title">{scene.title}</div>
+                        </a>
+                    {/each}
+                </div>
+            {:else}
+                <div class="grid">
+                    <div class="warning">No scenes found</div>
+                </div>
+            {/if}
         </div>
     </div>
 </div>
 
 <style>
-
     .model-header {
         padding: 10px;
         font-size: 16px;
@@ -164,4 +171,11 @@
             width: calc(25% - 10px);
         }
     }
+
+    .warning {
+        width: 100%;
+        margin-top: 20px;
+        text-align: center;
+        color: #aaa;
+    }
 </style>

viewer/src/routes/viewer/[slug]/+page.server.ts

@@ -1,13 +1,17 @@
 import { error } from "@sveltejs/kit";
-import { getScenes } from "$lib/dataLoader";
+import { getModels, getScenes } from "$lib/dataLoader";
 
 export async function load({ params }) {
+    const models = await getModels();
     const scenes = await getScenes();
+
     const scene = scenes.find((scene: any) => scene.slug === params.slug);
+    const model = models.find((model: any) => model.slug === scene!.model);
 
     if (!scene) throw error(404);
 
     return {
-        scene
+        scene: scene,
+        model: model
     };
 }

viewer/src/routes/viewer/[slug]/+page.svelte

@@ -6,8 +6,12 @@
     export let data: {
         scene: {
             title: string;
+            model: string;
             url: string;
         };
+        model: {
+            title: string;
+        };
     };
 
     let overlay: HTMLDivElement | null = null;
@@ -197,6 +201,16 @@
         <div class="section">
             <div class="title">{data.scene.title}</div>
         </div>
+        <div class="section">
+            <div class="section-title">Model</div>
+            <div class="info-panel">
+                {#if data.scene.model}
+                    <a href={`/models/${data.scene.model}`} class="section-label">{data.model.title}</a>
+                {:else}
+                    <div class="section-label">None</div>
+                {/if}
+            </div>
+        </div>
         <div class="section">
             <div class="section-title">Stats</div>
             <div class="info-panel">
@@ -336,6 +350,11 @@
         padding: 4px;
     }
 
+    .section-label {
+        font-size: 14px;
+        color: #ddd;
+    }
+
     .info-panel {
         padding: 10px 10px 0px 10px;
         color: #ddd;

viewer/static/global.css

@@ -5,9 +5,22 @@ body {
     color: white;
 }
 
+.banner {
+    width: 100%;
+    padding: 0 20px;
+    margin: 0;
+    border-bottom: 1px solid #333;
+    box-sizing: border-box;
+}
+
+.banner h1 {
+    padding: 0;
+    margin: 20px 0;
+    cursor: pointer;
+}
+
 .container {
-    padding-left: 15px;
-    padding-right: 15px;
+    padding: 10px 15px 10px 15px;
     margin-left: auto;
     margin-right: auto;
     max-height: 100vh;