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); color: var(--accent);
} }
.duopanel-container {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (width > 800px) { @media (width > 800px) {
.duopanel-container { .duopanel-container {
display: grid;
grid-template-columns: min-content 1fr; grid-template-columns: min-content 1fr;
gap: 3rem; gap: 3rem;
} }

View File

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

View File

@@ -38,43 +38,44 @@ templ PlaylistItem(playlist *sc.Playlist, showUsername bool) {
} }
templ Playlist(prefs cfg.Preferences, p sc.Playlist) { templ Playlist(prefs cfg.Preferences, p sc.Playlist) {
if p.Artwork != "" { <div class="duopanel-container">
<img src={ p.Artwork } width="300px"/> <div class="duopanel-l">
} if p.Artwork != "" {
<h1>{ p.Title }</h1> <img src={ p.Artwork } width="300px"/>
@UserItem(&p.Author)
<div style="display: flex;">
<a class="btn" href={ templ.SafeURL("https://soundcloud.com" + p.Href()) }>view on soundcloud</a>
</div>
<br/>
@Description(prefs, p.Description, nil)
<p>{ strconv.FormatInt(p.TracksCount(), 10) } tracks</p>
<br/>
<br/>
<div>
for _, track := range p.Tracks {
if *prefs.AutoplayNextTrack {
@TrackItem(&track, true, playlist(track, p))
} else {
@TrackItem(&track, true, "")
} }
} <h1>{ p.Title }</h1>
</div> @UserItem(&p.Author)
if len(p.MissingTracks) != 0 { <div style="display: flex;">
<a class="btn" href={ templ.SafeURL("?pagination=" + url.QueryEscape(p.MissingTracks)) } rel="noreferrer">more tracks</a> <a class="btn" href={ templ.SafeURL("https://soundcloud.com" + p.Href()) }>view on soundcloud</a>
} </div>
<div> <br/>
if p.TagList != "" { @Description(prefs, p.Description, nil)
<p>Tags: { strings.Join(sc.TagListParser(p.TagList), ", ") }</p> if p.TagList != "" {
} <p>Tags: { strings.Join(sc.TagListParser(p.TagList), ", ") }</p>
<p>{ strconv.FormatInt(p.Likes, 10) } likes</p> }
<br/> <p title="Likes">♥ { strconv.FormatInt(p.Likes, 10) }</p>
if p.CreatedAt != "" { if p.CreatedAt != "" {
<p>Created: { p.CreatedAt }</p> <p>Created: { p.CreatedAt }</p>
} }
if p.LastModified != "" { if p.LastModified != "" {
<p>Last modified: { p.LastModified }</p> <p>Last modified: { p.LastModified }</p>
} }
</div>
<div class="duopanel-r">
<p>{ strconv.FormatInt(p.TracksCount(), 10) } tracks</p>
<div>
for _, track := range p.Tracks {
if *prefs.AutoplayNextTrack {
@TrackItem(&track, true, playlist(track, p))
} else {
@TrackItem(&track, true, "")
}
}
</div>
if len(p.MissingTracks) != 0 {
<a class="btn" href={ templ.SafeURL("?pagination=" + url.QueryEscape(p.MissingTracks)) } rel="noreferrer">more tracks</a>
}
</div>
</div> </div>
} }

View File

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