From db536f6093e40b11751bf88ba5267330bf70a355 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C3=A9o=20Galley?= <contact@kirkas.ch>
Date: Fri, 28 Oct 2022 11:30:01 +0200
Subject: [PATCH] polish video item and change grid layout

---
 src/App.vue                  |  4 +-
 src/components/VideoItem.vue | 74 ++++++++++++++++++------------------
 2 files changed, 39 insertions(+), 39 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 450678f6..9ea88868 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="w-full min-h-screen px-1vw reset" :class="[theme]">
+    <div class="w-full min-h-screen px-1vw reset antialiased" :class="[theme]">
         <NavBar />
 
         <router-view v-slot="{ Component }">
@@ -120,7 +120,7 @@ b {
 }
 
 .video-grid {
-    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 col-auto lt-md:gap-x-2.5 md:gap-x-1vw gap-y-1.5;
+    @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 col-auto lt-md:gap-x-3 md:gap-6 gap-6;
 }
 
 .btn {
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index b099d06b..cb66a165 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,6 +1,7 @@
 <template>
     <div v-if="showVideo">
         <router-link
+            class="focus:underline hover:underline inline-block w-full"
             :to="{
                 path: '/watch',
                 query: {
@@ -39,43 +40,12 @@
             <div>
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
-                    class="my-2 overflow-hidden flex link"
+                    class="pt-2 overflow-hidden flex link font-bold"
                     :title="video.title"
                     v-text="video.title"
                 />
             </div>
         </router-link>
-
-        <div class="float-right m-0 inline-block children:px-1">
-            <router-link
-                :to="{
-                    path: '/watch',
-                    query: {
-                        v: video.url.substr(-11),
-                        ...(playlistId && { list: playlistId }),
-                        ...(index >= 0 && { index: index + 1 }),
-                        listen: '1',
-                    },
-                }"
-                :aria-label="'Listen to ' + video.title"
-                :title="'Listen to ' + video.title"
-            >
-                <font-awesome-icon icon="headphones" />
-            </router-link>
-            <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
-                <font-awesome-icon icon="circle-plus" />
-            </button>
-            <button
-                v-if="admin"
-                :title="$t('actions.remove_from_playlist')"
-                ref="removeButton"
-                @click="removeVideo(video.url.substr(-11))"
-            >
-                <font-awesome-icon icon="circle-minus" />
-            </button>
-            <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
-        </div>
-
         <div class="flex">
             <router-link :to="video.uploaderUrl">
                 <img
@@ -89,10 +59,10 @@
                 />
             </router-link>
 
-            <div class="w-[calc(100%-32px-1rem)]">
+            <div class="px-2 flex-1">
                 <router-link
                     v-if="video.uploaderUrl && video.uploaderName && !hideChannel"
-                    class="link-secondary overflow-hidden block"
+                    class="link-secondary overflow-hidden block text-sm"
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >
@@ -100,14 +70,44 @@
                     <font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check" />
                 </router-link>
 
-                <strong v-if="video.views >= 0 || video.uploadedDate" class="text-sm">
+                <div v-if="video.views >= 0 || video.uploadedDate" class="text-xs font-normal text-gray-300 mt-1">
                     <span v-if="video.views >= 0">
                         <font-awesome-icon icon="eye" />
-                        <span class="pl-0.5" v-text="`${numberFormat(video.views)} •`" />
+                        <span class="pl-1" v-text="`${numberFormat(video.views)} •`" />
                     </span>
                     <span v-if="video.uploaded > 0" class="pl-0.5" v-text="timeAgo(video.uploaded)" />
                     <span v-else-if="video.uploadedDate" class="pl-0.5" v-text="video.uploadedDate" />
-                </strong>
+                </div>
+            </div>
+
+            <div>
+                <router-link
+                    :to="{
+                        path: '/watch',
+                        query: {
+                            v: video.url.substr(-11),
+                            ...(playlistId && { list: playlistId }),
+                            ...(index >= 0 && { index: index + 1 }),
+                            listen: '1',
+                        },
+                    }"
+                    :aria-label="'Listen to ' + video.title"
+                    :title="'Listen to ' + video.title"
+                >
+                    <font-awesome-icon icon="headphones" />
+                </router-link>
+                <button v-if="authenticated" :title="$t('actions.add_to_playlist')" @click="showModal = !showModal">
+                    <font-awesome-icon icon="circle-plus" />
+                </button>
+                <button
+                    v-if="admin"
+                    :title="$t('actions.remove_from_playlist')"
+                    ref="removeButton"
+                    @click="removeVideo(video.url.substr(-11))"
+                >
+                    <font-awesome-icon icon="circle-minus" />
+                </button>
+                <PlaylistAddModal v-if="showModal" :video-id="video.url.substr(-11)" @close="showModal = !showModal" />
             </div>
         </div>
     </div>