mirror of
https://github.com/jorgev259/soc_site-astro.git
synced 2025-06-29 07:57:41 +00:00
Responsive fixes
This commit is contained in:
parent
686758e754
commit
5ed7cbf23e
7 changed files with 17 additions and 14 deletions
|
|
@ -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}`}>
|
||||
|
|
|
|||
|
|
@ -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(() => (
|
||||
|
|
|
|||
|
|
@ -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} />
|
||||
|
|
|
|||
|
|
@ -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(() => (
|
||||
|
|
|
|||
|
|
@ -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(() => (
|
||||
|
|
|
|||
|
|
@ -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(() => (
|
||||
|
|
|
|||
|
|
@ -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(() => (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue