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

feat: dark theme

Browse Source
This commit is contained in:
Araozu 2024-10-27 17:44:51 -05:00
parent 98e8b085cc
commit 60307d364d
10 changed files with 112 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -3,4 +3,5 @@ public/css/output.css
.env
tmp
main
src/**/*.txt

17
public/css/input.css
View File

@ -2,6 +2,23 @@
@tailwind components;
@tailwind utilities;
:root {
--c-bg: #01040a;
--c-on-bg: white;
}
@media (prefers-color-scheme: light) {
:root {
--c-bg: white;
--c-on-bg: black;
}
}
html {
background-color: var(--c-bg);
color: var(--c-on-bg);
}
body {
font-family: "Atkinson Hyperlegible", sans-serif;
}

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

@ -25,7 +25,7 @@ templ allAlbumsTempl(albums []utils.Album) {
/>
</div>
<br/>
<div id="album-list" class="grid grid-cols-3 gap-2">
<div id="album-list" class="grid grid-cols-3 gap-2 px-2">
for _, album := range albums {
@index.AlbumCard(album)
}
@ -67,7 +67,7 @@ templ albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJs
<div>
for i, song := range songs {
<button
class="inline-block py-2 pl-2 pr-4 w-full cursor-pointer text-left hover:bg-sky-100 whitespace-nowrap overflow-hidden overflow-ellipsis"
class="inline-block py-2 pl-2 pr-4 w-full cursor-pointer text-left hover:bg-sky-100 hover:dark:bg-sky-950 whitespace-nowrap overflow-hidden overflow-ellipsis transition-colors"
_={ fmt.Sprintf("on click replaceQueueAndPlayAt($songsJson, %d)", i) }
>
<span class="inline-block w-6 text-right opacity-75 pr-2">

28
src/modules/album/album_templ.go
View File

@ -49,7 +49,7 @@ func allAlbumsTempl(albums []utils.Album) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div><h1 class=\"font-bold pt-4 pb-2 text-2xl\">Albums</h1><div class=\"px-2\"><input class=\"inline-block w-full py-1 px-2 border border-sky-600 rounded-md text-sky-600\" placeholder=\"Search albums\" name=\"s\" hx-get=\"/album/\" hx-trigger=\"keyup changed delay:500ms\" hx-target=\"#album-list\"></div><br><div id=\"album-list\" class=\"grid grid-cols-3 gap-2\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -60,12 +60,12 @@ func allAlbumsTempl(albums []utils.Album) templ.Component {
}
}
if len(albums) == 0 {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p>No albums found</p>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -107,7 +107,7 @@ func albumsFragment(albums []utils.Album) templ.Component {
}
}
if len(albums) == 0 {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<p>No albums found</p>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -150,7 +150,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"text-center\" _=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -163,7 +163,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><img class=\"inline-block mt-2 rounded shadow\" src=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -176,7 +176,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><h1 class=\"font-bold pt-4 pb-2 text-2xl\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -189,7 +189,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</h1><p>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 8)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -202,12 +202,12 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</p><div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 9)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for i, song := range songs {
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<button class=\"inline-block py-2 pl-2 pr-4 w-full cursor-pointer text-left hover:bg-sky-100 whitespace-nowrap overflow-hidden overflow-ellipsis\" _=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 10)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -220,7 +220,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"><span class=\"inline-block w-6 text-right opacity-75 pr-2\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 11)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -233,7 +233,7 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</span> ")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 12)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -246,12 +246,12 @@ func albumTempl(albumId string, album *utils.Album, songs []utils.Song, songsJso
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</button>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 13)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 14)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

2
src/modules/auth/login_templ.go
View File

@ -43,7 +43,7 @@ func LoginTempl() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"bg-sky-500 text-white text-xl font-bold p-2\">music to go</nav><div hx-ext=\"response-targets\">Login to Navidrome:<br><form hx-post=\"/auth/f/login\" hx-swap=\"innerHTML\" hx-target=\"#login-result\" hx-target-400=\"#login-result\" hx-target-500=\"#login-result\"><label for=\"navidrome-url\" class=\"text-sm\">Navidrome URL:</label> <input id=\"navidrome-url\" class=\"w-full py-1 px-2 rounded\" placeholder=\"https://\" name=\"navidrome-url\" required><br><label for=\"username\" class=\"text-sm\">Username:</label> <input id=\"username\" class=\"w-full py-1 px-2 rounded\" placeholder=\"username\" name=\"username\" required><br><label for=\"password\" class=\"text-sm\">Password:</label> <input id=\"password\" class=\"w-full py-1 px-2 rounded\" placeholder=\"password\" name=\"password\" type=\"password\" required><br><button class=\"py-2 px-4 my-2 bg-sky-500 text-white rounded\" type=\"submit\">Log-in</button><br><div id=\"login-result\">Result:</div></form></div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

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

