Improved Feldspar view rendering (endless scroll, no scrollbar)

eyra · Dec 7, 2023 · 0110fe5 · 0110fe5
1 parent cb61842
commit 0110fe5
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 13 deletions.
diff --git a/core/assets/js/feldspar_app.js b/core/assets/js/feldspar_app.js
@@ -1,6 +1,6 @@
 export const FeldsparApp = {
   mounted() {
-    console.log("FeldsparApp MOUNTED");
+    console.log("[FeldsparApp] Mounted");
 
     console.log(this.el.dataset);
 
@@ -16,7 +16,7 @@ export const FeldsparApp = {
   },
 
   onFrameLoaded() {
-    console.log("Initializing iframe app");
+    console.log("[FeldsparApp] Initializing iframe app");
     this.channel = new MessageChannel();
     this.channel.port1.onmessage = (e) => {
       this.handleMessage(e);
@@ -25,9 +25,18 @@ export const FeldsparApp = {
     let action = "live-init";
     let locale = this.el.dataset.locale;
 
-    this.getIframe().contentWindow.postMessage({ action, locale }, "*", [
+    const iframe = this.getIframe();
+
+    iframe.contentWindow.postMessage({ action, locale }, "*", [
       this.channel.port2,
     ]);
+
+    const observer = new ResizeObserver(() => {
+      const height = iframe.contentWindow.document.body.scrollHeight;
+      iframe.setAttribute("style", `height:${height}px`);
+    });
+
+    observer.observe(iframe.contentWindow.document.body);
   },
 
   handleMessage(e) {

diff --git a/core/assets/static/manifest.json b/core/assets/static/manifest.json
@@ -19,7 +19,7 @@
   "display": "standalone",
   "display_override": ["window-control-overlay", "minimal-ui"],
   "scope": "/",
-  "theme_color": "#4272ef",
+  "theme_color": "#F6F6F6",
   "shortcuts": [
   ],
   "screenshots": [

diff --git a/core/lib/core_web/controllers/layouts/error.html.heex b/core/lib/core_web/controllers/layouts/error.html.heex
@@ -6,7 +6,7 @@
     <%= csrf_meta_tag() %>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, user-scalable=no, initial-scale=1.0" />
-    <meta name="theme-color" content="#4272ef">
+    <meta name="theme-color" content="#F6F6F6">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <script src="https://cdn.jsdelivr.net/gh/alpine-collective/[email protected]/dist/index.min.js"></script>
     <link

diff --git a/core/lib/core_web/controllers/layouts/root.html.leex b/core/lib/core_web/controllers/layouts/root.html.leex
@@ -6,7 +6,7 @@
     <%= csrf_meta_tag() %>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, height=device-height, viewport-fit=cover, user-scalable=no, initial-scale=1.0" />
-    <meta name="theme-color" content="#4272ef">
+    <meta name="theme-color" content="#F6F6F6">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <script src="https://cdn.jsdelivr.net/gh/alpine-collective/[email protected]/dist/index.min.js"></script>
     <link rel="apple-touch-icon" href="/apple-touch-icon.png">

diff --git a/core/priv/bundles/link/manifest.json b/core/priv/bundles/link/manifest.json
@@ -19,7 +19,7 @@
   "display": "standalone",
   "display_override": ["window-control-overlay", "minimal-ui"],
   "scope": "/",
-  "theme_color": "#4272ef",
+  "theme_color": "#F6F6F6",
   "shortcuts": [
   ],
   "screenshots": [

diff --git a/core/systems/assignment/crew_page.ex b/core/systems/assignment/crew_page.ex
@@ -139,9 +139,7 @@ defmodule Systems.Assignment.CrewPage do
           </div>
         </:header>
         <div id={:crew_page} class="w-full h-full flex flex-col" phx-hook="ViewportResize">
-          <div class="flex-1">
-            <.flow fabric={@fabric} />
-          </div>
+          <.flow fabric={@fabric} />
         </div>
       </.stripped>
     """

diff --git a/core/systems/feldspar/app_view.ex b/core/systems/feldspar/app_view.ex
@@ -10,13 +10,13 @@ defmodule Systems.Feldspar.AppView do
   @impl true
   def render(assigns) do
     ~H"""
-      <div class="flex flex-col w-full h-full p-20">
+      <div class="pt-20 pl-20 pr-4 pb-4">
         <%!-- Ensure that updates don't alter the hierarchy in front of the iframe.
         Changing the preceding siblings of the iframe would result in a reload of the iframe
         due to Morphdom (https://github.com/patrick-steele-idem/morphdom/issues/200).
           --%>
-        <div class="w-full h-full" phx-update="ignore"  id="web-app-frame" phx-hook="FeldsparApp" data-locale={@locale} data-src={@url}>
-          <iframe class="w-full h-full"></iframe>
+        <div phx-update="ignore" id="web-app-frame" phx-hook="FeldsparApp" data-locale={@locale} data-src={@url}>
+          <iframe class="w-full"></iframe>
         </div>
       </div>
     """