mirror of https://github.com/VueTubeApp/VueTube
setting & watch page rounding
This commit is contained in:
parent
b59ae96b1b
commit
4178938a88
|
@ -110,8 +110,9 @@ export default {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
right: 10px;
|
right: 10px;
|
||||||
border-radius: 5px;
|
border-radius: 4px;
|
||||||
padding: 0px 4px 0px 4px;
|
padding: 0px 4px 0px 4px;
|
||||||
|
font-size: 0.66rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoRuntimeFloat.style-DEFAULT {
|
.videoRuntimeFloat.style-DEFAULT {
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
<!-- App Information -->
|
<!-- App Information -->
|
||||||
<v-card
|
<v-card
|
||||||
|
flat
|
||||||
class="obj"
|
class="obj"
|
||||||
:class="
|
:class="
|
||||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||||
|
@ -31,6 +32,7 @@
|
||||||
|
|
||||||
<!-- Device Information -->
|
<!-- Device Information -->
|
||||||
<v-card
|
<v-card
|
||||||
|
flat
|
||||||
class="obj"
|
class="obj"
|
||||||
:class="
|
:class="
|
||||||
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
$vuetify.theme.dark ? 'background lighten-1' : 'background darken-1'
|
||||||
|
|
|
@ -5,7 +5,7 @@
|
||||||
class="card background"
|
class="card background"
|
||||||
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
:class="$vuetify.theme.dark ? 'lighten-1' : 'darken-1'"
|
||||||
flat
|
flat
|
||||||
:style="{borderRadius: `${roundTweak / 2}rem`}"
|
:style="{ borderRadius: `${roundTweak / 2}rem` }"
|
||||||
>
|
>
|
||||||
<v-card-title>
|
<v-card-title>
|
||||||
<v-chip v-if="item.error" outlined class="errorChip" color="error"
|
<v-chip v-if="item.error" outlined class="errorChip" color="error"
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="py-2">
|
<div>
|
||||||
<v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
|
<v-list-item v-for="(item, index) in commits" :key="index" class="my-1">
|
||||||
<v-card
|
<v-card
|
||||||
flat
|
flat
|
||||||
|
|
|
@ -1,11 +1,25 @@
|
||||||
<template>
|
<template>
|
||||||
<div style="padding-top: 1em">
|
<div>
|
||||||
<v-list-item v-for="(item, index) in settingsItems" :key="index">
|
<v-list-item
|
||||||
|
v-for="(item, index) in settingsItems"
|
||||||
|
:key="index"
|
||||||
|
:style="{
|
||||||
|
padding:
|
||||||
|
$store.state.tweaks.roundTweak > 0
|
||||||
|
? '0 1rem !important'
|
||||||
|
: '0rem !important',
|
||||||
|
}"
|
||||||
|
>
|
||||||
<v-btn
|
<v-btn
|
||||||
text
|
text
|
||||||
class="entry text-left text-capitalize"
|
class="entry text-left text-capitalize"
|
||||||
:to="item.to"
|
:to="item.to"
|
||||||
:disabled="item.disabled"
|
:disabled="item.disabled"
|
||||||
|
:style="{
|
||||||
|
borderRadius: `${$store.state.tweaks.roundTweak / 2}rem`,
|
||||||
|
paddingLeft:
|
||||||
|
$store.state.tweaks.roundTweak > 0 ? '' : '1.5rem !important',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<v-icon size="30px" class="icon" v-text="item.icon" />
|
<v-icon size="30px" class="icon" v-text="item.icon" />
|
||||||
{{ item.name }}
|
{{ item.name }}
|
||||||
|
@ -29,19 +43,6 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.entry {
|
|
||||||
width: 100%;
|
|
||||||
font-size: 1.2em;
|
|
||||||
justify-content: left !important;
|
|
||||||
padding: 1.5em 0.5em 1.5em 0.5em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
|
|
|
@ -12,12 +12,18 @@
|
||||||
|
|
||||||
<!-- Stock Player -->
|
<!-- Stock Player -->
|
||||||
<legacyPlayer
|
<legacyPlayer
|
||||||
|
v-if="useBetaPlayer !== 'true'"
|
||||||
id="player"
|
id="player"
|
||||||
ref="player"
|
ref="player"
|
||||||
v-touch="{ down: () => $router.push('/home') }"
|
v-touch="{ down: () => $router.push('/home') }"
|
||||||
class="background"
|
class="background"
|
||||||
:vid-src="vidSrc"
|
:vid-src="vidSrc"
|
||||||
v-if="useBetaPlayer !== 'true'"
|
style="overflow: hidden !important"
|
||||||
|
:style="{
|
||||||
|
borderRadius: $store.state.tweaks.roundWatch
|
||||||
|
? `${$store.state.tweaks.roundTweak / 4}rem`
|
||||||
|
: '0',
|
||||||
|
}"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -108,14 +114,36 @@
|
||||||
</v-sheet>
|
</v-sheet>
|
||||||
</v-bottom-sheet> -->
|
</v-bottom-sheet> -->
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-divider />
|
|
||||||
|
<v-divider
|
||||||
|
v-if="
|
||||||
|
!$store.state.tweaks.roundTweak || !$store.state.tweaks.roundWatch
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Channel Bar -->
|
<!-- Channel Bar -->
|
||||||
<div v-if="loaded">
|
<div v-if="loaded">
|
||||||
<v-card
|
<v-card
|
||||||
flat
|
flat
|
||||||
class="channel-section background py-2 px-3 rounded-0"
|
class="channel-section py-2 px-3 background"
|
||||||
|
:class="
|
||||||
|
$store.state.tweaks.roundWatch && $store.state.tweaks.roundTweak > 0
|
||||||
|
? $vuetify.theme.dark
|
||||||
|
? 'background lighten-1'
|
||||||
|
: 'background darken-1'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
:to="video.channelUrl"
|
:to="video.channelUrl"
|
||||||
|
:style="{
|
||||||
|
borderRadius: $store.state.tweaks.roundWatch
|
||||||
|
? `${$store.state.tweaks.roundTweak / 2}rem`
|
||||||
|
: '0',
|
||||||
|
margin:
|
||||||
|
$store.state.tweaks.roundWatch &&
|
||||||
|
$store.state.tweaks.roundTweak > 0
|
||||||
|
? '1rem'
|
||||||
|
: '0',
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<div id="details">
|
<div id="details">
|
||||||
<div class="avatar-link mr-3">
|
<div class="avatar-link mr-3">
|
||||||
|
@ -136,9 +164,14 @@
|
||||||
subscribe
|
subscribe
|
||||||
</div>
|
</div>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-divider />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<v-divider
|
||||||
|
v-if="
|
||||||
|
!$store.state.tweaks.roundTweak || !$store.state.tweaks.roundWatch
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<div v-if="showMore">
|
<div v-if="showMore">
|
||||||
<div class="scroll-y ma-4">
|
<div class="scroll-y ma-4">
|
||||||
|
@ -146,12 +179,39 @@
|
||||||
:render="video.renderedData.description"
|
:render="video.renderedData.description"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<v-divider />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<v-divider
|
||||||
|
v-if="
|
||||||
|
!$store.state.tweaks.roundTweak || !$store.state.tweaks.roundWatch
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
<!-- Comments -->
|
<!-- Comments -->
|
||||||
<div v-if="loaded && video.commentData" @click="toggleComment" v-ripple>
|
<div v-if="loaded && video.commentData" @click="toggleComment">
|
||||||
<v-card flat tile class="background comment-renderer px-3">
|
<v-card
|
||||||
|
v-ripple
|
||||||
|
flat
|
||||||
|
tile
|
||||||
|
class="comment-renderer px-3 background"
|
||||||
|
:class="
|
||||||
|
$store.state.tweaks.roundWatch && $store.state.tweaks.roundTweak > 0
|
||||||
|
? $vuetify.theme.dark
|
||||||
|
? 'background lighten-1'
|
||||||
|
: 'background darken-1'
|
||||||
|
: ''
|
||||||
|
"
|
||||||
|
:style="{
|
||||||
|
borderRadius: $store.state.tweaks.roundWatch
|
||||||
|
? `${$store.state.tweaks.roundTweak / 2}rem !important`
|
||||||
|
: '0',
|
||||||
|
margin:
|
||||||
|
$store.state.tweaks.roundWatch &&
|
||||||
|
$store.state.tweaks.roundTweak > 0
|
||||||
|
? '1rem'
|
||||||
|
: '0',
|
||||||
|
}"
|
||||||
|
>
|
||||||
<v-card-text class="comment-count keep-spaces px-0">
|
<v-card-text class="comment-count keep-spaces px-0">
|
||||||
<template v-for="text in video.commentData.headerText.runs">
|
<template v-for="text in video.commentData.headerText.runs">
|
||||||
<template v-if="text.bold">
|
<template v-if="text.bold">
|
||||||
|
@ -163,9 +223,14 @@
|
||||||
<v-icon v-if="showComments" dense>mdi-unfold-less-horizontal</v-icon>
|
<v-icon v-if="showComments" dense>mdi-unfold-less-horizontal</v-icon>
|
||||||
<v-icon v-else dense>mdi-unfold-more-horizontal</v-icon>
|
<v-icon v-else dense>mdi-unfold-more-horizontal</v-icon>
|
||||||
</v-card>
|
</v-card>
|
||||||
<v-divider />
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<v-divider
|
||||||
|
v-if="
|
||||||
|
!$store.state.tweaks.roundTweak || !$store.state.tweaks.roundWatch
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
|
||||||
<swipeable-bottom-sheet
|
<swipeable-bottom-sheet
|
||||||
v-model="showComments"
|
v-model="showComments"
|
||||||
hide-overlay
|
hide-overlay
|
||||||
|
@ -384,6 +449,13 @@ export default {
|
||||||
actionName: "share",
|
actionName: "share",
|
||||||
disabled: false,
|
disabled: false,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Save",
|
||||||
|
// icon: "mdi-playlist-plus",
|
||||||
|
icon: "mdi-plus-box-multiple-outline",
|
||||||
|
actionName: "enqueue",
|
||||||
|
disabled: true,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
showMore: false,
|
showMore: false,
|
||||||
showComments: false,
|
showComments: false,
|
||||||
|
|
Loading…
Reference in New Issue