midou/invidious
1
0
Fork 1
mirror of https://github.com/iv-org/invidious.git synced 2024-11-09 23:12:15 +05:30
Code Issues Packages Projects Releases Wiki 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

21
assets/css/default.css
View File

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

14
src/invidious/views/components/description_chapters_widget.ecr
View File

@ -1,11 +1,11 @@
<% if !chapters.empty? %> <% if !chapters.empty? %>
<hr class="description-content-separator"/>
<div class="description-chapters-section"> <div class="description-chapters-section">
<h5>Chapters</h5> <hr class="description-content-separator"/>
<h4>Chapters</h4>
<div class="description-chapters-content-container"> <div class="description-chapters-content-container">
<% chapters.each do | chapter |%> <% 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"> <div class="thumbnail">
<%- if !env.get("preferences").as(Preferences).thin_mode -%> <%- 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="" /> <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> <div class="thumbnail-placeholder"></div>
<%- end -%> <%- end -%>
</div> </div>
<p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) %></p> <p><%-= recode_length_seconds(chapter.start_ms.milliseconds.total_seconds) -%></p>
<p><%-=chapter.title%></p> <p><%-=chapter.title-%></p>
</div>
</a> </a>
</div>
<% end %> <% end %>
</div> </div>
</div>
<hr class="description-content-separator"/> <hr class="description-content-separator"/>
</div>
<% end %> <% end %>