feature: mobile view + scrollbar fix for public page

devflowinc · Dec 3, 2024 · a9b2fb7 · a9b2fb7
1 parent ab6d012
commit a9b2fb7
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 18 deletions.
diff --git a/pdf2md/server/src/templates/skeleton.html b/pdf2md/server/src/templates/skeleton.html
@@ -48,7 +48,7 @@
     {% block scripts %} {% endblock %}
   </head>
 
-  <body>
+  <body class="overflow-x-hidden sm:overflow-y-hidden">
     <main id="root">
       {% block navbar %}
       <header class="bg-white">

diff --git a/pdf2md/server/static/output.css b/pdf2md/server/static/output.css
@@ -825,6 +825,10 @@ video {
   overflow-y: auto;
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1255,6 +1259,10 @@ video {
     margin-top: 20vh;
   }
 
+  .sm\:overflow-y-hidden {
+    overflow-y: hidden;
+  }
+
   .sm\:px-6 {
     padding-left: 1.5rem;
     padding-right: 1.5rem;

diff --git a/server/src/public/navbar.html b/server/src/public/navbar.html
@@ -1,5 +1,7 @@
 <nav class="w-screen bg-white border-b">
-  <div class="max-w-screen-2xl mx-auto w-full p-2 flex justify-between">
+  <div
+    class="max-w-screen-2xl mx-auto w-full p-2 flex items-center justify-center flex-col gap-2 sm:justify-between sm:!flex-row"
+  >
     <a class="flex items-center" href="https://trieve.ai">
       <img
         class="corner-logo"
@@ -8,7 +10,7 @@
     </a>
     <div
       id="nav-links"
-      class="font-medium flex items-center gap-4 justify-right"
+      class="font-medium flex flex-wrap items-center gap-4 justify-center sm:justify-right"
     >
       <a
         class="flex items-center gap-1 text-black"
@@ -73,7 +75,7 @@
             d="M152 24c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L64 64C28.7 64 0 92.7 0 128l0 16 0 48L0 448c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-256 0-48 0-16c0-35.3-28.7-64-64-64l-40 0 0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40L152 64l0-40zM48 192l352 0 0 256c0 8.8-7.2 16-16 16L64 464c-8.8 0-16-7.2-16-16l0-256z"
           />
         </svg>
-        <span> Meet With Sales </span>
+        <span> Give Feedback </span>
       </a>
     </div>
   </div>

diff --git a/server/src/public/page.html b/server/src/public/page.html
@@ -27,10 +27,11 @@
       rel="stylesheet"
       href="https://unpkg.com/@highlightjs/[email protected]/styles/default.min.css"
     />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
     <script src="https://unpkg.com/@highlightjs/[email protected]/languages/javascript.min.js"></script>
 
-    <script>
+    <script type="module">
       hljs.highlightAll();
 
       window.paramsData = {{params | tojson}};
@@ -52,10 +53,6 @@
         padding: 0;
       }
 
-      body {
-        overflow: hidden;
-      }
-
       nav {
         border-color: var(--brand-color);
       }
@@ -95,6 +92,10 @@
         text-decoration-line: underline;
       }
 
+      body {
+        min-height: 100vh;
+      }
+
       main {
         font-family: "Maven Pro", sans-serif;
         line-height: 1.6;
@@ -105,8 +106,6 @@
         padding-top: 48px;
         gap: 40px;
         width: 100vw;
-        height: 100vh;
-        overflow: hidden;
       }
 
       .corner-logo {
@@ -215,7 +214,11 @@
     const rect = targetElement.getBoundingClientRect();
 
     // Get the bottom right corner coordinates
-    const endX = rect.right + 128;
+    let endX = rect.right + 128;
+    if (endX > window.innerWidth) {
+      endX = window.innerWidth - 100;
+    }
+
     const endY = rect.bottom + 45;
 
     // Calculate start point (will be above and to the left of the end point)

diff --git a/server/static/output.css b/server/static/output.css
@@ -584,10 +584,6 @@ video {
   display: flex;
 }
 
-.hidden {
-  display: none;
-}
-
 .w-full {
   width: 100%;
 }
@@ -608,18 +604,26 @@ video {
   flex-direction: column;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-center {
   align-items: center;
 }
 
-.justify-between {
-  justify-content: space-between;
+.justify-center {
+  justify-content: center;
 }
 
 .gap-1 {
   gap: 0.25rem;
 }
 
+.gap-2 {
+  gap: 0.5rem;
+}
+
 .gap-4 {
   gap: 1rem;
 }
@@ -657,3 +661,13 @@ video {
 .underline {
   text-decoration-line: underline;
 }
+
+@media (min-width: 640px) {
+  .sm\:\!flex-row {
+    flex-direction: row !important;
+  }
+
+  .sm\:justify-between {
+    justify-content: space-between;
+  }
+}