From f833a6b0958d9e565aff8c3419061e721b0be648 Mon Sep 17 00:00:00 2001 From: Ashley Date: Mon, 23 Oct 2023 14:50:42 +0000 Subject: [PATCH] add new popular page for discover mobile :3 --- html/discover.ejs | 162 +++++++++++++++++++++++++++++++++------------- 1 file changed, 118 insertions(+), 44 deletions(-) diff --git a/html/discover.ejs b/html/discover.ejs index 0db155e..613484a 100644 --- a/html/discover.ejs +++ b/html/discover.ejs @@ -863,36 +863,7 @@ summary:hover{ overflow-x: auto; } -.tabs.rec { - font-weight: 600; - font-stretch: expanded; - overflow:hidden; - width: auto; - max-width: fit-content; - margin-right: auto; - padding-left: 1.5em; - margin-top: 7px; - display: flex; - gap: 3px; -} - -.tags.rec:hover{ - overflow-x:auto; -} - -.tags.rec > .tag { - border-radius: 8px; -} - -.tabs { - background: #333; - padding: 5px; - border-radius: 4px; - border-radius: 8px; - word-break: break-all; - white-space: nowrap; - font-family: ubuntu, sans-serif; -} + @@ -1014,14 +985,80 @@ padding: 3px; } #more-buttons span { display: block; } #more-buttons span a { display: inline-block; } - + .tabs { +display: table; + font-family: poketube flex; + border-collapse: separate; + table-layout: auto; + font-weight: 800; + font-stretch: extra-expanded; + border-spacing: 3px; +} + .tabs.tabs-center { +margin-left: auto; + background: #000; + border-radius: 1em; + margin-bottom: 45px; + margin-right: auto; +} + + .tabs.tabs-justify { + width: 100%; + table-layout: fixed; +} + + +.tab.active { + background: #1a1a1a !important; + border-radius: 1em !important; +} + + .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; + opacity: 0; + transform: scale(0, 1); +} + .tabs a.tab.active { + color: #fff; +} + .tabs a.tab.active:after { + opacity: 1; + transform: scale(1, 1); +} + + +.tab:hover { + background: var(--not-quite-black); + text-decoration: none; + border-radius: 1em; +}
-
-
-
+
@@ -1049,11 +1085,34 @@ padding: 3px;
- - <% if (!tab || tab == "music" ) { %> - <% if (!mobilesearch) { %> + <% if (!mobilesearch) { %>
+ + + <% if (!tab) { %> + +
+ + Popular + + Trends + + +
+ <% } %> + <% if (tab === "popular") { %> + +
+ + + Popular + + Trends +
+ <% } %> + <% if (!tab) { %> + <% inv.forEach(x => { %>
<%- turntomins(x.lengthSeconds) %>
@@ -1064,7 +1123,22 @@ padding: 3px;
<% }) %> + <% } %> + <% if (tab === "popular") { %> + + <% p.forEach(x => { %> + +
<%- turntomins(x.lengthSeconds) %>
+
+ <%- x.title %> + By <%- x.author %> +
+ + <% }) %> + <% } %> + +
@@ -1113,12 +1187,12 @@ Privacy
<% } %> - <% } %> - - -
- <% if (tab == "search") { %> +
+ + + <% if (tab == "search") { %> + <--
Search morbillion amount of videos from poketube !!