From e53ff4648294bcc71f0a60203c14025327f5b2ac Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Fri, 22 Oct 2021 23:41:38 +0300
Subject: [PATCH] 4 videos per row(5 for biggest screens) for all pages with
 video list in it, refuce left nav width

---
 src/components/Channel.vue       | 3 ++-
 src/components/FeedPage.vue      | 6 +++---
 src/components/MenuDesktop.vue   | 2 +-
 src/components/SearchResults.vue | 6 +++---
 src/components/TrendingPage.vue  | 8 ++++----
 src/components/VideoItem.vue     | 8 +++++++-
 6 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/Channel.vue b/src/components/Channel.vue
index fe244e51..7aad2336 100644
--- a/src/components/Channel.vue
+++ b/src/components/Channel.vue
@@ -21,10 +21,11 @@
 
         <hr />
 
-        <div class="uk-grid-xl" uk-grid="parallax: 0">
+        <div class="uk-grid-xl" uk-grid="parallax: 0" style="padding-left: 25px;">
             <div
                 v-for="video in channel.relatedStreams"
                 :key="video.url"
+                style="padding-left: 15px;"
                 class="uk-width-1-2 uk-width-1-3@m uk-width-1-4@l uk-width-1-5@xl"
             >
                 <VideoItem :video="video" height="94" width="168" hide-channel />
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 278699ad..4b13ac3f 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -29,12 +29,12 @@
 
     <hr />
 
-    <div class="uk-grid-xl" uk-grid="parallax: 0">
+    <div class="uk-grid-xl" uk-grid="parallax: 0" style="padding-left: 25px;">
         <div
             v-for="video in videos"
             :key="video.url"
-            :style="[{ background: backgroundColor }]"
-            class="uk-width-1-1 uk-width-1-3@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            :style="[{ background: backgroundColor, paddingLeft: '15px' }]"
+            class="uk-width-1-1 uk-width-1-3@s uk-width-1-4@m uk-width-1-4@l uk-width-1-5@xl"
         >
             <VideoItem :video="video" />
         </div>
diff --git a/src/components/MenuDesktop.vue b/src/components/MenuDesktop.vue
index 380af29a..4ed673bb 100644
--- a/src/components/MenuDesktop.vue
+++ b/src/components/MenuDesktop.vue
@@ -5,7 +5,7 @@
         :class="{ 'collapse-text': collapseText, 'enable-animations': enableAnimations }"
         style="padding: 32px 24px; height: 100vh;"
         :style="{
-            width: collapsed ? '78px' : '291px',
+            width: collapsed ? '78px' : '270px',
             backgroundColor: secondaryBackgroundColor,
             transition: enableAnimations ? 'width 400ms' : 'none',
         }"
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 1e766f3c..41281fa4 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -30,12 +30,12 @@
         </i>
     </div>
 
-    <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0">
+    <div v-if="results" class="uk-grid-xl" uk-grid="parallax: 0" style="padding-left: 25px;">
         <div
             v-for="result in results.items"
             :key="result.url"
-            :style="[{ background: backgroundColor }]"
-            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"
+            :style="[{ background: backgroundColor, paddingLeft: '15px' }]"
+            class="uk-width-1-2 uk-width-1-3@s uk-width-1-4@m uk-width-1-4@l uk-width-1-5@xl"
         >
             <VideoItem v-if="shouldUseVideoItem(result)" :video="result" height="94" width="168" />
             <div v-if="!shouldUseVideoItem(result)" class="uk-text-secondary">
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index a0743e1f..6128822c 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -52,14 +52,14 @@
         </div>
     </div>
 
-    <div class="uk-grid-xl" uk-grid="parallax: 0">
+    <div class="uk-grid-xl" uk-grid="parallax: 0" style="padding-left: 25px;">
         <div
             v-for="video in videos"
             :key="video.url"
-            :style="[{ background: backgroundColor }]"
-            class="uk-width-1-1 uk-width-1-2@s uk-width-1-4@m uk-width-1-5@l uk-width-1-6@xl"
+            :style="[{ background: backgroundColor, paddingLeft: '15px' }]"
+            class="uk-width-1-1 uk-width-1-2@s uk-width-1-4@m uk-width-1-4@l uk-width-1-5@xl"
         >
-            <VideoItem :video="video" height="118" width="210" />
+            <VideoItem :video="video" height="118" width="10" />
         </div>
     </div>
 </template>
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index fe9bf4dc..3c3e9998 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -19,7 +19,13 @@
 
             <div>
                 <p
-                    style="padding-top: 0.5rem; margin-bottom: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;"
+                    style="padding-top: 0.5rem; 
+                        margin-bottom: 0.5rem; 
+                        display: -webkit-box; 
+                        -webkit-line-clamp: 2; 
+                        -webkit-box-orient: vertical; 
+                        overflow: hidden;
+                        font-weight: bold;"
                     :title="video.title"
                 >
                     {{ video.title }}