From d5cd90eb34dfcc60c76739a33f28517377a28f89 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Thu, 24 Mar 2022 15:43:15 +0700
Subject: [PATCH] style and toggle hide overwrite form

---
 .../home/templates/home/channel_id.html       | 56 +++++++++++--------
 tubearchivist/static/css/style.css            | 31 ++++++++--
 tubearchivist/static/script.js                |  9 +++
 3 files changed, 67 insertions(+), 29 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index b372237..11994d7 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -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>
                 {% endif %}
                 <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 class="info-box">
+    <div id="overwrite-form" class="info-box{% if not channel_info.channel_overwrites %} hidden-overwrite{% endif %}">
         <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 %}
-                <p>Download format: <span class="settings-current">
-                    {% if channel_info.channel_overwrites.download_format %}
-                        {{ channel_info.channel_overwrites.download_format }}
-                    {% else %}
-                        False
-                    {% endif %}</span></p>
-                {{ channel_overwrite_form.download_format }}<br>
-                <p>Auto delete videos after x days: <span class="settings-current">
-                    {% if channel_info.channel_overwrites.autodelete_days %}
-                        {{ channel_info.channel_overwrites.autodelete_days }}
-                    {% else %}
-                        False
-                    {% endif %}</span></p>
-                {{ channel_overwrite_form.autodelete_days }}<br>
-                <p>Index playlists: <span class="settings-current">
-                    {% if channel_info.channel_overwrites.index_playlists %}
-                        {{ channel_info.channel_overwrites.index_playlists }}
-                    {% else %}
-                        False
-                    {% endif %}</span></p>
-                {{ channel_overwrite_form.index_playlists }}<br>
-                <button type="submit">Save</button>
+                <div class="overwrite-form-item">
+                    <p>Download format: <span class="settings-current">
+                        {% if channel_info.channel_overwrites.download_format %}
+                            {{ channel_info.channel_overwrites.download_format }}
+                        {% else %}
+                            False
+                        {% endif %}</span></p>
+                    {{ channel_overwrite_form.download_format }}<br>
+                </div>
+                <div class="overwrite-form-item">
+                    <p>Auto delete videos after x days: <span class="settings-current">
+                        {% if channel_info.channel_overwrites.autodelete_days %}
+                            {{ channel_info.channel_overwrites.autodelete_days }}
+                        {% else %}
+                            False
+                        {% endif %}</span></p>
+                    {{ channel_overwrite_form.autodelete_days }}<br>
+                </div>
+                <div class="overwrite-form-item">
+                    <p>Index playlists: <span class="settings-current">
+                        {% if channel_info.channel_overwrites.index_playlists %}
+                            {{ 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>
         </div>
     </div>
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 43bd4f9..0ddf32c 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -566,6 +566,28 @@ button:hover {
     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-page {
     display: flex;
@@ -1062,7 +1084,10 @@ button:hover {
     .channel-list.grid,
     .video-item.list,
     .playlist-list.list,
-    .playlist-list.grid {
+    .playlist-list.grid,
+    .info-box-2,
+    .info-box-3,
+    .overwrite-form {
         grid-template-columns: 1fr;
     }
     .playlist-item.list {
@@ -1101,10 +1126,6 @@ button:hover {
     .sort select {
         margin: unset;
     }
-    .info-box-2,
-    .info-box-3 {
-        grid-template-columns: 1fr;
-    }
     .description-box {
         display: block;
     }
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 3f3a348..bc9696d 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -883,6 +883,15 @@ function showForm() {
     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) {
     var toAnimate = document.getElementById(elementId);
     if (toAnimate.className !== animationClass) {