stereo.cat/frontend
2
1
Fork 0
Code Issues 4 Pull requests Projects 1 Releases Packages Wiki Activity Actions

new masonry layout for dashboard

Browse source
This commit is contained in:
grngxd 2025-07-29 23:02:40 +01:00
parent 361c4e0b62
commit c0563b844a
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/routes/dashboard/index.tsx
View file

@ -68,7 +68,7 @@ const Files = component$<{
width={400}
src={`/api/${file.ID}`}
alt={file.Name}
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/>
)}
{fileType.value === "video" && (
@ -76,18 +76,18 @@ const Files = component$<{
width={400}
src={`/api/${file.ID}`}
controls
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/>
)}
{fileType.value === "audio" && (
<audio
src={`/api/${file.ID}`}
controls
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300"
class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/>
)}
{fileType.value === "other" && (
<div class="w-full h-60 flex items-center justify-center bg-gray-200 text-gray-500">
<div class="w-full min-h-30 flex items-center justify-center bg-gray-200 text-gray-500">
<p>Unsupported file type</p>
</div>
)}
@ -116,8 +116,8 @@ const Files = component$<{
);
});
return (
<div class="px-2 mb-6 flex flex-col w-full max-h-full overflow-y-auto overflow-x-hidden mask-clip-content rounded-3xl">
<div class="w-full h-full columns-1 md:columns-2 lg:columns-4 gap-2">
<div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
<div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2">
{files.value.map((file) => (
<File key={file.ID} file={file} />
))}