Responsive fixes

This commit is contained in:
Jorge Vargas 2025-04-28 12:56:47 -06:00
parent 686758e754
commit 5ed7cbf23e
7 changed files with 17 additions and 14 deletions

View file

@ -44,7 +44,10 @@ const [count, search] = await Promise.all([
<div>
Albums ({count}) {
count > take ? (
<span> / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results</span>
<span>
{' '}
/ Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results
</span>
) : null
}
</div>
@ -56,7 +59,7 @@ const [count, search] = await Promise.all([
}
</div>
</div>
<div class='grid sm:grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
<div class='grid grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
{
search.map((album) => (
<a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}>

View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => (
<div id={l.letter}>
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='py-4 grid sm:grid-cols-1 md:grid-cols-6 gap-1 justify-items-center'>
<div class='py-4 grid grid-cols-1 md:grid-cols-6 gap-1 justify-items-center'>
<AnimList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (

View file

@ -62,23 +62,23 @@ const coverImage = await getImage({
<BaseLayout>
<div class='flex flex-col flex-1 max-w-[1440px] mx-auto p-3'>
<div class='flex flex-wrap md:flex-nowrap gap-x-3'>
<div class='flex flex-col md:flex-row flex-wrap md:flex-nowrap gap-x-3 gap-y-2'>
<div class='flex-1 flex-wrap md:flex-5/12'>
<div class='size-full relative cursor-pointer'>
<!-- <Image
<div class='size-full relative cursor-pointer bg-dark rounded-xl p-4'>
<Image
src={`https://cdn.sittingonclouds.net/game/${slug}.png`}
alt={`${game.name} logo`}
class='rounded-sm size-full object-contain h-fit mb-2 md:min-h-96 px-10'
class='rounded-sm'
quality='mid'
width={500}
height={500}
/> -->
/>
</div>
</div>
<div class='flex-1 flex-wrap md:flex-7/12'>
<div class='bg-dark rounded-xl py-4 px-6'>
<div class='font-medium text-4xl text-center'>{game.name}</div>
<table class='mt-4 border-spacing-y-4 border-separate w-full'>
<table class='border-spacing-y-4 border-separate w-full'>
<tbody>
{
game.releaseDate ? (
@ -134,7 +134,7 @@ const coverImage = await getImage({
</div>
<hr />
<div class='flex flex-wrap md:flex-nowrap gap-x-3'>
<div class='grid grid-cols-5 gap-x-2'>
<div class='grid grid-cols-2 md:grid-cols-5 gap-x-2'>
{
game.albums.map((a) => (
<AlbumBox href={`/album/${a.album.id}`} image={`/album/${a.album.id}.png`} title={a.album.title} />

View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => (
<div id={l.letter}>
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='py-4 grid sm:grid-cols-1 md:grid-cols-3 gap-1'>
<div class='py-4 grid grid-cols-1 md:grid-cols-3 gap-1'>
<GameList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (

View file

@ -21,7 +21,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => (
<div id={l.letter}>
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
<div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
<PlatformList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (

View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => (
<div id={l.letter}>
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
<div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
<PublisherList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (

View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => (
<div id={l.letter}>
<div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
<div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
<div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
<PublisherList letter={l.letter} server:defer>
<Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => (