mitteneer/zuletzt
1
0
Fork 0
Code Issues 14 Pull requests Projects Releases Packages Wiki Activity Actions

Add some tyling to songs view

Browse source 
This can (will) be easily replicated for the other views, I just first tested it on songs. I think this looks much nicer, and I'll probably roll with a layout similar to this for the other views, with some minor adjustments for each particular view.
This commit is contained in:
mitteneer 2025-06-06 15:55:20 -04:00
parent 3ef17fcd46
commit c8f2ef57c8
2 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/app/views/partials/_newtable.zmpl
View file

@ -1,5 +1,6 @@
@args T: type, table_data: *ZmplValue, columns: T
<div>
<table>
<thead>
<tr>
@ -70,4 +71,5 @@
}
}
</tbody>
</table>
</table>
</div>

24
src/app/views/songs/get.zmpl
View file

@ -9,12 +9,24 @@
</head>
<body>
@partial partials/header
<div style="text-align:center">
<h1>{{.song.song_name}}</h1>
<div>{{.song.scrobbles}} scrobbles ({{.song.rank}} place)</div>
@partial partials/firstlast_listens(firstlast: .firstlast)
<h3>Yearly Performance</h3>
@partial partials/timescale(range: .yearly)
<h2>Scrobbles</h2>
@partial partials/newtable(T: ColumnChoices, table_data: .scrobbles, columns: columns)
</div>
<div style="display:flex;flex-direction:row;justify-content:space-evenly">
<div style="display:flex;flex-direction:column;align-self:left">
<div>{{.song.scrobbles}} scrobbles ({{.song.rank}} place)</div>
@partial partials/firstlast_listens(firstlast: .firstlast)
<h3>Yearly Performance</h3>
@partial partials/timescale(range: .yearly)
<h2>Scrobbles</h2>
@partial partials/newtable(T: ColumnChoices, table_data: .scrobbles, columns: columns)
</div>
<div style="display:flex;flex-direction:column;align-self:right">
<h2>Rating</h2>
<input type="text">
<input type="button">
</div>
</div>
</body>
</html>