From 9b6e32683f5f798b14c5b1fe799285e39d420633 Mon Sep 17 00:00:00 2001
From: FireMasterK <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 27 Dec 2021 14:46:39 +0000
Subject: [PATCH] Remove whitepace for spacing, and reduce grid dom size.

---
 src/App.vue                      |  3 +-
 src/components/Channel.vue       | 11 ++++++--
 src/components/Comment.vue       | 16 +++++------
 src/components/FeedPage.vue      |  4 +--
 src/components/HistoryPage.vue   |  4 +--
 src/components/Playlist.vue      | 10 +++++--
 src/components/Preferences.vue   |  2 +-
 src/components/SearchResults.vue | 10 +++----
 src/components/TrendingPage.vue  |  4 +--
 src/components/VideoItem.vue     |  6 ++--
 src/components/WatchVideo.vue    | 47 +++++++++++---------------------
 11 files changed, 50 insertions(+), 67 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3abb1b4d..52740579 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,8 +11,7 @@
             <a aria-label="GitHub" href="https://github.com/TeamPiped/Piped">
                 <font-awesome-icon :icon="['fab', 'github']"></font-awesome-icon>
             </a>
-            &nbsp;
-            <a href="https://github.com/TeamPiped/Piped#donations">
+            <a class="ml-2" href="https://github.com/TeamPiped/Piped#donations">
                 <font-awesome-icon :icon="['fab', 'bitcoin']"></font-awesome-icon>
                 {{ $t("actions.donations") }}
             </a>
diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index e4751c76..b473a0fb 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -17,9 +17,14 @@
         <hr />
 
         <div class="video-grid">
-            <div v-for="video in channel.relatedStreams" :key="video.url">
-                <VideoItem :video="video" height="94" width="168" hide-channel />
-            </div>
+            <VideoItem
+                v-for="video in channel.relatedStreams"
+                :key="video.url"
+                :video="video"
+                height="94"
+                width="168"
+                hide-channel
+            />
         </div>
     </div>
 </template>
diff --git a/src/components/Comment.vue b/src/components/Comment.vue
index 2d0fca2b..83731f8f 100644
--- a/src/components/Comment.vue
+++ b/src/components/Comment.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="comment flex">
+    <div class="comment flex mt-1.5">
         <img
             :src="comment.thumbnail"
             class="comment-avatar rounded-full w-12 h-12"
@@ -12,14 +12,15 @@
         <div class="comment-content pl-2">
             <div class="comment-header">
                 <div v-if="comment.pinned" class="comment-pinned uk-text-meta">
-                    <font-awesome-icon icon="thumbtack"></font-awesome-icon>&nbsp; {{ $t("comment.pinned_by") }}
+                    <font-awesome-icon icon="thumbtack"></font-awesome-icon
+                    ><span class="ml-1.5">{{ $t("comment.pinned_by") }}</span>
                     {{ uploader }}
                 </div>
 
                 <div class="comment-author">
                     <router-link class="font-bold uk-text-small" :to="comment.commentorUrl">
                         {{ comment.author }} </router-link
-                    >&thinsp;<font-awesome-icon v-if="comment.verified" icon="check"></font-awesome-icon>
+                    ><font-awesome-icon class="ml-1.5" v-if="comment.verified" icon="check"></font-awesome-icon>
                 </div>
                 <div class="comment-meta uk-text-meta uk-margin-small-bottom">
                     {{ comment.commentedTime }}
@@ -36,15 +37,13 @@
             <template v-if="comment.repliesPage && (!loadingReplies || !showingReplies)">
                 <div @click="loadReplies">
                     <a class="uk-link-text" v-t="'actions.show_replies'" />
-                    &nbsp;
-                    <font-awesome-icon icon="level-down-alt" />
+                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
                 </div>
             </template>
             <template v-if="showingReplies">
                 <div @click="hideReplies">
                     <a class="uk-link-text" v-t="'actions.hide_replies'" />
-                    &nbsp;
-                    <font-awesome-icon icon="level-up-alt" />
+                    <font-awesome-icon class="ml-1.5" icon="level-up-alt" />
                 </div>
             </template>
             <div v-show="showingReplies" v-if="replies" class="replies">
