mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-25 12:45:17 +00:00
playlist & community card components
This commit is contained in:
Nikita Krupin
parent
ea11461ae0
commit
d2fc4c94e8
5 changed files with 176 additions and 168 deletions
71
NUXT/components/communityCard.vue
Normal file
71
NUXT/components/communityCard.vue
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
<template>
|
||||
<v-card
|
||||
v-ripple
|
||||
flat
|
||||
class="background"
|
||||
: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',
|
||||
margin:
|
||||
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
|
||||
? '0 1rem 1rem 1rem'
|
||||
: '0 0 0.25rem 0',
|
||||
}"
|
||||
>
|
||||
<div class="d-flex flex-row pa-4">
|
||||
<v-avatar size="50" color="primary" />
|
||||
<div class="d-flex flex-column my-auto pl-4">
|
||||
<b>Work in progress</b>
|
||||
<div
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
69 years ago
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
elevation="0"
|
||||
style="width: 50px !important; height: 50px !important"
|
||||
>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<p class="px-4" v-emoji>Blurb Blurb Text Goes Here ...</p>
|
||||
<v-img
|
||||
contain
|
||||
class="background my-4"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
style="max-height: 15rem"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 4}rem`,
|
||||
marginLeft:
|
||||
!($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak) >
|
||||
0
|
||||
? '1rem'
|
||||
: '0',
|
||||
marginRight:
|
||||
!($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak) >
|
||||
0
|
||||
? '1rem'
|
||||
: '0',
|
||||
}"
|
||||
src="/dev.svg"
|
||||
/>
|
||||
<div class="d-flex flex-row px-4 pb-4">
|
||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||
<b class="mx-2">123</b>
|
||||
<v-icon class="ml-2">mdi-thumb-down-outline</v-icon>
|
||||
</div>
|
||||
</v-card>
|
||||
</template>
|
||||
77
NUXT/components/playlistCard.vue
Normal file
77
NUXT/components/playlistCard.vue
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
<template>
|
||||
<v-card
|
||||
v-ripple
|
||||
class="background d-flex flex-row overflow-hidden mb-4 mx-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.5;
|
||||
"
|
||||
>
|
||||
<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>
|
||||
</template>
|
||||
|
|
@ -1,77 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- TODO: make this a community-post-renderer -->
|
||||
<v-card
|
||||
v-ripple
|
||||
flat
|
||||
class="background"
|
||||
: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',
|
||||
margin:
|
||||
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0
|
||||
? '0 1rem 1rem 1rem'
|
||||
: '0 0 0.25rem 0',
|
||||
}"
|
||||
>
|
||||
<div class="d-flex flex-row pa-4">
|
||||
<v-avatar size="50" color="primary" />
|
||||
<div class="d-flex flex-column my-auto pl-4">
|
||||
<b>Work in progress</b>
|
||||
<div
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
69 years ago
|
||||
</div>
|
||||
</div>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
fab
|
||||
text
|
||||
elevation="0"
|
||||
style="width: 50px !important; height: 50px !important"
|
||||
>
|
||||
<v-icon>mdi-share-outline</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
<p class="px-4" v-emoji>Blurb Blurb Text Goes Here ...</p>
|
||||
<v-img
|
||||
contain
|
||||
class="background my-4"
|
||||
:class="$vuetify.theme.dark ? 'lighten-2' : 'darken-2'"
|
||||
style="max-height: 15rem"
|
||||
:style="{
|
||||
borderRadius: `${$store.state.tweaks.roundTweak / 4}rem`,
|
||||
marginLeft:
|
||||
!(
|
||||
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak
|
||||
) > 0
|
||||
? '1rem'
|
||||
: '0',
|
||||
marginRight:
|
||||
!(
|
||||
$store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak
|
||||
) > 0
|
||||
? '1rem'
|
||||
: '0',
|
||||
}"
|
||||
src="/dev.svg"
|
||||
/>
|
||||
<div class="d-flex flex-row px-4 pb-4">
|
||||
<v-icon>mdi-thumb-up-outline</v-icon>
|
||||
<b class="mx-2">123</b>
|
||||
<v-icon class="ml-2">mdi-thumb-down-outline</v-icon>
|
||||
</div>
|
||||
</v-card>
|
||||
<community-card />
|
||||
<div
|
||||
v-if="
|
||||
!($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
|
||||
|
|
@ -82,3 +11,12 @@
|
|||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import communityCard from "../../components/communityCard.vue";
|
||||
export default {
|
||||
components: {
|
||||
communityCard,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,80 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- TODO: make this a playlist-card-renderer -->
|
||||
<v-card
|
||||
v-ripple
|
||||
class="background d-flex flex-row overflow-hidden mb-4 mx-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.5;
|
||||
"
|
||||
>
|
||||
<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>
|
||||
<playlist-card />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import playlistCard from "../../components/playlistCard.vue";
|
||||
export default {
|
||||
components: {
|
||||
playlistCard,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,25 +1,13 @@
|
|||
<template>
|
||||
<center class="px-4">
|
||||
<v-img
|
||||
contain
|
||||
style="margin-top: 5em; max-width: 80%; max-height: 15em"
|
||||
src="/dev.svg"
|
||||
/>
|
||||
<h2
|
||||
class="background--text mt-4"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
Page Under Construction
|
||||
</h2>
|
||||
<p
|
||||
class="background--text"
|
||||
:class="$vuetify.theme.dark ? 'text--lighten-4' : 'text--darken-4'"
|
||||
>
|
||||
Please read the VueTube FAQ for more information.
|
||||
</p>
|
||||
</center>
|
||||
<div>
|
||||
<h4 class="ml-8 mb-2">Local Playlists</h4>
|
||||
<playlist-card />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {};
|
||||
import playlistCard from "../components/playlistCard.vue";
|
||||
export default {
|
||||
components: { playlistCard },
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue