MOBILE OPTIMIZED SEARCHHHHHHHH

This commit is contained in:
Ashley 2022-11-03 18:45:29 +01:00
parent 35af3566c4
commit a589fffdc7

View file

@ -628,6 +628,19 @@ summary:hover{
transition: opacity 0.6s; transition: opacity 0.6s;
margin-bottom: 15px; margin-bottom: 15px;
} }
.search button {
transform: none;
display: flex;
background: #454545;
color: #999;
border: 1px;
border-radius: 12px;
margin: 2em;
width: 6em;
justify-content: center;
height: 2.6em;
}
.alert.success {background-color: #04AA6D;} .alert.success {background-color: #04AA6D;}
.alert.info {background-color: #2196F3;} .alert.info {background-color: #2196F3;}
@ -723,18 +736,17 @@ summary:hover{
.channel-info-container > img { .channel-info-container > img {
width: 100%; width: 100%;
} }
.video-grid > .video {
background-color: #181818; .search .search-bar {
border-radius: 16px; display: flex;
} transform: translateY(1.5em);
background: #222;
.app{ border: 1px solid #444;
background-image:url("/css/head.svg"); width: 298px;
background-size: cover; height: 30px;
background-repeat: no-repeat; }
}
/* nice classname am i rigth */ /* nice classname am i rigth */
.discover-some-bitches{ .discover-some-bitches{
text-align: center; text-align: center;
@ -743,108 +755,34 @@ background-size: cover;
} }
</style> </style>
<body> <body>
<% if (!isMobile) { %>
<div class="app" > <div class="app" >
<div class="app">
<nav> <nav>
<div class=left>
<% if (tab != "music") { %> <div class=left><a class="class" href="/" style=font-family:Inter,sans-serif;color:#fff> <img style="width: 8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo-mobile.svg"> </a>
</div>
<a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="transform: scale(1.3);width:8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
<% } %>
<% if (tab === "music") { %>
<a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="transform: scale(1.3);width:8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/music.svg?v=5"></a>
<% } %>
</div>
<div class=right> <div class=right>
<a href="/domains"><i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light fa-server"></i> </a>
<a href="/privacy"><i class="fa-light fa-shield"></i></a>
<a href="/video/upload?from="><i class="fa-light fa-video"></i></a> <a href="/video/upload?from="><i class="fa-light fa-video"></i></a>
<a href="https://github.com/iamashley0/poketube/issues"><i class="fa-light fa-bug"></i></a>
</div> </div>
</nav><br> </nav>
<div class="discover-some-bitches">
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Privacy Is Your Right</div>
<div class="video-info-bar" style="font-family:'Inter';border-bottom:none;padding:0;">Poketube is a libre front end
for youtube &amp; yt music! your personal data is nobody's business while using poketube.
<a href="/privacy">(not our business too!)</a>
</div>
</div>
<div class=search>
<form action=/search>
<input class="search-bar" autocomplete="on" id="fname" name="query" placeholder="search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
<button class="btn btn-success" type=submit><i class="fa-light fa-search"></i></button></form>
<img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;">
</div>
<br> <br>
<br> <br>
<br> <br style="display: none;">
</div>
<% } %>
<% if (isMobile) { %>
<div class="app" >
<nav>
<div class=left>
<a class="class" href="/143" style=font-family:Inter,sans-serif;color:#fff> <img style="transform: scale(1.3);width:8.5em;display: block;margin-left: auto;margin-right: auto;" src="/css/logo.svg?v=5"></a>
</div>
<div class=right>
<a href="/domains"><i style="display: block;margin-left: auto;margin-right: auto;" class="fa-light fa-server"></i> </a>
<a href="/privacy"><i class="fa-light fa-shield"></i></a>
<a href="/video/upload?from="><i class="fa-light fa-video"></i></a>
<a href="https://github.com/iamashley0/poketube/issues"><i class="fa-light fa-bug"></i></a>
</div>
</nav><br>
<div class="discover-some-bitches" style="width:auto;">
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:yes;font-size: xxx-large;"> Privacy Is Your Right</div>
<div class="video-info-bar" style="font-family:'Ginto nord';border-bottom:none;padding:0;font-size: small;">
PokeTube is a libre youtube-front end that respects your privacy! </div>
</div>
<div class=search>
<form action=/search>
<input class="search-bar" autocomplete="on" id="fname" name="query" placeholder="search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
</form>
</div>
<br> <br>
<br> <br>
<br> <br style="display: none;">
</div>
<% } %>
</div> </div>
<div class="channel-page" style="background-color: var(--channel-contents-background);"> <div class="channel-page" style="background-color: var(--channel-contents-background);">
<img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;" id="discover_main"> <img src="https://t.poketube.fun/t/rep.gif" style="width: 0;visibility: hidden;display:none;" id="discover_main">
<div class="video-title" style="font-family:'Ginto nord';font-weight:900;white-space:nowrap;font-size: xxx-large;">Discover </div>
<% if (!isMobile) { %>
<p style="margin:0;">
See the trending videos, gaming stuff and music videos on poketube! (<s>or dont</s>)
</p>
<% } %>
<% if (isMobile) { %>
<p style="margin:0;">
See the trending videos on poketube!
</p>
<% } %>
<% if (!tab) { %> <% if (!tab) { %>
<% if (!mobilesearch) { %>
<div class="tabs tabs-center"> <div class="tabs tabs-center">
@ -852,7 +790,7 @@ background-size: cover;
<a href="?tab=music"class="tab">Music</a> <a href="?tab=music"class="tab">Music</a>
<a href="?tab=gaming" class="tab">Gaming</a> <a href="?tab=search" class="tab">Search</a>
<% if (!isMobile) { %> <% if (!isMobile) { %>
<a href="?tab=movies" class="tab">Movies</a> <a href="?tab=movies" class="tab">Movies</a>
@ -870,7 +808,7 @@ background-size: cover;
<a href="" class="tab active ">Music</a> <a href="" class="tab active ">Music</a>
<a href="?tab=gaming" class="tab">Gaming</a> <a href="?tab=search" class="tab">Search</a>
<% if (!isMobile) { %> <% if (!isMobile) { %>
<a href="?tab=movies" class="tab">Movies</a> <a href="?tab=movies" class="tab">Movies</a>
@ -881,48 +819,55 @@ background-size: cover;
</div> </div>
<% } %> <% } %>
<% if (tab === "gaming") { %>
<% } %>
<% if (tab === "search") { %>
<div class="tabs tabs-center"> <div class="tabs tabs-center">
<a href="/" class="tab">Videos</a> <a href="/" class="tab">Videos</a>
<a href="?tab=music" class="tab">Music</a> <a href="?tab=music" class="tab">Music</a>
<% if (!isMobile) { %>
<a href="" class="tab active">Gaming</a> <a href="" class="tab active">Search</a>
<a href="?tab=movies" class="tab">Movies</a>
<% } %>
</div> </div>
<% } %> <% } %>
<% if (tab === "movies") { %> <% if (mobilesearch) { %>
<div class="tabs tabs-center"> <div class="tabs tabs-center">
<a href="/" class="tab">Videos</a> <a href="/" class="tab">Videos</a>
<a href="?tab=music" class="tab">Music</a> <a href="?tab=music" class="tab">Music</a>
<a href="?tab=gaming" class="tab">Gaming</a>
<a href="" class="tab active">Movies</a> <a href="" class="tab active">Search</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;"> <hr style="clear: both;display: block;border: none;border-bottom: 0.5px solid #2f2f2f;margin: 0 0;/*! width: 4.5em; */height: 0;">
<% if (!tab || tab == "music" ) { %>
<% if (!mobilesearch) { %>
<div class="video-grid"> <div class="video-grid">
<% inv.forEach(x => { %> <% inv.forEach(x => { %>
<a href="/watch?v=<%- x.videoId %>" class="video"> <a href="/watch?v=<%- x.videoId %>" class="video">
<div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length"><%- turntomins(x.lengthSeconds) %></span></div> <div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.videoId %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-top-left-radius: 16px;border-top-right-radius: 16px;"><span class="video-length"><%- turntomins(x.lengthSeconds) %></span></div>
<div class="info"> <div class="info">
<span class="title max-lines-2" title="<%- x.title %>" style="font-family:Ginto Nord,sans-serif;"><%- x.title %></span> <span class="title max-lines-2" title="<%- x.title %>" style="font-family:Inter,sans-serif;"><%- x.title %></span>
<span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.author %></span> <span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.author %></span>
</div> </div>
@ -932,18 +877,87 @@ background-size: cover;
<% }) %> <% }) %>
</div>
</div>
<% } %>
<% } %>
</div>
<% if (tab == "search") { %>
<div class=search>
<form action="/?tab=search">
<input class="search-bar" autocomplete="on" id="fname" name="mobilesearch" placeholder="Search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
<button class="btn btn-success" type=submit>
<i class="fa-light fa-search" style="margin: auto;"></i></button></form>
<img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;">
</div>
</div>
<% } %>
<% if (mobilesearch ) { %>
<div class=search>
<form action="/?tab=search">
<input class="search-bar" autocomplete="on" id="fname" name="mobilesearch" value="<%=mobilesearch%>" placeholder="Search some videos lol "style="color:#fff;font-family:Inter,sans-serif;border-radius: 8px;">
<button class="btn btn-success" type=submit>
<i class="fa-light fa-search" style="margin: auto;"></i></button></form>
<img src="https://search-metrics.poketube.fun/t/rep.gif" style="border:0;width: 0;visibility: hidden;">
</div>
</div>
<div class="video-grid" style="background-color: var(--app-background);">
<% j.Search.Results.Video.forEach(x => { %>
<a href="/watch?v=<%- x.id %>" class="video">
<div class="thumbnail" style="background-image: url('https://p.poketube.fun/https://i.ytimg.com/vi/<%= x.id %>/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLBy_x4UUHLNDZtJtH0PXeQGoRFTgw');border-radius: 16px;"> <span class="video-length"><%=x.duration %></span> </div>
<div class="info">
<span class="title max-lines-2" title="<%- x.title %>" style="font-family:Inter,sans-serif;"><%- x.Title %></span>
<span class="title max-lines-2" title="Video By <%- x.author %>" style="margin-top:1px">By <%- x.Channel.Name %></span>
</div>
<% }) %>
<% if (continuation) { %>
<p style="text-align: left;margin-left: 16em;color: var(--text-secondary);text-decoration: none;">
<a href="/?mobilesearch=<%=mobilesearch%>">First Page</a>
</p>
<p style="text-align: left;;color: var(--text-secondary);text-decoration: none;">
<a href="/?mobilesearch=<%=mobilesearch%>&continuation=<%=j.Search.continuation%>">Next Page</a>
</p>
<% } %>
<% if (!continuation) { %>
<p style="text-align: left;margin-left: 16em;;color: var(--text-secondary);text-decoration: none;">
<a href="/?mobilesearch=<%=mobilesearch%>&continuation=<%=j.Search.continuation%>">Next Page</a>
</p>
<% } %>
</div>
<% } %>
</body > </body >
</html> </html>
<% } %>