simplify the subscribe buttons

This commit is contained in:
simon 2022-01-01 17:25:57 +07:00
parent 4915aa0c11
commit f7fce001c4
No known key found for this signature in database
GPG Key ID: 2C15AA5E89985DD4
5 changed files with 38 additions and 27 deletions

View File

@ -116,7 +116,7 @@ class SubscribeToChannelForm(forms.Form):
"""text area form to subscribe to multiple channels""" """text area form to subscribe to multiple channels"""
subscribe = forms.CharField( subscribe = forms.CharField(
label=False, label="Subscribe to channels",
widget=forms.Textarea( widget=forms.Textarea(
attrs={ attrs={
"rows": 3, "rows": 3,
@ -130,11 +130,11 @@ class SubscribeToPlaylistForm(forms.Form):
"""text area form to subscribe to multiple playlists""" """text area form to subscribe to multiple playlists"""
subscribe = forms.CharField( subscribe = forms.CharField(
label=False, label="Subscribe to playlists",
widget=forms.Textarea( widget=forms.Textarea(
attrs={ attrs={
"rows": 3, "rows": 3,
"placeholder": "Input playlist IDs", "placeholder": "Input playlist IDs or URLs",
} }
), ),
) )

View File

@ -3,14 +3,12 @@
{% load humanize %} {% load humanize %}
{% block content %} {% block content %}
<div class="boxed-content"> <div class="boxed-content">
<div class="title-bar"> <div class="title-split">
<h1>Channels</h1> <div class="title-bar">
</div> <h1>Channels</h1>
<div id="notifications" data="channel"></div> </div>
<div class="info-box info-box-2"> <div class="title-split-form">
<div class="icon-text"> <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<p>Subscribe to Channels</p>
<div class="show-form"> <div class="show-form">
<form id="hidden-form" action="/channel/" method="post"> <form id="hidden-form" action="/channel/" method="post">
{% csrf_token %} {% csrf_token %}
@ -20,9 +18,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="notifications" data="channel"></div>
<div class="view-controls"> <div class="view-controls">
<div class="toggle"> <div class="toggle">
<span>Show only subscribed channels:</span> <span>Show subscribed only:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}> <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
{% if show_subed_only %} {% if show_subed_only %}

View File

@ -2,14 +2,12 @@
{% load static %} {% load static %}
{% block content %} {% block content %}
<div class="boxed-content"> <div class="boxed-content">
<div class="title-bar"> <div class="title-split">
<h1>Playlists</h1> <div class="title-bar">
</div> <h1>Playlists</h1>
<div id="notifications" data="playlist"></div> </div>
<div class="info-box info-box-2"> <div class="title-split-form">
<div class="icon-text"> <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
<img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
<p>Subscribe to Playlist</p>
<div class="show-form"> <div class="show-form">
<form id="hidden-form" action="/playlist/" method="post"> <form id="hidden-form" action="/playlist/" method="post">
{% csrf_token %} {% csrf_token %}
@ -19,9 +17,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="notifications" data="playlist"></div>
<div class="view-controls"> <div class="view-controls">
<div class="toggle"> <div class="toggle">
<span>Show only subscribed playlists:</span> <span>Show subscribed only:</span>
<div class="toggleBox"> <div class="toggleBox">
<input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}> <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
{% if show_subed_only %} {% if show_subed_only %}

View File

@ -517,7 +517,7 @@ class PlaylistView(ArchivistResultsView):
self.context.update( self.context.update(
{ {
"title": "Playlists", "title": "Playlists",
"subscribe_form": SubscribeToChannelForm(), "subscribe_form": SubscribeToPlaylistForm(),
} }
) )

View File

@ -275,7 +275,7 @@ button:hover {
.sort { .sort {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-content: center; align-items: center;
} }
.padding-box { .padding-box {
@ -467,6 +467,23 @@ button:hover {
/* info box */ /* info box */
.title-split {
display: grid;
grid-template-columns: 1fr 1fr;
}
.title-split img {
width: 40px;
filter: var(--img-filter);
cursor: pointer;
margin: 0 10px;
}
.title-split-form {
padding-top: 30px;
display: flex;
}
.info-box { .info-box {
display: grid; display: grid;
grid-gap: 1rem; grid-gap: 1rem;
@ -505,10 +522,6 @@ button:hover {
margin-bottom: 10px; margin-bottom: 10px;
} }
.sort span {
width: 100%;
}
/* login */ /* login */
.login-page { .login-page {
display: flex; display: flex;