From 49eb565e2a75afda63b9557db64b94ca4d506f45 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sun, 2 Jan 2022 16:25:05 +0700
Subject: [PATCH] fix sort_by selected attribute and animation toggle

---
 .../home/templates/home/channel.html          |  2 +-
 .../home/templates/home/channel_id.html       | 32 +++++++++----------
 .../home/templates/home/downloads.html        |  2 +-
 tubearchivist/home/templates/home/home.html   | 32 +++++++++----------
 .../home/templates/home/playlist.html         |  2 +-
 tubearchivist/static/css/style.css            |  2 +-
 tubearchivist/static/script.js                |  8 +++--
 7 files changed, 41 insertions(+), 39 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index 8a1a9445..44cda8a2 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -8,7 +8,7 @@
             <h1>Channels</h1>
         </div>
         <div class="title-split-form">
-            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels">
+            <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels">
             <div class="show-form">
                 <form id="hidden-form" action="/channel/" method="post">
                     {% csrf_token %}
diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 199b348a..e88825ef 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -78,23 +78,23 @@
                 {% endif %}
             </div>
         </div>
-        <div class="view-icons">
-            <div class="sort">
-                <div id="hidden-form">
-                    <span>Sort by:</span>
-                    <select name="sort" id="sort" onchange="sortChange(this.value)">
-                        <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
-                        <option value="downloaded" {% if sort_by == "published" %}selected{% endif %}>date downloaded</option>
-                        <option value="views" {% if sort_by == "published" %}selected{% endif %}>views</option>
-                        <option value="likes" {% if sort_by == "published" %}selected{% endif %}>likes</option>
-                    </select>
-                    <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
-                        <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
-                        <option value="desc" {% if sort_order == "desc" %}selected{% endif %}>desc</option>
-                    </select>
-                </div>
+        <div class="sort">
+            <div id="hidden-form">
+                <span>Sort by:</span>
+                <select name="sort" id="sort" onchange="sortChange(this.value)">
+                    <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
+                    <option value="downloaded" {% if sort_by == "downloaded" %}selected{% endif %}>date downloaded</option>
+                    <option value="views" {% if sort_by == "views" %}selected{% endif %}>views</option>
+                    <option value="likes" {% if sort_by == "likes" %}selected{% endif %}>likes</option>
+                </select>
+                <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
+                    <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
+                    <option value="desc" {% if sort_order == "desc" %}selected{% endif %}>desc</option>
+                </select>
             </div>
-            <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()">
+        </div>
+        <div class="view-icons">
+            <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
             <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
         </div>
diff --git a/tubearchivist/home/templates/home/downloads.html b/tubearchivist/home/templates/home/downloads.html
index 10daac90..43fb5ab7 100644
--- a/tubearchivist/home/templates/home/downloads.html
+++ b/tubearchivist/home/templates/home/downloads.html
@@ -17,7 +17,7 @@
             <p>Start download</p>
         </div>
         <div class="icon-text">
-            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
+            <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
             <p>Add to download queue</p>
             <div class="show-form">
                 <form id='hidden-form' action="/downloads/" method="post">
diff --git a/tubearchivist/home/templates/home/home.html b/tubearchivist/home/templates/home/home.html
index a06f186d..f29a15dd 100644
--- a/tubearchivist/home/templates/home/home.html
+++ b/tubearchivist/home/templates/home/home.html
@@ -17,23 +17,23 @@
                 {% endif %}
             </div>
         </div>
-        <div class="view-icons">
-            <div class="sort">
-                <div id="hidden-form">
-                    <span>Sort by:</span>
-                    <select name="sort" id="sort" onchange="sortChange(this.value)">
-                        <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
-                        <option value="downloaded" {% if sort_by == "published" %}selected{% endif %}>date downloaded</option>
-                        <option value="views" {% if sort_by == "published" %}selected{% endif %}>views</option>
-                        <option value="likes" {% if sort_by == "published" %}selected{% endif %}>likes</option>
-                    </select>
-                    <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
-                        <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
-                        <option value="desc" {% if sort_order == "desc" %}selected{% endif %}>desc</option>
-                    </select>
-                </div>
+        <div class="sort">
+            <div id="hidden-form">
+                <span>Sort by:</span>
+                <select name="sort" id="sort" onchange="sortChange(this.value)">
+                    <option value="published" {% if sort_by == "published" %}selected{% endif %}>date published</option>
+                    <option value="downloaded" {% if sort_by == "downloaded" %}selected{% endif %}>date downloaded</option>
+                    <option value="views" {% if sort_by == "views" %}selected{% endif %}>views</option>
+                    <option value="likes" {% if sort_by == "likes" %}selected{% endif %}>likes</option>
+                </select>
+                <select name="sord-order" id="sort-order" onchange="sortChange(this.value)">
+                    <option value="asc" {% if sort_order == "asc" %}selected{% endif %}>asc</option>
+                    <option value="desc" {% if sort_order == "desc" %}selected{% endif %}>desc</option>
+                </select>
             </div>
-            <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()">
+        </div>
+        <div class="view-icons">
+            <img src="{% static 'img/icon-sort.svg' %}" alt="sort-icon" onclick="showForm()" id="animate-icon">
             <img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
             <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
         </div>
diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index b7ddd9be..9711f4bb 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -7,7 +7,7 @@
             <h1>Playlists</h1>
         </div>
         <div class="title-split-form">
-            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
+            <img id="animate-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
             <div class="show-form">
                 <form id="hidden-form" action="/playlist/" method="post">
                     {% csrf_token %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 770fc8fe..d745cc32 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -292,7 +292,7 @@ button:hover {
 
 .view-controls {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr auto auto;
     border-bottom: 2px solid;
     border-color: var(--accent-font-dark);
     margin: 15px 0;
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index f8af4ad7..19f54c17 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -575,15 +575,17 @@ function showForm() {
     var displayStyle = formElement.style.display
     if (displayStyle === "") {
         formElement.style.display = 'block';
-        animate('add-icon', 'pulse-img');
     } else {
         formElement.style.display = "";
-    }
+    };
+    animate('animate-icon', 'pulse-img');
 }
 
 function animate(elementId, animationClass) {
     var toAnimate = document.getElementById(elementId);
     if (toAnimate.className !== animationClass) {
         toAnimate.className = animationClass;
-    }
+    } else {
+        toAnimate.classList.remove(animationClass);
+    };
 }