external/invidious
1
0
Fork 0
mirror of https://github.com/iv-org/invidious.git synced 2024-11-10 01:01:57 +01:00
Code Issues Projects Releases Packages Wiki Activity

HTML/CSS: Add thumbnail placeholder in thin mode

Browse source 
This change is required to make the overlay buttons functional
(add to and delete from playlist, mark as watched, etc.)
This commit is contained in:
Samantaz Fox 2023-07-08 21:17:44 +02:00
parent c17404890c
commit 9b75f79fb5
No known key found for this signature in database
GPG key ID: F42821059186176E
3 changed files with 14 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/default.css
View file

@ -199,6 +199,11 @@ img.thumbnail {
object-fit: cover; object-fit: cover;
} }
.thumbnail-placeholder {
min-height: 50px;
border: 2px dotted;
}
div.watched-overlay { div.watched-overlay {
z-index: 50; z-index: 50;
position: absolute; position: absolute;

8
src/invidious/views/components/item.ecr
View file

@ -14,6 +14,8 @@
<img loading="lazy" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" /> <img loading="lazy" style="width:56.25%" src="/ggpht<%= URI.parse(item.author_thumbnail).request_target.gsub(/=s\d+/, "=s176") %>" alt="" />
</center> </center>
</a> </a>
<%- else -%>
<div class="thumbnail-placeholder" style="width:56.25%"></div>
<% end %> <% end %>
<div class="video-card-row flexible"> <div class="video-card-row flexible">
@ -41,6 +43,8 @@
<a tabindex="-1" href="<%= link_url %>"> <a tabindex="-1" href="<%= link_url %>">
<img loading="lazy" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" /> <img loading="lazy" class="thumbnail" src="<%= URI.parse(item.thumbnail || "/").request_target %>" alt="" />
</a> </a>
<%- else -%>
<div class="thumbnail-placeholder"></div>
<%- end -%> <%- end -%>
<div class="bottom-right-overlay"> <div class="bottom-right-overlay">
@ -76,7 +80,7 @@
-%> -%>
<div class="thumbnail"> <div class="thumbnail">
<%- if !env.get("preferences").as(Preferences).thin_mode -%> <%- if !thin_mode -%>
<a tabindex="-1" href="<%= link_url %>"> <a tabindex="-1" href="<%= link_url %>">
<img loading="lazy" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" /> <img loading="lazy" class="thumbnail" src="/vi/<%= item.id %>/mqdefault.jpg" alt="" />
@ -85,6 +89,8 @@
<div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div> <div class="watched-indicator" data-length="<%= item.length_seconds %>" data-id="<%= item.id %>"></div>
<% end %> <% end %>
</a> </a>
<%- else -%>
<div class="thumbnail-placeholder"></div>
<%- end -%> <%- end -%>
<div class="top-left-overlay"> <div class="top-left-overlay">

2
src/invidious/views/watch.ecr
View file

@ -311,6 +311,8 @@ we're going to need to do it here in order to allow for translations.
<a tabindex="-1" href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>"> <a tabindex="-1" href="/watch?v=<%= rv["id"] %>&listen=<%= params.listen %>">
<img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" /> <img loading="lazy" class="thumbnail" src="/vi/<%= rv["id"] %>/mqdefault.jpg" alt="" />
</a> </a>
<%- else -%>
<div class="thumbnail-placeholder"></div>
<%- end -%> <%- end -%>
<div class="bottom-right-overlay"> <div class="bottom-right-overlay">