From e5394d6ea02ad1324a1157965c49ed80ac0a35ca Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Sun, 22 Nov 2020 10:05:01 +0530
Subject: [PATCH] Responsive grid in Channel.

---
 src/components/Channel.vue | 42 +++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 23 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index 2ba933ae..3797ad4f 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -3,27 +3,38 @@
         <h1 class="uk-text-center">
             <img v-bind:src="channel.avatarUrl" />{{ channel.name }}
         </h1>
-        <img v-bind:src="channel.bannerUrl" style="width: 100%" />
+        <img
+            v-if="channel.bannerUrl"
+            v-bind:src="channel.bannerUrl"
+            style="width: 100%"
+        />
         <p v-html="this.channel.description.replaceAll('\n', '<br>')"></p>
 
         <hr />
 
-        <div class="uk-grid-small" style="width: 100%" uk-grid="parallax: 0">
+        <div class="uk-grid-xl" uk-grid="parallax: 0">
             <div
-                style="width: 288px"
+                class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
                 v-bind:key="item.url"
                 v-for="item in this.channel.relatedStreams"
             >
                 <router-link
-                    class="uk-link-muted"
-                    style="height: 100px"
+                    class="uk-link-muted uk-text-justify"
                     v-bind:to="item.url || '/'"
                 >
                     <img style="width: 100%" v-bind:src="item.thumbnail" />
                     <a>{{ item.title }}</a>
                 </router-link>
                 <br />
-                <a>{{ timeFormat(item.duration) }}</a>
+                <div>
+                    <b class="uk-text-small uk-align-left">
+                        {{ timeFormat(item.duration) }}
+                    </b>
+                    <b class="uk-text-small uk-align-right">
+                        <font-awesome-icon icon="eye"></font-awesome-icon>
+                        {{ item.views }} views
+                    </b>
+                </div>
             </div>
         </div>
     </div>
@@ -56,23 +67,8 @@ export default {
                 .then(data => (this.channel = data))
                 .then(() => (document.title = this.channel.name + " - Piped"));
         },
-        timeFormat(duration) {
-            var pad = function(num, size) {
-                return ("000" + num).slice(size * -1);
-            };
-
-            var time = parseFloat(duration).toFixed(3),
-                hours = Math.floor(time / 60 / 60),
-                minutes = Math.floor(time / 60) % 60,
-                seconds = Math.floor(time - minutes * 60);
-
-            var str = "";
-
-            if (hours > 0) str += pad(hours, 2) + ":";
-
-            str += pad(minutes, 2) + ":" + pad(seconds, 2);
-
-            return str;
+        timeFormat(d) {
+            return require("@/utils/TimeUtils.js").default.timeFormat(d);
         }
     }
 };