mirror of
https://gitea.invidious.io/iv-org/invidious.git
synced 2024-08-15 00:53:41 +00:00
Fix layout of video 'card' items
Previous changes broke alignment of text and icons
This commit is contained in:
Samantaz Fox
parent
eecfc155b8
commit
cfcb64c516
2 changed files with 65 additions and 41 deletions
|
|
@ -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
|
* Footer
|
||||||
*/
|
*/
|
||||||
|
|
|
||||||
|
|
@ -74,23 +74,28 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
<p dir="auto"><%= HTML.escape(item.title) %></p>
|
<p dir="auto"><%= HTML.escape(item.title) %></p>
|
||||||
</a>
|
</a>
|
||||||
<a href="/channel/<%= item.ucid %>">
|
|
||||||
<p dir=auto"><b><%= HTML.escape(item.author) %></b></p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<h5 class="pure-g">
|
<div class="video-card-row flexible">
|
||||||
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
|
<div class="flex-left"><a href="/channel/<%= item.ucid %>">
|
||||||
<div class="pure-u-2-3"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></div>
|
<p class="channel-name" dir=auto"><%= HTML.escape(item.author) %></p>
|
||||||
<% elsif Time.utc - item.published > 1.minute %>
|
</a></div>
|
||||||
<div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div>
|
</div>
|
||||||
<% else %>
|
|
||||||
<div class="pure-u-2-3"></div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="pure-u-1-3" style="text-align:right">
|
<div class="video-card-row flexible">
|
||||||
<%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %>
|
<div class="flex-left">
|
||||||
|
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
|
||||||
|
<p dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
|
||||||
|
<% elsif Time.utc - item.published > 1.minute %>
|
||||||
|
<p dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
|
||||||
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</h5>
|
|
||||||
|
<% if item.responds_to?(:views) && item.views %>
|
||||||
|
<div class="flex-right">
|
||||||
|
<p dir="auto"><%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %></p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
<% else %>
|
<% else %>
|
||||||
<a style="width:100%" href="/watch?v=<%= item.id %>">
|
<a style="width:100%" href="/watch?v=<%= item.id %>">
|
||||||
<% if !env.get("preferences").as(Preferences).thin_mode %>
|
<% if !env.get("preferences").as(Preferences).thin_mode %>
|
||||||
|
|
@ -123,7 +128,7 @@
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
||||||
<% if item.responds_to?(:live_now) && item.live_now %>
|
<% if item.responds_to?(:live_now) && item.live_now %>
|
||||||
<p class="length"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
|
<p class="length" dir="auto"><i class="icon ion-ios-play-circle"></i> <%= translate(locale, "LIVE") %></p>
|
||||||
<% elsif item.length_seconds != 0 %>
|
<% elsif item.length_seconds != 0 %>
|
||||||
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
|
<p class="length"><%= recode_length_seconds(item.length_seconds) %></p>
|
||||||
<% end %>
|
<% end %>
|
||||||
|
|
@ -132,36 +137,40 @@
|
||||||
<p dir="auto"><%= HTML.escape(item.title) %></p>
|
<p dir="auto"><%= HTML.escape(item.title) %></p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div style="display: flex">
|
<div class="video-card-row flexible">
|
||||||
<b style="flex: 1;">
|
<div class="flex-left"><a href="/channel/<%= item.ucid %>">
|
||||||
<a dir="auto" href="/channel/<%= item.ucid %>"><p dir="auto"><%= HTML.escape(item.author) %></p></a>
|
<p class="channel-name" dir=auto"><%= HTML.escape(item.author) %></p>
|
||||||
</b>
|
</a></div>
|
||||||
<div class="icon-buttons">
|
<div class="flex-right">
|
||||||
<a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">
|
<div class="icon-buttons">
|
||||||
<i class="icon ion-logo-youtube"></i>
|
<a title="<%=translate(locale, "Watch on YouTube")%>" href="https://www.youtube.com/watch?v=<%= item.id %>">
|
||||||
</a>
|
<i class="icon ion-logo-youtube"></i>
|
||||||
<a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&listen=1">
|
</a>
|
||||||
<i class="icon ion-md-headset"></i>
|
<a title="<%=translate(locale, "Audio mode")%>" href="/watch?v=<%= item.id %>&listen=1">
|
||||||
</a>
|
<i class="icon ion-md-headset"></i>
|
||||||
<a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>">
|
</a>
|
||||||
<i class="icon ion-md-jet"></i>
|
<a title="<%=translate(locale, "Switch Invidious Instance")%>" href="/redirect?referer=<%=HTML.escape("watch?v=#{item.id}")%>">
|
||||||
</a>
|
<i class="icon ion-md-jet"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h5 class="pure-g">
|
<div class="video-card-row flexible">
|
||||||
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
|
<div class="flex-left">
|
||||||
<div class="pure-u-2-3"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></div>
|
<% if item.responds_to?(:premiere_timestamp) && item.premiere_timestamp.try &.> Time.utc %>
|
||||||
<% elsif Time.utc - item.published > 1.minute %>
|
<p class="video-data" dir="auto"><%= translate(locale, "Premieres in `x`", recode_date((item.premiere_timestamp.as(Time) - Time.utc).ago, locale)) %></p>
|
||||||
<div class="pure-u-2-3"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></div>
|
<% elsif Time.utc - item.published > 1.minute %>
|
||||||
<% else %>
|
<p class="video-data" dir="auto"><%= translate(locale, "Shared `x` ago", recode_date(item.published, locale)) %></p>
|
||||||
<div class="pure-u-2-3"></div>
|
<% end %>
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<div class="pure-u-1-3" style="text-align:right">
|
|
||||||
<%= item.responds_to?(:views) && item.views ? translate(locale, "`x` views", number_to_short_text(item.views || 0)) : "" %>
|
|
||||||
</div>
|
</div>
|
||||||
</h5>
|
|
||||||
|
<% if item.responds_to?(:views) && item.views %>
|
||||||
|
<div class="flex-right">
|
||||||
|
<p class="video-data" dir="auto"><%= translate(locale, "`x` views", number_to_short_text(item.views || 0)) %></p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
<% end %>
|
<% end %>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue