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}`"
|
: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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue