From 3e09dcaada82b56508d4bd211230cef9f6046f4d Mon Sep 17 00:00:00 2001 From: syeopite Date: Tue, 13 Apr 2021 00:23:17 -0700 Subject: [PATCH] Improve styling for search filters (cherry picked from commit c28e96bc7b53e6e508c6a926a8e7122b98b0fe03) --- assets/css/search.css | 25 ++- .../views/components/channel-information.ecr | 146 ++++++++++++++ src/invidious/views/search.ecr | 182 +++++++++--------- 3 files changed, 261 insertions(+), 92 deletions(-) create mode 100644 src/invidious/views/components/channel-information.ecr diff --git a/assets/css/search.css b/assets/css/search.css index 7f95c88a..d77223fd 100644 --- a/assets/css/search.css +++ b/assets/css/search.css @@ -1,12 +1,7 @@ #filters { - display: inline; margin-top: 15px; } -#filters > div { - display: inline-block; -} - #filters > summary { display: block; margin-bottom: 15px; @@ -22,6 +17,20 @@ font-size: 1.5em; } +#filters .pure-menu-item { + margin-top: 10px; +} + +#filters hr { + width: 80%; + margin: 10px 0 15px 0 !important +} + +.filter-catagory { + display: inline-block; + margin-bottom: 20px; +} + .remove-filter { margin-left: 6px; vertical-align: middle; @@ -47,3 +56,9 @@ .no-theme .remove-filter { color: #030303 } + +@media (prefers-color-scheme: dark) { + .no-theme .remove-filter { + color: #CAC5BE + } +} diff --git a/src/invidious/views/components/channel-information.ecr b/src/invidious/views/components/channel-information.ecr new file mode 100644 index 00000000..b6ed41e7 --- /dev/null +++ b/src/invidious/views/components/channel-information.ecr @@ -0,0 +1,146 @@ +<% content_for "header" do %> +<%= channel.author %> - Invidious + +<% end %> + +<% if channel.banner %> +
+ "> +
+ +
+
+
+<% end %> + +
+
+
+ + <%= channel.author %> +
+
+
+

+ +

+
+
+ +
+

<%= channel.description_html %>

+
+ +
+ <% ucid = channel.ucid %> + <% author = channel.author %> + <% sub_count_text = number_to_short_text(channel.sub_count) %> + <%= rendered "components/subscribe_widget" %> +
+ +
+
+ + + +
+ + <% if !channel.auto_generated %> + <% if content_type == 0 %> +
  • + + <%= translate(locale, "Videos") %> + +
    • + <% else %> +
  • + + <%= translate(locale, "Videos") %> + +
    • + <% end %> + <% end %> + + <% if content_type == 1 || channel.auto_generated %> +
  • + + <%= translate(locale, "Playlists") %> + +
    • + <% else %> +
  • + + <%= translate(locale, "Playlists") %> + +
    • + <% end %> + + <% if channel.tabs.includes? "community" %> + <% if content_type == 2 %> +
  • + + <%= translate(locale, "Community") %> + +
    • + <% else %> +
  • + + <%= translate(locale, "Community") %> + +
    • + <% end %> + <% end %> + + <% if !channel.auto_generated %> +
  • +
    +
    +
    + + " value="<%= env.get?("search").try {|x| HTML.escape(x.as(String)) } %>"> + +
    +
    +
    +
    • + <% end %> +     +
    +
    +
    + + <% if content_type == 0 || content_type == 1 %> + <% route = content_type == 1 ? "/playlists" : "" %> + <% url = "/channel/#{channel.ucid + route}" %> + <% if env.params.query %> + <% url += "?#{env.params.query}"%> + <% end %> + +
    +
    + +
    +
    + <% end %> +
    + +
    +
    +
    diff --git a/src/invidious/views/search.ecr b/src/invidious/views/search.ecr index 380f4d3f..cd6705cb 100644 --- a/src/invidious/views/search.ecr +++ b/src/invidious/views/search.ecr @@ -22,98 +22,106 @@ <% filter_params = env.request.query_params.to_s.gsub(/q=.+?(?=&)/, "") %> <% base_url = "/search?q=#{URI.encode_www_form(query.not_nil!)}" %> -
    - <%= translate(locale, "date") %> -
    - <% ["hour", "today", "week", "month", "year"].each do |date| %> -
    - <% if operator_hash.fetch("date", "all") == date %> - "> - <%= translate(locale, date) %> - - - <% else %> - "> - <%= translate(locale, date) %> - - <% end %> -
    - <% end %> -
    +
    + <%= translate(locale, "date") %> +
    + +
    -
    - <%= translate(locale, "content_type") %> -
    - <% ["video", "channel", "playlist", "movie", "show"].each do |content_type| %> -
    - <% if operator_hash.fetch("content_type", "all") == content_type %> - "> - <%= translate(locale, content_type) %> - - - <% else %> - "> - <%= translate(locale, content_type) %> - - <% end %> -
    - <% end %> -
    +
    + <%= translate(locale, "content_type") %> +
    + +
    -
    - <%= translate(locale, "duration") %> -
    - <% ["short", "long"].each do |duration| %> -
    - <% if operator_hash.fetch("duration", "all") == duration %> - "> - <%= translate(locale, duration) %> - - - <% else %> - "> - <%= translate(locale, duration) %> - - <% end %> -
    - <% end %> -
    +
    + <%= translate(locale, "duration") %> +
    + +
    -
    - <%= translate(locale, "features") %> -
    - <% ["hd", "subtitles", "creative_commons", "3d", "live", "purchased", "4k", "360", "location", "hdr"].each do |feature| %> -
    - <% if operator_hash.fetch("features", "all").includes?(feature) %> - <% if operator_hash["features"].split(",").size == 1 %> - "> - <%= translate(locale, feature) %> - - - <% else %> - <% data = filter_params.match(/.*features=.*(#{feature}(%2C|&|$)).*/).not_nil! %> - <% start = data.begin(1) %> - <% last = data.end(1) %> +
    + <%= translate(locale, "features") %> +
    +
    - <% end %> -
    + "> + <%= translate(locale, feature) %> + + + <% end %> + <% elsif operator_hash.has_key?("features") %> + "> + <%= translate(locale, feature) %> + + <% else %> + "> + <%= translate(locale, feature) %> + + <% end %> + + <% end %> + +
    -
    +
    <%= translate(locale, "sort") %>
    <% ["relevance", "rating", "date", "views"].each do |sort| %>