mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-22 19:25:16 +00:00
more tweaks to video card, watch page, about page and into animation
This commit is contained in:
parent
65d3c9ec97
commit
d7952575ad
5 changed files with 28 additions and 34 deletions
|
@ -2,17 +2,6 @@
|
|||
<v-card
|
||||
class="entry gridVideoRenderer background"
|
||||
:to="`/watch?v=${video.videoId}`"
|
||||
:class="
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? $vuetify.theme.dark
|
||||
? 'lighten-1'
|
||||
: 'darken-1'
|
||||
: ''
|
||||
"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2}rem`,
|
||||
margin: $store.state.tweaks.roundTweak > 0 ? '0.5rem 1rem' : '0',
|
||||
}"
|
||||
flat
|
||||
>
|
||||
<div id="details">
|
||||
|
|
|
@ -1,10 +1,13 @@
|
|||
<template>
|
||||
<v-card
|
||||
class="entry videoRenderer background mb-2"
|
||||
class="entry videoRenderer background"
|
||||
:to="`/watch?v=${vidId}`"
|
||||
:style="{
|
||||
borderRadius: `${roundTweak / 2.5}rem`,
|
||||
margin: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
|
||||
margin:
|
||||
$store.state.tweaks.roundTweak > 0
|
||||
? '0 1rem 1rem 1rem'
|
||||
: '0 0 0.25rem 0',
|
||||
}"
|
||||
flat
|
||||
>
|
||||
|
|
|
@ -77,7 +77,7 @@ export default {
|
|||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transition-property: opacity, transform;
|
||||
animation: bounce 0.66s ease infinite alternate;
|
||||
animation: bounce 0.66s 0.5s ease 1 forwards;
|
||||
}
|
||||
/* triangles aren't very good at spinning :c */
|
||||
@keyframes bounce {
|
||||
|
|
|
@ -1,18 +1,15 @@
|
|||
<template>
|
||||
<div style="padding: 1rem">
|
||||
<center>
|
||||
<div class="d-flex justify-center pa-4">
|
||||
<div class="d-flex flex-column justify-center pa-4">
|
||||
<div>
|
||||
<v-img
|
||||
width="27px"
|
||||
width="69px"
|
||||
src="/icon.svg"
|
||||
style="transform: rotate(90deg); filter: drop-shadow(0.1px 0.1px 0px #fff) drop-shadow(0.1px -0.1px 0px #fff);"
|
||||
:class="$vuetify.theme.dark ? '' : 'invert'"
|
||||
/>
|
||||
</div>
|
||||
<h1 style="font-size: 2rem; margin-left: -1px; margin-top: -9px">
|
||||
ueTube
|
||||
</h1>
|
||||
<h1 style="font-size: 2rem">VueTube</h1>
|
||||
</div>
|
||||
</center>
|
||||
|
||||
|
@ -61,10 +58,10 @@
|
|||
<!-- End Device Information -->
|
||||
|
||||
<!-- App Links --->
|
||||
<div class="obj d-flex flex-row gap-1">
|
||||
<div class="obj d-flex flex-row gap-1 full-width">
|
||||
<v-btn
|
||||
depressed
|
||||
class="action col"
|
||||
class="action flex-grow-1"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
|
@ -76,7 +73,7 @@
|
|||
</v-btn>
|
||||
<v-btn
|
||||
depressed
|
||||
class="action col ml-4"
|
||||
class="action flex-grow-1 ml-4"
|
||||
:class="
|
||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||
"
|
||||
|
|
|
@ -22,13 +22,13 @@
|
|||
</div>
|
||||
|
||||
<div
|
||||
v-bind:class="{
|
||||
id="content-container"
|
||||
:class="{
|
||||
'overflow-y-auto': !showComments,
|
||||
'overflow-y-hidden': showComments,
|
||||
}"
|
||||
id="content-container"
|
||||
>
|
||||
<v-card v-if="loaded" class="px-2 background rounded-0" flat>
|
||||
<v-card v-if="loaded" class="background rounded-0" flat>
|
||||
<div
|
||||
v-ripple
|
||||
class="d-flex justify-space-between align-start px-3 pt-3"
|
||||
|
@ -61,13 +61,13 @@
|
|||
<v-icon class="ml-4" v-if="showMore">mdi-chevron-up</v-icon>
|
||||
<v-icon class="ml-4" v-else>mdi-chevron-down</v-icon>
|
||||
</div>
|
||||
<div class="d-flex">
|
||||
<div class="d-flex pl-4">
|
||||
<v-btn
|
||||
v-for="(item, index) in interactions"
|
||||
:key="index"
|
||||
text
|
||||
fab
|
||||
class="vertical-button ma-1"
|
||||
class="vertical-button mx-1"
|
||||
elevation="0"
|
||||
style="width: 4.2rem !important; height: 4.2rem !important"
|
||||
:disabled="item.disabled"
|
||||
|
@ -111,10 +111,10 @@
|
|||
<v-divider />
|
||||
|
||||
<!-- Channel Bar -->
|
||||
<div class="channel-container" v-if="loaded">
|
||||
<div v-if="loaded">
|
||||
<v-card
|
||||
flat
|
||||
class="channel-section background px-3 rounded-0"
|
||||
class="channel-section background py-2 px-3 rounded-0"
|
||||
:to="video.channelUrl"
|
||||
>
|
||||
<div id="details">
|
||||
|
@ -151,7 +151,7 @@
|
|||
|
||||
<!-- Comments -->
|
||||
<div v-if="loaded && video.commentData" @click="toggleComment">
|
||||
<v-card flat tile class="background comment-renderer py-0">
|
||||
<v-card flat tile class="background comment-renderer px-3">
|
||||
<v-card-text class="comment-count keep-spaces px-0">
|
||||
<template v-for="text in video.commentData.headerText.runs">
|
||||
<template v-if="text.bold">
|
||||
|
@ -187,13 +187,19 @@
|
|||
></swipeable-bottom-sheet> -->
|
||||
|
||||
<!-- Related Videos -->
|
||||
<div class="loaders" v-if="!loaded">
|
||||
<div v-if="!loaded">
|
||||
<v-skeleton-loader
|
||||
type="list-item-two-line, actions, divider, list-item-avatar, divider, list-item-three-line"
|
||||
/>
|
||||
<vid-load-renderer :count="5" />
|
||||
</div>
|
||||
<item-section-renderer v-else :render="recommends" />
|
||||
<item-section-renderer
|
||||
v-else
|
||||
:render="recommends"
|
||||
:style="{
|
||||
marginTop: $store.state.tweaks.roundTweak > 0 ? '1rem' : '0',
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -447,7 +453,6 @@ export default {
|
|||
.comment-renderer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.channel-section #details,
|
||||
|
|
Loading…
Reference in a new issue