fix: make homepage and other pages that use components responsive on …

…mobile
lukso-network · Dec 11, 2024 · b256f64 · b256f64
1 parent 080bfa9
commit b256f64
Show file tree

Hide file tree

Showing 21 changed files with 251 additions and 293 deletions.
diff --git a/docs/learn/developer-content.json b/docs/learn/developer-content.json
diff --git a/docs/learn/getting-started.mdx b/docs/learn/getting-started.mdx
@@ -9,11 +9,13 @@ import Chip from '@site/src/components/Chip';
 import CardWithContent from '@site/src/components/CardWithContent';
 import LinksBox from '@site/src/components/LinksBox';
 
+import styles from './learn.module.scss';
+
 import DeveloperBannerImage from '../../static/img/learn/DEVELOPERS_dApp.png';
 
 # Developer Quickstart
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+<div className={styles.containerQuickstartCards}>
 
 <CardWithContent title="Dapp Developer" image={DeveloperBannerImage}>
   <ul>
@@ -116,13 +118,14 @@ When building dApps on LUKSO, you are interacting with [Universal Profiles 🆙]
 
 <div style={{
   display: 'flex',
-  flexDirection: 'column',
+  flexDirection: 'row',
   margin: '3rem 0',
   gap: "1rem",
+  width: '100%',
+  justifyContent: 'center',
+  flexWrap: 'wrap'
 }}>
 
-<div style={{ width: '100%', display: 'flex', justifyContent: 'center', gap: '1rem' }}>
-
 <CallToActionButton
   icon="material-symbols:counter-1"
   text="Download & Install the UP Browser Extension 🧩"
@@ -146,9 +149,7 @@ When building dApps on LUKSO, you are interacting with [Universal Profiles 🆙]
 
 </div>
 
-</div>
-
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr' }}>
+<div className={styles.containerDeployProfiles}>
 
 <CardWithContent title="Using the Relayer API">
 

diff --git a/docs/learn/learn.module.scss b/docs/learn/learn.module.scss
@@ -0,0 +1,15 @@
+// ideally these styles should be moved to the component level (since the component is used in the markdown file)
+.containerQuickstartCards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-around;
+}
+
+.containerDeployProfiles {
+  display: flex;
+  flex-wrap: no-wrap;
+
+  @media (max-width: 768px) {
+    flex-wrap: wrap;
+  }
+}
diff --git a/docs/learn/overview.mdx b/docs/learn/overview.mdx
@@ -7,6 +7,8 @@ import Link from '@docusaurus/Link';
 import CardWithContent from '@site/src/components/CardWithContent';
 import Chip from '@site/src/components/Chip';
 
+import styles from './learn.module.scss';
+
 # 🌏 Overview
 
 ## What is LUKSO?
@@ -15,26 +17,28 @@ LUKSO is a Layer 1 EVM chain that uses an unmodified version of Ethereum. It can
 
 **BUT** it comes with [**a new set of smart contract standards**](../standards/introduction.md) called <strong style={{ color: "#FE005B" }}>L</strong>UKSO <strong style={{ color: "#FE005B" }}>S</strong>tandards <strong style={{ color: "#FE005B" }}>P</strong>roposals (<strong style={{ color: "#FE005B" }}>LSP</strong>s) and a [**set of tools**](../tools/libraries/getting-started.md) that can be used to create innovative protocols and dApps that can not be build using old standards.
 
-{/* TODO: refactor to use `<Link>` */}
+<div className={styles.containerQuickstartCards}>
 
 <CardWithContent title="🧱 LUKSO Standards (LSPs)">
   <ul>
-    <li><a href="../../standards/introduction" target="_blank">Discover the main building blocks of LUKSO</a></li>
-    <li><a href="./introduction" target="_blank">Learn the benefits of using the LUKSO Standards</a></li>
-    <li><a href="https://github.com/lukso-network/LIPs/tree/main/LSPs" target="_blank">Deep dive into the specs of the LSPs</a></li>
+    <li><Link to="../../standards/introduction">Discover the main building blocks of LUKSO</Link></li>
+    <li><Link to="./introduction">Learn the benefits of using the LUKSO Standards</Link></li>
+    <li><a href="https://github.com/lukso-network/LIPs/tree/main/LSPs">Deep dive into the specs of the LSPs</a></li>
   </ul>
 
 </CardWithContent>
 
 <CardWithContent title="🧬 Network & Validators">
   <ul>
-    <li><a href="../../networks/mainnet/parameters#add-lukso-to-wallets" target="_blank">Connect your wallet to the LUKSO Mainnet</a></li>
-    <li><a href="../../networks/mainnet/running-a-node" target="_blank">Run a LUKSO node</a></li>
-    <li><a href="../../networks/mainnet/become-a-validator" target="_blank">Become a Validator</a></li>
+    <li><Link to="../../networks/mainnet/parameters#add-lukso-to-wallets">Connect your wallet to the LUKSO Mainnet</Link></li>
+    <li><Link to="../../networks/mainnet/running-a-node">Run a LUKSO node</Link></li>
+    <li><Link to="../../networks/mainnet/become-a-validator">Become a Validator</Link></li>
   </ul>
 
 </CardWithContent>
 
