search & watch page YouKnowWho look

NUXT/components/bottomNavigation.vue

@@ -58,6 +58,7 @@ export default {
   z-index: 99999;
 }
 .navButton {
+  width: 25vw !important;
   font-size: 0.66rem !important;
 }
 .tab {

NUXT/components/topNavigation.vue

@@ -84,8 +84,4 @@ export default {
 .searchBar {
   margin: 0;
 }
-.searchButton {
-  width: 100%;
-  justify-content: left !important;
-}
 </style>

NUXT/layouts/default.vue

@@ -42,15 +42,17 @@
       >
         <div class="scroll-y" style="height: 100%">
           <div v-if="search" style="min-width: 180px">
-            <v-list-item v-for="(item, index) in response" :key="index">
-              <v-icon>mdi-magnify</v-icon>
+            <v-list-item v-for="(item, index) in response" :key="index" class="px-0">
               <v-btn
                 text
+                tile
                 dense
                 class="info--text searchButton text-left text-capitalize"
                 @click="youtubeSearch(item)"
-                v-text="item[0]"
-              />
+              >
+                <v-icon class="mr-5">mdi-magnify</v-icon>
+                {{ item[0] }}
+              </v-btn>
             </v-list-item>
           </div>
         </div>
@@ -88,6 +90,13 @@ div {
 }
 </style>
 
+<style scoped>
+.searchButton {
+  width: 100%;
+  justify-content: left !important;
+}
+</style>
+
 <script>
 import { App as CapacitorApp } from "@capacitor/app";
 import { mapState } from "vuex";

NUXT/pages/search.vue

@@ -1,22 +1,22 @@
 <template>
-  <div>
-    <center v-if="videos.length == 0">
+  <div class="accent">
+    <center v-if="videos.length == -1">
       <v-skeleton-loader type="card-avatar, article, actions" />
       <v-skeleton-loader type="card-avatar, article, actions" />
     </center>
 
-    <v-list-item v-for="(video, index) in videos" :key="index">
-      <v-card class="entry" :to="`/watch?v=${video.id}`">
-        <v-card-text>
-          <div style="position: relative">
-            <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
-            <div
-              class="videoRuntimeFloat"
-              style="color: #fff"
-              v-text="video.runtime"
-            />
-          </div>
-          <div style="margin-top: 0.5em" v-text="video.title" />
+    <v-list-item v-for="(video, index) in videos" :key="index" class="pa-0">
+      <v-card class="entry background" :to="`/watch?v=${video.id}`" flat>
+        <div style="position: relative">
+          <v-img :src="video.thumbnails[video.thumbnails.length - 1].url" />
+          <div
+            class="videoRuntimeFloat"
+            style="color: #fff"
+            v-text="video.runtime"
+          />
+        </div>
+        <div class="px-4 pt-4" v-text="video.title" />
+        <v-card-text class="pt-0">
           <div v-text="`${video.views} • ${video.uploaded}`" />
         </v-card-text>
       </v-card>
@@ -26,7 +26,6 @@
 
 <style scoped>
 .entry {
-  margin-top: 1em;
   width: 100%; /* Prevent Loading Weirdness */
 }
 .videoRuntimeFloat {
@@ -35,7 +34,7 @@
   right: 10px;
   background: rgba(0, 0, 0, 0.5);
   border-radius: 5px;
-  padding: 0 3px 0 3px;
+  padding: 0px 4px 0px 4px;
 }
 </style>
 

NUXT/pages/watch.vue

@@ -1,13 +1,13 @@
 <template>
   <div>
-    <video controls autoplay :src="vidSrc" width="100%" height="300vh" />
-    <v-card class="ml-2 mr-2 flat light" flat>
-      <v-card-title
-        style="padding-top: 0; padding-bottom: 0; font-size: 0.95em"
+    <video controls autoplay :src="vidSrc" width="100%" style="max-height: 50vh" />
+    <v-card class="ml-2 mr-2 background" flat>
+      <v-card-title class="mt-2"
+        style="padding-top: 0; padding-bottom: 0; font-size: 0.95rem; line-height: 1rem;"
         v-text="title"
       />
       <v-card-text>
-        <div style="margin-bottom: 1em">{{ views }} views • {{ uploaded }}</div>
+        <div style="margin-bottom: 1rem;">{{ views }} views • {{ uploaded }}</div>
 
         <!--   Scrolling Div For Interactions   --->
         <div style="display: flex; margin-bottom: 1em">
@@ -25,7 +25,7 @@
               @click="item.action"
             >
               <v-icon v-text="item.icon" />
-              <div v-text="item.value || item.name" />
+              <div class="mt-2" style="font-size: .66rem;" v-text="item.value || item.name" />
             </v-btn>
           </v-list-item>
 
@@ -36,9 +36,8 @@
           </v-btn>
         </div>
         <!--   End Scrolling Div For Interactions   --->
-        <hr />
+        <!-- <hr /> -->
         <p>Channel Stuff</p>
-        <hr />
       </v-card-text>
       <div v-if="showMore" class="scroll-y ml-2 mr-2">
         {{ description }}
@@ -86,21 +85,21 @@ export default {
       interactions: [
         {
           name: "Likes",
-          icon: "mdi-thumb-up",
+          icon: "mdi-thumb-up-outline",
           action: null,
           value: this.likes,
           disabled: true,
         },
         {
           name: "Dislikes",
-          icon: "mdi-thumb-down",
+          icon: "mdi-thumb-down-outline",
           action: this.dislike(),
           value: this.dislikes,
           disabled: true,
         },
         {
           name: "Share",
-          icon: "mdi-share",
+          icon: "mdi-share-outline",
           action: this.share(),
           disabled: true,
         },

ios/App/Podfile

@@ -9,12 +9,12 @@ install! 'cocoapods', :disable_input_output_paths => true
 def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
-  pod 'CapacitorCommunityHttp', :path => '..\..\node_modules\@capacitor-community\http'
-  pod 'CapacitorApp', :path => '..\..\node_modules\@capacitor\app'
-  pod 'CapacitorBrowser', :path => '..\..\node_modules\@capacitor\browser'
-  pod 'CapacitorDevice', :path => '..\..\node_modules\@capacitor\device'
-  pod 'CapacitorSplashScreen', :path => '..\..\node_modules\@capacitor\splash-screen'
-  pod 'CapacitorStatusBar', :path => '..\..\node_modules\@capacitor\status-bar'
+  pod 'CapacitorCommunityHttp', :path => '../../node_modules/@capacitor-community/http'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
+  pod 'CapacitorBrowser', :path => '../../node_modules/@capacitor/browser'
+  pod 'CapacitorDevice', :path => '../../node_modules/@capacitor/device'
+  pod 'CapacitorSplashScreen', :path => '../../node_modules/@capacitor/splash-screen'
+  pod 'CapacitorStatusBar', :path => '../../node_modules/@capacitor/status-bar'
 end
 
 target 'App' do