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 (ParenScript) 

- Update ParenScript to make track name a clickable link
- Add external link icon next to track name
- Remove separate MusicBrainz link to reduce clutter
- Fix LASS hover syntax using :and combinator at correct nesting level
- Update CSS styling for track-link with proper hover effects
- Improves UX by making the primary action (clicking track) more intuitive
This commit is contained in:
Glenn Thompson 2025-11-21 09:49:45 +03:00
parent 578306f06f
commit 27f362f954
2 changed files with 28 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
parenscript/recently-played.lisp
View File

@ -29,19 +29,18 @@
(+ html (+ html
"<li class=\"track-item\">" "<li class=\"track-item\">"
"<div class=\"track-info\">" "<div class=\"track-info\">"
"<div class=\"track-title\">" (escape-html (ps:@ track song)) "</div>" "<div class=\"track-title\">"
"<div class=\"track-artist\">" (escape-html (ps:@ track artist)) "</div>" "<a href=\"" (ps:@ track search_url) "\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"track-link\">"
"<span class=\"track-time\">" time-ago "</span>" (escape-html (ps:@ 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=\"" (ps:@ 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\">" (escape-html (ps:@ track artist)) "</div>"
"<span class=\"track-time\">" time-ago "</span>"
"</div>" "</div>"
"</li>")))))) "</li>"))))))
(setf html (+ html "</ul>")) (setf html (+ html "</ul>"))

51
static/asteroid.lass
View File

@ -145,7 +145,28 @@
:padding "20px" :padding "20px"
:font-style italic) :font-style italic)
(.error :color "#ff4444")) (.error :color "#ff4444")
(.track-link
:display inline-flex
:align-items center
:gap "4px"
:color "#4488ff"
:text-decoration none
:font-weight 500
:font-size "1em"
:transition "all 0.2s"
(.external-icon
:width "14px"
:height "14px"
:margin-left "2px"
:vertical-align middle))
((:and .track-link :hover)
:color "#00ff00"
:text-decoration underline
:text-underline-offset "3px"))
((:and .recently-played-list .track-list) ((:and .recently-played-list .track-list)
:list-style none :list-style none
@ -171,9 +192,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)
@ -188,33 +206,8 @@
:font-size "0.85em" :font-size "0.85em"
:grid-column 2 :grid-column 2
:grid-row 1 :grid-row 1
:text-align right)
((:and .recently-played-list .track-meta)
:grid-column 2
:grid-row 2
:text-align right)) :text-align right))
(.recently-played-list
(.allmusic-link
:display inline-flex
:align-items center
:gap "4px"
:color "#4488ff"
:text-decoration none
:font-size "0.85em"
:letter-spacing "0.08rem"
:transition "all 0.2s"
:white-space nowrap
((:and :hover)
:color "#00ff00"
:text-decoration underline
:text-underline-offset "5px")
(svg :width "14px"
:height "14px")))
(.back (.back
:color "#00ffff" :color "#00ffff"
:text-decoration none :text-decoration none