improved responsiveness of viewer

Signed-off-by: Sebastian Schmittner <sebastian.schmittner@eecc.de>

commons/toast.js

@@ -9,7 +9,7 @@ export function toast_ok(text) {
 function toast(text, bg_class) {
   const toast = document.createElement("div");
   toast.className =
-    "toast align-items-center text-white border-0 d-flex m-2 " + bg_class;
+    "toast align-items-center text-white border-0 d-flex position-fixed top-0 end-0 p-3 " + bg_class;
   toast.role = "alert";
 
   const toast_body = toast.appendChild(document.createElement("div"));

viewer/code.js

@@ -49,27 +49,24 @@ function load_graph_from_file() {
 }
 
 function load_graph_from_url(url) {
-  console.debug("Loading", url)
+  console.debug("Loading", url);
 
-  fetch(url).then(
-    (response)=>{
-      if(response.ok){
+  fetch(url)
+    .then((response) => {
+      if (response.ok) {
         return response.json();
       }
-    }
-  ).then(
-    (json)=>{
-      story = json
+    })
+    .then((json) => {
+      story = json;
       start_playing();
-    }
-  ).catch((error)=>{
-    toast_alert("Error loading story from " + url)
-    console.error("error loading url:", url, error)
-  })
-
+    })
+    .catch((error) => {
+      toast_alert("Error loading story from " + url);
+      console.error("error loading url:", url, error);
+    });
 }
 
-
 function start_playing() {
   if (!story?.sections) {
     toast_alert("No Story loaded");
@@ -134,6 +131,9 @@ function load_section(id) {
 
   if (section?.media?.type === "image" && section?.media?.src) {
     background_image.src = section.media.src;
+    if (!background_image.style) {
+      background_image.style = {};
+    }
     background_image.style.display = "inline-block";
   }
 
@@ -183,7 +183,7 @@ function show_ui_components_according_to_state() {
 function read_query_params() {
   let params = new URL(document.location.toString())?.searchParams;
   let load = params?.get("load");
-  if(load){
+  if (load) {
     load_graph_from_url(load);
   }
 }
@@ -194,4 +194,4 @@ document
 
 show_ui_components_according_to_state();
 
-read_query_params();
+read_query_params();

viewer/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta
       name="viewport"
-      content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui"
+      content="user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, minimal-ui, width=device-width"
     />
     <title>Story Adventure Viewer</title>
     <link href="bootstrap.min.css" rel="stylesheet" />

viewer/style.css

@@ -1,18 +1,14 @@
 body {
   font: 14px helvetica neue, helvetica, arial, sans-serif;
+  background-color: black;
 }
 
 #background {
-  width: 100vw;
-  height: 100vh;
   background-color: black;
   margin: 0;
   text-align: center;
   padding: 2px;
   z-index: -1;
-  position: absolute;
-  top: 0;
-  left: 0;
 }
 
 #background > img {
@@ -28,15 +24,26 @@ body {
 }
 
 #story_container {
-  height: 30vh;
-  position: absolute;
-  top: 68vh;
-  left: 0;
   max-width: 100vw;
   color: white;
   font-size: x-large;
 }
 
+@media screen and (min-width: 780px) {
+  #background {
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  #story_container {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+  }
+}
+
 #story_container button {
   font-size: x-large;
 }