Merge pull request #1977 from syeopite/add996

Change empty home page to search engine like layout
2024-08-15 00:53:20 +00:00 · 2021-04-17 17:02:47 +00:00 · 2021-04-17 17:02:47 +00:00 · b9e57d0283
commit b9e57d0283
parent edb37c95e1 5c0458a887
44 changed files with 132 additions and 60 deletions
--- a/assets/css/default.css
+++ b/assets/css/default.css
@ -178,7 +178,7 @@ img.thumbnail {
  flex: 1;
 }

-.navbar > .searchbar {
+.searchbar {
  flex-grow: 2; /* take double the space of the other items */
 }

@ -191,7 +191,7 @@ img.thumbnail {
  display: inline;
 }

-.navbar > .searchbar .pure-form input[type="search"] {
+.searchbar .pure-form input[type="search"] {
  margin-bottom: 1px;

  border-top: 0;
@ -216,12 +216,12 @@ input[type="search"]::-webkit-search-cancel-button {
  background-size: 14px;
 }

-.navbar > .searchbar .pure-form fieldset {
+.searchbar .pure-form fieldset {
  padding: 0;
 }

 /* attract focus to the searchbar by adding a subtle transition */
-.navbar > .searchbar .pure-form input[type="search"]:focus {
+.searchbar .pure-form input[type="search"]:focus {
  margin-bottom: 0px;
  border-bottom: 2px solid #aaa;
 }
@ -594,7 +594,7 @@ body.dark-theme {
  color: #f0f0f0;
 }

-.dark-theme .navbar > .searchbar input {
+.dark-theme .searchbar input {
  background-color: inherit;
  color: inherit;
 }
@ -633,7 +633,7 @@ body.dark-theme {
    color: #f0f0f0;
  }

-  .no-theme .navbar > .searchbar input {
+  .no-theme .searchbar input {
    background-color: inherit;
    color: inherit;
  }
--- a/assets/css/empty.css
+++ b/assets/css/empty.css
@ -0,0 +1,16 @@
+#search-widget {
+    text-align: center;
+    margin: 20vh 0 50px 0;
+}
+
+#logo > h1 {
+    font-size: 3.5em;
+    margin: 0;
+    padding: 0;
+}
+
+@media screen and (max-width: 1500px) and (max-height: 1000px) {
+    #logo > h1 {
+      font-size: 10vmin;
+    }
+}
--- a/locales/ar.json
+++ b/locales/ar.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` ثوانى",
    "Fallback comments: ": "التعليقات البديلة: ",
    "Popular": "الأكثر شعبية",
+    "Search": "",
    "Top": "الأفضل",
    "About": "حول",
    "Rating: ": "التقييم: ",
--- a/locales/bn_BD.json
+++ b/locales/bn_BD.json
@ -327,6 +327,7 @@
    "`x` seconds.": "",
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/cs.json
+++ b/locales/cs.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "Informace",
    "Rating: ": "Hodnocení: ",
--- a/locales/da.json
+++ b/locales/da.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/de.json
+++ b/locales/de.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` Sekunden",
    "Fallback comments: ": "Alternative Kommentare: ",
    "Popular": "Populär",
+    "Search": "",
    "Top": "Top",
    "About": "Über",
    "Rating: ": "Bewertung: ",
--- a/locales/el.json
+++ b/locales/el.json
@ -325,6 +325,7 @@
    "`x` seconds.": "`x` δευτερόλεπτα.",
    "Fallback comments: ": "Εναλλακτικά σχόλια: ",
    "Popular": "Δημοφιλή",
+    "Search": "",
    "Top": "Κορυφαία",
    "About": "Σχετικά",
    "Rating: ": "Aξιολόγηση: ",
--- a/locales/en-US.json
+++ b/locales/en-US.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "Fallback comments: ",
    "Popular": "Popular",
+    "Search": "Search",
    "Top": "Top",
    "About": "About",
    "Rating: ": "Rating: ",
--- a/locales/eo.json
+++ b/locales/eo.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` sekundoj",
    "Fallback comments: ": "Retrodefaŭltaj komentoj: ",
    "Popular": "Popularaj",
+    "Search": "",
    "Top": "Supraj",
    "About": "Pri",
    "Rating: ": "Takso: ",
--- a/locales/es.json
+++ b/locales/es.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` segundos",
    "Fallback comments: ": "Comentarios alternativos: ",
    "Popular": "Populares",
+    "Search": "",
    "Top": "Destacados",
    "About": "Acerca de",
    "Rating: ": "Valoración: ",
--- a/locales/eu.json
+++ b/locales/eu.json
@ -310,6 +310,7 @@
    "`x` seconds": "",
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/fa.json
+++ b/locales/fa.json
@ -327,6 +327,7 @@
    "`x` seconds.": "`x` ثانیه.",
    "Fallback comments: ": "نظرات عقب گرد: ",
    "Popular": "محبوب",
+    "Search": "",
    "Top": "بالا",
    "About": "درباره",
    "Rating: ": "رتبه دهی: ",
--- a/locales/fi.json
+++ b/locales/fi.json
@ -327,6 +327,7 @@
    "`x` seconds.": "`x` sekuntia.",
    "Fallback comments: ": "varakommentit: ",
    "Popular": "Suosittu",
+    "Search": "",
    "Top": "Ylin",
    "About": "Tietoa",
    "Rating: ": "Arvosana: ",
--- a/locales/fr.json
+++ b/locales/fr.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` secondes",
    "Fallback comments: ": "Commentaires alternatifs : ",
    "Popular": "Populaire",
+    "Search": "",
    "Top": "Top",
    "About": "À propos",
    "Rating: ": "Évaluation : ",
--- a/locales/he.json
+++ b/locales/he.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "Top",
    "About": "על אודות",
    "Rating: ": "דירוג: ",
--- a/locales/hr.json
+++ b/locales/hr.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "Alternativni komentari: ",
    "Popular": "Popularni",
+    "Search": "",
    "Top": "Najbolji",
    "About": "Informacije",
    "Rating: ": "Ocjena: ",
--- a/locales/hu-HU.json
+++ b/locales/hu-HU.json
@ -309,6 +309,7 @@
    "`x` seconds": "`x` másodperc",
    "Fallback comments: ": "Másodlagos kommentek: ",
    "Popular": "Népszerű",
+    "Search": "",
    "Top": "Top",
    "About": "Leírás",
    "Rating: ": "Besorolás: ",
--- a/locales/id.json
+++ b/locales/id.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "Populer",
+    "Search": "",
    "Top": "",
    "About": "Ihwal",
    "Rating: ": "Peringkat: ",
--- a/locales/is.json
+++ b/locales/is.json
@ -325,7 +325,7 @@
    "`x` seconds.": "`x` sekúndur.",
    "Fallback comments: ": "Vara ummæli: ",
    "Popular": "Vinsælt",
-    "permalink": "Varanlegur tengill",
+    "Search": "",
    "Top": "Topp",
    "About": "Um",
    "Rating: ": "Einkunn: ",
@ -342,6 +342,7 @@
    "%A %B %-d, %Y": "%A %B %-d, %Y",
    "(edited)": "(breytt)",
    "YouTube comment permalink": "YouTube ummæli varanlegur tengill",
+    "permalink": "Varanlegur tengill",
    "`x` marked it with a ❤": "`x` merkti það með ❤",
    "Audio mode": "Hljóð ham",
    "Video mode": "Myndband ham",
--- a/locales/it.json
+++ b/locales/it.json
@ -325,6 +325,7 @@
    "`x` seconds..": "`x` secondi.",
    "Fallback comments: ": "Commenti alternativi: ",
    "Popular": "Popolare",
+    "Search": "",
    "Top": "Top",
    "About": "Al riguardo",
    "Rating: ": "Punteggio: ",
--- a/locales/ja.json
+++ b/locales/ja.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "フォールバック時のコメント: ",
    "Popular": "人気",
+    "Search": "",
    "Top": "トップ",
    "About": "このサービスについて",
    "Rating: ": "評価: ",
--- a/locales/nb-NO.json
+++ b/locales/nb-NO.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` sekunder",
    "Fallback comments: ": "Tilbakefallskommentarer: ",
    "Popular": "Populært",
+    "Search": "",
    "Top": "Topp",
    "About": "Om",
    "Rating: ": "Vurdering: ",
--- a/locales/nl.json
+++ b/locales/nl.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` seconden",
    "Fallback comments: ": "Terugvallen op ",
    "Popular": "Populair",
+    "Search": "",
    "Top": "Top",
    "About": "Over",
    "Rating: ": "Waardering: ",
--- a/locales/pl.json
+++ b/locales/pl.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` sekund",
    "Fallback comments: ": "Zastępcze komentarze: ",
    "Popular": "Popularne",
+    "Search": "",
    "Top": "Top",
    "About": "Informacje",
    "Rating: ": "Ocena: ",
--- a/locales/pt-BR.json
+++ b/locales/pt-BR.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` segundos",
    "Fallback comments: ": "Comentários alternativos: ",
    "Popular": "Populares",
+    "Search": "",
    "Top": "No topo",
    "About": "Sobre",
    "Rating: ": "Avaliação: ",
--- a/locales/pt-PT.json
+++ b/locales/pt-PT.json
@ -327,6 +327,7 @@
    "`x` seconds..": "`x` segundos.",
    "Fallback comments: ": "Comentários alternativos: ",
    "Popular": "Popular",
+    "Search": "",
    "Top": "Top",
    "About": "Sobre",
    "Rating: ": "Avaliação: ",
--- a/locales/ro.json
+++ b/locales/ro.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` secunde",
    "Fallback comments: ": "Comentarii alternative: ",
    "Popular": "Popular",
+    "Search": "",
    "Top": "Top",
    "About": "Despre",
    "Rating: ": "Evaluare: ",
--- a/locales/ru.json
+++ b/locales/ru.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` секунд",
    "Fallback comments: ": "Резервные комментарии: ",
    "Popular": "Популярное",
+    "Search": "",
    "Top": "Топ",
    "About": "О сайте",
    "Rating: ": "Рейтинг: ",
--- a/locales/si.json
+++ b/locales/si.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/sk.json
+++ b/locales/sk.json
@ -327,6 +327,7 @@
    "`x` seconds.": "",
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/sr.json
+++ b/locales/sr.json
@ -361,6 +361,7 @@
    },
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/sr_Cyrl.json
+++ b/locales/sr_Cyrl.json
@ -310,6 +310,7 @@
    "`x` seconds.": "",
    "Fallback comments: ": "",
    "Popular": "",
+    "Search": "",
    "Top": "",
    "About": "",
    "Rating: ": "",
--- a/locales/sv-SE.json
+++ b/locales/sv-SE.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` sekunder",
    "Fallback comments: ": "Fallback-kommentarer: ",
    "Popular": "Populärt",
+    "Search": "",
    "Top": "Topp",
    "About": "Om",
    "Rating: ": "Betyg: ",
--- a/locales/tr.json
+++ b/locales/tr.json
@ -318,6 +318,7 @@
    "`x` seconds": "`x` saniye",
    "Fallback comments: ": "Yedek yorumlar: ",
    "Popular": "Popüler",
+    "Search": "",
    "Top": "Enler",
    "About": "Hakkında",
    "Rating: ": "Değerlendirme: ",
--- a/locales/uk.json
+++ b/locales/uk.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` секунд",
    "Fallback comments: ": "Резервні коментарі: ",
    "Popular": "Популярне",
+    "Search": "",
    "Top": "Топ",
    "About": "Про сайт",
    "Rating: ": "Рейтинг: ",
--- a/locales/zh-CN.json
+++ b/locales/zh-CN.json
@ -310,6 +310,7 @@
    "`x` seconds": "`x` 秒",
    "Fallback comments: ": "后备评论: ",
    "Popular": "热门频道",
+    "Search": "",
    "Top": "热门视频",
    "About": "关于",
    "Rating: ": "评分: ",
--- a/locales/zh-TW.json
+++ b/locales/zh-TW.json
@ -325,6 +325,7 @@
    "`x` seconds.": "`x` 秒",
    "Fallback comments: ": "汰退留言： ",
    "Popular": "熱門頻道",
+    "Search": "",
    "Top": "熱門影片",
    "About": "關於",
    "Rating: ": "評分： ",
--- a/src/invidious/helpers/macros.cr
+++ b/src/invidious/helpers/macros.cr
@ -48,7 +48,8 @@ module JSON::Serializable
  end
 end

-macro templated(filename, template = "template")
+macro templated(filename, template = "template", navbar_search = true)
+  navbar_search = {{navbar_search}}
  render "src/invidious/views/#{{{filename}}}.ecr", "src/invidious/views/#{{{template}}}.ecr"
 end

--- a/src/invidious/routes/misc.cr
+++ b/src/invidious/routes/misc.cr
@ -22,7 +22,7 @@ class Invidious::Routes::Misc < Invidious::Routes::BaseRoute
        env.redirect "/feed/popular"
      end
    else
-      templated "empty"
+      templated "search_homepage", navbar_search: false
    end
  end

--- a/src/invidious/views/empty.ecr
+++ b/src/invidious/views/empty.ecr
@ -1,8 +0,0 @@
-<% content_for "header" do %>
-<meta name="description" content="<%= translate(locale, "An alternative front-end to YouTube") %>">
-<title>
-    Invidious
-</title>
-<% end %>
-
-<%= rendered "components/feed_menu" %>
--- a/src/invidious/views/preferences.ecr
+++ b/src/invidious/views/preferences.ecr
@ -150,7 +150,7 @@
                <label for="default_home"><%= translate(locale, "Default homepage: ") %></label>
                <select name="default_home" id="default_home">
                    <% feed_options.each do |option| %>
-                        <option value="<%= option %>" <% if preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
+                        <option value="<%= option %>" <% if preferences.default_home == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                    <% end %>
                </select>
            </div>
@ -160,7 +160,7 @@
                <% (feed_options.size - 1).times do |index| %>
                    <select name="feed_menu[<%= index %>]" id="feed_menu[<%= index %>]">
                        <% feed_options.each do |option| %>
-                            <option value="<%= option %>" <% if preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "none" : option) %></option>
+                            <option value="<%= option %>" <% if preferences.feed_menu[index]? == option %> selected <% end %>><%= translate(locale, option.blank? ? "Search" : option) %></option>
                        <% end %>
                    </select>
                <% end %>
--- a/src/invidious/views/search_homepage.ecr
+++ b/src/invidious/views/search_homepage.ecr
@ -0,0 +1,24 @@
+<% content_for "header" do %>
+<meta name="description" content="<%= translate(locale, "An alternative front-end to YouTube") %>">
+<title>
+    Invidious
+</title>
+<link rel="stylesheet" href="/css/empty.css?v=<%= ASSET_COMMIT %>">
+<% end %>
+
+<%= rendered "components/feed_menu" %>
+
+<div class="pure-g h-box" id="search-widget">
+    <div class="pure-u-1" id="logo">
+        <h1 href="/" class="pure-menu-heading">Invidious</h1>
+    </div>
+    <div class="pure-u-1-4"></div>
+    <div class="pure-u-1 pure-u-md-12-24 searchbar">
+        <form class="pure-form" action="/search" method="get">
+            <fieldset>
+                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+            </fieldset>
+        </form>
+    </div>
+    <div class="pure-u-1-4"></div>
+</div>
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@ -28,16 +28,19 @@
        <div class="pure-u-1 pure-u-md-2-24"></div>
        <div class="pure-u-1 pure-u-md-20-24", id="contents">
            <div class="pure-g navbar h-box">
-                <div class="pure-u-1 pure-u-md-4-24">
-                    <a href="/" class="index-link pure-menu-heading">Invidious</a>
-                </div>
-                <div class="pure-u-1 pure-u-md-12-24 searchbar">
-                    <form class="pure-form" action="/search" method="get">
-                        <fieldset>
-                            <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
-                        </fieldset>
-                    </form>
-                </div>
+                <% if navbar_search %>
+                    <div class="pure-u-1 pure-u-md-4-24">
+                        <a href="/" class="index-link pure-menu-heading">Invidious</a>
+                    </div>
+                    <div class="pure-u-1 pure-u-md-12-24 searchbar">
+                        <form class="pure-form" action="/search" method="get">
+                            <fieldset>
+                                <input type="search" style="width:100%" name="q" placeholder="<%= translate(locale, "search") %>" value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>">
+                            </fieldset>
+                        </form>
+                    </div>
+                <% end %>
+
                <div class="pure-u-1 pure-u-md-8-24 user-field">
                    <% if env.get? "user" %>
                        <div class="pure-u-1-4">