From f6159a48d5f1d2a772ab8bb572087dcd4ba6c9c4 Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Thu, 16 Dec 2021 18:28:52 +0700
Subject: [PATCH] change sub and unsub to colored toggle button

---
 tubearchivist/home/templates/home/channel.html   |  8 +++-----
 .../home/templates/home/channel_id.html          | 16 +++++++---------
 tubearchivist/home/templates/home/playlist.html  | 12 +++++-------
 .../home/templates/home/playlist_id.html         |  4 ++--
 tubearchivist/static/css/style.css               |  8 ++++++++
 5 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index 88edc1a..c09efcc 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -80,13 +80,11 @@
                     <div class="info-box-item">
                         <div>
                             <p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
-                            <p>Subscribed: 
-                            {% if channel.source.channel_subscribed %}
-                                <button type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
+                            <p>{% 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 %}</p>
                         </div>
                     </div>
                 </div>
diff --git a/tubearchivist/home/templates/home/channel_id.html b/tubearchivist/home/templates/home/channel_id.html
index 12a9247..d99d3cf 100644
--- a/tubearchivist/home/templates/home/channel_id.html
+++ b/tubearchivist/home/templates/home/channel_id.html
@@ -16,22 +16,20 @@
             <div>
                 <h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
                 {% if channel_info.channel_subs >= 1000000 %}
-                    <span>Subscribers: {{ channel_info.channel_subs|intword }}</span>
+                    <p>Subscribers: {{ channel_info.channel_subs|intword }}</p>
                 {% else %}
-                    <span>Subscribers: {{ channel_info.channel_subs|intcomma }}</span>
+                    <p>Subscribers: {{ channel_info.channel_subs|intcomma }}</p>
+                {% endif %}
+                {% if channel_info.channel_subscribed %}
+                    <button class="unsubscribe" type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
+                {% else %}
+                    <button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
                 {% endif %}
             </div>
         </div>
         <div class="info-box-item">
             <div>
                 <p>Last refreshed: {{ channel_info.channel_last_refresh }}</p>
-                <p>Subscribed: 
-                {% if channel_info.channel_subscribed %}
-                    <button type="button" id="{{ channel_info.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel_info.channel_name }}">Unsubscribe</button>
-                {% else %}
-                    <button type="button" id="{{ channel_info.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel_info.channel_name }}">Subscribe</button>
-                {% endif %}
-                </p>
                 {% if channel_info.channel_active %}
                     <p>Youtube: <a href="https://www.youtube.com/channel/{{ channel_info.channel_id }}" target="_blank">Active</a></p>
                 {% else %}
diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index 91ab87d..9959919 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -65,13 +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>Subscribed: 
-                        {% if playlist.source.playlist_subscribed %}
-                            <button 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>
+                    <p>{% 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>
                 </div>
             </div>
             {% endfor %}
diff --git a/tubearchivist/home/templates/home/playlist_id.html b/tubearchivist/home/templates/home/playlist_id.html
index 25e2793..cfa32d3 100644
--- a/tubearchivist/home/templates/home/playlist_id.html
+++ b/tubearchivist/home/templates/home/playlist_id.html
@@ -25,9 +25,9 @@
         <div class="info-box-item">
             <div>
                 <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
-                <p>Subscribed: 
+                <p>Playlist: 
                     {% if playlist_info.playlist_subscribed %}
-                        <button 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 %}
                         <button type="button" id="{{ playlist_info.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist_info.playlist_name }}">Subscribe</button>
                     {% endif %}
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 72fabf7..75bcd4d 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -102,6 +102,14 @@ button:hover {
     color: var(--main-bg);
 }
 
+.unsubscribe {
+    background-color: var(--accent-font-light);
+}
+
+.unsubscribe:hover {
+    background-color: var(--accent-font-dark);
+}
+
 .boxed-content {
     max-width: 1000px;
     width: 80%;