mirror of
https://git.maid.zone/stuff/soundcloak.git
synced 2025-12-10 05:39:38 +05:00
style: 💄 make playlist match new design + other minor visual tweaks
This commit is contained in:
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user