iv-org
/
invidious
mirror of https://github.com/iv-org/invidious.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add margins to video panel elements

This commit is contained in:
broquemonsieur 2023-07-05 00:26:01 -07:00
parent 0e2fefe1e9
commit bfa9f77441
2 changed files with 68 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
assets/css/default.css
View File

@ -761,16 +761,54 @@ h1, h2, h3, h4, h5, p,
} }
div.compilation-video-panel { div.compilation-video-panel {
padding: 28.125%; display:flex;
justify-content:flex-start;
width:calc(100% - 20px);
height:100px;
border:1px solid #f0f0f0;
margin: 10px;
/*background: #d9d9d9;*/
}
div.compilation-order-swap-arrows {
display:flex;
flex-direction:column;
justify-content:space-between;
}
svg.compilation-video-swap-arrow {
border: solid black;
width:20px;
height:50%;
background-color: beige;
margin: 10px;
}
div.compilation-video-input-panel {
display:flex;
flex-direction:column;
min-width: 0;
margin: 10px;
}
div.compilation-video-title {
display:flex;
justify-content:flex-start;
}
span.compilation-video-title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
div.compilation-video-timestamps {
display:flex;
justify-content: flex-start;
}
div.compilation-video-thumbnail {
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
} }
img.compilation-video-panel {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
object-fit: cover;
}

28
src/invidious/views/components/compilation_video.ecr
View File

@ -1,20 +1,32 @@
<div class="pure-u-1 pure-u-md-1"> <div class="pure-u-1 pure-u-md-1">
<div class="h-box"> <div class="h-box">
<div style="display:flex; justify-content:flex-start; width:calc(100% - 20px); height:100px; border:1px solid black; margin: 10px; background: #d9d9d9;"> <div class="compilation-video-panel">
<div style="display:flex; flex-direction:column; justify-content:space-between;"> <div class="compilation-order-swap-arrows">
<svg style="border: solid black; width:20px; height:50%; background-color: beige; margin: 10px;"> <svg class="compilation-video-swap-arrow">
<path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path> <path d="M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"></path>
</svg> </svg>
<svg viewBox="-10 25 20 50" style="border: solid; width:20px; height:50%; background-color: beige; margin: 10px;"> <svg class="compilation-video-swap-arrow">
<path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path> <path d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"></path>
</svg> </svg>
</div> </div>
<img loading="lazy" style="margin:10px;" src="/vi/<%= compilation_video.id %>/mqdefault.jpg" alt="" /> <img loading="lazy" style="margin:10px;" src="/vi/<%= compilation_video.id %>/mqdefault.jpg" alt="" />
<div style="display:flex; flex-direction:column;"> <!-- <div class="compilation-video-thumbnail">
<div style="display:flex; justify-content:flex-start;"> <img loading="lazy" style="margin:10px;" src="/vi/<%= compilation_video.id %>/mqdefault.jpg" alt="" />
<p style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;" dir="auto"><%= HTML.escape(compilation_video.title) %></p> <form data-onsubmit="return_false" action="/playlist_ajax?action_remove_video=1&set_video_id=<%= compilation_video.index %>&referer=<%= env.get("current_page") %>" method="post">
<input type="hidden" name="csrf_token" value="<%= HTML.escape(env.get?("csrf_token").try &.as(String) || "") %>">
<p class="watched">
<button type="submit" style="all:unset" data-onclick="remove_playlist_item" data-index="<%= compilation_video.index %>"><i class="icon ion-md-trash"></i></button>
</p>
</form>
<% if !compilation_video.responds_to?(:live_now) && compilation_video.length_seconds != 0 %>
<p class="length"><%= recode_length_seconds(compilation_video.length_seconds) %></p>
<% end %>
</div> -->
<div class="compilation-video-input-panel">
<div class="compilation-video-title">
<span class="compilation-video-title" dir="auto"><%= HTML.escape(compilation_video.title) %></span>
</div> </div>
<div style="display:flex; justify-content: space-around;"> <div class="compilation-video-timestamps">
<p>from</p> <p>from</p>
<input value="00:00:00" type="time" step="1"> <input value="00:00:00" type="time" step="1">
<p>to</p> <p>to</p>