New bullet cards specifier, fixed screenfulBlock alignment specifiers…

…, fixed footer gap (#43)
hanzoai · Mar 5, 2024 · 6723f5d · 6723f5d
1 parent 07d3e44
commit 6723f5d
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 3 deletions.
diff --git a/packages/ui/blocks/components/bullet-cards-block.tsx b/packages/ui/blocks/components/bullet-cards-block.tsx
@@ -20,6 +20,7 @@ const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
   const specified = (s: string) => (containsToken(b.specifiers, s))
 
   const noBorder = specified('no-card-border') ? 'border-0' : 'md:border'
+  const mobileTextXs = specified('mobile-small-text') ? 'text-xs' : 'text-sm'
 
   const borderclx = specified('border-muted-3') ? 
     'md:border-muted-3' 
@@ -35,7 +36,7 @@ const BulletCardsBlockComponent: React.FC<BlockComponentProps> = ({
         borderclx
       )}>
         <InlineIcon icon={card.icon} size={b.iconSize ?? 28} agent={agent} className='shrink-0 mr-2 md:mr-4 '/>
-        <p className='m-0 text-sm sm:text-base'>{card.text}</p>
+        <p className={cn('m-0 sm:text-base', mobileTextXs)}>{card.text}</p>
       </div>
     ))}
     </GridBlockComponent>

diff --git a/packages/ui/blocks/components/screenful-block/content.tsx b/packages/ui/blocks/components/screenful-block/content.tsx
@@ -70,8 +70,11 @@ const ContentColumn: React.FC<{
     modifiers += 'typography-headings:text-center '  
   }
 
+  /* ContentComponent's parent div needs h-full class in order for vertical alignment with flexbox to work.
+  *  This affects specifiers: bottom, vert-center, mobile-vert-center
+  */
   return (
-    <div className={cn('flex flex-col justify-center ' + modifiers, className)} >
+    <div className={cn('flex flex-col justify-center h-full', modifiers, className)} >
       <ContentComponent blocks={blocks} agent={agent} />
     </div>
   )

diff --git a/packages/ui/blocks/def/bullet-cards-block.ts b/packages/ui/blocks/def/bullet-cards-block.ts
@@ -6,6 +6,7 @@ interface BulletCardsBlock extends Block {
   blockType: 'bullet-cards'
     /**
      * no-card-border
+     * mobile-small-text
      * borders-muted-1 / borders-muted-3 
      * default: 2 
      */

diff --git a/packages/ui/common/footer.tsx b/packages/ui/common/footer.tsx
@@ -24,7 +24,7 @@ const Footer: React.FC<{
   const _aboveCopyright = (typeof aboveCopyright === 'undefined') ? legal : aboveCopyright
 
   return (
-    <footer className={cn('grow flex flex-col justify-between gap-6 pb-[2vh]', className)}> 
+    <footer className={cn('grow flex flex-col justify-end gap-6 pb-[2vh]', className)}> 
       <div className={
         (noHorizPadding ? '' : 'px-5 md:px-8 ') +
         'grid grid-cols-2 gap-4 gap-y-6 md:gap-x-6 lg:gap-8 ' + smGridColsClx +