Merge pull request #61 from basementstudio/mati/fixes

Mobile fixes
basementstudio · Oct 16, 2023 · 00f347f · 00f347f · vercel · Oct 16, 2023
2 parents 104dd47 + 642ea58
commit 00f347f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/.changeset/great-forks-smash.md b/.changeset/great-forks-smash.md
@@ -0,0 +1,5 @@
+---
+"@bsmnt/scrollytelling": patch
+---
+
+- Fix visualizer size and content issues on mobile viewports
diff --git a/scrollytelling/src/components/debugger/visualizer/index.tsx b/scrollytelling/src/components/debugger/visualizer/index.tsx
@@ -463,8 +463,10 @@ export const Visualizer = () => {
               );
             })}
           </Select>
+          <div className={s['actions']}>
+
           <button
-            className={s["scrollToRoot"]}
+            className={clsx(s["button"], s["scrollToRoot"])}
             onClick={() => {
               const triggerElement = root?.tween?.scrollTrigger?.trigger;
               if (triggerElement) {
@@ -486,8 +488,12 @@ export const Visualizer = () => {
                 stroke-linejoin="round"
               />
             </svg>
-            SCROLL TO ROOT
+
+            <span className={s['text']}>
+              SCROLL TO ROOT
+            </span>
           </button>
+          </div>
         </div>
 
         <div className={s["actions"]}>
@@ -631,8 +637,8 @@ export const Visualizer = () => {
           </main>
           <footer className={s["footer"]}>
             <span>
-              Visualizer -{" "}
-              <span className={s["version"]}>v.{libPackage.version}</span>
+              Visualizer
+              <span className={s["version"]}> (v.{libPackage.version})</span>
             </span>
             <span>
               made with 🖤 by{" "}

diff --git a/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss b/scrollytelling/src/components/debugger/visualizer/visualizer.module.scss
@@ -57,22 +57,27 @@
       align-items: center;
 
       .button {
-        height: 24px;
-        width: 24px;
         padding: 4px;
         border-radius: 4px;
         background: var(--color-gray);
         border: 1px solid var(--color-gray-light);
 
         svg {
-          width: 100%;
+          width: 14px;
+          height: 14px;
         }
       }
 
       .scrollToRoot {
         display: flex;
+        align-items: center;
+        padding-left: 8px;
+        padding-right: 8px;
         gap: 0 8px;
-        padding: 0 8px;
+
+        .text {
+          transform: translateY(0.05em);
+        }
       }
     }
   }
@@ -331,5 +336,15 @@
   .root {
     left: 50%;
     transform: translateX(-50%);
+
+    .version {
+      display: none;
+    }
+
+    .scrollToRoot {
+      .text {
+        display: none;
+      }
+    }
   }
 }