From 2025f2c50a61b9c236fca14d475590db287bd056 Mon Sep 17 00:00:00 2001
From: Ashley <iamashley@duck.com>
Date: Fri, 9 Dec 2022 19:05:09 +0000
Subject: [PATCH] mobile improvements!!

---
 html/channel.ejs | 180 ++++++++++++++++++++++++++++-------------------
 1 file changed, 107 insertions(+), 73 deletions(-)

diff --git a/html/channel.ejs b/html/channel.ejs
index 2a7b1337..14483932 100644
--- a/html/channel.ejs
+++ b/html/channel.ejs
@@ -108,7 +108,7 @@
 }
   
   .subs {
-    margin: 0.6em;text-align: left;margin-left: 0px;margin-top: -0.4em;font-family: "PokeTube flex";font-weight: 1000;font-stretch: ultra-expanded;
+    margin: 0.6em;text-align: left;margin-left: 0px;margin-top: -1em;font-family: "PokeTube flex";font-weight: 1000;font-stretch: ultra-expanded;
   }
    </style>
    
@@ -217,6 +217,12 @@
                      
   <% if(!isMobile) { %>
     <style>
+      .name{
+        text-align: left;
+      }
+        .subs {
+    margin: 0.6em;text-align: left;margin-left: 0px;margin-top: -1em;font-family: "PokeTube flex";font-weight: 1000;font-stretch: ultra-expanded;
+  }
           .video-grid {
   display: flex;
   flex-wrap: wrap;
@@ -234,6 +240,20 @@
  
                        <% if (isMobile) { %>  
 <style>
+  .subscribe-button {
+  background-color: white !important;
+  color: black !important;
+  text-transform: none !important;
+  font-weight: bold !important;
+  padding: 0px 15px !important;
+  border: none !important;
+  margin: auto !important;
+  height: 37px !important;
+  border-radius: 34px !important;
+  font-stretch: ultra-expanded !important;
+  font-family: "PokeTube flex";
+  width: 20em;
+}
   .video-grid{
     justify-content:center;
   }       
@@ -369,7 +389,92 @@
 <div class="channel-page">
 
 <div class="channel-page">
-        <% if (isMobile) { %>  
+       
+               
+      
+                                 
+          <% if (!isMobile) { %>  
+            <div class="channel-info-container" style="text-align: center;">
+
+        <% if (j.Channel.Metadata.Banners.Thumbnail) { %>
+
+          <img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
+                               <% } %>
+		<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">
+			</a>
+			<div class="name">
+				<p style="font-family:Ginto Nord,sans-serif;font-weight:900;white-space:yes;"><%=j.Channel.Metadata.Name%><br>
+          </p>
+                    <p class="subs"><%=subs%> subscribers</p>
+
+ 			</div>
+ 
+			<button class="subscribe-button">Suscribe</button>
+		</div>
+              <% if (!isMobile) { %>  
+   
+     <div class="tabs tabs-center">
+            <% if (!tab) { %>
+
+                <a href="/channel?id=<%=ID%>" class="tab active">Uploads</a>
+                <a  href="/channel?id=<%=ID%>&tab=about"  class="tab">About</a>
+                                                               <% } %>
+                                                                             <% if (tab) { %>
+
+                <a href="/channel?id=<%=ID%>" class="tab">Uploads</a>
+                <a  href="/channel?id=<%=ID%>&tab=about" class="tab active">About</a>
+                                                               <% } %>
+
+            </div>
+     
+     
+     
+     <% } %>
+	</div> 
+                                           <% } %>
+                                               <% if (isMobile) { %>  
+                   <div class="channel-info-container" style="text-align: center;">
+
+                                      <% 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: flex;
+padding-bottom: 0;
+font-weight: bold;
+justify-content: center;
+flex-direction: column;
+gap: 0px;
+margin: auto;">
+
+
+			<a href="/channel?id=<%=ID%>" class="avatar" style="height: 6em;
+display: flex;
+flex-direction: column;
+align-content: center;
+margin: auto;
+width: fit-content;margin-left: 8em;
+">
+				<img src="https://p.poketube.fun/<%=j.Channel.Metadata.Avatars.Thumbnail.$t%>" alt="Channel Avatar">
+			</a>
+			<div class="name">
+				<p style="font-family:Ginto Nord,sans-serif;font-weight:900;white-space:yes;"><%=j.Channel.Metadata.Name%></p>
+ 			</div>
+ 
+			<%=subs%> Subscribers 
+ 
+      <p style="padding:0;font-weight:bold;"> 
+   <%-getFirstLine(desc)%> <a href="/channel?id=<%=ID%>&tab=about">
+<i class="fa-thin fa-angle-right"></i></a>
+        </p>
+        			<button class="subscribe-button">Suscribe</button>
+
+        
+  <% if (isMobile) { %>  
  
                
  
@@ -402,77 +507,6 @@
                                               <% } %>
 
         
-               
-      
-                                 
-          <% if (!isMobile) { %>  
-            <div class="channel-info-container" style="text-align: center;">
-
-        <% if (j.Channel.Metadata.Banners.Thumbnail) { %>
-
-          <img src="https://p.poketube.fun/<%=j.Channel.Metadata.Banners.Thumbnail[2].$t%>">
-                               <% } %>
-		<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">
-			</a>
-			<div class="name">
-				<p style="font-family:Ginto Nord,sans-serif;font-weight:900;white-space:yes;"><%=j.Channel.Metadata.Name%><br>
-          </p>
-                    <span class="subs"><%=subs%> subscribers</span>
-
- 			</div>
- 
-			<button class="subscribe-button">Suscribe</button>
-		</div>
-              <% if (!isMobile) { %>  
-   
-     <div class="tabs tabs-center">
-            <% if (!tab) { %>
-
-                <a href="/channel?id=<%=ID%>" class="tab active">Uploads</a>
-                <a  href="/channel?id=<%=ID%>&tab=about"  class="tab">About</a>
-                                                               <% } %>
-                                                                             <% if (tab) { %>
-
-                <a href="/channel?id=<%=ID%>" class="tab">Uploads</a>
-                <a  href="/channel?id=<%=ID%>&tab=about" class="tab active">About</a>
-                                                               <% } %>
-
-            </div>
-     
-     
-     
-     <% } %>
-	</div> 
-                                           <% } %>
-                                               <% if (isMobile) { %>  
-                   <div class="channel-info-container" style="text-align: center;">
-
-         <% 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;">
-
-
-			<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">
-			</a>
-			<div class="name">
-				<p style="font-family:Ginto Nord,sans-serif;font-weight:900;white-space:yes;"><%=j.Channel.Metadata.Name%></p>
- 			</div>
- 
-			<%=subs%> Subscribers 
-         <% if (!tab) { %>
-
-      <p style="padding:0;font-weight:bold;"> 
-   <%-getFirstLine(desc)%> <a href="/channel?id=<%=ID%>&tab=about">
-<i class="fa-thin fa-angle-right"></i></a>
-        </p>
-              <% } %>              <% } %>
-
 		</div>
                 
 	</div>