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

Merge branch 'clouds' into dev

Browse source
This commit is contained in:
Jorge Vargas 2025-02-21 15:05:24 -06:00
parent 563ff224cc
commit a8c787015c
2 changed files with 291 additions and 278 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/components/AlbumBox.astro
View file

@ -11,12 +11,12 @@ const { title, href, image, loading = false } = props
<a <a
href={href} href={href}
class:list={['block w-full mt-2.5 rounded-md bg-dark ', loading ? 'cursor-default' : 'hover:bg-dark-hover group']} class:list={['block w-full mt-2.5 rounded-xl bg-dark/85 ', loading ? 'cursor-default' : 'hover:bg-dark group']}
> >
{ {
loading ? ( loading ? (
<div class='pt-2.5'> <div class='pt-2.5'>
<div class='rounded-md animate-pulse bg-gray size-40 mx-auto' /> <div class='rounded-xl animate-pulse bg-gray/85 size-40 mx-auto' />
</div> </div>
) : ( ) : (
<Image <Image
@ -25,7 +25,7 @@ const { title, href, image, loading = false } = props
height={500} height={500}
width={500} width={500}
quality='low' quality='low'
class='rounded-md scale-95 group-hover:scale-100 transition-transform' class='rounded-md scale-95 group-hover:scale-98 transition-transform'
/> />
) )
} }
@ -39,7 +39,7 @@ const { title, href, image, loading = false } = props
</div> </div>
</div> </div>
) : ( ) : (
<div class='group-hover:text-hover-link group-hover:underline text-base font-bold p-1 text-center'>{title}</div> <div class='group-hover:text-hover-link group-hover:underline text-lg font-bold px-1 pb-1 text-center'>{title}</div>
) )
} }
</a> </a>

51
src/pages/album/[id].astro
View file

@ -47,24 +47,33 @@ const { currentLocale } = Astro
</style> </style>
<BaseLayout> <BaseLayout>
<div class='flex flex-col flex-1 max-w-[2000px] px-4 md:px-10 py-3'> <div
<div class='flex flex-col md:flex-row gap-x-3'> class={`w-full min-h-100vh bg-fixed bg-center bg-cover`}
<div class='flex-1'> style={`
background-image: url('https://cdn.sittingonclouds.net/album?./${album?.id}.png');
`}
>
<div class='bg-dark/75 w-full min-h-100vh'>
<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-1 md:flex-5/12'>
<div class='size-full relative cursor-pointer'> <div class='size-full relative cursor-pointer'>
<Image <Image
src={`https://cdn.sittingonclouds.net/album/${album?.id}.png`} src={`https://cdn.sittingonclouds.net/album?./${album?.id}.png`}
alt={`${album?.title} cover`} alt={`${album?.title} cover`}
class='rounded-md size-full object-contain absolute' class='rounded-sm size-full object-contain h-96'
quality='mid' quality='mid'
width={2560} width={384}
height={150} height={384}
/> />
</div> </div>
</div> </div>
<div class='flex-1'> <div class='flex-1 md:flex-7/12'>
<div class='bg-dark rounded-md py-4 px-6'> <div class='bg-dark/85 rounded-xl py-4 px-6'>
<div class='font-medium text-4xl text-center'>{album?.title}</div> <div class='font-medium text-4xl text-center'>{album?.title}</div>
{album?.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap' }}>{album?.subTitle}</h6> : null} <div class='text-center'>
{album?.subTitle ? <h6 style={{ whiteSpace: 'pre-wrap ' }}>{album?.subTitle}</h6> : null}
</div>
<table class='mt-4'> <table class='mt-4'>
<tbody> <tbody>
{ {
@ -92,7 +101,9 @@ const { currentLocale } = Astro
<td> <td>
{ {
[ [
album?.categoryList.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]()).join(' & '), album?.categoryList
.map(({ categoryName }) => (m as any)[`${categoryName}Osts`]())
.join(' & '),
album?.classificationList.map(({ classificationName }) => classificationName).join(', ') album?.classificationList.map(({ classificationName }) => classificationName).join(', ')
] ]
.filter((f) => f !== '') .filter((f) => f !== '')
@ -173,7 +184,7 @@ const { currentLocale } = Astro
<tr> <tr>
<th>{m.avgRating()}</th> <th>{m.avgRating()}</th>
<td> <td>
<!-- <StarCounter albumId={album?.id} /> --> <!-- <StarCounter album?.Id={album?.id} /> -->
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -183,8 +194,8 @@ const { currentLocale } = Astro
</div> </div>
</div> </div>
<hr /> <hr />
<div class='flex gap-x-3'> <div class='flex flex-wrap md:flex-nowrap gap-x-3'>
<div class='flex-1 bg-dark rounded-md p-4'> <div class='flex-1 bg-dark/85 rounded-xl p-4'>
<h1 class='text-center uppercase text-4xl font-semibold'> <h1 class='text-center uppercase text-4xl font-semibold'>
{m.tracklist()} {m.tracklist()}
</h1> </h1>
@ -193,7 +204,7 @@ const { currentLocale } = Astro
<TrackList discs={album?.discs ?? []} client:only='react' /> <TrackList discs={album?.discs ?? []} client:only='react' />
</div> </div>
</div> </div>
<div class='flex-1 bg-dark rounded-md p-3'> <div class='flex-1 bg-dark/85 rounded-xl p-3'>
{ {
album?.vgmdb && ( album?.vgmdb && (
<div class='mt-2 mb-3 ml-2 flex'> <div class='mt-2 mb-3 ml-2 flex'>
@ -319,21 +330,23 @@ const { currentLocale } = Astro
</div> </div>
</div> </div>
<!-- Comment List here --> <!-- Comment List here -->
<div class='mt-2 bg-dark uppercase text-4xl font-semibold rounded-md text-center py-4 px-1.5'> <div class='mt-2 bg-dark/85 rounded-xl uppercase text-4xl font-semibold text-center py-2 px-1.5'>
{m.relatedAlbums()} {m.relatedAlbums()}
</div> </div>
<div class='mt-2'> <div class='mt-2'>
<div class='grid grid-cols-4 gap-x-1.5'> <div class='grid grid-cols-4 gap-x-1.5 justify-items-center'>
{ {
album?.relatedAlbumList.map(({ relatedAlbum }) => ( album?.relatedAlbumList.map(({ relatedAlbum }) => (
<AlbumBox <AlbumBox
title={relatedAlbum?.title} title={relatedAlbum?.title}
href={`/album/${relatedAlbum?.id}`} href={`/album?./${relatedAlbum?.id}`}
image={`/album/${relatedAlbum?.id}.png`} image={`/album?./${relatedAlbum?.id}.png`}
/> />
)) ))
} }
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</BaseLayout> </BaseLayout>