mirror of https://github.com/VueTubeApp/VueTube
Merge pull request #173 from etekweb/landscape-mode-again
Shrink thumbnails and shift text in landscape video list
This commit is contained in:
commit
6b87a9c058
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue