voussoir/ycdl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add #toolbox_left and #toolbox_right where I can put more buttons.

Browse source
This commit is contained in:
voussoir 2020-08-10 18:29:50 -07:00
parent 59eab3f997
commit e42e4cac55
1 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
frontends/ycdl_flask/templates/channel.html
View file

@ -13,14 +13,37 @@
<style> <style>
#content_body #content_body
{ {
display: flex;
flex-direction: column;
min-width: 200px; min-width: 200px;
width: 100%; width: 100%;
max-width: 1440px; max-width: 1440px;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#content_body
{
display: grid;
grid-template:
"toolbox_left toolbox_right" auto
"video_cards video_cards" auto
/auto auto;
}
#toolbox_left
{
grid-area: toolbox_left;
display: flex;
flex-direction: column;
}
#toolbox_right
{
grid-area: toolbox_right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#video_cards
{
grid-area: video_cards;
}
.video_card .video_card
{ {
position: relative; position: relative;
@ -155,6 +178,7 @@ https://stackoverflow.com/a/35153397
<body> <body>
{{header.make_header()}} {{header.make_header()}}
<div id="content_body"> <div id="content_body">
<div id="toolbox_left">
{% if channel is not none %} {% if channel is not none %}
<span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(false)">Refresh new videos</button></span> <span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(false)">Refresh new videos</button></span>
<span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(true)">Refresh everything</button></span> <span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(true)">Refresh everything</button></span>
@ -199,11 +223,16 @@ https://stackoverflow.com/a/35153397
<a class="merge_params" href="?orderby=views">Views</a> <a class="merge_params" href="?orderby=views">Views</a>
<a class="merge_params" href="?orderby=random">Random</a> <a class="merge_params" href="?orderby=random">Random</a>
</span> </span>
</div>
<center><input type="text" id="search_filter"/></center> <div id="toolbox_right">
<center><span id="search_filter_count">{{videos|length}}</span> items</center> </div>
<div id="video_cards"> <div id="video_cards">
<center><input type="text" id="search_filter"/></center>
<center><span id="search_filter_count">{{videos|length}}</span> items</center>
{% for video in videos %} {% for video in videos %}
<div id="video_card_{{video.id}}" <div id="video_card_{{video.id}}"
data-ytid="{{video.id}}" data-ytid="{{video.id}}"
@ -301,14 +330,12 @@ function filter_video_cards(search_term)
Apply the search filter textbox by hiding the mismatched cards. Apply the search filter textbox by hiding the mismatched cards.
*/ */
var count = 0; var count = 0;
video_cards = document.getElementById("video_cards"); video_cards = document.getElementById("video_cards").getElementsByClassName("video_card");
video_cards.classList.add("hidden");
search_term = search_term.toLocaleLowerCase(); search_term = search_term.toLocaleLowerCase();
var cards = video_cards.children;
var download_filter_class = "video_card_" + DOWNLOAD_FILTER; var download_filter_class = "video_card_" + DOWNLOAD_FILTER;
for (var index = 0; index < video_cards.children.length; index += 1) for (var index = 0; index < video_cards.length; index += 1)
{ {
var video_card = video_cards.children[index]; var video_card = video_cards[index];
var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase(); var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase();
if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class)) if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class))
{ {
@ -325,7 +352,6 @@ function filter_video_cards(search_term)
count += 1; count += 1;
} }
} }
video_cards.classList.remove("hidden");
document.getElementById("search_filter_count").innerText = count; document.getElementById("search_filter_count").innerText = count;
} }