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

Rewrite channel.html as tabbed container, separate videos/settings.

Browse source
This commit is contained in:
voussoir 2020-09-03 11:54:51 -07:00
parent f103447807
commit 3a455d377b
1 changed files with 49 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,38 +12,14 @@
<script src="/static/js/spinner.js"></script> <script src="/static/js/spinner.js"></script>
<style> <style>
#content_body .tabbed_container .tab
{ {
min-width: 200px; padding: 8px;
width: 100%;
max-width: 1440px;
margin-left: 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; display: flex;
flex-direction: column; flex-direction: column;
} }
#toolbox_right
{
grid-area: toolbox_right;
display: flex;
flex-direction: column;
align-items: flex-end;
}
#video_cards #video_cards
{ {
grid-area: video_cards;
} }
.video_card .video_card
{ {
@ -55,7 +31,7 @@
/auto 1fr auto; /auto 1fr auto;
grid-gap: 4px; grid-gap: 4px;
margin: 8px; margin: 8px 0;
padding: 8px; padding: 8px;
border-radius: 4px; border-radius: 4px;
@ -88,6 +64,11 @@
justify-self: center; justify-self: center;
} }
.video_title
{
word-break: break-word;
}
.video_details .video_details
{ {
grid-area: details; grid-area: details;
@ -165,11 +146,10 @@ https://stackoverflow.com/a/35153397
.video_card .video_card
{ {
grid-template: grid-template:
"thumbnail" "thumbnail details"
"details" "toolbox toolbox"
"toolbox" "embed embed"
"embed" /auto 1fr;
/1fr;
} }
} }
</style> </style>
@ -179,20 +159,27 @@ 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> <h2>{{channel.name}}</h2>
<span><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(true)">Refresh everything</button></span> {% endif %}
<div class="tabbed_container">
<div class="tab" data-tab-title="Videos">
{% if channel is not none %}
<div><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(false)">Refresh new videos</button></div>
<div><button class="refresh_button button_with_spinner" onclick="refresh_channel_form(true)">Refresh everything</button></div>
<p><!-- spacer --></p> <p><!-- spacer --></p>
{% endif %} {% endif %}
<span>View <div>View
{% if channel is not none %} {% if channel is not none %}
<a class="merge_params" href="/channel/{{channel.id}}">All</a> <a class="merge_params" href="/channel/{{channel.id}}">All</a>
{% else %} {% else %}
<a class="merge_params" href="/videos">All</a> <a class="merge_params" href="/videos">All</a>
{% endif %} {% endif %}
{% for statename in all_states %} {% for statename in all_states %}
{% if channel is not none %} {% if channel is not none %}
<a class="merge_params" href="/channel/{{channel.id}}/{{statename}}">{{statename.capitalize()}}</a> <a class="merge_params" href="/channel/{{channel.id}}/{{statename}}">{{statename.capitalize()}}</a>
@ -200,41 +187,18 @@ https://stackoverflow.com/a/35153397
<a class="merge_params" href="/videos/{{statename}}">{{statename.capitalize()}}</a> <a class="merge_params" href="/videos/{{statename}}">{{statename.capitalize()}}</a>
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</span> </div>
<p><!-- spacer --></p> <p><!-- spacer --></p>
{% if channel is not none %} <div>Sort by
<span>
New videos are:
<select onchange="set_automark_hook(event)">
<option value="pending" {{"selected" if channel.automark == "pending" else ""}} >pending</option>
<option value="downloaded" {{"selected" if channel.automark == "downloaded" else ""}} >downloaded</option>
<option value="ignored" {{"selected" if channel.automark == "ignored" else ""}} >ignored</option>
</select>
<span id="set_automark_spinner" class="hidden">Working...</span>
</span>
<p><!-- spacer --></p>
{% endif %}
<span>Sort by
<a class="merge_params" href="?orderby=published">Date</a> <a class="merge_params" href="?orderby=published">Date</a>
<a class="merge_params" href="?orderby=duration">Duration</a> <a class="merge_params" href="?orderby=duration">Duration</a>
<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>
</div>
<div id="toolbox_right">
{% if channel is not none %}
<button class="red_button button_with_confirm"
data-prompt="Delete channel and all videos?"
data-onclick="delete_channel_form();"
>Delete Channel</button>
{% endif %}
</div> </div>
<p><!-- spacer --></p>
<div id="video_cards"> <div id="video_cards">
<center><input disabled class="enable_on_pageload" type="text" id="search_filter"/></center> <center><input disabled class="enable_on_pageload" type="text" id="search_filter"/></center>
@ -290,8 +254,31 @@ https://stackoverflow.com/a/35153397
</div> </div>
</div> </div>
{% endfor %} {% endfor %}
</div> <!-- video_cards -->
</div> <!-- tab-videos -->
{% if channel is not none %}
<div class="tab" data-tab-title="Settings">
<div>
New videos are:
<select onchange="set_automark_hook(event)">
<option value="pending" {{"selected" if channel.automark == "pending" else ""}} >pending</option>
<option value="downloaded" {{"selected" if channel.automark == "downloaded" else ""}} >downloaded</option>
<option value="ignored" {{"selected" if channel.automark == "ignored" else ""}} >ignored</option>
</select>
<span id="set_automark_spinner" class="hidden">Working...</span>
</div> </div>
<p><!-- spacer --></p>
<button class="red_button button_with_confirm"
data-prompt="Delete channel and all videos?"
data-onclick="delete_channel_form();"
>Delete Channel</button>
</div> <!-- tab-settings -->
{% endif %}
</div> <!-- tabbed_container -->
</div> </div>
</body> </body>