mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-10 09:38:25 +01:00
Merge pull request 'Make Shorts tab more responsive' (#46) from Korbs/poketube:main into main
Reviewed-on: https://codeberg.org/Ashley/poketube/pulls/46
This commit is contained in:
commit
c08ae8dce4
1 changed files with 68 additions and 44 deletions
|
@ -332,17 +332,7 @@ text-transform:uppercase;
|
||||||
color:#ea9999 !important;
|
color:#ea9999 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.s{
|
|
||||||
width: 23em;
|
|
||||||
margin: auto;
|
|
||||||
margin-left: -3.5em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column-reverse;
|
|
||||||
margin-right: -79px;
|
|
||||||
}
|
|
||||||
.shorts-title{
|
|
||||||
font-family:PokeTube flex,sans-serif;font-weight: 1000;font-stretch: ultra-expanded;position: absolute;margin-bottom: 0.3em;background: #0009;white-space: -moz-pre-wrap !important;white-space: -pre-wrap;white-space: -o-pre-wrap;white-space: pre-wrap;word-wrap: break-word;white-space: -webkit-pre-wrap;word-break: break-all;white-space: normal;width: 12.87em;margin-left: 145px;
|
|
||||||
}
|
|
||||||
.channel-page .video-grid {
|
.channel-page .video-grid {
|
||||||
background-color: black;
|
background-color: black;
|
||||||
}
|
}
|
||||||
|
@ -1057,39 +1047,73 @@ width: fit-content;
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
||||||
<div class="video-grid" style="max-inline-size: 92em !important;
|
|
||||||
margin-left: 8em;" >
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="shorts-video-grid">
|
||||||
<% if (Array?.isArray( shorts.videos)) { %>
|
<% if (Array?.isArray( shorts.videos)) { %>
|
||||||
|
|
||||||
<% shorts.videos.forEach (x => { %>
|
<% shorts.videos.forEach (x => { %>
|
||||||
|
<a href="/shorts/<%- x.videoId %>" class="shorts-video" >
|
||||||
<a href="/shorts/<%- x.videoId %>" class="s" >
|
<img load="lazy" src='/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw'>
|
||||||
<img load="lazy" src='/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw' style="border-radius: 10px;width: 31em;object-fit: cover;aspect-ratio: 19/9;height: 20em;object-position: 101% 51%;clip-path: inset(2px 139px);">
|
<span class="shorts-title"><%- x.title %></span>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<span class="title max-lines-2 shorts-title"><%- x.title %></span>
|
|
||||||
|
|
||||||
</a>
|
</a>
|
||||||
<% }) %>
|
<% }) %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% if (shorts?.continuation) { %>
|
<% if (shorts?.continuation) { %>
|
||||||
<div class="pagination-buttons" style="border-top: none;justify-content: center">
|
<div class="pagination-buttons">
|
||||||
<a style="color:#fff" href="/channel?id=<%=ID%>&tab=shorts&continuations=<%=shorts.continuation%>">Next Page</a>
|
<a style="color:#fff" href="/channel?id=<%=ID%>&tab=shorts&continuations=<%=shorts.continuation%>">Next Page</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.shorts-video-grid {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: auto;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
|
||||||
|
grid-gap: 24px;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
.shorts-video img {
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 9/16;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
.shorts-video {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue