feat: ScreenfullBlock: footer impl and cleanup

fix: cta odd button number fix: mobile: image has max-w for "full screen" (tablets!)
hanzoai · Feb 11, 2024 · bb3dee3 · bb3dee3
1 parent e4574af
commit bb3dee3
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 28 deletions.
diff --git a/pkgs/luxdefi-ui/blocks/components/cta-block.tsx b/pkgs/luxdefi-ui/blocks/components/cta-block.tsx
@@ -60,7 +60,7 @@ const CtaBlockComponent: React.FC<BlockComponentProps & {
     'flex flex-col items-stretch gap-2 self-stretch md:flex-row sm:justify-center '
 
   const getMobileColSpanClx = (index: number, total: number) => {
-    const indexToCenter = (mobileCenterFirstIfOdd) ? 0 : total - 1
+    const indexToCenter = (total % 2 === 0) ? -1 : (mobileCenterFirstIfOdd) ? 0 : total - 1
     const widthclx = mobileOddFullWidth ? 'w-full ' : 'w-3/5 mx-auto '
     return (
       (agent === 'phone' && mobile2Columns && (index === indexToCenter)) ? ('col-span-2 ' + widthclx) : ''  

diff --git a/pkgs/luxdefi-ui/blocks/components/image-block.tsx b/pkgs/luxdefi-ui/blocks/components/image-block.tsx
@@ -58,7 +58,8 @@ const ImageBlockComponent: React.FC<BlockComponentProps & {
       const toSpread: any =  {
         style: {
           width: '100%',
-          height: 'auto'
+          height: 'auto',
+          maxWidth: '420px'
         },
         sizes: '100vw',
       }

diff --git a/pkgs/luxdefi-ui/blocks/components/screenful-block/content.tsx b/pkgs/luxdefi-ui/blocks/components/screenful-block/content.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type PropsWithChildren } from 'react'
 
 import type { Block, ScreenfulBlock} from '../../def'
 import { containsToken, cn } from '../../../util'
@@ -13,7 +13,7 @@ const ContentColumn: React.FC<{
   blocks,
   specifiers,
   agent,
-  className=''
+  className='',
 }) => {
 
   const specified = (s: string) => (containsToken(specifiers, s))
@@ -79,25 +79,9 @@ const Content: React.FC<{
 }> = ({
   block: b,
   agent,
-  className=''
+  className='',
 }) => {
 
-  const specified = (s: string) => (containsToken(b.specifiers, s))
-  const narrowGutters = specified('narrow-gutters') // eg, for a table object that is large
-
-  let outerClasses =  (narrowGutters ? 
-      // 44 + 24 = 68, 80 + 32 = 104
-    'px-6 lg:px-8 2xl:px-2 pb-6 pt-[68px] md:pt-[104px] lg:pt-[112px] ' 
-    : 
-    'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+8vh)] md:pt-[calc(80px+8vh)] ') 
-    // + 'border border-accent ' // debug
-    + ' overflow-y-hidden' // safety valve
-
-  let moreModifiers = ''
-    // 40px + 24px
-  if (agent && agent !== 'desktop') {
-    moreModifiers += 'pt-[64px] pb-0 px-4 ' 
-  }
 
   const multiColumnLayoutClx = (agent === 'phone') ? 
     'flex flex-col gap-6'
@@ -110,16 +94,15 @@ const Content: React.FC<{
     return (orderIndex >= 0) ? `order-${orderIndex}` : '' // one-based in flexbox slec
   }
 
-
   return  b.contentColumns.length == 1 ? (
     <ContentColumn 
       blocks={b.contentColumns[0]} 
       specifiers={b.columnSpecifiers?.[0]} 
       agent={agent} 
-      className={cn(outerClasses, moreModifiers, className)}
+      className={cn(className)}
     />
   ) : (
-    <div className={cn(multiColumnLayoutClx, outerClasses, moreModifiers, className)}>
+    <div className={cn(multiColumnLayoutClx, className)}>
     {b.contentColumns.map((column, index) => (
       <ContentColumn 
         blocks={column} 

diff --git a/pkgs/luxdefi-ui/blocks/components/screenful-block/index.tsx b/pkgs/luxdefi-ui/blocks/components/screenful-block/index.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import dynamic from 'next/dynamic'
 
 import type { Block, ScreenfulBlock, VideoBlock } from '../../def'
-import { cn } from '../../../util'
+import { containsToken, cn } from '../../../util'
 import { ApplyTypography } from '../../../primitives'
 
 import Poster from './poster-background'
@@ -30,9 +30,31 @@ const ScreenfulComponent: React.FC<{
 
   const hasBannerVideo = (): boolean => (!!b.banner && (typeof b.banner === 'object'))
 
-  const contentclx = 'z-10 absolute left-0 right-0  top-0 bottom-0 xl:mx-auto max-w-screen-xl'
   const tileHeight = (agent === 'desktop') ? 'h-full ' : 'h-[100svh] '
 
+  const specified = (s: string) => (containsToken(b.specifiers, s))
+  const narrowGutters = specified('narrow-gutters') // eg, for a table object that is large
+
+    // content wrapper clx:
+    // [
+    //    positioning, 
+    //    p&m, 
+    //    p&m-modifiers
+    // ]
+
+    // desktop header: 80, desktop pt: 32 
+    // mobile header: 44, mobile pt: 24
+  const cwclx = [
+    'z-10 absolute left-0 right-0  top-0 bottom-0 xl:mx-auto max-w-screen-xl ',
+
+    narrowGutters ? 
+      'px-6 lg:px-8 2xl:px-2 pb-6 pt-[68px] md:pt-[104px] lg:pt-[112px] ' 
+      : 
+      'px-[8vw] xl:px-[1vw] pb-[8vh] pt-[calc(44px+8vh)] md:pt-[calc(80px+8vh)] ',
+
+    (agent && agent !== 'desktop') ? 'pt-[64px] pb-0 px-4 sm:px-8' : '' 
+  ]
+
   return (
     <section className={cn('h-[100vh]', (snapTile ? 'snap-start snap-always' : ''), className)}>
       <ApplyTypography className={tileHeight + 'w-full flex flex-row justify-center self-stretch'} >
@@ -44,8 +66,10 @@ const ScreenfulComponent: React.FC<{
             initialInView={initialInView}
           />
         )}
-        <Content block={b} agent={agent} className={contentclx} />
-        {b.footer}
+        <div className={cn(...cwclx)} >
+          <Content block={b} agent={agent}  className='w-full'/>
+          {b.footer}
+        </div>
       </Poster>
       </ApplyTypography>
     </section>