codemicro/backseat-music
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

That's a modal

Browse source
This commit is contained in:
akp 2025-07-24 08:22:17 +01:00
parent 0bce16dc09
commit f55e5ca3c8
7 changed files with 95 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

12
backseat/components/assets/static/main.css
View file

@ -7,7 +7,7 @@ html, body {
}
main {
max-width: 60%; /* TODO: Responsivity */
width: 60%; /* TODO: Responsivity */
margin: 1em auto;
background-color: white;
padding: 2em;
@ -66,5 +66,15 @@ ul.track-list li:has(> input[type=checkbox]:checked):nth-of-type(odd) {
transform: rotate(360deg);
}
}
dialog {
border: none;
border-radius: 1em;
padding: 1em 4em;
}
::backdrop {
background-color: oklch(70.7% 0.022 261.325deg);
opacity: 0.75;
}
/*# sourceMappingURL=main.css.map */

2
backseat/components/assets/static/main.css.map
View file

@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["main.scss","_colours.scss"],"names":[],"mappings":"AAAA;AAGA;EACI;EACA;EACA,kBC0GO;EDzGP;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EAEA;EACA;EACA;;AAEA;EAII;EACA;EACA;;AALA;EACI;;AAOR;EACI,kBC4JD;;ADzJH;EACI,kBCUA;;ADTA;EACI,kBCOJ;;;ADDZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;;EAEJ;IACI","file":"main.css"}
{"version":3,"sourceRoot":"","sources":["main.scss","_colours.scss"],"names":[],"mappings":"AAAA;AAGA;EACI;EACA;EACA,kBC0GO;EDzGP;;;AAGJ;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EAEA;EACA;EACA;;AAEA;EAII;EACA;EACA;;AALA;EACI;;AAOR;EACI,kBC4JD;;ADzJH;EACI,kBCUA;;ADTA;EACI,kBCOJ;;;ADDZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;IACI;;EAEJ;IACI;;;AAIR;EACI;EACA;EACA;;;AAGJ;EACI,kBCuHO;EDtHP","file":"main.css"}

15
backseat/components/assets/static/main.scss
View file

@ -9,7 +9,7 @@ html, body {
}
main {
max-width: 60%; /* TODO: Responsivity */
width: 60%; /* TODO: Responsivity */
margin: 1em auto;
background-color: white;
padding: 2em;
@ -72,4 +72,15 @@ ul.track-list {
100% {
transform: rotate(360deg);
}
}
}
dialog {
border: none;
border-radius: 1em;
padding: 1em 4em;
}
::backdrop {
background-color: $gray-400;
opacity: 0.75;
}

11
backseat/components/recentlyListened/index.templ
View file

@ -41,7 +41,7 @@ templ indexPage() {
}
</script>
<form hx-put="/recentlyListened/createPlaylist" hx-target="main" hx-select="main" hx-disinherit="*" hx-vars="selected:collectSelectedTracks()">
<form hx-put="/recentlyListened/createPlaylist" hx-target="#modal-target" hx-swap="innerHTML" hx-disinherit="*" hx-vars="selected:collectSelectedTracks()">
<input type="submit" />
<ul id="track-list" class="track-list" hx-get="/recentlyListened/tracks" hx-trigger="load">
<div style="width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;">
@ -77,13 +77,16 @@ templ trackList(recentlyListenedTracks []spotify.RecentlyPlayedItem) {
}
templ createPlaylistPage(trackIDs []string) {
@httpUtil.BasePage("Recently Listened"){
<dialog id="modal">
<h1>Create Playlist</h1>
<ul>
for _, id := range trackIDs {
<li>{ id }</li>
}
</ul>
}
<div>kerblam</div>
</dialog>
<script>
document.getElementById("modal").showModal()
</script>
}

54
backseat/components/recentlyListened/index_templ.go
View file

@ -72,7 +72,7 @@ func indexPage() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1>Recently Listened Tracks</h1><script>\n const collectSelectedTracks = () => {\n return Array.from(document.querySelectorAll('#track-list .track-selection-checkbox:checked')).map((elem) => (elem.dataset.trackid)).join(',')\n }\n </script> <form hx-put=\"/recentlyListened/createPlaylist\" hx-target=\"main\" hx-select=\"main\" hx-disinherit=\"*\" hx-vars=\"selected:collectSelectedTracks()\"><input type=\"submit\"><ul id=\"track-list\" class=\"track-list\" hx-get=\"/recentlyListened/tracks\" hx-trigger=\"load\"><div style=\"width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<h1>Recently Listened Tracks</h1><script>\n const collectSelectedTracks = () => {\n return Array.from(document.querySelectorAll('#track-list .track-selection-checkbox:checked')).map((elem) => (elem.dataset.trackid)).join(',')\n }\n </script> <form hx-put=\"/recentlyListened/createPlaylist\" hx-target=\"#modal-target\" hx-swap=\"innerHTML\" hx-disinherit=\"*\" hx-vars=\"selected:collectSelectedTracks()\"><input type=\"submit\"><ul id=\"track-list\" class=\"track-list\" hx-get=\"/recentlyListened/tracks\" hx-trigger=\"load\"><div style=\"width: 100%; display: flex; flex-direction: column; gap: 0.5em; align-items: center;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -264,48 +264,30 @@ func createPlaylistPage(trackIDs []string) templ.Component {
templ_7745c5c3_Var11 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Var12 := templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<h1>Create Playlist</h1><ul>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 16, "<dialog id=\"modal\"><h1>Create Playlist</h1><ul>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, id := range trackIDs {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<li>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, id := range trackIDs {
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 17, "<li>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 85, Col: 24}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</li>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(id)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `backseat/components/recentlyListened/index.templ`, Line: 84, Col: 24}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</ul>")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
templ_7745c5c3_Err = httpUtil.BasePage("Recently Listened").Render(templ.WithChildren(ctx, templ_7745c5c3_Var12), templ_7745c5c3_Buffer)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 18, "</li>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 19, "</ul><div>kerblam</div></dialog><script>\n document.getElementById(\"modal\").showModal()\n </script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

7
backseat/httpUtil/basePage.templ
View file

@ -23,10 +23,17 @@ templ BasePage(title string) {
<main>
{ children... }
</main>
<div id="modal-target"></div>
</body>
</html>
}
templ LoadingSpinner() {
<span class="loader"></span>
}
templ ModalTarget() {
<div id="modal-target" hx-swap-oob="true">
{ children... }
</div>
}

39
backseat/httpUtil/basePage_templ.go
View file

@ -50,7 +50,7 @@ func BasePage(title string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></body></html>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main><div id=\"modal-target\"></div></body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -87,4 +87,41 @@ func LoadingSpinner() templ.Component {
})
}
func ModalTarget() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var4 := templ.GetChildren(ctx)
if templ_7745c5c3_Var4 == nil {
templ_7745c5c3_Var4 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<div id=\"modal-target\" hx-swap-oob=\"true\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templ_7745c5c3_Var4.Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
var _ = templruntime.GeneratedTemplate