Playlist card placeholder

NUXT/components/CompactRenderers/compactChannelRenderer.vue

@@ -51,8 +51,7 @@
         fab
         text
         elevation="0"
-        style="width: 50px !important; height: 50px !important"
-        @click.prevent=""
+        style="width: 50px !important; height: 50px !important; z-index: 420"
       >
         <v-icon>mdi-share-outline</v-icon>
       </v-btn>

NUXT/components/UtilRenderers/baseVideoRenderer.vue

@@ -33,7 +33,13 @@
       />
     </div>
     <div id="details">
-      <a href="/channel" class="avatar-link pl-2 pt-2">
+      <a
+        @click.prevent="
+          $store.dispatch('channel/fetchChannel', channelUrl),
+            $router.push('/channel')
+        "
+        class="avatar-link pl-2 pt-2"
+      >
         <v-img class="avatar-thumbnail" :src="channelIcon" />
       </a>
       <v-card-text class="video-info pt-2" v-emoji>

NUXT/pages/channel/about.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="pa-8">
+  <div class="px-6 py-3">
     <h3 class="my-2">Description</h3>
     <p>{{ $store.state.channel.descriptionPreview }}</p>
     <br />

NUXT/pages/channel/community.vue

@@ -33,17 +33,17 @@
             69 years ago
           </div>
         </div>
+        <v-spacer />
         <v-btn
           fab
           text
           elevation="0"
           style="width: 50px !important; height: 50px !important"
-          @click.prevent=""
         >
           <v-icon>mdi-share-outline</v-icon>
         </v-btn>
       </div>
-      <p class="px-4">Blurb Blurb Text Goes Here ...</p>
+      <p class="px-4" v-emoji>Blurb Blurb Text Goes Here ...</p>
       <v-img
         contain
         class="background my-4"

NUXT/pages/channel/index.vue

@@ -18,20 +18,10 @@
       <v-progress-circular v-else indeterminate color="primary" size="60" />
     </v-avatar>
     <h2 class="mt-2">{{ $store.state.channel.title }}</h2>
-    <v-btn
-      :aria-label="subscribeAlt"
-      class="mt-2"
-      text
-      color="primary"
-      style="height: 1rem"
-    >
+    <v-btn :aria-label="subscribeAlt" class="py-2" text color="primary">
       {{ $store.state.channel.subscribe }}
     </v-btn>
-    <div
-      v-if="!$store.state.channel.loading"
-      style="font-size: 0.75rem"
-      class="mt-2"
-    >
+    <div v-if="!$store.state.channel.loading" style="font-size: 0.75rem">
       {{ $store.state.channel.subscribers }} &middot;
       {{ $store.state.channel.videosCount }}
     </div>
@@ -39,12 +29,7 @@
       v-if="!$store.state.channel.loading"
       flat
       to="/channel/about"
-      style="
-        font-size: 0.75rem;
-        height: 2rem;
-        text-oveflow: ellipsis;
-        overflow: hidden;
-      "
+      style="font-size: 0.75rem; text-oveflow: ellipsis; overflow: hidden"
       class="background background--text text-center px-4"
       :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
     >

NUXT/pages/channel/playlists.vue

@@ -1,3 +1,80 @@
 <template>
-  <div></div>
+  <div>
+    <!-- TODO: make this a playlist-card-renderer -->
+    <v-card
+      v-ripple
+      class="background d-flex flex-row overflow-hidden ma-4"
+      :class="
+        $store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
+          ? $vuetify.theme.dark
+            ? 'lighten-1'
+            : 'darken-1'
+          : ''
+      "
+      :style="{
+        borderRadius: $store.state.tweaks.roundThumb
+          ? `${$store.state.tweaks.roundTweak / 2}rem`
+          : '0',
+      }"
+      flat
+    >
+      <v-img
+        contain
+        src="/dev.svg"
+        class="background"
+        style="position: relative; max-width: 8rem !important"
+        :class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
+        :style="{
+          borderRadius: $store.state.tweaks.roundThumb
+            ? `${$store.state.tweaks.roundTweak / 4}rem`
+            : '0',
+        }"
+      >
+        <div
+          class="background d-flex flex-column justify-center align-center"
+          style="
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 40%;
+            height: 100%;
+            opacity: 0.25;
+          "
+        >
+          <div>420</div>
+          <v-icon>mdi-playlist-play</v-icon>
+        </div>
+      </v-img>
+      <div class="pa-4" v-emoji>
+        <b>Work in Progress</b>
+
+        <div
+          class="background--text caption"
+          :class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
+        >
+          Bottom Text <br />
+          420 videos
+        </div>
+      </div>
+      <v-spacer></v-spacer>
+      <div class="d-flex flex-column">
+        <v-btn
+          text
+          tile
+          elevation="0"
+          style="width: 50px !important; height: 50px !important"
+        >
+          <v-icon>mdi-share-outline</v-icon>
+        </v-btn>
+        <v-btn
+          text
+          tile
+          elevation="0"
+          style="width: 50px !important; height: 50px !important"
+        >
+          <v-icon>mdi-plus-box-multiple-outline</v-icon>
+        </v-btn>
+      </div>
+    </v-card>
+  </div>
 </template>