@@ -53,8 +52,7 @@
                 </div>
                 <div v-if="nextpage" @click="loadReplies">
                     <a class="uk-link-text" v-t="'actions.load_more_replies'" />
-                    &nbsp;
-                    <font-awesome-icon icon="level-down-alt" />
+                    <font-awesome-icon class="ml-1.5" icon="level-down-alt" />
                 </div>
             </div>
         </div>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index b304bdc0..5dcbb456 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -22,9 +22,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url">
-            <VideoItem :video="video" />
-        </div>
+        <VideoItem v-for="video in videos" :key="video.url" :video="video" />
     </div>
 </template>
 
diff --git a/src/components/HistoryPage.vue b/src/components/HistoryPage.vue
index dea9260d..8fc181e8 100644
--- a/src/components/HistoryPage.vue
+++ b/src/components/HistoryPage.vue
@@ -18,9 +18,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url">
-            <VideoItem :video="video" />
-        </div>
+        <VideoItem v-for="video in videos" :key="video.url" :video="video" />
     </div>
 
     <br />
diff --git a/src/components/Playlist.vue b/src/components/Playlist.vue
index f60a13db..3c084686 100644
--- a/src/components/Playlist.vue
+++ b/src/components/Playlist.vue
@@ -27,9 +27,13 @@
         <hr />
 
         <div class="video-grid">
-            <div v-for="video in playlist.relatedStreams" :key="video.url">
-                <VideoItem :video="video" height="94" width="168" />
-            </div>
+            <VideoItem
+                v-for="video in playlist.relatedStreams"
+                :key="video.url"
+                :video="video"
+                height="94"
+                width="168"
+            />
         </div>
     </div>
 </template>
diff --git a/src/components/Preferences.vue b/src/components/Preferences.vue
index a1a0eac2..264ea15e 100644
--- a/src/components/Preferences.vue
+++ b/src/components/Preferences.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="uk-flex uk-flex-between uk-flex-middle">
         <button class="uk-button uk-button-text" @click="$router.go(-1) || $router.push('/')">
-            <font-awesome-icon icon="chevron-left" /> &nbsp;{{ $t("actions.back") }}
+            <font-awesome-icon icon="chevron-left" /><span class="ml-1.5">{{ $t("actions.back") }}</span>
         </button>
         <span><h1 v-t="'titles.preferences'" class="font-bold text-center"/></span>
         <span />
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 50ce89d7..27fd0aee 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -39,16 +39,16 @@
                         <img style="width: 100%" :src="result.thumbnail" loading="lazy" />
                     </div>
                     <p>
-                        {{ result.name }}&thinsp;<font-awesome-icon
-                            v-if="result.verified"
-                            icon="check"
-                        ></font-awesome-icon>
+                        {{ result.name
+                        }}<font-awesome-icon class="ml-1.5" v-if="result.verified" icon="check"></font-awesome-icon>
                     </p>
                 </router-link>
                 <p v-if="result.description">{{ result.description }}</p>
                 <router-link v-if="result.uploaderUrl" class="uk-link-muted" :to="result.uploaderUrl">
                     <p>
-                        {{ result.uploader }}&thinsp;<font-awesome-icon
+                        {{ result.uploader
+                        }}<font-awesome-icon
+                            class="ml-1.5"
                             v-if="result.uploaderVerified"
                             icon="check"
                         ></font-awesome-icon>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 217e6f6b..856ab5a4 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -4,9 +4,7 @@
     <hr />
 
     <div class="video-grid">
-        <div v-for="video in videos" :key="video.url">
-            <VideoItem :video="video" height="118" width="210" />
-        </div>
+        <VideoItem v-for="video in videos" :key="video.url" :video="video" height="118" width="210" />
     </div>
 </template>
 
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index d3f73a0c..a2a55fcd 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -56,10 +56,8 @@
                     :to="video.uploaderUrl"
                     :title="video.uploaderName"
                 >
