etc
/
VueTube
mirror of https://github.com/VueTubeApp/VueTube
0
0
Fork 0
Code Issues Projects Releases Wiki Activity

shrink thumbnails and shift text in landscape video list

This commit is contained in:
Ethan 2022-03-23 11:13:43 -05:00
parent de3d8a777f
commit 19d7018c8e
3 changed files with 52 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
NUXT/components/VideoRenderers/compactVideoRenderer.vue
View File

@ -4,7 +4,7 @@
:to="`/watch?v=${video.videoId}`" :to="`/watch?v=${video.videoId}`"
flat flat
> >
<div style="position: relative"> <div style="position: relative" class="thumbnail-container">
<v-img <v-img
:aspect-ratio="16 / 9" :aspect-ratio="16 / 9"
:src="$youtube.getThumbnail(video.videoId, 'max')" :src="$youtube.getThumbnail(video.videoId, 'max')"
@ -35,7 +35,7 @@
:src="video.channelThumbnail.thumbnails[0].url" :src="video.channelThumbnail.thumbnails[0].url"
/> />
</a> </a>
<v-card-text class="pt-2"> <v-card-text class="video-info pt-2">
<div <div
v-for="title in video.title.runs" v-for="title in video.title.runs"
:key="title.text" :key="title.text"
@ -92,6 +92,28 @@
flex-direction: row; flex-direction: row;
flex-basis: auto; flex-basis: auto;
} }
@media screen and (orientation: landscape) {
.entry {
margin-bottom: 8px;
}
.thumbnail-container {
width: 50vh;
float: left;
}
#details {
flex-direction: column-reverse;
}
.avatar-thumbnail {
margin-top: 0;
margin-left: 16px;
}
.video-info {
padding-top: 0 !important;
padding-bottom: 0;
margin-top: 0;
}
}
</style> </style>
<script> <script>

26
NUXT/components/VideoRenderers/gridVideoRenderer.vue
View File

@ -4,7 +4,7 @@
:to="`/watch?v=${video.videoId}`" :to="`/watch?v=${video.videoId}`"
flat flat
> >
<div style="position: relative"> <div style="position: relative" class="thumbnail-container">
<v-img <v-img
:aspect-ratio="16 / 9" :aspect-ratio="16 / 9"
:src="$youtube.getThumbnail(video.videoId, 'max')" :src="$youtube.getThumbnail(video.videoId, 'max')"
@ -35,7 +35,7 @@
:src="video.channelThumbnail.thumbnails[0].url" :src="video.channelThumbnail.thumbnails[0].url"
/> />
</a> </a>
<v-card-text class="pt-2"> <v-card-text class="video-info pt-2">
<div <div
v-for="title in video.title.runs" v-for="title in video.title.runs"
:key="title.text" :key="title.text"
@ -92,6 +92,28 @@
flex-direction: row; flex-direction: row;
flex-basis: auto; flex-basis: auto;
} }
@media screen and (orientation: landscape) {
.entry {
margin-bottom: 8px;
}
.thumbnail-container {
width: 50vh;
float: left;
}
#details {
flex-direction: column-reverse;
}
.avatar-thumbnail {
margin-top: 0;
margin-left: 16px;
}
.video-info {
padding-top: 0 !important;
padding-bottom: 0;
margin-top: 0;
}
}
</style> </style>
<script> <script>

8
android/app/src/main/assets/capacitor.config.json
View File

@ -10,16 +10,16 @@
"plugins": { "plugins": {
"SplashScreen": { "SplashScreen": {
"launchShowDuration": 100, "launchShowDuration": 100,
"launchAutoHide": true, "launchAutoHide": false,
"backgroundColor": "#111111", "backgroundColor": "#111111",
"androidSplashResourceName": "splash", "androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP", "androidScaleType": "CENTER_CROP",
"androidSpinnerStyle": "large", "androidSpinnerStyle": "large",
"iosSpinnerStyle": "small", "iosSpinnerStyle": "small",
"spinnerColor": "#999999", "spinnerColor": "#999999",
"showSpinner": true, "showSpinner": false,
"splashFullScreen": true, "splashFullScreen": false,
"splashImmersive": true "splashImmersive": false
} }
} }
} }