change sub and unsub to colored toggle button

This commit is contained in:
simon 2021-12-16 18:28:52 +07:00
parent ada2c1fe59
commit f6159a48d5
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
5 changed files with 25 additions and 23 deletions

View File

@ -80,13 +80,11 @@
<div class="info-box-item"> <div class="info-box-item">
<div> <div>
<p>Last refreshed: {{ channel.source.channel_last_refresh }}</p> <p>Last refreshed: {{ channel.source.channel_last_refresh }}</p>
<p>Subscribed: <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>
<button type="button" id="{{ channel.source.channel_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ channel.source.channel_name }}">Unsubscribe</button>
{% else %} {% else %}
<button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button> <button type="button" id="{{ channel.source.channel_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ channel.source.channel_name }}">Subscribe</button>
{% endif %} {% endif %}</p>
</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -16,22 +16,20 @@
<div> <div>
<h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3> <h3><a href="{% url 'channel_id' channel_info.channel_id %}">{{ channel_info.channel_name }}</a></h3>
{% if channel_info.channel_subs >= 1000000 %} {% if channel_info.channel_subs >= 1000000 %}
<span>Subscribers: {{ channel_info.channel_subs|intword }}</span> <p>Subscribers: {{ channel_info.channel_subs|intword }}</p>
{% else %} {% 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 %} {% endif %}
</div> </div>
</div> </div>
<div class="info-box-item"> <div class="info-box-item">
<div> <div>
<p>Last refreshed: {{ channel_info.channel_last_refresh }}</p> <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 %} {% if channel_info.channel_active %}
<p>Youtube: <a href="https://www.youtube.com/channel/{{ channel_info.channel_id }}" target="_blank">Active</a></p> <p>Youtube: <a href="https://www.youtube.com/channel/{{ channel_info.channel_id }}" target="_blank">Active</a></p>
{% else %} {% else %}

View File

@ -65,13 +65,11 @@
<a href="{% url 'channel_id' playlist.source.playlist_channel_id %}"><h3>{{ playlist.source.playlist_channel }}</h3></a> <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> <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>Last refreshed: {{ playlist.source.playlist_last_refresh }}</p>
<p>Subscribed: <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>
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="unsubscribe(this.id)" title="Unsubscribe from {{ playlist.source.playlist_name }}">Unsubscribe</button>
{% else %} {% else %}
<button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button> <button type="button" id="{{ playlist.source.playlist_id }}" onclick="subscribe(this.id)" title="Subscribe to {{ playlist.source.playlist_name }}">Subscribe</button>
{% endif %} {% endif %}</p>
</p>
</div> </div>
</div> </div>
{% endfor %} {% endfor %}

View File

@ -25,9 +25,9 @@
<div class="info-box-item"> <div class="info-box-item">
<div> <div>
<p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p> <p>Last refreshed: {{ playlist_info.playlist_last_refresh }}</p>
<p>Subscribed: <p>Playlist:
{% if playlist_info.playlist_subscribed %} {% 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 %} {% 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 %}

View File

@ -102,6 +102,14 @@ button:hover {
color: var(--main-bg); color: var(--main-bg);
} }
.unsubscribe {
background-color: var(--accent-font-light);
}
.unsubscribe:hover {
background-color: var(--accent-font-dark);
}
.boxed-content { .boxed-content {
max-width: 1000px; max-width: 1000px;
width: 80%; width: 80%;