Fix style issue of song list in album of various artist page

blackcandy-org · Jan 4, 2024 · 1ca6d07 · 1ca6d07
1 parent 3aaee32
commit 1ca6d07
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 6 deletions.
diff --git a/app/assets/stylesheets/components/_action_bar.scss b/app/assets/stylesheets/components/_action_bar.scss
@@ -1,7 +1,7 @@
 @use "../tools/functions" as *;
 
 .c-action-bar {
-  padding: spacing("narrow");
+  padding: spacing("tiny") spacing("narrow");
   border-radius: border-radius("medium");
   background: var(--action-bar-bg-color);
 }
diff --git a/app/assets/stylesheets/components/_button.scss b/app/assets/stylesheets/components/_button.scss
@@ -8,6 +8,10 @@
   padding: spacing("tiny") spacing("narrow");
   cursor: pointer;
   font-size: font-size("medium");
+
+  &:hover {
+    text-decoration: none;
+  }
 }
 
 .c-button--primary {

diff --git a/app/assets/stylesheets/components/_list.scss b/app/assets/stylesheets/components/_list.scss
@@ -25,6 +25,12 @@
   text-transform: uppercase;
 }
 
+.c-list__item__subtext {
+  display: inline-block;
+  margin-top: spacing("tiny");
+  color: var(--list-subtext-color);
+}
+
 .c-list--border-none .c-list__item {
   border-bottom: none;
 }

diff --git a/app/assets/stylesheets/elements/_content.scss b/app/assets/stylesheets/elements/_content.scss
@@ -37,7 +37,7 @@ a {
 }
 
 a:hover {
-  color: var(--link-active-color);
+  text-decoration: underline;
 }
 
 a.is-active {

diff --git a/app/assets/stylesheets/settings/_dark_theme.scss b/app/assets/stylesheets/settings/_dark_theme.scss
@@ -54,6 +54,7 @@
   --list-border-color: #{$grey-800};
   --list-active-color: #{$primary-color};
   --list-grouped-bg-color: #{$grey-900};
+  --list-subtext-color: #{$grey-400};
 
   /* Table */
   --table-border-color: #{$grey-900};

diff --git a/app/assets/stylesheets/settings/_light_theme.scss b/app/assets/stylesheets/settings/_light_theme.scss
@@ -54,6 +54,7 @@
   --list-border-color: #{$grey-200};
   --list-active-color: #{$primary-color};
   --list-grouped-bg-color: #{$grey-100};
+  --list-subtext-color: #{$grey-500};
 
   /* Table */
   --table-border-color: #{$grey-200};

diff --git a/app/javascript/controllers/mixins/event_handler.js b/app/javascript/controllers/mixins/event_handler.js
@@ -22,6 +22,8 @@ class EventHandler {
     const handler = {
       listener (event) {
         if (targetMatching) {
+          if (event.target.dataset.preventDelegation) { return }
+
           const target = event.target.closest(targetMatching)
           if (!target) { return }
         }

diff --git a/app/views/albums/show.html.erb b/app/views/albums/show.html.erb
@@ -57,9 +57,9 @@
                 ) do %>
               <div class='o-flex o-flex--justify-between o-flex--align-center'>
                 <div>
-                  <span class='u-mb-tiny' data-test-id='album_song_name'><%= song.name %></span>
+                  <div data-test-id='album_song_name'><%= song.name %></div>
                   <% if @album.artist.various? %>
-                    <%= song.artist.name %>
+                    <%= link_to song.artist.name, artist_path(song.artist), class: "c-list__item__subtext" %>
                   <% end %>
                 </div>
                 <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>

diff --git a/app/views/current_playlist/songs/_song.html.erb b/app/views/current_playlist/songs/_song.html.erb
@@ -15,8 +15,8 @@
     <button class='c-button c-button--link o-flex__item--grow-1' data-delegated-action='current-playlist-songs#play'>
       <div class='o-flex o-flex--justify-between o-flex--align-center'>
         <div class='u-mr-narrow'>
-          <span class='u-mb-tiny u-text-line-clamp-2' data-test-id='current_playlist_song_name'><%= song.name %></span>
-          <%= song.artist.name %>
+          <span class='u-text-line-clamp-2' data-test-id='current_playlist_song_name'><%= song.name %></span>
+          <%= link_to song.artist.name, artist_path(song.artist), class: "c-list__item__subtext", data: {"turbo-frame" => "_top", "prevent-delegation" => true} %>
         </div>
         <div class='u-text-monospace u-mr-narrow'><%= format_duration(song.duration) %></div>
       </div>