+</div>
+
 ## What makes LUKSO unique?
 
 <table>

diff --git a/docs/tools/apis/_category_.yml b/docs/tools/apis/_category_.yml
@@ -1,3 +1,3 @@
 label: '🔌 APIs'
 collapsed: false
-position: 1
+position: 2
diff --git a/docs/tools/dapps/_category_.yml b/docs/tools/dapps/_category_.yml
@@ -1,3 +1,3 @@
 label: '🛠️ Javascript libraries'
 collapsed: false
-position: 2
+position: 3
diff --git a/docs/tools/docker-factory.md b/docs/tools/docker-factory.md
@@ -1,6 +1,6 @@
 ---
 title: 🏭 Node Docker Factory
-sidebar_position: 6
+sidebar_position: 7
 ---
 
 # Node Docker Factory

diff --git a/docs/tools/explorers-debuggers.md b/docs/tools/explorers-debuggers.md
@@ -1,6 +1,6 @@
 ---
 title: 🔍 Explorers & Debug Tools
-sidebar_position: 5
+sidebar_position: 6
 ---
 
 # 🔍 Explorers & Debug Tools

diff --git a/docs/tools/index.mdx b/docs/tools/index.mdx
@@ -1,10 +1,14 @@
 ---
 id: tools
+title: Tools
+sidebar_position: 1
 ---
 
 import ReferenceCard from '@site/src/components/ReferenceCard';
 import CodeBlock from '@theme/CodeBlock';
 
+import styles from './tools.module.scss';
+
 import SolidityLogo from '@site/static/img/tools/solidity-logo.png';
 import FoundryLogo from '@site/static/img/tools/foundry-logo.png';
 
@@ -14,7 +18,7 @@ Explore the different tools available for developers to build dApps, smart contr
 
 ## APIs
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+<div className={styles.referenceCardGrid}>
 
 <ReferenceCard name="⛽️ Relayer API" links={[ 
   {label: 'Documentation', to: '/tools/apis/relayer-api' },
@@ -46,7 +50,7 @@ Available RPC endpoints for the Universal Profile Browser Extension 🧩.
 
 ## Javascript libraries
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+<div className={styles.referenceCardGrid}>
 
 <ReferenceCard name="erc725.js" showAsCode={true} links={[ 
   {label: 'Documentation', to: '/tools/dapps/erc725js/getting-started' },
@@ -180,7 +184,7 @@ Skeleton repository to create a transaction relayer service compliant with the [
 
 ## Smart Contracts
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+<div className={styles.referenceCardGrid}>
 
 <ReferenceCard name="LSP Smart Contracts" links={[ 
   {label: 'Overview', to: '/tools/lsp-smart-contracts/getting-started' },
@@ -265,7 +269,7 @@ Foundry repository template with pre-installed `@lukso/lsp-smart-contracts` pack
 
 ## Others
 
-<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: '1rem'}}>
+<div className={styles.referenceCardGrid}>
 
 <ReferenceCard name="🔍 Explorer & Debuggers" links={[ 
   {label: 'Blockscout', to: 'https://explorer.lukso.network' },

diff --git a/docs/tools/integrations.md b/docs/tools/integrations.md
@@ -1,7 +1,7 @@
 ---
 id: integrations
 title: 🪢 Integrations
-sidebar_position: 4
+sidebar_position: 5
 ---
 
 # 🪢 Integrations

diff --git a/docs/tools/lsp-smart-contracts/_category_.yml b/docs/tools/lsp-smart-contracts/_category_.yml
@@ -1,3 +1,3 @@
 label: '📑 Smart Contracts'
 collapsed: true
-position: 3
+position: 4
diff --git a/docs/tools/tools.module.scss b/docs/tools/tools.module.scss
@@ -0,0 +1,9 @@
+.referenceCardGrid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 1rem;
+
+  @media (max-width: 680px) {
+    grid-template-columns: 1fr; /* Single column on mobile */
+  }
+}
diff --git a/src/components/CardWithContent/index.tsx b/src/components/CardWithContent/index.tsx
@@ -4,6 +4,8 @@ import CardContent from '@mui/material/CardContent';
 import CardMedia from '@mui/material/CardMedia';
 import Typography from '@mui/material/Typography';
 
+import styles from './CardWithContent.module.scss';
+
 type Props = {
   image?: string;
   title: string;
@@ -16,23 +18,16 @@ export default function CardWithContent({
   children: content,
 }: Props) {
   return (
-    <div
-      className="cardwithimage"
-      style={{
-        // display: 'flex',
-        // flexWrap: 'wrap',
-        gap: '1rem',
-      }}
-    >
+    <div className={styles.cardWithContent}>
       <Card
-      // sx={{
-      //   width: {
-      //     xs: '100%', // full width on mobile
-      //     sm: '85%', // slightly smaller on tablet
-      //     md: '48%', // original width on desktop
-      //   },
-      //   maxWidth: '600px', // prevent cards from getting too wide
-      // }}
+        sx={{
+          width: {
+            xs: '100%', // full width on mobile
+            sm: '85%', // slightly smaller on tablet
+            md: '50%', // original width on desktop
+          },
+          maxWidth: '600px', // prevent cards from getting too wide
+        }}
       >
         {image && (
           <CardMedia