💄 Better scrolling of Sophia iframe

SoftInstigate · Sep 10, 2024 · 73eed25 · 73eed25
1 parent 09da35c
commit 73eed25
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -28,7 +28,6 @@ <h2 class="text-white"><strong>REST</strong>Heart</h2>
         </nav>
     </div>
 </header>
-{% include run-restheart-seriously-banner.html %}
 {% if page.docs_version != null and page.docs_version != 8 %}
 <div class="alert alert-warning m-0 text-center" role="alert">
     <strong>RESTHeart 8 is the current stable release. Switch documentation to <a href="{{ "/docs" | prepend: site.baseurl }}">v8</a></strong>

diff --git a/css/main.scss b/css/main.scss
@@ -221,12 +221,20 @@ text-black {
 }
 
 .iframe-parent {
-  height: calc(100vh - 115px);
+  height: calc(100vh - 64px);
   border: none;
 }
 
 iframe {
   height: 100%;
   width: 100%;
   border: none;
+}
+
+.hline {
+  position: absolute;
+  top: 150px;
+  width:100%;
+  height:5px;
+  background: red
 }
diff --git a/docs/sophia.md b/docs/sophia.md
@@ -2,6 +2,6 @@
 layout: default
 ---
 
-<div class="iframe-parent mb-5">
+<div class="iframe-parent m-0 p-0">
     <iframe src="https://sophia.restheart.com" scrolling="yes"></iframe>
 </div>
diff --git a/index.md b/index.md
@@ -2,6 +2,7 @@
 layout: default
 stars-bounce: true
 ---
+{% include run-restheart-seriously-banner.html %}
 
 <section id="top" class="text-center pt-2 pb-2">
     <div class="mt-0 mb-4">
@@ -15,7 +16,7 @@ stars-bounce: true
             ✅&nbsp;Declarative Security, no code required.
             ✅&nbsp;Implement your Backend in minutes.
         </p>
-        <div class="mb-5">
+        <div>
             <h3 class="font-weight-bold highlightcolor mt-3 text-center">Ask Sophia AI about RESTHeart</h3>
             <iframe id="sophiaFrame" src="https://sophia.restheart.com?h=auto" style="border: none; width: 100%"></iframe>
         </div>
@@ -43,7 +44,9 @@ stars-bounce: true
     waitForLoad: true,
     onResized: ({ iframe, height, width, type }) => {
         if (type === 'overflowChanged' && document.readyState == 'complete') {
-            window.scrollTo({top: height-120, left: 0, behavior: 'auto'});
+            const offset = iframe.offsetTop;
+            const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)
+            window.scrollTo({top: height+offset-vh, left: 0, behavior: 'smooth'});
         }
     }
   }, '#sophiaFrame' );
@@ -116,4 +119,4 @@ stars-bounce: true
             </div>
         </div>
     </div>
-</section>
+</section>