mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-26 08:58:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make shorts tab more responsive on channels

Browse source
This commit is contained in:
Korbs 2023-11-11 07:35:53 -05:00
parent 346898b9c9
commit 78659f8ce2
1 changed files with 68 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

92
html/channel.ejs
View file

@ -333,17 +333,7 @@ text-transform:uppercase;
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 {
background-color: black;
}
@ -1058,41 +1048,75 @@ 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)) { %>
<% shorts.videos.forEach (x => { %>
<a href="/shorts/<%- x.videoId %>" class="s" >
<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="title max-lines-2 shorts-title"><%- x.title %></span>
<a href="/shorts/<%- x.videoId %>" class="shorts-video" >
<img load="lazy" src='/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw'>
<span class="shorts-title"><%- x.title %></span>
</a>
<% }) %>
<% } %>
</div>
</div>
<% if (shorts?.continuation) { %>
<div class="pagination-buttons" style="border-top: none;justify-content: center">
<% if (shorts?.continuation) { %>
<div class="pagination-buttons">
<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>
<% } %>
<% } %>
<% if (tab === "live") { %>