mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-22 03:40:14 +00:00
style and toggle hide overwrite form
This commit is contained in:
parent
8d1d09e698
commit
d5cd90eb34
@ -54,35 +54,43 @@
|
|||||||
<p>Watched: <button title="Mark all videos from {{ channel_info.channel_name }} as watched" type="button" id="watched-button" data-id="{{ channel_info.channel_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p>
|
<p>Watched: <button title="Mark all videos from {{ channel_info.channel_name }} as watched" type="button" id="watched-button" data-id="{{ channel_info.channel_id }}" onclick="isWatchedButton(this)">Mark as watched</button></p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<a href="/playlist/?search={{ channel_info.channel_id }}" title="Show all playlists belonging to {{ channel_info.channel_name }}"><button>Show Playlists</button></a>
|
<a href="/playlist/?search={{ channel_info.channel_id }}" title="Show all playlists belonging to {{ channel_info.channel_name }}"><button>Show Playlists</button></a>
|
||||||
|
<button {% if channel_info.channel_overwrites %} class="danger-button"{% endif %} onclick="showOverwrite()">Overwrites Settings</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-box">
|
<div id="overwrite-form" class="info-box{% if not channel_info.channel_overwrites %} hidden-overwrite{% endif %}">
|
||||||
<div class="info-box-item">
|
<div class="info-box-item">
|
||||||
<form action="/channel/{{ channel_info.channel_id }}/" method="POST">
|
<form class="overwrite-form" action="/channel/{{ channel_info.channel_id }}/" method="POST">
|
||||||
{% csrf_token %}
|
{% csrf_token %}
|
||||||
<p>Download format: <span class="settings-current">
|
<div class="overwrite-form-item">
|
||||||
{% if channel_info.channel_overwrites.download_format %}
|
<p>Download format: <span class="settings-current">
|
||||||
{{ channel_info.channel_overwrites.download_format }}
|
{% if channel_info.channel_overwrites.download_format %}
|
||||||
{% else %}
|
{{ channel_info.channel_overwrites.download_format }}
|
||||||
False
|
{% else %}
|
||||||
{% endif %}</span></p>
|
False
|
||||||
{{ channel_overwrite_form.download_format }}<br>
|
{% endif %}</span></p>
|
||||||
<p>Auto delete videos after x days: <span class="settings-current">
|
{{ channel_overwrite_form.download_format }}<br>
|
||||||
{% if channel_info.channel_overwrites.autodelete_days %}
|
</div>
|
||||||
{{ channel_info.channel_overwrites.autodelete_days }}
|
<div class="overwrite-form-item">
|
||||||
{% else %}
|
<p>Auto delete videos after x days: <span class="settings-current">
|
||||||
False
|
{% if channel_info.channel_overwrites.autodelete_days %}
|
||||||
{% endif %}</span></p>
|
{{ channel_info.channel_overwrites.autodelete_days }}
|
||||||
{{ channel_overwrite_form.autodelete_days }}<br>
|
{% else %}
|
||||||
<p>Index playlists: <span class="settings-current">
|
False
|
||||||
{% if channel_info.channel_overwrites.index_playlists %}
|
{% endif %}</span></p>
|
||||||
{{ channel_info.channel_overwrites.index_playlists }}
|
{{ channel_overwrite_form.autodelete_days }}<br>
|
||||||
{% else %}
|
</div>
|
||||||
False
|
<div class="overwrite-form-item">
|
||||||
{% endif %}</span></p>
|
<p>Index playlists: <span class="settings-current">
|
||||||
{{ channel_overwrite_form.index_playlists }}<br>
|
{% if channel_info.channel_overwrites.index_playlists %}
|
||||||
<button type="submit">Save</button>
|
{{ channel_info.channel_overwrites.index_playlists }}
|
||||||
|
{% else %}
|
||||||
|
False
|
||||||
|
{% endif %}</span></p>
|
||||||
|
{{ channel_overwrite_form.index_playlists }}<br>
|
||||||
|
</div>
|
||||||
|
<div class="overwrite-form-item"></div>
|
||||||
|
<button type="submit">Save Channel Overwrites</button>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -566,6 +566,28 @@ button:hover {
|
|||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.overwrite-form {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overwrite-form button {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overwrite-form-item {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overwrite-form-item input {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden-overwrite {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* login */
|
/* login */
|
||||||
.login-page {
|
.login-page {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1062,7 +1084,10 @@ button:hover {
|
|||||||
.channel-list.grid,
|
.channel-list.grid,
|
||||||
.video-item.list,
|
.video-item.list,
|
||||||
.playlist-list.list,
|
.playlist-list.list,
|
||||||
.playlist-list.grid {
|
.playlist-list.grid,
|
||||||
|
.info-box-2,
|
||||||
|
.info-box-3,
|
||||||
|
.overwrite-form {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
.playlist-item.list {
|
.playlist-item.list {
|
||||||
@ -1101,10 +1126,6 @@ button:hover {
|
|||||||
.sort select {
|
.sort select {
|
||||||
margin: unset;
|
margin: unset;
|
||||||
}
|
}
|
||||||
.info-box-2,
|
|
||||||
.info-box-3 {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
}
|
|
||||||
.description-box {
|
.description-box {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
@ -883,6 +883,15 @@ function showForm() {
|
|||||||
animate('animate-icon', 'pulse-img');
|
animate('animate-icon', 'pulse-img');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function showOverwrite() {
|
||||||
|
var overwriteDiv = document.getElementById("overwrite-form");
|
||||||
|
if (overwriteDiv.classList.contains("hidden-overwrite")) {
|
||||||
|
overwriteDiv.classList.remove("hidden-overwrite");
|
||||||
|
} else {
|
||||||
|
overwriteDiv.classList.add("hidden-overwrite")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function animate(elementId, animationClass) {
|
function animate(elementId, animationClass) {
|
||||||
var toAnimate = document.getElementById(elementId);
|
var toAnimate = document.getElementById(elementId);
|
||||||
if (toAnimate.className !== animationClass) {
|
if (toAnimate.className !== animationClass) {
|
||||||
|
Loading…
Reference in New Issue
Block a user