Improve mobile rendering (#492)

* Fix mobile rendering of scrollycoding * Fix mobile rendering of TextAndCode * cleanup * Fix padding
restatedev · Dec 5, 2024 · bedd241 · bedd241
1 parent 8ae9f2f
commit bedd241
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 12 deletions.
diff --git a/src/components/code/code/text-and-code.module.css b/src/components/code/code/text-and-code.module.css
@@ -19,4 +19,20 @@
     flex: 0 0 60%;
     box-sizing: border-box;
     display: block;
+}
+
+@media screen and (max-width: 768px) {
+    .text-and-code {
+        display: block;
+    }
+
+    .text-and-code-content {
+        min-width: auto;
+        max-width: 100%;
+    }
+
+    .text-and-code-sticker {
+        min-width: 100%;
+        max-width: 100%;
+    }
 }
diff --git a/src/components/code/scrollycoding.module.css b/src/components/code/scrollycoding.module.css
@@ -21,16 +21,39 @@
 
 .step {
   border-radius: 0;
-  padding: 24px;
+  padding: 10px;
   border: 0;
   border-left: 4px solid transparent;
   box-shadow: inset 0 1px #e3e8ee;
   margin: 0 0 0 -0.5rem;
 }
 
-.step[data-selected="true"] {
+.stepMobile {
   border-radius: 0;
-  padding: 24px;
+  padding: 5px;
+  border: 0;
+  border-left: 4px solid transparent;
+  box-shadow: inset 0 1px #e3e8ee;
+  margin: 0 0 0 -0.5rem;
+}
+
+.stepMobile {
+  display: none;
+}
+
+.step[data-selected="true"]{
+  border-radius: 0;
+  padding: 10px;
+  box-shadow: inset 0 1px #e3e8ee;
+  margin: 0 0 0 -0.5rem;
+  border: 0;
+  border-left: 4px solid var(--ifm-color-secondary-darkest);
+  background-color: var(--docusaurus-highlighted-code-line-bg);
+}
+
+.stepMobile[data-selected="true"]{
+  border-radius: 0;
+  padding: 5px;
   box-shadow: inset 0 1px #e3e8ee;
   margin: 0 0 0 -0.5rem;
   border: 0;
@@ -55,3 +78,25 @@
   top: 4rem;
   overflow: auto;
 }
+
+@media screen and (max-width: 768px) {
+  .stepMobile {
+    display: block;
+  }
+  .step {
+    display: none;
+  }
+  .scrollycodingContainer {
+    flex-direction: column;
+  }
+  .stepsContainer {
+    min-width: auto;
+    max-width: 100%;
+  }
+
+  .sticker {
+    min-width: 100%;
+    max-width: 100%;
+    height: auto;
+  }
+}
diff --git a/src/components/code/scrollycoding.tsx b/src/components/code/scrollycoding.tsx
@@ -31,15 +31,28 @@ export function Scrollycoding(props: unknown) {
         <SelectionProvider className={styles.scrollycodingContainer}>
             <div className={styles.stepsContainer}>
                 {steps.map((step, i) => (
-                    <Selectable
-                        key={i}
-                        index={i}
-                        selectOn={["hover", "scroll", "click"]}
-                        className={styles.step}
-                    >
-                        {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
-                        <div>{step.children}</div>
-                    </Selectable>
+                    <>
+                        <Selectable
+                            key={i}
+                            index={i}
+                            selectOn={["hover", "scroll", "click"]}
+                            className={styles.step}
+                        >
+                            {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
+                            <div>{step.children}</div>
+                        </Selectable>
+                        {/*Mobile:*/}
+                        <Selectable
+                            key={i}
+                            index={i}
+                            selectOn={["click"]}
+                            className={styles.stepMobile}
+                        >
+                            {(step.title.length > 0) ? <p className={styles.stepTitle}>{step.title}</p> : null}
+                            <div>{step.children}</div>
+                        </Selectable>
+                    </>
+
                 ))}
             </div>
             <Selection