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;
}
[data-loading] {
display: none;
}

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

@ -74,7 +74,12 @@ templ albumTemplFragment(albumId string, album *utils.Album, songs []utils.Song,
{ album.Name }
</h1>
<p>
{ album.Artist }
<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 }
</a>
</p>
<div>
for i, song := range songs {

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

@ -49,15 +49,22 @@ templ AlbumCard(album utils.Album) {
<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) }/>
</div>
<a
href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"
>
{ album.Name }
</a>
<div class="overflow-hidden overflow-ellipsis text-sm">
{ album.Artist }
</div>
<p>
<a
href={ templ.URL(fmt.Sprintf("/album/%s", album.ID)) }
class="inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline"
>
{ album.Name }
</a>
</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 }
</a>
</p>
</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>
</head>
<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">
{ children... }
</main>

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

@ -5,6 +5,19 @@ export default {
],
theme: {
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: {
"c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)",