ChitoWarlock/soc_site-astro
1
0
Fork 0
mirror of https://github.com/jorgev259/soc_site-astro.git synced 2025-06-29 07:57:41 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Responsive fixes

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

7
src/components/search/AlbumSearch.astro
View file

@ -44,7 +44,10 @@ const [count, search] = await Promise.all([
<div> <div>
Albums ({count}) { Albums ({count}) {
count > take ? ( 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 ) : null
} }
</div> </div>
@ -56,7 +59,7 @@ const [count, search] = await Promise.all([
} }
</div> </div>
</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) => ( search.map((album) => (
<a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}> <a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}>

2
src/pages/anim/list/index.astro
View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => ( letters.map((l) => (
<div id={l.letter}> <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='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> <AnimList letter={l.letter} server:defer>
<Fragment slot='fallback'> <Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => ( {Array.from({ length: Number(l.count) }).map(() => (

14
src/pages/game/[slug].astro
View file

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

2
src/pages/game/list/index.astro
View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => ( letters.map((l) => (
<div id={l.letter}> <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='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> <GameList letter={l.letter} server:defer>
<Fragment slot='fallback'> <Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => ( {Array.from({ length: Number(l.count) }).map(() => (

2
src/pages/platform/list/index.astro
View file

@ -21,7 +21,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => ( letters.map((l) => (
<div id={l.letter}> <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='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> <PlatformList letter={l.letter} server:defer>
<Fragment slot='fallback'> <Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => ( {Array.from({ length: Number(l.count) }).map(() => (

2
src/pages/publisher/list/index.astro
View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => ( letters.map((l) => (
<div id={l.letter}> <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='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> <PublisherList letter={l.letter} server:defer>
<Fragment slot='fallback'> <Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => ( {Array.from({ length: Number(l.count) }).map(() => (

2
src/pages/studio/list/index.astro
View file

@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
letters.map((l) => ( letters.map((l) => (
<div id={l.letter}> <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='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> <PublisherList letter={l.letter} server:defer>
<Fragment slot='fallback'> <Fragment slot='fallback'>
{Array.from({ length: Number(l.count) }).map(() => ( {Array.from({ length: Number(l.count) }).map(() => (