etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2024-11-25 20:55:17 +00:00
Code Issues Projects Releases Wiki Activity

Playlist card placeholder

Browse source
This commit is contained in:
Nikita Krupin 2022-05-19 15:00:02 -04:00
parent 60deca8f4a
commit 491a6d295b
6 changed files with 92 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
NUXT/components/CompactRenderers/compactChannelRenderer.vue
View file

@ -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>

8
NUXT/components/UtilRenderers/baseVideoRenderer.vue
View file

@ -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>

2
NUXT/pages/channel/about.vue
View file

@ -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 />

4
NUXT/pages/channel/community.vue
View file

@ -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"

21
NUXT/pages/channel/index.vue
View file

@ -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'"
>

79
NUXT/pages/channel/playlists.vue
View file

@ -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>