etc/VueTube
0
0
Fork 0
mirror of https://github.com/VueTubeApp/VueTube synced 2025-01-03 14:11:08 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #173 from etekweb/landscape-mode-again

Browse source 
Shrink thumbnails and shift text in landscape video list
This commit is contained in:
Kenny 2022-03-23 12:50:39 -04:00 committed by GitHub
commit 6b87a9c058
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 48 additions and 4 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>