From f7fce001c44d1027802efc3958b23ebb4457ec9a Mon Sep 17 00:00:00 2001
From: simon <simobilleter@gmail.com>
Date: Sat, 1 Jan 2022 17:25:57 +0700
Subject: [PATCH] simplify the subscribe buttons

---
 tubearchivist/home/forms.py                   |  6 ++---
 .../home/templates/home/channel.html          | 17 +++++++-------
 .../home/templates/home/playlist.html         | 17 +++++++-------
 tubearchivist/home/views.py                   |  2 +-
 tubearchivist/static/css/style.css            | 23 +++++++++++++++----
 5 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/tubearchivist/home/forms.py b/tubearchivist/home/forms.py
index 5eca965..8750134 100644
--- a/tubearchivist/home/forms.py
+++ b/tubearchivist/home/forms.py
@@ -116,7 +116,7 @@ class SubscribeToChannelForm(forms.Form):
     """text area form to subscribe to multiple channels"""
 
     subscribe = forms.CharField(
-        label=False,
+        label="Subscribe to channels",
         widget=forms.Textarea(
             attrs={
                 "rows": 3,
@@ -130,11 +130,11 @@ class SubscribeToPlaylistForm(forms.Form):
     """text area form to subscribe to multiple playlists"""
 
     subscribe = forms.CharField(
-        label=False,
+        label="Subscribe to playlists",
         widget=forms.Textarea(
             attrs={
                 "rows": 3,
-                "placeholder": "Input playlist IDs",
+                "placeholder": "Input playlist IDs or URLs",
             }
         ),
     )
diff --git a/tubearchivist/home/templates/home/channel.html b/tubearchivist/home/templates/home/channel.html
index 3198143..8a1a944 100644
--- a/tubearchivist/home/templates/home/channel.html
+++ b/tubearchivist/home/templates/home/channel.html
@@ -3,14 +3,12 @@
 {% load humanize %}
 {% block content %}
 <div class="boxed-content">
-    <div class="title-bar">
-        <h1>Channels</h1>
-    </div>
-    <div id="notifications" data="channel"></div>
-    <div class="info-box info-box-2">
-        <div class="icon-text">
-            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
-            <p>Subscribe to Channels</p>
+    <div class="title-split">
+        <div class="title-bar">
+            <h1>Channels</h1>
+        </div>
+        <div class="title-split-form">
+            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Channels">
             <div class="show-form">
                 <form id="hidden-form" action="/channel/" method="post">
                     {% csrf_token %}
@@ -20,9 +18,10 @@
             </div>
         </div>
     </div>
+    <div id="notifications" data="channel"></div>
     <div class="view-controls">
         <div class="toggle">
-            <span>Show only subscribed channels:</span>
+            <span>Show subscribed only:</span>
             <div class="toggleBox">
                 <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
                 {% if show_subed_only %}
diff --git a/tubearchivist/home/templates/home/playlist.html b/tubearchivist/home/templates/home/playlist.html
index 451a09a..b7ddd9b 100644
--- a/tubearchivist/home/templates/home/playlist.html
+++ b/tubearchivist/home/templates/home/playlist.html
@@ -2,14 +2,12 @@
 {% load static %}
 {% block content %}
 <div class="boxed-content">
-    <div class="title-bar">
-        <h1>Playlists</h1>
-    </div>
-    <div id="notifications" data="playlist"></div>
-    <div class="info-box info-box-2">
-        <div class="icon-text">
-            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
-            <p>Subscribe to Playlist</p>
+    <div class="title-split">
+        <div class="title-bar">
+            <h1>Playlists</h1>
+        </div>
+        <div class="title-split-form">
+            <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon" title="Subscribe to Playlists">
             <div class="show-form">
                 <form id="hidden-form" action="/playlist/" method="post">
                     {% csrf_token %}
@@ -19,9 +17,10 @@
             </div>
         </div>
     </div>
+    <div id="notifications" data="playlist"></div>
     <div class="view-controls">
         <div class="toggle">
-            <span>Show only subscribed playlists:</span>
+            <span>Show subscribed only:</span>
             <div class="toggleBox">
                 <input id="show_subed_only" onclick="toggleCheckbox(this)" type="checkbox" {% if show_subed_only %}checked{% endif %}>
                 {% if show_subed_only %}
diff --git a/tubearchivist/home/views.py b/tubearchivist/home/views.py
index 7b33047..d9a4e40 100644
--- a/tubearchivist/home/views.py
+++ b/tubearchivist/home/views.py
@@ -517,7 +517,7 @@ class PlaylistView(ArchivistResultsView):
         self.context.update(
             {
                 "title": "Playlists",
-                "subscribe_form": SubscribeToChannelForm(),
+                "subscribe_form": SubscribeToPlaylistForm(),
             }
         )
 
diff --git a/tubearchivist/static/css/style.css b/tubearchivist/static/css/style.css
index 26a9eff..770fc8f 100644
--- a/tubearchivist/static/css/style.css
+++ b/tubearchivist/static/css/style.css
@@ -275,7 +275,7 @@ button:hover {
 .sort {
     display: flex;
     flex-wrap: wrap;
-    align-content: center;
+    align-items: center;
 }
 
 .padding-box {
@@ -467,6 +467,23 @@ button:hover {
 
 
 /* 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 {
     display: grid;
     grid-gap: 1rem;
@@ -505,10 +522,6 @@ button:hover {
     margin-bottom: 10px;
 }
 
-.sort span {
-    width: 100%;
-}
-
 /* login */
 .login-page {
     display: flex;