fernando/music-to-go
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add loading bar on top

Browse Source
This commit is contained in:
Araozu 2024-12-08 18:49:07 -05:00
parent 8f3d9351ed
commit 21617fac1f
5 changed files with 46 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/css/input.css
View File

@ -23,4 +23,7 @@ body {
font-family: "Atkinson Hyperlegible", sans-serif; font-family: "Atkinson Hyperlegible", sans-serif;
} }
[data-loading] {
display: none;
}

5
src/modules/album/album.templ
View File

@ -74,7 +74,12 @@ templ albumTemplFragment(albumId string, album *utils.Album, songs []utils.Song,
{ album.Name } { album.Name }
</h1> </h1>
<p> <p>
<a
href={ templ.URL(fmt.Sprintf("/artist/%s", album.ArtistID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline text-sm"
>
{ album.Artist } { album.Artist }
</a>
</p> </p>
<div> <div>
for i, song := range songs { for i, song := range songs {

11
src/modules/index/index.templ
View File

@ -49,15 +49,22 @@ templ AlbumCard(album utils.Album) {
<div class="text-center"> <div class="text-center">
<img class="inline-block w-[6.75rem] h-[6.75rem] min-h-26 overflow-hidden rounded" src={ fmt.Sprintf("/covers/%s", album.ID) }/> <img class="inline-block w-[6.75rem] h-[6.75rem] min-h-26 overflow-hidden rounded" src={ fmt.Sprintf("/covers/%s", album.ID) }/>
</div> </div>
<p>
<a <a
href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) } href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline" class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"
> >
{ album.Name } { album.Name }
</a> </a>
<div class="overflow-hidden overflow-ellipsis text-sm"> </p>
<p>
<a
href={ templ.URL(fmt.Sprintf("/artist/%s", album.ArtistID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline text-sm"
>
{ album.Artist } { album.Artist }
</div> </a>
</p>
</div> </div>
</div> </div>
} }

8
src/utils/utils.templ
View File

@ -22,6 +22,14 @@ templ SkeletonTempl() {
<script src="https://unpkg.com/htmx-ext-loading-states@2.0.0/loading-states.js" defer></script> <script src="https://unpkg.com/htmx-ext-loading-states@2.0.0/loading-states.js" defer></script>
</head> </head>
<body hx-ext="loading-states"> <body hx-ext="loading-states">
<div class="w-full fixed top-0" data-loading>
<div class="h-1 w-full overflow-hidden">
<div
class="animate-progress w-full h-full bg-pink-500 origin-left-right"
style="transform-origin: 0% 50%"
></div>
</div>
</div>
<main hx-boost="true" hx-target="this" hx-swap="innerHTML" id="boost-target" class="pb-16"> <main hx-boost="true" hx-target="this" hx-swap="innerHTML" id="boost-target" class="pb-16">
{ children... } { children... }
</main> </main>

13
tailwind.config.mjs → tailwind.config.mts
View File

@ -5,6 +5,19 @@ export default {
], ],
theme: { theme: {
extend: { extend: {
animation: {
progress: 'progress 1s infinite linear',
},
keyframes: {
progress: {
'0%': { transform: ' translateX(0) scaleX(0)' },
'40%': { transform: 'translateX(0) scaleX(0.4)' },
'100%': { transform: 'translateX(100%) scaleX(0.5)' },
},
},
transformOrigin: {
'left-right': '0% 50%',
},
colors: { colors: {
"c-bg": "var(--c-bg)", "c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)", "c-on-bg": "var(--c-on-bg)",