mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-04 19:30:13 +00:00
simplify the subscribe buttons
This commit is contained in:
parent
4915aa0c11
commit
f7fce001c4
@ -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",
|
||||||
}
|
}
|
||||||
),
|
),
|
||||||
)
|
)
|
||||||
|
@ -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 %}
|
||||||
|
@ -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 %}
|
||||||
|
@ -517,7 +517,7 @@ class PlaylistView(ArchivistResultsView):
|
|||||||
self.context.update(
|
self.context.update(
|
||||||
{
|
{
|
||||||
"title": "Playlists",
|
"title": "Playlists",
|
||||||
"subscribe_form": SubscribeToChannelForm(),
|
"subscribe_form": SubscribeToPlaylistForm(),
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user