From 3015e59a296b4ce0a6da5b0c50a8c61045679635 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sat, 18 Dec 2021 16:56:32 +0700
Subject: [PATCH] fix styling of sub unsub frontent feedback with span tag

---
 tubearchivist/home/templates/home/channel.html     |  4 ++--
 tubearchivist/home/templates/home/playlist.html    |  4 ++--
 tubearchivist/home/templates/home/playlist_id.html | 13 ++++++-------
 tubearchivist/static/css/style.css                 |  3 ++-
 tubearchivist/static/script.js                     | 10 ++++++----
 5 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index c09efcc..977dd4c 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -80,11 +80,11 @@
                     <div class="info-box-item">
                         <div>
                             <p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
-                            <p>{% if channel.source.channel_subscribed %}
+                            {% if channel.source.channel_subscribed %}
                                 <button class="unsubscribe" type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
                             {% else %}
                                 <button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
-                            {% endif %}</p>
+                            {% endif %}
                         </div>
                     </div>
                 </div>
diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index 9959919..122705a 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -65,11 +65,11 @@
                     <a href="{% url 'channel_id' playlist.source.playlist_channel_id %}"><h3>{{ playlist.source.playlist_channel }}</h3></a>
                     <a href="{% url 'playlist_id' playlist.source.playlist_id %}"><h2>{{ playlist.source.playlist_name }}</h2></a>
                     <p>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
-                    <p>{% if playlist.source.playlist_subscribed %}
+                    {% if playlist.source.playlist_subscribed %}
                         <button class="unsubscribe" type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
                     {% else %}
                         <button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
-                    {% endif %}</p>
+                    {% endif %}
                 </div>
             </div>
             {% endfor %}
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index cfa32d3..9e176e8 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -25,13 +25,12 @@
         <div class="info-box-item">
             <div>
                 <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
-                <p>Playlist: 
-                    {% if playlist_info.playlist_subscribed %}
-                        <button class="unsubscribe" type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
-                    {% else %}
-                        <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
-                    {% endif %}
-                </p>
+                <p>Playlist:</p>
+                {% if playlist_info.playlist_subscribed %}
+                    <button class="unsubscribe" type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
+                {% else %}
+                    <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
+                {% endif %}
                 {% if playlist_info.playlist_active %}
                     <p>Youtube: <a href="https://www.youtube.com/playlist?list={{ playlist_info.playlist_id }}" target="_blank">Active</a></p>
                 {% else %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 75bcd4d..a01ad4f 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -729,7 +729,8 @@ button:hover {
     align-content: center;
 }
 
-.playlist-desc.list > * {
+.playlist-desc.list > a,
+.playlist-desc.list > p {
     width: 100%;
 }
 
diff --git a/tubearchivist/static/script.js b/tubearchivist/static/script.js
index 6da19c3..62f06aa 100644
--- a/tubearchivist/static/script.js
+++ b/tubearchivist/static/script.js
@@ -46,17 +46,19 @@ function isUnwatched(youtube_id) {
 }
 
 function unsubscribe(id_unsub) {
-    console.log(payload);
     var payload = JSON.stringify({'unsubscribe': id_unsub});
     sendPost(payload);
-    document.getElementById(id_unsub).replaceWith("You are unsubscribed.");
+    var message = document.createElement('span');
+    message.innerText = "You are unsubscribed.";
+    document.getElementById(id_unsub).replaceWith(message);
 }
 
 function subscribe(id_sub) {
     var payload = JSON.stringify({'subscribe': id_sub});
-    console.log(payload);
     sendPost(payload);
-    document.getElementById(id_sub).replaceWith("You are subscribed.");
+    var message = document.createElement('span');
+    message.innerText = "You are subscribed.";
+    document.getElementById(id_sub).replaceWith(message);
 }
 
 function changeView(image) {