tezlm/invidious
1
0
Fork 0
forked from mirror/invidious
Code Pull requests Activity

Fix description chapter component design

Browse source
This commit is contained in:
syeopite 2023-08-21 00:44:20 -07:00
parent 2cd3ded93b
commit 3fba6f5728
No known key found for this signature in database
GPG key ID: A73C186DA3955A1A
2 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
assets/css/default.css
View file

@ -160,7 +160,9 @@ body a.pure-button {
button.pure-button-primary,
body a.pure-button-primary,
.channel-owner:hover,
.channel-owner:focus {
.channel-owner:focus,
.chapter:hover,
.chapter:focus {
background-color: #a0a0a0;
color: rgba(35, 35, 35, 1);
}
@ -797,9 +799,26 @@ h1, h2, h3, h4, h5, p,
}
#download_widget {
width: 100%;
width: 100%;
}
.description-chapters-section {
white-space: normal;
}
.description-chapters-content-container {
display: flex;
flex-direction: row;
gap: 5px;
overflow: scroll;
overflow-y: hidden;
}
.chapter {
padding: 3px;
}
.chapter .thumbnail {
width: 200px;
}

18
src/invidious/views/components/description_chapters_widget.ecr
View file

@ -1,11 +1,11 @@
<% if !chapters.empty? %>
<hr class="description-content-separator"/>
<div class="description-chapters-section">
<h5>Chapters</h5>
<hr class="description-content-separator"/>
<h4>Chapters</h4>
<div class="description-chapters-content-container">
<% chapters.each do | chapter |%>
<div class="chapter">
<a href="/watch?v=<%= video.id %>&t=<%=chapter.start_ms.milliseconds.total_seconds.to_i %>">
<a href="/watch?v=<%= video.id %>&t=<%=chapter.start_ms.milliseconds.total_seconds.to_i %>">
<div class="chapter">
<div class="thumbnail">
<%- if !env.get("preferences").as(Preferences).thin_mode -%>
<img loading="lazy" class="thumbnail" src="<%-=URI.parse(chapter.thumbnails[-1]["url"].to_s).request_target %>" alt="" />
@ -13,12 +13,12 @@
<div class="thumbnail-placeholder"></div>
<%- end -%>
</div>
<p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) %></p>
<p><%-=chapter.title%></p>
</a>
</div>
<p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) -%></p>
<p><%-=chapter.title-%></p>
</div>
</a>
<% end %>
</div>
<hr class="description-content-separator"/>
</div>
<hr class="description-content-separator"/>
<% end %>