From cfcb64c5164816e27496366e0f6fb489dfaa6932 Mon Sep 17 00:00:00 2001 From: Samantaz Fox Date: Fri, 25 Jun 2021 20:47:15 +0200 Subject: [PATCH] Fix layout of video 'card' items Previous changes broke alignment of text and icons --- assets/css/default.css | 15 ++++ src/invidious/views/components/item.ecr | 91 ++++++++++++++----------- 2 files changed, 65 insertions(+), 41 deletions(-) diff --git a/assets/css/default.css b/assets/css/default.css index 1df63412..06a2f07f 100644 --- a/assets/css/default.css +++ b/assets/css/default.css @@ -282,6 +282,21 @@ input[type="search"]::-webkit-search-cancel-button { } } + +/* + * Video "cards" (results/playlist/channel videos) + */ + +.video-card-row { margin: 15px 0; } + +.flexible { display: flex; } +.flex-left { flex: 1 1 100%; flex-wrap: wrap; } +.flex-right { flex: 1 0 max-content; flex-wrap: nowrap; } + +p.channel-name { margin: 0; } +p.video-data { margin: 0; font-weight: bold; font-size: 80%; } + + /* * Footer */ diff --git a/src/invidious/views/components/item.ecr b/src/invidious/views/components/item.ecr index 85ff53a1..7fbefc38 100644 --- a/src/invidious/views/components/item.ecr +++ b/src/invidious/views/components/item.ecr @@ -74,23 +74,28 @@ <% end %>

<%= HTML.escape(item.title) %>

- -

<%= HTML.escape(item.author) %>

-
-
- <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> -
<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>
- <% elsif Time.utc - item.published > 1.minute %> -
<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>
- <% else %> -
- <% end %> + -
- <%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %> +
+
+ <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> +

<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>

+ <% elsif Time.utc - item.published > 1.minute %> +

<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>

+ <% end %>
-
+ + <% if item.responds_to?(:views) && item.views %> +
+

<%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %>

+
+ <% end %> + <% else %> <% if !env.get("preferences").as(Preferences).thin_mode %> @@ -123,7 +128,7 @@ <% end %> <% if item.responds_to?(:live_now) && item.live_now %> -

<%= translate(locale, "LIVE") %>

+

<%= translate(locale, "LIVE") %>

<% elsif item.length_seconds != 0 %>

<%= recode_length_seconds(item.length_seconds) %>

<% end %> @@ -132,36 +137,40 @@

<%= HTML.escape(item.title) %>

-
- -

<%= HTML.escape(item.author) %>

-
-
- " href="https://www.youtube.com/watch?v=<%= item.id %>"> - - - " href="/watch?v=<%= item.id %>&listen=1"> - - - " href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>"> - - + -
- <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> -
<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>
- <% elsif Time.utc - item.published > 1.minute %> -
<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>
- <% else %> -
- <% end %> - -
- <%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %> +
+
+ <% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %> +

<%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %>

+ <% elsif Time.utc - item.published > 1.minute %> +

<%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %>

+ <% end %>
-
+ + <% if item.responds_to?(:views) && item.views %> +
+

<%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %>

+
+ <% end %> +
<% end %>