From 2c4ccc2a8f2e3d9d65ea232ba5f15ba1bd1f8c6c Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 22 Nov 2020 10:05:16 +0530
Subject: [PATCH] Display views in trending.

---
 src/components/TrendingPage.vue | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 10c6582a..a838f2bf 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -3,23 +3,20 @@
 
     <hr />
 
-    <div class="uk-grid-collapse" uk-grid="parallax: 0">
+    <div class="uk-grid-xl" uk-grid="parallax: 0">
         <div
             style="background: #0b0e0f"
             class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
             v-bind:key="video.url"
             v-for="video in videos"
         >
-            <div
-                class="uk-card uk-card-default uk-card-body uk-grid-match uk-text-secondary"
-                style="background: #0b0e0f"
-            >
+            <div class="uk-text-secondary" style="background: #0b0e0f">
                 <router-link
                     class="uk-text-emphasis"
                     v-bind:to="video.url || '/'"
                 >
-                    <p>{{ video.title }}</p>
                     <img style="width: 100%" v-bind:src="video.thumbnail" />
+                    <p>{{ video.title }}</p>
                 </router-link>
                 <router-link
                     class="uk-link-muted"
@@ -27,8 +24,11 @@
                 >
                     <p>{{ video.uploaderName }}</p>
                 </router-link>
-                <font-awesome-icon icon="eye"></font-awesome-icon>
-                {{ video.views }} views
+                {{ timeFormat(video.duration) }}
+                <b class="uk-text-small uk-align-right">
+                    <font-awesome-icon icon="eye"></font-awesome-icon>
+                    {{ video.views }} views
+                </b>
             </div>
         </div>
     </div>
@@ -51,6 +51,9 @@ export default {
     methods: {
         async fetchTrending() {
             return await (await fetch(Constants.BASE_URL + "/trending")).json();
+        },
+        timeFormat(d) {
+            return require("@/utils/TimeUtils.js").default.timeFormat(d);
         }
     }
 };