-                    {{ video.uploaderName }}&thinsp;<font-awesome-icon
-                        v-if="video.uploaderVerified"
-                        icon="check"
-                    ></font-awesome-icon>
+                    {{ video.uploaderName
+                    }}<font-awesome-icon class="ml-1.5" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 </router-link>
 
                 <b v-if="video.views >= 0 || video.uploadedDate" class="uk-text-small">
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index f1256438..18bfc04e 100644
--- a/src/components/WatchVideo.vue
+++ b/src/components/WatchVideo.vue
@@ -45,22 +45,18 @@
                             <b v-t="'video.ratings_disabled'" />
                         </div>
                     </template>
-                    <a :href="'https://youtu.be/' + getVideoId()" class="uk-margin-small-left btn">
-                        <b>{{ $t("player.watch_on") }}&nbsp;</b>
-                        <font-awesome-icon :icon="['fab', 'youtube']"></font-awesome-icon>
+                    <a :href="'https://youtu.be/' + getVideoId()" class="btn">
+                        <b>{{ $t("player.watch_on") }}</b>
+                        <font-awesome-icon class="ml-1.5" :icon="['fab', 'youtube']"></font-awesome-icon>
                     </a>
-                    <a
-                        v-if="video.lbryId"
-                        :href="'https://odysee.com/' + video.lbryId"
-                        class="uk-margin-small-left btn"
-                    >
+                    <a v-if="video.lbryId" :href="'https://odysee.com/' + video.lbryId" class="btn">
                         <b>{{ $t("player.watch_on") }} LBRY</b>
                     </a>
                     <router-link
                         :to="toggleListenUrl"
                         :aria-label="(isListening ? 'Watch ' : 'Listen to ') + video.title"
                         :title="(isListening ? 'Watch ' : 'Listen to ') + video.title"
-                        class="uk-margin-small-left btn"
+                        class="btn"
                     >
                         <font-awesome-icon :icon="isListening ? 'tv' : 'headphones'"></font-awesome-icon>
                     </router-link>
@@ -70,7 +66,7 @@
             <div class="flex">
                 <div class="flex items-center">
                     <img :src="video.uploaderAvatar" alt="" loading="lazy" class="rounded-full" />
-                    <router-link v-if="video.uploaderUrl" class="link" :to="video.uploaderUrl">
+                    <router-link v-if="video.uploaderUrl" class="link ml-1.5" :to="video.uploaderUrl">
                         {{ video.uploader }} </router-link
                     ><font-awesome-icon class="ml-1" v-if="video.uploaderVerified" icon="check"></font-awesome-icon>
                 </div>
@@ -95,25 +91,13 @@
 
         <label for="chkAutoLoop"
             ><b>{{ $t("actions.loop_this_video") }}:</b></label
-        >&nbsp;
-        <input
-            id="chkAutoLoop"
-            v-model="selectedAutoLoop"
-            class="uk-checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
+        >
+        <input id="chkAutoLoop" v-model="selectedAutoLoop" class="ml-1.5" type="checkbox" @change="onChange($event)" />
         <br />
         <label for="chkAutoPlay"
             ><b>{{ $t("actions.auto_play_next_video") }}:</b></label
-        >&nbsp;
-        <input
-            id="chkAutoPlay"
-            v-model="selectedAutoPlay"
-            class="uk-checkbox"
-            type="checkbox"
-            @change="onChange($event)"
-        />
+        >
+        <input id="chkAutoPlay" v-model="selectedAutoPlay" class="ml-1.5" type="checkbox" @change="onChange($event)" />
 
         <hr />
 
@@ -132,14 +116,15 @@
                 <a class="btn mb-2 sm:hidden" @click="showRecs = !showRecs">
                     {{ showRecs ? $t("actions.minimize_recommendations") : $t("actions.show_recommendations") }}
                 </a>
-                <div
+                <VideoItem
                     v-for="related in video.relatedStreams"
+                    class="w-auto"
                     v-show="showRecs || !smallView"
                     :key="related.url"
-                    class="uk-tile-default w-auto"
-                >
-                    <VideoItem :video="related" height="94" width="168" />
-                </div>
+                    :video="related"
+                    height="94"
+                    width="168"
+                />
                 <hr class="sm:hidden" />
             </div>
         </div>