style: 💄 make playlist match new design + other minor visual tweaks

This commit is contained in:
jonas
2025-02-19 23:59:58 +01:00
parent caa7ab56d6
commit 043b8d12c1
4 changed files with 59 additions and 50 deletions

View File

@@ -26,9 +26,14 @@ body {
color: var(--accent);
}
@media (width > 800px) {
.duopanel-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (width > 800px) {
.duopanel-container {
grid-template-columns: min-content 1fr;
gap: 3rem;
}

View File

@@ -53,14 +53,17 @@ templ MainPage(p cfg.Preferences) {
<input type="submit" value="Search" class="btn important" style="width: 100%; margin-top: .5rem;"/>
</form>
<footer>
<div class="btns" style="margin-top: 2rem; justify-content: center;">
<div class="btns" style="justify-content: space-between; margin-top: 2rem;">
<div class="btns">
<a class="btn" href="/_/featured">Featured Tracks</a>
<a class="btn" href="/discover">Discover Playlists</a>
<a class="btn" href="/_/preferences">Preferences</a>
</div>
<div class="btns">
<a class="btn" href="https://git.maid.zone/stuff/soundcloak">Source code</a>
<a class="btn" href="/_/static/notice.txt">Legal notice</a>
<a class="btn" href="/_/preferences">Preferences</a>
</div>
</div>
if cfg.Commit != "unknown" {
<p style="text-align: center;">Build <a class="link" href={ cfg.CommitURL }>{ cfg.Commit }</a></p>
}

View File

@@ -38,6 +38,8 @@ templ PlaylistItem(playlist *sc.Playlist, showUsername bool) {
}
templ Playlist(prefs cfg.Preferences, p sc.Playlist) {
<div class="duopanel-container">
<div class="duopanel-l">
if p.Artwork != "" {
<img src={ p.Artwork } width="300px"/>
}
@@ -48,9 +50,19 @@ templ Playlist(prefs cfg.Preferences, p sc.Playlist) {
</div>
<br/>
@Description(prefs, p.Description, nil)
if p.TagList != "" {
<p>Tags: { strings.Join(sc.TagListParser(p.TagList), ", ") }</p>
}
<p title="Likes">♥ { strconv.FormatInt(p.Likes, 10) }</p>
if p.CreatedAt != "" {
<p>Created: { p.CreatedAt }</p>
}
if p.LastModified != "" {
<p>Last modified: { p.LastModified }</p>
}
</div>
<div class="duopanel-r">
<p>{ strconv.FormatInt(p.TracksCount(), 10) } tracks</p>
<br/>
<br/>
<div>
for _, track := range p.Tracks {
if *prefs.AutoplayNextTrack {
@@ -63,18 +75,7 @@ templ Playlist(prefs cfg.Preferences, p sc.Playlist) {
if len(p.MissingTracks) != 0 {
<a class="btn" href={ templ.SafeURL("?pagination=" + url.QueryEscape(p.MissingTracks)) } rel="noreferrer">more tracks</a>
}
<div>
if p.TagList != "" {
<p>Tags: { strings.Join(sc.TagListParser(p.TagList), ", ") }</p>
}
<p>{ strconv.FormatInt(p.Likes, 10) } likes</p>
<br/>
if p.CreatedAt != "" {
<p>Created: { p.CreatedAt }</p>
}
if p.LastModified != "" {
<p>Last modified: { p.LastModified }</p>
}
</div>
</div>
}

View File

@@ -70,6 +70,11 @@ templ TrackPlayer(prefs cfg.Preferences, track sc.Track, stream string, displayE
if *prefs.Player == cfg.NonePlayer {
{{ return }}
}
if track.Policy == sc.PolicySnip {
<div style="margin-top: 2rem">
<p>⚠ Only a 30-second snippet is available.</p>
</div>
}
if displayErr == "" {
{{ var audioPref string }}
if cfg.Restream && *prefs.Player == cfg.RestreamPlayer {
@@ -101,11 +106,6 @@ templ TrackPlayer(prefs cfg.Preferences, track sc.Track, stream string, displayE
}
</noscript>
}
if track.Policy == sc.PolicySnip {
<div>
<p>Only a 30-second snippet is available.</p>
</div>
}
if *prefs.ShowAudio {
<div>
if audioPref == cfg.AudioBest {