style and toggle hide overwrite form

This commit is contained in:
simon 2022-03-24 15:43:15 +07:00
parent 8d1d09e698
commit d5cd90eb34
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
3 changed files with 67 additions and 29 deletions

View File

@ -54,13 +54,15 @@
<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 %}
<div class="overwrite-form-item">
<p>Download format: <span class="settings-current"> <p>Download format: <span class="settings-current">
{% if channel_info.channel_overwrites.download_format %} {% if channel_info.channel_overwrites.download_format %}
{{ channel_info.channel_overwrites.download_format }} {{ channel_info.channel_overwrites.download_format }}
@ -68,6 +70,8 @@
False False
{% endif %}</span></p> {% endif %}</span></p>
{{ channel_overwrite_form.download_format }}<br> {{ channel_overwrite_form.download_format }}<br>
</div>
<div class="overwrite-form-item">
<p>Auto delete videos after x days: <span class="settings-current"> <p>Auto delete videos after x days: <span class="settings-current">
{% if channel_info.channel_overwrites.autodelete_days %} {% if channel_info.channel_overwrites.autodelete_days %}
{{ channel_info.channel_overwrites.autodelete_days }} {{ channel_info.channel_overwrites.autodelete_days }}
@ -75,6 +79,8 @@
False False
{% endif %}</span></p> {% endif %}</span></p>
{{ channel_overwrite_form.autodelete_days }}<br> {{ channel_overwrite_form.autodelete_days }}<br>
</div>
<div class="overwrite-form-item">
<p>Index playlists: <span class="settings-current"> <p>Index playlists: <span class="settings-current">
{% if channel_info.channel_overwrites.index_playlists %} {% if channel_info.channel_overwrites.index_playlists %}
{{ channel_info.channel_overwrites.index_playlists }} {{ channel_info.channel_overwrites.index_playlists }}
@ -82,7 +88,9 @@
False False
{% endif %}</span></p> {% endif %}</span></p>
{{ channel_overwrite_form.index_playlists }}<br> {{ channel_overwrite_form.index_playlists }}<br>
<button type="submit">Save</button> </div>
<div class="overwrite-form-item"></div>
<button type="submit">Save Channel Overwrites</button>
</form> </form>
</div> </div>
</div> </div>

View File

@ -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;
} }

View File

@ -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) {