From 49c704e493237b0c9fc094a6ff3b352c7394ccbe Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Fri, 23 Sep 2022 15:30:50 +0200
Subject: [PATCH] fix some issues on the channel page

---
 html/channel.ejs | 113 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 87 insertions(+), 26 deletions(-)

diff --git a/html/channel.ejs b/html/channel.ejs
index feabaec1..63ba86fa 100644
--- a/html/channel.ejs
+++ b/html/channel.ejs
@@ -108,7 +108,66 @@
  font-size:16px;
  line-height:24px;
  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) { %>  
 <style>
   .video-grid{
@@ -266,12 +325,13 @@
  <div class="channel-info-container">
        
                
-          <% if (j.Channel.Metadata.Banners.Thumbnail) { %>
+      
+                                 
+          <% if (!isMobile) { %>  
+        <% if (j.Channel.Metadata.Banners.Thumbnail) { %>
 
           <img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
                                <% } %>
-          <% if (!isMobile) { %>  
-
 		<div class="channel-info" >
 			<a href="/channel?id=<%=ID%>" class="avatar">
 				<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
@@ -285,14 +345,14 @@
 	</div> 
                                            <% } %>
                                                <% if (isMobile) { %>  
+                   
          <% 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;">
-                <% } %>
-         <% 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;">
 				<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">
 <i class="fa-thin fa-angle-right"></i></a>
         </p>
-              <% } %>
+              <% } %>              <% } %>
+
 		</div>
 	</div> 
                                            <% } %>
         <% if (!isMobile) { %>  
+   
+     <div class="tabs tabs-center">
+            <% if (!tab) { %>
 
- <% if (!tab) { %>
+                <a href="/channel?id=<%=ID%>" class="tab active">Home</a>
+                <a  href="/channel?id=<%=ID%>&tab=about"  class="tab">About</a>
+                                                               <% } %>
+                                                                             <% if (tab) { %>
 
-   <div style="text-align: left;padding: 3px;margin-top: 7px;">
-      
-     <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%>" class="tab">Home</a>
+                <a  href="/channel?id=<%=ID%>&tab=about" class="tab active">About</a>
+                                                               <% } %>
+
+            </div>
+     
+     
+     
+     <% } %>
      
-     <a href="/channel?id=<%=ID%>&tab=about">About</a>
-   
-   </div>
-   <% } %>
-     <% if (tab === "about") { %>
-
-        
-   <div style="text-align: left;padding: 3px;margin-top: 7px;">
-      
-     <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>
-   <% } %> <% } %>
      <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">
@@ -396,3 +456,4 @@
    
  
 </html>
+