mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-29 16:48:51 +01:00
fix some issues on the channel page
This commit is contained in:
Ashley
parent
7e4f9bb5c6
commit
49c704e493
1 changed files with 87 additions and 26 deletions
103
html/channel.ejs
103
html/channel.ejs
|
|
@ -108,7 +108,66 @@
|
||||||
font-size:16px;
|
font-size:16px;
|
||||||
line-height:24px;
|
line-height:24px;
|
||||||
margin-top:12px
|
margin-top:12px
|
||||||
}</style>
|
}
|
||||||
|
|
||||||
|
.sticky-top {
|
||||||
|
position: sticky;
|
||||||
|
top: 0px;
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
.responsive {
|
||||||
|
width: 100%;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.tabs {
|
||||||
|
display: table;
|
||||||
|
font-family:inter;
|
||||||
|
border-collapse: separate;
|
||||||
|
table-layout: auto;
|
||||||
|
}
|
||||||
|
.tabs.tabs-center {
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.tabs.tabs-justify {
|
||||||
|
width: 100%;
|
||||||
|
table-layout: fixed;
|
||||||
|
}
|
||||||
|
.tabs a.tab {
|
||||||
|
position: relative;
|
||||||
|
display: table-cell;
|
||||||
|
transition: all ease 0.3s;
|
||||||
|
padding: 1em 1.6em;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
color: #fff;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.tabs a.tab:hover {
|
||||||
|
color: #3cb4fa;
|
||||||
|
}
|
||||||
|
.tabs a.tab:after {
|
||||||
|
transition: all 0.3s cubic-bezier(1, 0, 0, 1);
|
||||||
|
will-change: transform, box-shadow, opacity;
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
height: 3px;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: 0px;
|
||||||
|
border-radius: 3px 3px 0px 0px;
|
||||||
|
background: #9fdafd;
|
||||||
|
box-shadow: 0px 4px 10px 3px rgba(60, 180, 250, .15);
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0, 1);
|
||||||
|
}
|
||||||
|
.tabs a.tab.active {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.tabs a.tab.active:after {
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1, 1);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
<% if (isMobile) { %>
|
<% if (isMobile) { %>
|
||||||
<style>
|
<style>
|
||||||
.video-grid{
|
.video-grid{
|
||||||
|
|
@ -266,12 +325,13 @@
|
||||||
<div class="channel-info-container">
|
<div class="channel-info-container">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<% if (!isMobile) { %>
|
||||||
<% if (j.Channel.Metadata.Banners.Thumbnail) { %>
|
<% if (j.Channel.Metadata.Banners.Thumbnail) { %>
|
||||||
|
|
||||||
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
|
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (!isMobile) { %>
|
|
||||||
|
|
||||||
<div class="channel-info" >
|
<div class="channel-info" >
|
||||||
<a href="/channel?id=<%=ID%>" class="avatar">
|
<a href="/channel?id=<%=ID%>" class="avatar">
|
||||||
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
|
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
|
||||||
|
|
@ -285,14 +345,14 @@
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (isMobile) { %>
|
<% if (isMobile) { %>
|
||||||
|
|
||||||
<% if (!tab) { %>
|
<% if (!tab) { %>
|
||||||
|
<% if (j.Channel.Metadata.Banners.Thumbnail) { %>
|
||||||
|
|
||||||
|
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
|
||||||
|
<% } %>
|
||||||
<div class="channel-info" style="display: inline-block;padding-bottom:0;font-weight:bold;">
|
<div class="channel-info" style="display: inline-block;padding-bottom:0;font-weight:bold;">
|
||||||
<% } %>
|
|
||||||
<% if (tab) { %>
|
|
||||||
|
|
||||||
<div class="channel-info" style="display: inline-block;font-weight:bold;">
|
|
||||||
<% } %>
|
|
||||||
|
|
||||||
<a href="/channel?id=<%=ID%>" class="avatar" style="height: 100px;display: inline-block;">
|
<a href="/channel?id=<%=ID%>" class="avatar" style="height: 100px;display: inline-block;">
|
||||||
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
|
<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
|
||||||
|
|
@ -308,31 +368,31 @@
|
||||||
<%-getFirstLine(desc)%> <a href="/channel?id=<%=ID%>&tab=about">
|
<%-getFirstLine(desc)%> <a href="/channel?id=<%=ID%>&tab=about">
|
||||||
<i class="fa-thin fa-angle-right"></i></a>
|
<i class="fa-thin fa-angle-right"></i></a>
|
||||||
</p>
|
</p>
|
||||||
<% } %>
|
<% } %> <% } %>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (!isMobile) { %>
|
<% if (!isMobile) { %>
|
||||||
|
|
||||||
|
<div class="tabs tabs-center">
|
||||||
<% if (!tab) { %>
|
<% if (!tab) { %>
|
||||||
|
|
||||||
<div style="text-align: left;padding: 3px;margin-top: 7px;">
|
<a href="/channel?id=<%=ID%>" class="tab active">Home</a>
|
||||||
|
<a href="/channel?id=<%=ID%>&tab=about" class="tab">About</a>
|
||||||
<a href="/channel?id=<%=ID%>" style="background-color: #333;padding: 5px;border-top-left-radius: 3px;border-top-right-radius: 4px;padding-bottom: 4px;">Uploads</a>
|
|
||||||
|
|
||||||
<a href="/channel?id=<%=ID%>&tab=about">About</a>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (tab === "about") { %>
|
<% if (tab) { %>
|
||||||
|
|
||||||
|
<a href="/channel?id=<%=ID%>" class="tab">Home</a>
|
||||||
<div style="text-align: left;padding: 3px;margin-top: 7px;">
|
<a href="/channel?id=<%=ID%>&tab=about" class="tab active">About</a>
|
||||||
|
<% } %>
|
||||||
<a href="/channel?id=<%=ID%>" >Uploads</a> <a href="/channel?id=<%=ID%>&tab=about" style="background-color: #333;padding: 5px;border-top-left-radius: 3px;border-top-right-radius: 4px;padding-bottom: 4px;">About </a>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<% } %> <% } %>
|
|
||||||
|
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
|
||||||
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;"> <% if (!tab) { %>
|
<hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;"> <% if (!tab) { %>
|
||||||
|
|
||||||
<div align="center">
|
<div align="center">
|
||||||
|
|
@ -396,3 +456,4 @@
|
||||||
|
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue