glenn
/
asteroid
mirror of https://github.com/glenneth1/asteroid.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: Make track name clickable with external link icon 

- Replace separate MusicBrainz link with clickable track name
- Add external link icon next to track name
- Simplify grid layout by removing track-meta column
- Update CSS styling for track-link with hover effects
- Improves UX by making the primary action (clicking track) more intuitive
This commit is contained in:
Glenn Thompson 2025-11-21 08:50:19 +03:00 committed by Brian O'Reilly
parent 6bf19ade01
commit ea3cd4a8f6
2 changed files with 26 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
static/asteroid.lass
View File

@ -171,9 +171,6 @@
:align-items center) :align-items center)
((:and .recently-played-list .track-title) ((:and .recently-played-list .track-title)
:color "#4488ff"
:font-weight 500
:font-size "1em"
:grid-column 1 :grid-column 1
:grid-row 1) :grid-row 1)
@ -190,30 +187,26 @@
:grid-row 1 :grid-row 1
:text-align right) :text-align right)
((:and .recently-played-list .track-meta) ((:and .recently-played-list .track-link)
:grid-column 2 :display inline-flex
:grid-row 2 :align-items center
:text-align right)) :gap "4px"
:color "#4488ff"
(.recently-played-list :text-decoration none
(.allmusic-link :font-weight 500
:display inline-flex :font-size "1em"
:align-items center :transition "all 0.2s"
:gap "4px"
:color "#4488ff" ((:and :hover)
:text-decoration none :color "#00ff00"
:font-size "0.85em" :text-decoration underline
:letter-spacing "0.08rem" :text-underline-offset "3px")
:transition "all 0.2s"
:white-space nowrap (.external-icon
:width "14px"
((:and :hover) :height "14px"
:color "#00ff00" :margin-left "2px"
:text-decoration underline :vertical-align middle)))
:text-underline-offset "5px")
(svg :width "14px"
:height "14px")))
(.back (.back
:color "#00ffff" :color "#00ffff"

13
static/js/recently-played.js
View File

@ -19,19 +19,18 @@ async function updateRecentlyPlayed() {
html += ` html += `
<li class="track-item"> <li class="track-item">
<div class="track-info"> <div class="track-info">
<div class="track-title">${escapeHtml(track.song)}</div> <div class="track-title">
<div class="track-artist">${escapeHtml(track.artist)}</div> <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
<span class="track-time">${timeAgo}</span> ${escapeHtml(track.song)}
<div class="track-meta"> <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
<a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="allmusic-link">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
<polyline points="15 3 21 3 21 9"></polyline> <polyline points="15 3 21 3 21 9"></polyline>
<line x1="10" y1="14" x2="21" y2="3"></line> <line x1="10" y1="14" x2="21" y2="3"></line>
</svg> </svg>
MusicBrainz
</a> </a>
</div> </div>
<div class="track-artist">${escapeHtml(track.artist)}</div>
<span class="track-time">${timeAgo}</span>
</div> </div>
</li> </li>
`; `;