@ -13,7 +13,7 @@ templ IndexTempl(albums []utils.Album) {
<h2 class="font-bold text-xl px-2 pt-4">
Random Albums
</h2>
<div class="overflow-x-scroll whitespace-nowrap py-2">
<div class="overflow-x-scroll whitespace-nowrap py-2 flex gap-2">
for _, album := range albums {
@AlbumCard(album)
}
@ -23,7 +23,7 @@ templ IndexTempl(albums []utils.Album) {
}
templ AlbumCard(album utils.Album) {
<div class="inline-block p-1 rounded bg-zinc-200 w-full max-w-32">
<div class="inline-block p-1 rounded bg-zinc-200 dark:bg-zinc-800 w-full max-w-32">
<div class="h-30 relative">
<img src={ fmt.Sprintf("/covers/%s", album.ID) }/>
<a

14
src/modules/index/index_templ.go
View File

@ -46,7 +46,7 @@ func IndexTempl(albums []utils.Album) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"text-blue-500 font-bold text-xl py-2 border-b border-blue-500\">music to go</nav><h2 class=\"font-bold text-xl px-2 pt-4\">Random Albums</h2><div class=\"overflow-x-scroll whitespace-nowrap py-2\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 1)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -56,7 +56,7 @@ func IndexTempl(albums []utils.Album) templ.Component {
return templ_7745c5c3_Err
}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 2)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -95,7 +95,7 @@ func AlbumCard(album utils.Album) templ.Component {
templ_7745c5c3_Var3 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"inline-block p-1 rounded bg-zinc-200 w-full max-w-32\"><div class=\"h-30 relative\"><img src=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 3)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -108,7 +108,7 @@ func AlbumCard(album utils.Album) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\"> <a href=\"")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 4)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -117,7 +117,7 @@ func AlbumCard(album utils.Album) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("\" class=\"inline-block w-full overflow-hidden whitespace-nowrap overflow-ellipsis hover:underline\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 5)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -130,7 +130,7 @@ func AlbumCard(album utils.Album) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</a><div class=\"overflow-hidden overflow-ellipsis text-sm\">")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 6)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -143,7 +143,7 @@ func AlbumCard(album utils.Album) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</div></div></div>")
templ_7745c5c3_Err = templ.WriteWatchModeString(templ_7745c5c3_Buffer, 7)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

26
src/utils/utils.templ
View File

@ -30,7 +30,7 @@ templ SkeletonTempl() {
templ MusicPlayer() {
<div
id="music-player"
class="fixed bottom-0 left-0 w-screen border-t border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white"
class="fixed bottom-0 left-0 w-screen border-t bg-c-bg text-c-on-bg border-sky-500 grid grid-cols-[3rem_auto_3rem_3rem] gap-2 p-1 bg-white"
x-data="player"
>
<div
@ -89,6 +89,7 @@ templ MusicPlayer() {
playing: false,
loading: false,
progress: 0,
listenerInterval: 0,
// sets the queue, and plays the song at idx
replaceQueueAndPlayAt(queue, idx) {
@ -98,7 +99,8 @@ templ MusicPlayer() {
// setup the preload and progress listener
console.log("setting up listener");
setInterval(() => this.checkDuration(), 1000);
clearInterval(this.listenerInterval);
this.listenerInterval = setInterval(() => this.checkDuration(), 1000);
},
// Plays the song at the passed idx, sets this.idx to that,
@ -247,7 +249,7 @@ templ MusicPlayer() {
}
templ fullMusicPlayer() {
<div id="full-music-player" class="fixed top-0 left-0 w-screen h-screen bg-white hidden">
<div id="full-music-player" class="fixed top-0 left-0 w-screen h-screen bg-c-bg text-c-on-bg hidden">
<div class="flex justify-center py-6">
<div class="bg-sky-200 rounded w-[20rem] h-[20rem]">
<img
@ -294,7 +296,7 @@ templ fullMusicPlayer() {
class="flex items-center justify-center cursor-pointer relative px-4"
@click="togglePlayPause"
>
@circleNotchIcon(48)
@circleNotchIcon(56)
@playIcon(38)
@pauseIcon(38)
</div>
@ -307,7 +309,7 @@ templ fullMusicPlayer() {
@skipForwardIcon(24)
</button>
</div>
<div class="absolute bottom-0 w-full grid grid-cols-2 bg-sky-50">
<div class="absolute bottom-0 w-full grid grid-cols-2 bg-sky-50 dark:bg-sky-950">
<button type="button" class="inline-block text-center py-4">
@playlistIcon(24)
</button>
@ -328,7 +330,7 @@ templ playIcon(size int) {
xmlns="http://www.w3.org/2000/svg"
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -342,7 +344,7 @@ templ pauseIcon(size int) {
<svg
id="pause-icon"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -360,7 +362,7 @@ templ skipBackwardIcon(size int) {
xmlns="http://www.w3.org/2000/svg"
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -374,7 +376,7 @@ templ skipForwardIcon(size int) {
xmlns="http://www.w3.org/2000/svg"
width={ strconv.Itoa(size) }
height={ strconv.Itoa(size) }
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -388,7 +390,7 @@ templ circleNotchIcon(size int) {
id="spinner"
:style="{display: loading? 'inline-block': 'none'}"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -404,7 +406,7 @@ templ playlistIcon(size int) {
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""
@ -419,7 +421,7 @@ templ caretDoubleDownIcon(size int) {
<svg
class="inline-block"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
fill="var(--c-on-bg)"
viewBox="0 0 256 256"
style="--darkreader-inline-fill: #000000;"
data-darkreader-inline-fill=""

96
src/utils/utils_templ.go
View File

File diff suppressed because one or more lines are too long

7
tailwind.config.cjs
View File

@ -4,7 +4,12 @@ export default {
"./src/**/*.{html,templ,go}",
],
theme: {
extend: {},
extend: {
colors: {
"c-bg": "var(--c-bg)",
"c-on-bg": "var(--c-on-bg)",
}
},
},
plugins: [],
}