Merge pull request #274 from bcc-code/263-alignTrackItem-Design

263 align track item design
bcc-code · Jan 28, 2024 · dc21075 · dc21075
2 parents 7e6e43c + f84c2d6
commit dc21075
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 53 deletions.
diff --git a/components/album/AlbumItem.vue b/components/album/AlbumItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'album-id',
         params: { id: album.id },
@@ -17,24 +20,25 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="album.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="album.cover"
             :src="album.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="album.title || ''"
           >
             {{ album.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>

diff --git a/components/contributor/ContributorListItem.vue b/components/contributor/ContributorListItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-contributor-id',
         params: { id: contributor.id },
@@ -17,24 +20,25 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="contributor.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="contributor.cover"
             :src="contributor.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="contributor.name || ''"
           >
             {{ contributor.name }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>

diff --git a/components/playlist/PlaylistItem.vue b/components/playlist/PlaylistItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-curated-id',
         params: { id: playlist.id },
@@ -17,24 +20,25 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="playlist.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="playlist.cover"
             :src="playlist.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="playlist.title || ''"
           >
             {{ playlist.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>

diff --git a/components/podcast/PodcastItem.vue b/components/podcast/PodcastItem.vue
@@ -7,8 +7,11 @@ defineProps<{
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+  >
     <NuxtLink
+      class="grid col-span-full grid-cols-subgrid"
       :to="{
         name: 'playlist-podcast-id',
         params: { id: podcast.id },
@@ -17,24 +20,25 @@ defineProps<{
       <div
         class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
       ></div>
-      <div class="relative flex items-center justify-between gap-3">
-        <div v-if="podcast.cover" class="w-10">
+      <div class="relative grid col-span-full grid-cols-subgrid">
+        <div>
           <ProtectedImage
+            v-if="podcast.cover"
             :src="podcast.cover"
             alt=""
             class="aspect-square w-10 rounded-xl bg-background-2"
           />
         </div>
-        <div class="mr-auto w-1/3">
+        <div class="col-span-3 flex items-center">
           <h4
             class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
             :title="podcast.title || ''"
           >
             {{ podcast.title }}
           </h4>
         </div>
-        <div class="ml-auto flex items-center justify-center gap-1">
-          <button class="focus:bg-lime-400 rounded-lg px-2 py-0">
+        <div class="flex justify-end">
+          <button class="px-2">
             <NuxtIcon name="icon.chevron.right" class="text-2xl" />
           </button>
         </div>

diff --git a/components/track/TrackItem.vue b/components/track/TrackItem.vue
@@ -88,61 +88,68 @@ function secondsToTime(totalSeconds: number | undefined) {
 </script>
 
 <template>
-  <li class="group relative mr-3 cursor-pointer py-3" @click.stop="playTrack">
+  <li
+    class="group grid col-span-full relative grid-cols-subgrid cursor-pointer gap-3 py-3"
+    @click.stop="playTrack"
+  >
     <div
       class="absolute -inset-x-4 -inset-y-0 rounded-xl bg-background-2 opacity-0 group-hover:opacity-100"
     ></div>
-    <div class="relative flex items-center justify-between gap-3">
+
+    <div class="relative grid col-span-full grid-cols-subgrid">
       <div
         v-if="track.meta?.attachedPicture && showThumbnail"
-        class="relative w-10"
+        class="flex items-center"
       >
-        <ProtectedImage
-          :src="track.meta?.attachedPicture"
-          alt=""
-          class="aspect-square w-10 rounded-md bg-background-2"
-        />
-        <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
-          <div
-            class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
-          ></div>
-          <NuxtIcon
-            name="play"
-            class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+        <div class="relative">
+          <ProtectedImage
+            :src="track.meta?.attachedPicture"
+            alt=""
+            class="aspect-square w-10 rounded-md bg-background-2"
           />
+          <div class="absolute inset-0 opacity-0 group-hover:opacity-100">
+            <div
+              class="absolute inset-0 h-full w-full rounded-md bg-black-1 opacity-50 dark:bg-white-1"
+            ></div>
+            <NuxtIcon
+              name="play"
+              class="absolute inset-0 flex items-center justify-center text-2xl text-white-1 dark:text-black-1"
+            />
+          </div>
         </div>
       </div>
-      <div class="mr-auto w-1/3">
+
+      <div
+        v-if="!(track.meta?.attachedPicture && showThumbnail)"
+        class="relative"
+      ></div>
+      <div class="flex flex-col justify-center">
         <h4
-          class="overflow-hidden text-ellipsis whitespace-nowrap font-semibold"
+          class="block overflow-hidden text-ellipsis font-semibold"
           :title="track.meta?.title || ''"
         >
           {{ track.meta?.title }}
         </h4>
         <span
           v-if="track.meta?.artist"
           :title="track.meta?.artist"
-          class="block overflow-hidden text-ellipsis whitespace-nowrap text-label-1"
+          class="block overflow-hidden text-ellipsis text-label-1"
         >
           {{ track.meta?.artist }}
         </span>
       </div>
-      <div
-        v-if="!(track.meta?.attachedPicture && showThumbnail)"
-        class="block h-1 w-10"
-      ></div>
-      <div v-if="!isTrackTypeKnown">
+      <div v-if="!isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.subtype }}</span>
       </div>
-      <div v-if="isTrackTypeKnown">
+      <div v-if="isTrackTypeKnown" class="flex items-center">
         <span class="text-label-2">{{ track.meta?.album }}</span>
       </div>
-      <div class="ml-auto">
+      <div class="flex items-center">
         <span class="text-label-2">{{
           secondsToTime(track.media?.[0]?.files?.[0]?.duration)
         }}</span>
       </div>
-      <div class="ml-auto flex items-center justify-center gap-1">
+      <div class="flex items-center gap-1">
         <button
           class="px-2 py-0 opacity-0 hover:bg-[red] hover:opacity-100 focus:opacity-100 group-hover:opacity-100 group-focus:opacity-100"
           :aria-label="t('track.a11y.download')"

diff --git a/components/track/TrackList.vue b/components/track/TrackList.vue
@@ -28,7 +28,9 @@ const isTrackTypeKnown = () => {
 </script>
 
 <template>
-  <ol class="w-full divide-y divide-label-separator">
+  <ol
+    class="grid grid-cols-tracklist grid-rows-1 gap-4 w-full divide-y divide-label-separator"
+  >
     <template v-if="showSkeleton">
       <li
         v-for="skeleton in skeletonCount"

diff --git a/modules/figma2tailwind/convertToTailwind.ts b/modules/figma2tailwind/convertToTailwind.ts
@@ -21,6 +21,11 @@ const config: Partial<Config> = {
   darkMode: "class",
   theme: {
     colors,
+    extend: {  
+      gridTemplateColumns: {
+        tracklist: "3rem auto auto auto auto" 
+      }
+    }
   },
 };
 

diff --git a/pages/index.vue b/pages/index.vue
@@ -127,7 +127,10 @@ const isSmallScreen = breakpoints.smallerOrEqual("lg");
             </div>
           </template>
         </div>
-        <ol v-else class="w-full divide-y divide-label-separator">
+        <ol
+          v-else
+          class="w-full divide-y divide-label-separator grid grid-cols-tracklist"
+        >
           <template v-for="item in group.items" :key="item.id">
             <TrackItem
               v-if="item.type === 'track'"

diff --git a/pages/search.vue b/pages/search.vue
@@ -97,7 +97,9 @@ const playItem = (item: TrackModel, group: IDiscoverableGroup) => {
       </div>
       <div class="border-t border-label-4 p-4">
         <div>
-          <ol class="w-full divide-y divide-label-separator">
+          <ol
+            class="grid grid-cols-tracklist grid-rows-1 w-full divide-y divide-label-separator gap-4"
+          >
             <template v-for="item in results?.items" :key="item.id">
               <TrackItem
                 v-if="item.type === 'track'"