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

Tighten layout gaps, add grid density

Browse Source
This commit is contained in:
Sam Becker 2023-09-12 22:09:16 -05:00
parent f36e1def5f
commit bec619e139
3 changed files with 5 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/(static)/page.tsx
View File

@ -19,7 +19,7 @@ export default async function HomePage({
}: {
searchParams: { next: string };
}) {
const { offset, limit } = getPhotosLimitForQuery(searchParams.next);
const { offset, limit } = getPhotosLimitForQuery(searchParams.next, 12);
const photos = await getPhotos(undefined, limit);
@ -31,7 +31,7 @@ export default async function HomePage({
photos.length > 0
? <div className="space-y-4">
<AnimateItems
className="space-y-2"
className="space-y-1"
duration={0.7}
staggerDelay={0.15}
distanceOffset={0}

4
src/photo/PhotoGrid.tsx
View File

@ -29,8 +29,8 @@ export default function PhotoGrid({
<>
<AnimateItems
className={cc(
'grid gap-1 sm:gap-2',
'grid-cols-2 sm:grid-cols-4 md:grid-cols-3',
'grid gap-1',
'grid-cols-2 sm:grid-cols-4 md:grid-cols-3 lg:grid-cols-4',
'items-center',
)}
duration={fast ? 0.3 : undefined}

4
src/photo/index.ts
View File

@ -14,8 +14,6 @@ import camelcaseKeys from 'camelcase-keys';
import { Metadata } from 'next';
import short from 'short-uuid';
export const PHOTOS_PER_REQUEST = 12;
const translator = short();
// Core EXIF data
@ -124,7 +122,7 @@ export const getNextPhoto = (photo: Photo, photos: Photo[]) => {
export const getPhotosLimitForQuery = (
query?: string,
photosPerRequest = PHOTOS_PER_REQUEST,
photosPerRequest = 24,
) => {
const offsetInt = parseInt(query ?? '0');
const offset = (Number.isNaN(offsetInt) ? 0 : offsetInt);