Merge pull request #2231 from Bnyro/master

Apply changes from #1632

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-col w-full min-h-screen px-1vw py-5 reset" :class="[theme]">
+    <div class="flex flex-col w-full min-h-screen px-1vw py-5 antialiased reset" :class="[theme]">
         <div class="flex-1">
             <NavBar />
             <router-view v-slot="{ Component }">
@@ -167,7 +167,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 mx-2 sm:mx-0 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-x-6 gap-y-5;
 }
 
 .btn {

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: {
@@ -50,14 +51,48 @@
             <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="item.title"
                     v-text="item.title"
                 />
             </div>
         </router-link>
 
-        <div class="float-right m-0 inline-block children:px-1">
+        <div class="flex">
+            <router-link :to="item.uploaderUrl">
+                <img
+                    v-if="item.uploaderAvatar"
+                    :src="item.uploaderAvatar"
+                    loading="lazy"
+                    :alt="item.uploaderName"
+                    class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
+                    width="68"
+                    height="68"
+                />
+            </router-link>
+
+            <div class="px-2 flex-1">
+                <router-link
+                    v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
+                    class="link-secondary overflow-hidden block text-sm"
+                    :to="item.uploaderUrl"
+                    :title="item.uploaderName"
+                >
+                    <span v-text="item.uploaderName" />
+                    <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
+                </router-link>
+
+                <div v-if="item.views >= 0 || item.uploadedDate" class="text-xs font-normal text-gray-300 mt-1">
+                    <span v-if="item.views >= 0">
+                        <font-awesome-icon icon="eye" />
+                        <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />
+                    </span>
+                    <span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
+                    <span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
+                </div>
+            </div>
+
+            <div>
                 <router-link
                     :to="{
                         path: '/watch',
@@ -86,40 +121,6 @@
                 </button>
                 <PlaylistAddModal v-if="showModal" :video-id="item.url.substr(-11)" @close="showModal = !showModal" />
             </div>
-
-        <div class="flex">
-            <router-link :to="item.uploaderUrl">
-                <img
-                    v-if="item.uploaderAvatar"
-                    :src="item.uploaderAvatar"
-                    loading="lazy"
-                    :alt="item.uploaderName"
-                    class="rounded-full mr-0.5 mt-0.5 w-32px h-32px"
-                    width="68"
-                    height="68"
-                />
-            </router-link>
-
-            <div class="w-[calc(100%-32px-1rem)]">
-                <router-link
-                    v-if="item.uploaderUrl && item.uploaderName && !hideChannel"
-                    class="link-secondary overflow-hidden block"
-                    :to="item.uploaderUrl"
-                    :title="item.uploaderName"
-                >
-                    <span v-text="item.uploaderName" />
-                    <font-awesome-icon class="ml-1.5" v-if="item.uploaderVerified" icon="check" />
-                </router-link>
-
-                <strong v-if="item.views >= 0 || item.uploadedDate" class="text-sm">
-                    <span v-if="item.views >= 0">
-                        <font-awesome-icon icon="eye" />
-                        <span class="pl-0.5" v-text="`${numberFormat(item.views)} •`" />
-                    </span>
-                    <span v-if="item.uploaded > 0" class="pl-0.5" v-text="timeAgo(item.uploaded)" />
-                    <span v-else-if="item.uploadedDate" class="pl-0.5" v-text="item.uploadedDate" />
-                </strong>
-            </div>
         </div>
     </div>
 </template>