setting & watch page rounding

This commit is contained in:
Nikita Krupin 2022-05-13 20:25:48 -04:00
parent b59ae96b1b
commit 4178938a88
6 changed files with 102 additions and 26 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -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() {

View File

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