maciejpedzich/spotifyplaylistarchive.com
1
0
Fork 0
mirror of https://github.com/maciejpedzich/spotifyplaylistarchive.com.git synced 2024-09-20 02:26:20 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tweak styling of error message alerts

Browse Source
This commit is contained in:
Maciej Pędzich 2023-01-09 23:42:44 +01:00
parent 9f098e5a83
commit 5e2f177f4b
2 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/PlaylistPageTab.astro
View File

@ -13,7 +13,12 @@ const { playlist, title, description } = Astro.props as Props;
---
<BaseLayout title={title} description={description}>
<div class="mt-24 text-center flex flex-col gap-5 items-center">
<div
class:list={[
'text-center flex flex-col gap-5 items-center',
playlist ? 'mt-24' : 'w-screen h-screen justify-center'
]}
>
{
playlist ? (
<h1 class="font-bold text-4xl">
@ -46,7 +51,7 @@ const { playlist, title, description } = Astro.props as Props;
</div>
<slot />
) : (
<div class="alert alert-error max-w-md justify-center shadow-lg">
<div class="alert alert-error max-w-xs justify-center shadow-lg">
<span>{description}</span>
</div>
)

7
src/pages/playlists/[playlistId]/snapshots.astro
View File

@ -1,10 +1,15 @@
---
import PlaylistPageTab from '@/layouts/PlaylistPageTab.astro';
import SnapshotCalendar from '@/components/vue/SnapshotCalendar.vue';
import { getPlaylistLayoutProps } from '@/utils/getPlaylistLayoutProps';
const layoutProps = await getPlaylistLayoutProps(Astro);
---
<PlaylistPageTab {...layoutProps}>
<p class="text-lg">TODO: Implement snapshot calendar</p>
<p class="text-lg">
Click on a highlighted date to show a snapshot captured that day.
</p>
<SnapshotCalendar client:load />
</PlaylistPageTab>