mirror of https://github.com/VueTubeApp/VueTube
shrink thumbnails and shift text in landscape video list
This commit is contained in:
parent
de3d8a777f
commit
19d7018c8e
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue