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>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- TODO: make this a community-post-renderer -->
|
<community-card />
|
||||||
<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>
|
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
!($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
|
!($store.state.tweaks.roundThumb && $store.state.tweaks.roundTweak > 0)
|
||||||
|
|
@ -82,3 +11,12 @@
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import communityCard from "../../components/communityCard.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
communityCard,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,80 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- TODO: make this a playlist-card-renderer -->
|
<playlist-card />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import playlistCard from "../../components/playlistCard.vue";
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
playlistCard,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -1,25 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<center class="px-4">
|
<div>
|
||||||
<v-img
|
<h4 class="ml-8 mb-2">Local Playlists</h4>
|
||||||
contain
|
<playlist-card />
|
||||||
style="margin-top: 5em; max-width: 80%; max-height: 15em"
|
</div>
|
||||||
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>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import playlistCard from "../components/playlistCard.vue";
|
||||||
|
export default {
|
||||||
|
components: { playlistCard },
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue