mirror of
https://github.com/iv-org/invidious.git
synced 2025-05-31 14:11:54 +05:30
HTML/CSS: Add thumbnail placeholder in thin mode
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:
@ -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;
|
||||||
|
@ -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">
|
||||||
|
@ -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">
|
||||||
|
Reference in New Issue
Block a user