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}`"
flat
>
<div style="position: relative">
<div style="position: relative" class="thumbnail-container">
<v-img
:aspect-ratio="16 / 9"
:src="$youtube.getThumbnail(video.videoId, 'max')"
@ -35,7 +35,7 @@
:src="video.channelThumbnail.thumbnails[0].url"
/>
</a>
<v-card-text class="pt-2">
<v-card-text class="video-info pt-2">
<div
v-for="title in video.title.runs"
:key="title.text"
@ -92,6 +92,28 @@
flex-direction: row;
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>
<script>

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

@ -4,7 +4,7 @@
:to="`/watch?v=${video.videoId}`"
flat
>
<div style="position: relative">
<div style="position: relative" class="thumbnail-container">
<v-img
:aspect-ratio="16 / 9"
:src="$youtube.getThumbnail(video.videoId, 'max')"
@ -35,7 +35,7 @@
:src="video.channelThumbnail.thumbnails[0].url"
/>
</a>
<v-card-text class="pt-2">
<v-card-text class="video-info pt-2">
<div
v-for="title in video.title.runs"
:key="title.text"
@ -92,6 +92,28 @@
flex-direction: row;
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>
<script>

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

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