Nudge responsive layout

saleor · Jul 10, 2024 · 702e322 · 702e322
1 parent 08be21a
commit 702e322
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 50 deletions.
diff --git a/components/Apps/Apps.jsx b/components/Apps/Apps.jsx
@@ -29,49 +29,51 @@ const Shell = ({ color, title, children, href = "" }) => {
 };
 const Apps = () => {
   return (
-    <div className={s.container}>
-      <Shell color={"rgb(10, 191, 83)"} title={"Adyen"}>
-        <Adyen />
-      </Shell>
-      <Shell color={"rgb(223, 110, 44)"} title={"Avatax"}>
-        <Taxes />
-      </Shell>
-      <Shell color={"rgb(39, 180, 118)"} title={"CMS"}>
-        <CMS />
-      </Shell>
-      <Shell color={"rgb(137, 82, 255)"} title={"CRM"}>
-        <CRM />
-      </Shell>
-      <Shell color={"rgb(59, 213, 121)"} title={"Data importer"}>
-        <Data />
-      </Shell>
-      <Shell color={"rgb(227, 149, 60)"} title={"Invoices"}>
-        <Invoices />
-      </Shell>
-      <Shell color={"rgb(58, 86, 199)"} title={"Klaviyo"}>
-        <Placeholder />
-      </Shell>{" "}
-      <Shell color={"rgb(122, 150, 176)"} title={"Product Feed"}>
-        <ProductFeed />
-      </Shell>
-      <Shell color={"rgb(199, 58, 63)"} title={"Search"}>
-        <Search />
-      </Shell>
-      <Shell color={"rgb(37, 195, 101)"} title={"Twilio Segment"}>
-        <Segment />
-      </Shell>
-      <Shell color={"rgb(95, 58, 199)"} title={"Slack"}>
-        <Placeholder />
-      </Shell>
-      <Shell color={"rgb(199, 159, 58)"} title={"SMTP"}>
-        <Notification />
-      </Shell>
-      <Shell color={"rgb(99, 91, 255)"} title={"Stipe"}>
-        <Stripe />
-      </Shell>
-      <Shell color={"rgb(86, 189, 104)"} title={"Taxjar"}>
-        <TaxJar />
-      </Shell>
+    <div className={s.root}>
+      <div className={s.container}>
+        <Shell color={"rgb(10, 191, 83)"} title={"Adyen"}>
+          <Adyen />
+        </Shell>
+        <Shell color={"rgb(223, 110, 44)"} title={"Avatax"}>
+          <Taxes />
+        </Shell>
+        <Shell color={"rgb(39, 180, 118)"} title={"CMS"}>
+          <CMS />
+        </Shell>
+        <Shell color={"rgb(137, 82, 255)"} title={"CRM"}>
+          <CRM />
+        </Shell>
+        <Shell color={"rgb(59, 213, 121)"} title={"Data importer"}>
+          <Data />
+        </Shell>
+        <Shell color={"rgb(227, 149, 60)"} title={"Invoices"}>
+          <Invoices />
+        </Shell>
+        <Shell color={"rgb(58, 86, 199)"} title={"Klaviyo"}>
+          <Placeholder />
+        </Shell>{" "}
+        <Shell color={"rgb(122, 150, 176)"} title={"Product Feed"}>
+          <ProductFeed />
+        </Shell>
+        <Shell color={"rgb(199, 58, 63)"} title={"Search"}>
+          <Search />
+        </Shell>
+        <Shell color={"rgb(37, 195, 101)"} title={"Twilio Segment"}>
+          <Segment />
+        </Shell>
+        <Shell color={"rgb(95, 58, 199)"} title={"Slack"}>
+          <Placeholder />
+        </Shell>
+        <Shell color={"rgb(199, 159, 58)"} title={"SMTP"}>
+          <Notification />
+        </Shell>
+        <Shell color={"rgb(99, 91, 255)"} title={"Stipe"}>
+          <Stripe />
+        </Shell>
+        <Shell color={"rgb(86, 189, 104)"} title={"Taxjar"}>
+          <TaxJar />
+        </Shell>
+      </div>
     </div>
   );
 };

diff --git a/components/Apps/apps.module.css b/components/Apps/apps.module.css
@@ -1,3 +1,6 @@
+.root {
+  container-type: inline-size;
+}
 .container {
   --hover-color: var(--gray12);
   display: grid;
@@ -6,6 +9,12 @@
   flex-wrap: wrap;
 }
 
+@container (width < 500px) {
+  .container {
+    grid-template-columns: repeat(2, minmax(200px, 1fr));
+  }
+}
+
 .app {
   font-size: var(--font-size-sm);
   font-weight: 600;

diff --git a/components/Block/block.module.css b/components/Block/block.module.css
@@ -14,7 +14,7 @@
   grid-column: 4 / -1;
 }
 
-@container (width < 800px) {
+@container (width < 850px) {
   .root h2 {
     grid-column: 1 / 12;
   }

diff --git a/components/Chapters/index.jsx b/components/Chapters/index.jsx
@@ -3,12 +3,14 @@ import React from "react";
 import s from "./styles.module.css";
 
 const Chapters = ({ children, home = false }) => (
-  <section className={s.grid}>
-    {"map" in children ? (
-      children.map((child, idx) => <article key={idx}>{child}</article>)
-    ) : (
-      <article>{children}</article>
-    )}
+  <section className={s.root}>
+    <div className={s.grid}>
+      {"map" in children ? (
+        children.map((child, idx) => <article key={idx}>{child}</article>)
+      ) : (
+        <article>{children}</article>
+      )}
+    </div>
   </section>
 );
 

diff --git a/components/Chapters/styles.module.css b/components/Chapters/styles.module.css
@@ -1,9 +1,25 @@
+.root {
+  container-type: inline-size;
+}
+
 .grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: var(--spacer-5);
 }
 
+@container (width < 600px) {
+  .grid {
+    grid-template-columns: repeat(2, minmax(100px, 200px));
+  }
+}
+
+@container (width < 200px) {
+  .grid {
+    grid-template-columns: repeat(1, minmax(100px, 200px));
+  }
+}
+
 .grid p {
   margin: 0;
 }