From bf6ddce431593240740bf1eb45eea2aa4e3031c7 Mon Sep 17 00:00:00 2001 From: Joe Caputo Date: Tue, 12 Nov 2024 17:38:40 -0500 Subject: [PATCH] feat: phone and table rendering for main DevPortal page (#71) # Description Render responsive design for phone & tablet. - Closes #33 ## Screenshot(s) image image image - [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 --- package-lock.json | 11 ++ package.json | 1 + src/components/HAccordion.svelte | 41 ++++--- src/routes/+layout.svelte | 28 +++-- src/routes/docs/components/DocsMain.svelte | 8 +- .../docs/components/DocsMainImage.svelte | 3 +- src/routes/docs/components/Explore.svelte | 103 +++++++++--------- tailwind.config.js | 7 +- 8 files changed, 126 insertions(+), 76 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b76cfe5..8faf84e7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33,6 +33,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", @@ -5485,6 +5486,16 @@ "node": ">=14.0.0" } }, + "node_modules/tailwindcss-debug-screens": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/tailwindcss-debug-screens/-/tailwindcss-debug-screens-2.2.1.tgz", + "integrity": "sha512-EMyA0CYBzqcZJHtVDvBfmYzfx3NxuK4qDyVO5wnzcGOrmJsv25D9xPpWefVTORTvhE6pCh90Z1WYnLUKsg3yMw==", + "dev": true, + "license": "MIT", + "peerDependencies": { + "tailwindcss": "^1.0 || ^2.0 || ^3.0.0-alpha.1 || ^3.0" + } + }, "node_modules/tailwindcss/node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", diff --git a/package.json b/package.json index fe59c68b..aa3d131e 100644 --- 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 index cf3f7f4a..3354f46e 100644 --- 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 @@
- .{parseInt(sectionNumber, 10).toString().padStart(2, '0')} +
+ .{parseInt(sectionNumber, 10).toString().padStart(2, '0')} +
{#if iconSrc} -
+
{/if} -
- - {@render sectionLabel()} - +
+ {@render sectionLabel()}
-
+
{@render children()}
- +
+ +
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index f72ec4bb..6b6bc5bb 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,12 +1,26 @@ -
-
- -
-
-
-
+{#snippet mainPage(content: Snippet)} +
+
+ {@render content()} +
+
+
+
+{/snippet} + +{#if debugScreens} +
+ {@render mainPage(children)} +
+{:else} + {@render mainPage(children)} +{/if} diff --git a/src/routes/docs/components/DocsMain.svelte b/src/routes/docs/components/DocsMain.svelte index cb3f9a4e..7fa82f72 100644 --- a/src/routes/docs/components/DocsMain.svelte +++ b/src/routes/docs/components/DocsMain.svelte @@ -2,12 +2,12 @@ import DocsMainImage from './DocsMainImage.svelte'; -
-
+
+
-
-

Get Started with Frequency Development

+
+

Get Started with Frequency Development

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 index 2ccdb957..7215ba63 100644 --- a/src/routes/docs/components/DocsMainImage.svelte +++ b/src/routes/docs/components/DocsMainImage.svelte @@ -1,4 +1,5 @@

diff --git a/src/routes/docs/components/Explore.svelte b/src/routes/docs/components/Explore.svelte index 83940c70..fd4e0fd6 100644 --- a/src/routes/docs/components/Explore.svelte +++ b/src/routes/docs/components/Explore.svelte @@ -26,9 +26,12 @@
-
+
Explore & Build @@ -50,55 +53,57 @@
-
- - {#snippet sectionLabel()}Quick Start/
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. - +
+
+ + {#snippet sectionLabel()}Quick Start/
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. + - - {#snippet sectionLabel()}Frequency
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. - + + {#snippet sectionLabel()}Frequency
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. + - - {#snippet sectionLabel()}Add Single
Sign-on to
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. + + {#snippet sectionLabel()}Add Single
Sign-on to
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. - - {#snippet sectionLabel()}Frequency
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. + + {#snippet sectionLabel()}Frequency
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. +
diff --git a/tailwind.config.js b/tailwind.config.js index 6b218b57..1bcd9ff3 100644 --- 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], };