strtus/Vercel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhancements for non-fixed aspect ratios

Browse Source
This commit is contained in:
Sam Becker 2025-03-13 23:25:54 -05:00
parent 1e87d9105f
commit 704df818f1
4 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/index.ts Normal file
View File

@ -0,0 +1,9 @@
import { GRID_ASPECT_RATIO } from '@/app/config';
export const GRID_GAP_CLASSNAME = GRID_ASPECT_RATIO === 0
? 'gap-1 sm:gap-2'
: 'gap-0.5 sm:gap-1';
export const GRID_SPACE_CLASSNAME = GRID_ASPECT_RATIO === 0
? 'space-y-1 sm:space-y-2'
: 'space-y-0.5 sm:space-y-1';

6
src/photo/PhotoGrid.tsx
View File

@ -9,6 +9,7 @@ import { GRID_ASPECT_RATIO } from '@/app/config';
import { useAppState } from '@/state/AppState';
import SelectTileOverlay from '@/components/SelectTileOverlay';
import { ReactNode } from 'react';
import { GRID_GAP_CLASSNAME } from '@/components';
export default function PhotoGrid({
photos,
@ -54,7 +55,8 @@ export default function PhotoGrid({
return (
<AnimateItems
className={clsx(
'grid gap-0.5 sm:gap-1',
'grid',
GRID_GAP_CLASSNAME,
small
? 'grid-cols-3 xs:grid-cols-6'
: isGridHighDensity
@ -75,7 +77,7 @@ export default function PhotoGrid({
return <div
key={photo.id}
className={clsx(
GRID_ASPECT_RATIO !== 0 && 'flex relative overflow-hidden',
'flex relative overflow-hidden',
'group',
)}
style={{

3
src/photo/PhotoGridContainer.tsx
View File

@ -6,6 +6,7 @@ import PhotoGridInfinite from './PhotoGridInfinite';
import { clsx } from 'clsx/lite';
import AnimateItems from '@/components/AnimateItems';
import { ComponentProps, useCallback, useState, ReactNode } from 'react';
import { GRID_SPACE_CLASSNAME } from '@/components';
export default function PhotoGridContainer({
cacheKey,
@ -45,7 +46,7 @@ export default function PhotoGridContainer({
items={[header]}
animateOnFirstLoadOnly
/>}
<div className="space-y-0.5 sm:space-y-1">
<div className={GRID_SPACE_CLASSNAME}>
<PhotoGrid {...{
photos,
tag,

7
src/photo/PhotoHeader.tsx
View File

@ -16,6 +16,7 @@ import PhotoPrevNext from './PhotoPrevNext';
import PhotoLink from './PhotoLink';
import ResponsiveText from '@/components/primitives/ResponsiveText';
import { useAppState } from '@/state/AppState';
import { GRID_GAP_CLASSNAME } from '@/components';
export default function PhotoHeader({
tag,
@ -76,7 +77,7 @@ export default function PhotoHeader({
<span className="text-dim uppercase text-right">
{start === end
? start
: <>{end}<br />– {start}</>}
: <>{end}<br />&ndash; {start}</>}
</span>;
const renderContentA = () => entity ?? (
@ -96,7 +97,9 @@ export default function PhotoHeader({
items={[<DivDebugBaselineGrid
key="PhotosHeader"
className={clsx(
'grid gap-0.5 sm:gap-1 items-start',
'grid',
GRID_GAP_CLASSNAME,
'items-start',
'grid-cols-4',
isGridHighDensity
? 'lg:grid-cols-6'