mirror of
https://codeberg.org/ashley/poke.git
synced 2024-11-28 20:29:03 +01:00
MOBILE OPTIMIZED SEARCHHHHHHHH
This commit is contained in:
Ashley
parent
148175c18d
commit
35d90e0e5d
1 changed files with 135 additions and 121 deletions
220
html/main.ejs
220
html/main.ejs
|
|
@ -629,6 +629,19 @@ summary:hover{
|
||||||
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;}
|
||||||
.alert.warning {background-color: #ff9800;}
|
.alert.warning {background-color: #ff9800;}
|
||||||
|
|
@ -724,15 +737,14 @@ summary:hover{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-grid > .video {
|
|
||||||
background-color: #181818;
|
|
||||||
border-radius: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app{
|
.search .search-bar {
|
||||||
background-image:url("/css/head.svg");
|
display: flex;
|
||||||
background-size: cover;
|
transform: translateY(1.5em);
|
||||||
background-repeat: no-repeat;
|
background: #222;
|
||||||
|
border: 1px solid #444;
|
||||||
|
width: 298px;
|
||||||
|
height: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* nice classname am i rigth */
|
/* nice classname am i rigth */
|
||||||
|
|
@ -743,108 +755,34 @@ background-size: cover;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<body>
|
<body>
|
||||||
<% if (!isMobile) { %>
|
|
||||||
|
|
||||||
<div class="app" >
|
<div class="app" >
|
||||||
|
|
||||||
<nav>
|
|
||||||
<div class=left>
|
|
||||||
<% 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/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>
|
|
||||||
<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">
|
|
||||||
<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 & 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">
|
<div class="app">
|
||||||
|
|
||||||
<nav>
|
<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 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>
|
</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" 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,7 +819,10 @@ background-size: cover;
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<% } %>
|
<% } %>
|
||||||
<% if (tab === "gaming") { %>
|
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
<% if (tab === "search") { %>
|
||||||
|
|
||||||
<div class="tabs tabs-center">
|
<div class="tabs tabs-center">
|
||||||
|
|
||||||
|
|
@ -889,40 +830,44 @@ background-size: cover;
|
||||||
<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>
|
||||||
|
|
@ -933,17 +878,86 @@ background-size: cover;
|
||||||
<% }) %>
|
<% }) %>
|
||||||
|
|
||||||
|
|
||||||
|
<% } %>
|
||||||
|
<% } %>
|
||||||
|
|
||||||
|
|
||||||
</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>
|
</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>
|
||||||
<% } %>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Loading…
Reference in a new issue