feat: phone and table rendering for main DevPortal page (#71)

# Description Render responsive design for phone & tablet. - Closes #33 ## Screenshot(s) <img width="378" alt="image" src="https://github.com/user-attachments/assets/0535423c-2327-42fb-9d10-a9d4517a7125"> <img width="378" alt="image" src="https://github.com/user-attachments/assets/36297975-8722-47a1-9da6-3b66b253f196"> <img width="378" alt="image" src="https://github.com/user-attachments/assets/7c371658-3718-4272-a358-304585d4fbeb"> - [x] New Feature # How to Test? 1. Pull and run locally 2. Go to "Developer Portal" page 3. See that the design at different sizes responds appropriately # Checklist: - [x] I have performed a self-review of my code - [x] I have commented my code & PR, particularly in hard-to-understand areas - [x] I have checked at all the breakpoints to make sure it works on all screen sizes
frequency-chain · Nov 19, 2024 · bf6ddce · bf6ddce
1 parent 52173c9
commit bf6ddce
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 76 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -39,6 +39,7 @@
     "svelte": "^5.1.3",
     "svelte-check": "^4.0.5",
     "tailwindcss": "^3.4.14",
+    "tailwindcss-debug-screens": "^2.2.1",
     "tslib": "^2.8.0",
     "typescript": "^5.6.3",
     "typescript-eslint": "^8.11.0",

diff --git a/src/components/HAccordion.svelte b/src/components/HAccordion.svelte
@@ -16,6 +16,11 @@
 
   let { isOpen = $bindable(false), sectionNumber, sectionLabel, iconSrc, children, url }: HAccordionProps = $props();
 
+  let isEven: boolean = parseInt(sectionNumber, 10) % 2 === 0;
+  let textAlignClasses = `lg:text-left vertical-md:text-left ${isEven ? 'text-right' : ''}`;
+  let borderClasses = `lg:border-l-[1.5px] lg:pl-f12 lg:border-r-0 lg:pr-3 vertical-md:border-l-[1.5px] vertical-md:pl-f12 vertical-md:border-r-0 vertical-md:pr-3 ${isEven ? 'border-r-[1.5px] pr-f12' : 'border-l-[1.5px] pl-f12'}`;
+  let contentAlignClasses = `lg:justify-normal vertical-md:justify-normal ${isEven ? 'justify-end' : ''}`;
+
   function toggle() {
     if (!isOpen) {
       isOpen = true;
@@ -29,31 +34,39 @@
 <div
   id={`explore_${sectionNumber}`}
   onclick={toggle}
-  class={`w-min-[150px] m:pr-3 flex cursor-pointer flex-col border-l-[1.5px] border-grayBorder border-opacity-25 pl-3 transition-all lg:pr-3 ${isOpen ? 'w-f320' : 'w-[132px]'}`}
+  class="{`lg:w-min-[150px] vertical-md:w-min-[150px] flex cursor-pointer flex-col ${borderClasses} border-grayBorder px-f32 lg:transition-all vertical-md:transition-all ${isOpen ? 'lg:w-f320 vertical-md:w-f320' : 'lg:w-[132px] vertical-md:w-[132px]'}`}}"
 >
-  <span class="-mt-[9px] text-clip text-nowrap font-title text-h3 font-normal text-white"
-    >.{parseInt(sectionNumber, 10).toString().padStart(2, '0')}</span
-  >
+  <div class={`-mt-[9px] text-clip text-nowrap font-title text-h3 font-normal text-white ${textAlignClasses}`}>
+    .{parseInt(sectionNumber, 10).toString().padStart(2, '0')}
+  </div>
   {#if iconSrc}
-    <div id={`explore_${sectionNumber}_icon`} class="pt-[6px]">
+    <div
+      id={`explore_${sectionNumber}_icon`}
+      class={`flex w-full flex-row pt-[6px] lg:justify-normal vertical-md:justify-normal ${contentAlignClasses} `}
+    >
       <img src={iconSrc as string} alt="" class="h-[65px] w-[65px]" />
     </div>
   {/if}
-  <div id={`explore_${sectionNumber}_label`} class="pt-6">
-    <span class="text-clip text-wrap font-title text-h6 font-normal text-white">
-      {@render sectionLabel()}
-    </span>
+  <div
+    id={`explore_${sectionNumber}_label`}
+    class={`text-clip text-wrap pt-6 font-title text-h6 font-normal text-white ${textAlignClasses}`}
+  >
+    {@render sectionLabel()}
   </div>
 
-  <div class={`transition-all ${isOpen ? 'block' : 'hidden'}`}>
+  <div
+    class={`lg:transition-all vertical-md:transition-all ${isOpen ? 'block' : 'block lg:hidden vertical-md:hidden'}`}
+  >
     <div
       id={`explore_${sectionNumber}_content`}
-      class={`lg:max-w-auto m:max-w-[280px] sm max-h-f224 overflow-hidden pb-f12 pt-4 text-white sm:max-w-[515px] sm:pr-f8 lg:max-w-[280px] lg:pl-0`}
+      class={`sm max-h-f224 max-w-[515px] overflow-hidden pb-f12 pl-0 pr-f8 pt-4 text-white md:max-w-full lg:max-w-[280px] vertical-md:max-w-[280px] ${textAlignClasses}`}
     >
       {@render children()}
     </div>
-    <Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
-      <span class=" text-xs text-black">Learn</span> <img src={Vector} width="12px" height="12px" alt="" />
-    </Button>
+    <div class={`flex flex-row ${contentAlignClasses}`}>
+      <Button id={`explore_${sectionNumber}_button`} size="xs" type="primary" href={url} target="_blank">
+        <span class=" text-xs text-black">Learn</span> <img src={Vector} width="12px" height="12px" alt="" />
+      </Button>
+    </div>
   </div>
 </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,12 +1,26 @@
 <script lang="ts">
+  import { type Snippet } from 'svelte';
   import Header from '../components/Header/Header.svelte';
   import { Footer } from '@frequency-chain/style-guide';
+
+  let { children } = $props();
+  const debugScreens = false; // set to true to enable debugging CSS size breaks
 </script>
 
-<Header />
-<div class="w-full">
-  <slot />
-</div>
-<div class="w-full bg-navy px-[5%] lg:px-[20%]">
-  <Footer type="dark" class="w-full border-grayBorder border-opacity-25 vertical-lg:w-[100%]" />
-</div>
+{#snippet mainPage(content: Snippet)}
+  <Header />
+  <div class="w-full">
+    {@render content()}
+  </div>
+  <div class="w-full bg-navy px-[5%] lg:px-[20%]">
+    <Footer type="dark" class="w-full border-grayBorder vertical-lg:w-[100%]" />
+  </div>
+{/snippet}
+
+{#if debugScreens}
+  <div class="debug-screens">
+    {@render mainPage(children)}
+  </div>
+{:else}
+  {@render mainPage(children)}
+{/if}
diff --git a/src/routes/docs/components/DocsMain.svelte b/src/routes/docs/components/DocsMain.svelte
@@ -2,12 +2,12 @@
   import DocsMainImage from './DocsMainImage.svelte';
 </script>
 
-<section class="freq-container flex sm:flex-col lg:min-h-[800px] lg:flex-row">
-  <div class="sm:w-full lg:block lg:w-1/2">
+<section class="freq-container flex flex-col lg:min-h-[800px] lg:flex-row vertical-md:flex-row">
+  <div class="vertical-md::w-1/2 block w-full justify-center lg:w-1/2 lg:justify-start vertical-md:justify-start">
     <DocsMainImage />
   </div>
-  <div class="flex flex-col gap-6 sm:pt-f32 lg:w-1/2 lg:pt-f224">
-    <h2 class=" title-75 text-navy sm:text-h2">Get Started with Frequency Development</h2>
+  <div class="flex flex-col gap-6 pt-f32 lg:w-1/2 lg:pt-f224 vertical-md:pt-f224">
+    <h2 class=" title-75 text-h2 text-navy">Get Started with Frequency Development</h2>
     <p class="body text-h5 font-bold text-black sm:text-normal">
       Frequency offers a variety of open source tools and documentation in the Developers Portal to help you rapidly get
       applications up and running on Frequency.

diff --git a/src/routes/docs/components/DocsMainImage.svelte b/src/routes/docs/components/DocsMainImage.svelte
@@ -1,4 +1,5 @@
 <!-- Desktop -->
 <div
-  class="relative w-full bg-[url(/src/lib/assets/dev-portal.svg)] bg-cover bg-center bg-no-repeat sm:h-[300px] lg:h-full"
+  class="relative min-h-[300px] w-full bg-[url(/src/lib/assets/dev-portal.svg)] bg-cover bg-center bg-no-repeat md:mt-0 md:min-h-[600px]
+  lg:h-full"
 ></div>
diff --git a/src/routes/docs/components/Explore.svelte b/src/routes/docs/components/Explore.svelte
@@ -26,9 +26,12 @@
 
 <div
   id="explore_section"
-  class="mt-f96 flex w-full flex-row bg-navy sm:px-f64 sm:py-f80 lg:px-f128 lg:py-f96 vertical-lg:min-h-[550-px] vertical-lg:w-[100%]"
+  class="freq-container mt-f96 flex w-full flex-col gap-f12 sm:pt-f20 lg:flex-row lg:gap-0 lg:bg-navy lg:px-f128 lg:py-f96 vertical-lg:min-h-[550-px] vertical-lg:w-[100%] vertical-md:flex-row vertical-md:gap-0"
 >
-  <div id="explore_description" class="relative flex flex-row bg-navy pr-f12 text-teal vertical-lg:min-h-[550px]">
+  <div
+    id="explore_description"
+    class="relative flex flex-row bg-navy pr-f12 text-teal sm:px-f32 vertical-lg:min-h-[550px]"
+  >
     <div class="flex flex-col gap-f32">
       <span class="h1 mt-f8 text-clip text-wrap font-title font-normal">Explore &amp; Build</span>
 
@@ -50,55 +53,57 @@
   </div>
 
   <!-- min width selected based on description section + 1 open accordion + 3 closed accordions -->
-  <div class="flex flex-row lg:min-w-[716px]">
-    <HAccordion
-      sectionNumber="1"
-      iconSrc={ProviderIcon}
-      on:toggled={handleToggled}
-      bind:isOpen={sectionOpenStates[1]}
-      url="https://docs.frequency.xyz/Guides/BecomeAProvider.html"
-    >
-      {#snippet sectionLabel()}Quick Start/<br />Become a Provider{/snippet}
-      In 5 minutes, you can become a provider, set up the Social App Template Example Application that uses Gateway Services.
-      This will give you a quick introduction to a working integration with Gateway Services and a starting place to explore
-      the possibilities.
-    </HAccordion>
+  <div class="w-full bg-navy sm:px-f32 sm:py-f16">
+    <div class="flex flex-col gap-f4 lg:min-w-[716px] lg:flex-row vertical-md:flex-row">
+      <HAccordion
+        sectionNumber="1"
+        iconSrc={ProviderIcon}
+        on:toggled={handleToggled}
+        bind:isOpen={sectionOpenStates[1]}
+        url="https://docs.frequency.xyz/Guides/BecomeAProvider.html"
+      >
+        {#snippet sectionLabel()}Quick Start/<br />Become a Provider{/snippet}
+        In 5 minutes, you can become a provider, set up the Social App Template Example Application that uses Gateway Services.
+        This will give you a quick introduction to a working integration with Gateway Services and a starting place to explore
+        the possibilities.
+      </HAccordion>
 
-    <HAccordion
-      sectionNumber="2"
-      iconSrc={GatewayIcon}
-      on:toggled={handleToggled}
-      bind:isOpen={sectionOpenStates[2]}
-      url="https://docs.frequency.xyz/Guides/Gateway.html"
-    >
-      {#snippet sectionLabel()}Frequency<br />Gateway{/snippet}
-      is a collection of easy-to-deploy: microservices that provide simple REST APIs for interacting with Frequency. Configure
-      and deploy only the components you need, including.
-    </HAccordion>
+      <HAccordion
+        sectionNumber="2"
+        iconSrc={GatewayIcon}
+        on:toggled={handleToggled}
+        bind:isOpen={sectionOpenStates[2]}
+        url="https://docs.frequency.xyz/Guides/Gateway.html"
+      >
+        {#snippet sectionLabel()}Frequency<br />Gateway{/snippet}
+        is a collection of easy-to-deploy microservices that provide simple REST APIs for interacting with Frequency. Configure
+        and deploy only the components you need.
+      </HAccordion>
 
-    <HAccordion
-      sectionNumber="3"
-      iconSrc={SsoIcon}
-      on:toggled={handleToggled}
-      bind:isOpen={sectionOpenStates[3]}
-      url="https://docs.frequency.xyz/Guides/SSO.html"
-    >
-      {#snippet sectionLabel()}Add Single<br />Sign-on to<br />your App{/snippet}
-      SIWF provides comprehensive documentation and tools to integrate with Frequency Access, an easy-to-use single sign-on
-      identity solution for users on Frequency. SIWF simplifies the authentication process, allowing users to access the
-      entire Frequency ecosystem effortlessly while maintaining control over their personal data.</HAccordion
-    >
+      <HAccordion
+        sectionNumber="3"
+        iconSrc={SsoIcon}
+        on:toggled={handleToggled}
+        bind:isOpen={sectionOpenStates[3]}
+        url="https://docs.frequency.xyz/Guides/SSO.html"
+      >
+        {#snippet sectionLabel()}Add Single<br />Sign-on to<br />your App{/snippet}
+        SIWF provides comprehensive documentation and tools to integrate with Frequency Access, an easy-to-use single sign-on
+        identity solution for users on Frequency. SIWF simplifies the authentication process, allowing users to access the
+        entire Frequency ecosystem effortlessly while maintaining control over their personal data.</HAccordion
+      >
 
-    <HAccordion
-      sectionNumber="4"
-      iconSrc={CoreIcon}
-      on:toggled={handleToggled}
-      bind:isOpen={sectionOpenStates[4]}
-      url="https://docs.frequency.xyz/"
-    >
-      {#snippet sectionLabel()}Frequency<br />Core{/snippet}
-      Here you will find detailed information about the building blocks of Frequency including technical overviews, advanced
-      tutorials, API documentation, code samples and more–everything you need to build your first Frequency application.</HAccordion
-    >
+      <HAccordion
+        sectionNumber="4"
+        iconSrc={CoreIcon}
+        on:toggled={handleToggled}
+        bind:isOpen={sectionOpenStates[4]}
+        url="https://docs.frequency.xyz/"
+      >
+        {#snippet sectionLabel()}Frequency<br />Core{/snippet}
+        Here you will find detailed information about the building blocks of Frequency including technical overviews, advanced
+        tutorials, API documentation, code samples and more&mdash;everything you need to build your first Frequency application.</HAccordion
+      >
+    </div>
   </div>
 </div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,11 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 import frequencyConfig from '@frequency-chain/style-guide/tailwind.config';
+import debugScreens from 'tailwindcss-debug-screens';
 
 import { MAX_PAGE_WIDTH } from './src/lib/consts';
 
 export default {
   content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/@frequency-chain/style-guide/**/*.{html,js,svelte,ts}'],
   theme: {
+    debugScreens: {
+      ignore: ['vertical', 'horizontal'],
+    },
     extend: {
       fontFamily: {
         title: ['Newake', 'sans-serif'],
@@ -17,7 +21,7 @@ export default {
       colors: {
         darkIndigo: '#445BC3',
         tealBright: '#00B6AF',
-        grayBorder: '#E5E7E7',
+        grayBorder: '#C8CDD0',
       },
       width: {
         page: `${MAX_PAGE_WIDTH}px`,
@@ -37,5 +41,6 @@ export default {
     },
   },
   safelist: ['after:bg-navy', 'after:bg-cream', 'invalid:border-red'],
+  plugins: [debugScreens],
   presets: [frequencyConfig],
 };