fix: Correct LASS hover syntax for track links

- Move track-link styles inside recently-played-list block for proper CSS nesting - Use (:and .track-link :hover) at correct nesting level per LASS documentation - Fixes hover color change to green when mousing over track names - Generates correct CSS selector: .recently-played-list .track-link:hover
refactor: Make track name clickable with external link icon
2025-11-21 10:02:52 +03:00 · 2025-11-21 08:50:19 +03:00 · 2025-11-21 08:47:26 +03:00 · 2025-11-21 08:35:30 +03:00 · 2025-11-20 17:05:35 -05:00 · 2025-11-20 17:05:35 -05:00
2 changed files with 28 additions and 36 deletions
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@ -145,7 +145,28 @@
       :padding "20px"
       :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)
      :list-style none
@ -171,9 +192,6 @@
      :align-items center)
     
     ((:and .recently-played-list .track-title)
-      :color "#4488ff"
-      :font-weight 500
-      :font-size "1em"
      :grid-column 1
      :grid-row 1)
     
@ -188,32 +206,7 @@
      :font-size "0.85em"
      :grid-column 2
      :grid-row 1
-      :text-align right)
-     
-     ((:and .recently-played-list .track-meta)
-      :grid-column 2
-      :grid-row 2
      :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
     :color "#00ffff"
--- a/static/js/recently-played.js
+++ b/static/js/recently-played.js
@ -19,19 +19,18 @@ async function updateRecentlyPlayed() {
                html += `
                    <li class="track-item">
                        <div class="track-info">
-                            <div class="track-title">${escapeHtml(track.song)}</div>
-                            <div class="track-artist">${escapeHtml(track.artist)}</div>
-                            <span class="track-time">${timeAgo}</span>
-                            <div class="track-meta">
-                                <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">
+                            <div class="track-title">
+                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
+                                    ${escapeHtml(track.song)}
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
                                        <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>
                                        <line x1="10" y1="14" x2="21" y2="3"></line>
                                    </svg>
-                                    MusicBrainz
                                </a>
                            </div>
+                            <div class="track-artist">${escapeHtml(track.artist)}</div>
+                            <span class="track-time">${timeAgo}</span>
                        </div>
                    </li>
                `;
Author	SHA1	Message	Date
Glenn Thompson	a35e301583	fix: Correct LASS hover syntax for track links - Move track-link styles inside recently-played-list block for proper CSS nesting - Use (:and .track-link :hover) at correct nesting level per LASS documentation - Fixes hover color change to green when mousing over track names - Generates correct CSS selector: .recently-played-list .track-link:hover	2025-11-21 10:02:52 +03:00
Glenn Thompson	dccca05b9b	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	2025-11-21 08:50:19 +03:00
Glenn Thompson	decff5c033	Merge remote-tracking branch 'origin/main' into glenneth/recently-played-tracks	2025-11-21 08:47:26 +03:00
Glenn Thompson	e3e3a144d4	Merge remote-tracking branch 'upstream/main'	2025-11-21 08:35:30 +03:00
Glenn Thompson	66d013d7d1	feat: Add recently-played.ctml partial template Add modular partial template for recently-played section that can be included in other templates	2025-11-20 17:05:35 -05:00
Glenn Thompson	3a08ff61c0	feat: Add favicon and asteroid.png graphics to front page - Add favicon.ico, favicon-16x16.png, and favicon-32x32.png - Add asteroid.png graphic to header on both front-page.ctml and front-page-content.ctml - Update header styling to display asteroid graphics flanking the station name	2025-11-20 17:05:35 -05:00
Glenn Thompson	79ab87436e	Refine recently played styling and MusicBrainz search - Use 2-column grid layout: track/artist left, time/link right - Match color scheme with now-playing section (blue text) - Tighter row spacing (6px padding) - Simplified MusicBrainz search query (no field prefixes) - Fix CSS selector for proper link styling - Right-align time and MusicBrainz link	2025-11-20 17:05:35 -05:00
Glenn Thompson	0a7d5c3de5	Add recently played tracks feature with MusicBrainz integration - Display last 3 played tracks on front page - Auto-updates every 30 seconds - Shows track title, artist, and time ago - Links to MusicBrainz search for each track - Thread-safe in-memory storage - Works in both normal and frameset modes - Hacker-themed green styling Implements feature request from fade to show recently played tracks with linkage to track info at music database.	2025-11-20 17:05:35 -05:00
Glenn Thompson	cec3763403	Merge remote-tracking branch 'upstream/main'	2025-11-20 07:04:29 +03:00
Luis Pereira	a1cfaf468c	fix: playlist creation on frontend	2025-11-19 18:00:02 -05:00
Luis Pereira	9c3d4bcec4	fix: hide duplicated browser audio in player page	2025-11-19 18:00:02 -05:00
Luis Pereira	a1fa5b0b51	fix: tracks and playlist db interation through data-model	2025-11-19 18:00:02 -05:00