fix styling of sub unsub frontent feedback with span tag

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>

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 %}

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: 
+                <p>Playlist:</p>
-                    {% if playlist_info.playlist_subscribed %}
+                {% 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>
+                    <button class="unsubscribe" type="button" id="{{ playlist_info.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist_info.playlist_name }}">Unsubscribe</button>
-                    {% else %}
+                {% else %}
-                        <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
+                    <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
-                    {% endif %}
+                {% endif %}
-                </p>
                 {% 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 %}

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

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