From 7e268a748d7c9622e597604d855df86dbacf3aa3 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sun, 23 Feb 2025 03:08:19 +0100
Subject: [PATCH] fix(style): track row

---
 front/src/components/audio/track/Row.vue     | 121 +++++++++----------
 front/src/style/components/_track_table.scss |  16 ++-
 front/src/views/playlists/Detail.vue         |   2 +-
 3 files changed, 69 insertions(+), 70 deletions(-)

diff --git a/front/src/components/audio/track/Row.vue b/front/src/components/audio/track/Row.vue
index ebd5e0b3b..88ad1db0d 100644
--- a/front/src/components/audio/track/Row.vue
+++ b/front/src/components/audio/track/Row.vue
@@ -15,6 +15,7 @@ import PlayButton from '~/components/audio/PlayButton.vue'
 
 import Button from '~/components/ui/Button.vue'
 
+
 const store = useStore()
 
 interface Props extends PlayOptionsProps {
@@ -66,15 +67,15 @@ const hover = ref(false)
 <template>
   <div
     :class="[{ active }, 'track-row row', $style.row]"
-    style="display: contents;"
     @dblclick="activateTrack(track, index)"
     @mousemove="hover = true"
     @mouseout="hover = false"
+    style="display: contents;"
   >
     <!-- 1. column: Play button or track position -->
 
     <div
-      class="one wide column"
+      class="actions one wide left floated column"
       role="button"
       @click.prevent.exact="activateTrack(track, index)"
     >
@@ -92,8 +93,8 @@ const hover = ref(false)
             active &&
             !hover
         "
-        :icon="isPlaying && active && hover ? 'bi-play-fill' : 'bi-pause-fill'"
-        :class="[{ paused: isPlaying && active && hover }, 'ui', 'play-button']"
+        ghost
+        icon="bi-play-fill"
       />
       <Button
         v-else-if="
@@ -101,13 +102,13 @@ const hover = ref(false)
             active &&
             hover
         "
+        ghost
         icon="bi-pause-fill"
-        class="ui play-button"
       />
       <Button
         v-else-if="hover"
+        ghost
         icon="bi-play-fill"
-        class="ui play-button"
       />
       <span
         v-else-if="showPosition"
@@ -117,10 +118,8 @@ const hover = ref(false)
       </span>
     </div>
 
-    <!-- 2. column: Cover art or nothing -->
-
     <div
-      class="image column"
+      class="image left floated column"
       role="button"
       @click.prevent.exact="activateTrack(track, index)"
     >
@@ -144,67 +143,62 @@ const hover = ref(false)
       >
     </div>
 
-    <!-- third column: title ! -->
-    <div
-      tabindex="0"
-      class="content ellipsis column"
-    >
-      <a
-        @click="activateTrack(track, index)"
+      <div
+        tabindex="0"
+        class="content ellipsis column left floated column"
       >
-        {{ track.title }}
-      </a>
-    </div>
+        <a
+          @click="activateTrack(track, index)"
+        >
+          {{ track.title }}
+        </a>
+      </div>
 
-    <!-- 4. column: album link -->
-
-    <div
-      class="content ellipsis column"
-    >
-      <router-link
-        v-if="showAlbum"
-        :to="{ name: 'library.albums.detail', params: { id: track.album?.id } }"
-      >
-        {{ track.album?.title }}
-      </router-link>
-    </div>
-
-    <!-- 5. column: artist link -->
-    <div
-      class="content ellipsis column"
-    >
-      <template
-        v-for="ac in track.artist_credit"
-        v-if="showArtist"
-        :key="ac.artist.id"
+      <div
+        class="content ellipsis left floated column"
       >
         <router-link
-          class="artist link"
-          :to="{
-            name: 'library.artists.detail',
-            params: { id: ac.artist?.id },
-          }"
+          v-if="showAlbum"
+          :to="{ name: 'library.albums.detail', params: { id: track.album?.id } }"
         >
-          {{ ac.credit }}
+          {{ track.album?.title }}
         </router-link>
-        <span>{{ ac.joinphrase }}</span>
-      </template>
-    </div>
+      </div>
 
-    <!-- 6. column: favorite icon -->
-    <div
-      class="meta column"
-    >
-      <track-favorite-icon
-        v-if="store.state.auth.authenticated"
-        ghost
-        :track="track"
-      />
-    </div>
+      <div
+        class="content ellipsis left floated column"
+      >
+        <template
+          v-if="showArtist"
+          v-for="ac in track.artist_credit"
+          :key="ac.artist.id"
+        >
+          <router-link
+            class="artist link"
+            :to="{
+              name: 'library.artists.detail',
+              params: { id: ac.artist?.id },
+            }"
+          >
+            {{ ac.credit }}
+          </router-link>
+          <span>{{ ac.joinphrase }}</span>
+        </template>
+      </div>
+
+
+      <div
+        class="meta right floated column"
+      >
+        <track-favorite-icon
+          v-if="store.state.auth.authenticated"
+          ghost
+          :track="track"
+        />
+      </div>
 
-    <!-- 7. column: duration -->
     <div
-      class="meta column"
+      class="meta right floated column"
     >
       <human-duration
         v-if="showDuration && track.uploads[0] && track.uploads[0].duration"
@@ -212,15 +206,16 @@ const hover = ref(false)
       />
     </div>
 
-    <!-- 8. column: play button dropdown menu -->
     <div
       v-if="displayActions"
-      class="meta column"
+      class="meta right floated column"
     >
       <PlayButton
         :dropdown-only="true"
         :is-playable="track.is_playable"
         :track="track"
+        class="ui floating dropdown"
+        ghost
       />
     </div>
   </div>
diff --git a/front/src/style/components/_track_table.scss b/front/src/style/components/_track_table.scss
index 3bc46e6f5..6c4705b22 100644
--- a/front/src/style/components/_track_table.scss
+++ b/front/src/style/components/_track_table.scss
@@ -19,6 +19,10 @@
   &:last-child {
     border-bottom: 1px solid var(--border-color);
   }
+  .meta.column > time {
+    position: relative;
+    top: 14px;
+  }
 }
 
 .track-row,
@@ -68,9 +72,6 @@
   .track_image {
     height: 40px;
   }
-  .image.left.floated.column {
-
-  }
 }
 
 .track-row {
@@ -88,6 +89,10 @@
   align-items: center;
   display: flex;
 
+  &:hover {
+    background: rgba(155, 155, 155, 0.1);
+  }
+
   > div {
     margin-right: 0.25em;
   }
@@ -170,15 +175,14 @@
 
 .track-position {
   cursor: pointer;
-  display: contents;
+  display: inline;
   min-height: 1em;
   outline: none;
   border: none;
   vertical-align: baseline;
   font-family: var(--font-family);
-  margin: 0 0.25em 0 0;
   line-height: 1em;
-  padding: 0.5rem;
+  padding: 12px;
   user-select: none;
 
   .mobile span {
diff --git a/front/src/views/playlists/Detail.vue b/front/src/views/playlists/Detail.vue
index 95721076c..51366d5a3 100644
--- a/front/src/views/playlists/Detail.vue
+++ b/front/src/views/playlists/Detail.vue
@@ -244,7 +244,7 @@ const deletePlaylist = async () => {
       </template>
       <template v-else-if="tracks.length > 0">
         <track-table
-          :display-position="true"
+          :show-position="true"
           :tracks="tracks"
           :unique="false"
         />