Merge pull request #19 from syncosaurus/figure-sizing

fix: made mobile puzzle slightly more responsive
syncosaurus · Apr 26, 2024 · ba20f77 · ba20f77
2 parents f2c73fb + e867f70
commit ba20f77
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 10 deletions.
diff --git a/src/components/Puzzle/index.js b/src/components/Puzzle/index.js
@@ -4,10 +4,27 @@ import Signal from './Signal'
 import SignalVertical from './SignalVertical'
 import { useEffect, useState } from 'react'
 
-function IFrame() {
+const divStyle = {
+  border: '14px solid',
+  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 15',
+}
+
+function IFrame({ narrow }) {
   const {
     siteConfig: { customFields },
   } = useDocusaurusContext()
+
+  if (narrow === 'sm') {
+    return (
+      <div style={divStyle}>
+        <iframe
+          className="bg-transparent h-96 w-[475px] ml-[-35px]"
+          src={'https://c218db58.website-puzzle.pages.dev/'}
+        ></iframe>
+      </div>
+    )
+  }
+
   return (
     <div className="container inline-block w-[500px] m-0 p-0">
       <iframe
@@ -27,20 +44,30 @@ export default function Puzzle() {
     window.addEventListener('resize', e => setWindowWidth(e.target.innerWidth))
   }, [])
 
+  if (windowWidth < 600) {
+    return (
+      <div className="grid grid-cols-1 gap-0 justify-center w-full">
+        <IFrame narrow={'sm'} />
+        <SignalVertical />
+        <IFrame narrow={'sm'} />
+      </div>
+    )
+  }
+
   if (windowWidth < 1094) {
     return (
       <div className="grid grid-cols-1 gap-0 justify-center">
-        <IFrame />
+        <IFrame narrow={'md'} />
         <SignalVertical />
-        <IFrame />
+        <IFrame narrow={'md'} />
       </div>
     )
   }
   return (
     <div className="flex">
-      <IFrame />
+      <IFrame narrow={'lg'} />
       <Signal />
-      <IFrame />
+      <IFrame narrow={'lg'} />
     </div>
   )
 }
diff --git a/src/components/TodoList/TodoList.js b/src/components/TodoList/TodoList.js
@@ -23,10 +23,6 @@ export default function TodoList() {
     setTodoList(filteredTodoList)
   }
 
-  const divStyle = {
-    border: '40px solid',
-    borderImage: 'url(' + '/landing/Client-window2.svg' + ') 25 25',
-  }
   if (windowWidth < 1094) {
     return (
       <div className="grid grid-cols-1 gap-0 justify-center text-left">

diff --git a/src/components/TodoList/TodoListClient.js b/src/components/TodoList/TodoListClient.js
@@ -104,7 +104,7 @@ export function TodoListClient({
 
 const divStyle = {
   border: '40px solid',
-  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 25 25',
+  borderImage: 'url(' + '/landing/Client-window2.svg' + ') 35 35',
 }
 
 const deleteButtonStyle = {