fix(style): track row

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'"
+        ghost
-        :class="[{ paused: isPlaying && active && hover }, 'ui', 'play-button']"
+        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,10 +143,9 @@ const hover = ref(false)
       >
     </div>
 
-    <!-- third column: title ! -->
       <div
         tabindex="0"
-      class="content ellipsis column"
+        class="content ellipsis column left floated column"
       >
         <a
           @click="activateTrack(track, index)"
@@ -156,10 +154,8 @@ const hover = ref(false)
         </a>
       </div>
 
-    <!-- 4. column: album link -->
-
       <div
-      class="content ellipsis column"
+        class="content ellipsis left floated column"
       >
         <router-link
           v-if="showAlbum"
@@ -169,13 +165,12 @@ const hover = ref(false)
         </router-link>
       </div>
 
-    <!-- 5. column: artist link -->
       <div
-      class="content ellipsis column"
+        class="content ellipsis left floated column"
       >
         <template
-        v-for="ac in track.artist_credit"
           v-if="showArtist"
+          v-for="ac in track.artist_credit"
           :key="ac.artist.id"
         >
           <router-link
@@ -191,9 +186,9 @@ const hover = ref(false)
         </template>
       </div>
 
-    <!-- 6. column: favorite icon -->
+
       <div
-      class="meta column"
+        class="meta right floated column"
       >
         <track-favorite-icon
           v-if="store.state.auth.authenticated"
@@ -202,9 +197,8 @@ const hover = ref(false)
         />
       </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>

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 {

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"
         />