ui fixes

apps/main/templates/all_playlists.html

@@ -61,6 +61,22 @@
                                     {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-black-50">YT</span></small> {% endif %}
 
                                 </p>
+                                {% if playlist.tags.all %}
+                                <p class="card-text">
+                                    <span class="d-flex justify-content-start flex-wrap">
+                                        <small>
+                                        <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+                                            <i class="fas fa-tags"></i>
+                                        </span>
+                                        </small>
+                                        {% for tag in playlist.tags.all %}
+                                            <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                                                {{ tag.name }}
+                                            </span>
+                                        {% endfor %}
+                                    </span>
+                                </p>
+                                {% endif %}
                                 <small>
                                     <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                     <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
@@ -82,15 +98,19 @@
                 <div class="d-flex justify-content-center h5">
                     {% if playlist_type == "watching" %}
                         You can mark a playlist as watching by heading over to the playlist and marking it from the dropdown.
+                    {% elif playlist_type == "all" %}
+                        There's no playlists in your UnTube right now.
                     {% elif playlist_type == "imported" %}
                         To import public playlists into your UnTube collection you can head over to <a href="{% url 'manage_playlists' %}" class="btn btn-sm btn-primary ms-2">Manage</a>
                     {% elif playlist_type == "plan-to-watch" %}
                         You can mark a playlist as plan to watch by heading over to the playlist and marking it from the dropdown.
+                    {% elif playlist_type == "favorites" %}
+                        You can mark a playlist as favorite by heading over to the playlist page and pressing the star icon.
                     {% elif playlist_type == "user-owned" %}
                         {% if user.profile.imported_yt_playlists %}
                             Looks like you have no playlists on YouTube.
                         {% else %}
-                            You can always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary">Profile</a> to import all of your public/private YouTube playlists.
+                            You can always head over to your <a href="{% url 'profile' %}" class="btn btn-sm btn-primary p-2">Profile</a> to import all of your public/private YouTube playlists.
                         {% endif %}
                     {% else %}
                         {{ playlist_type }}

apps/main/templates/intercooler/manage_playlists_import_results.html

@@ -57,8 +57,24 @@
                             Playlist ID: <small><span class="badge bg-dark text-white-50">{{ playlist.playlist_id }}</span></small>
 
                         </p>
-                            <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
-                            <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
+                        {% if playlist.tags.all %}
+                                <p class="card-text">
+                                    <span class="d-flex justify-content-start flex-wrap">
+                                        <small>
+                                        <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+                                            <i class="fas fa-tags"></i>
+                                        </span>
+                                        </small>
+                                        {% for tag in playlist.tags.all %}
+                                            <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                                                {{ tag.name }}
+                                            </span>
+                                        {% endfor %}
+                                    </span>
+                                </p>
+                                {% endif %}
+                        <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
+                        <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
                     </div>
                 </a>
             </div>

apps/main/templates/intercooler/playlists.html

@@ -45,6 +45,23 @@
                                     {% if playlist.is_private_on_yt %}<small><span class="badge bg-secondary text-white">Private</span></small> {% endif %}
                                     {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-black-50">YT</span></small> {% endif %}
                                 </p>
+
+                                {% if playlist.tags.all %}
+<p class="card-text">
+    <span class="d-flex justify-content-start flex-wrap">
+        <small>
+        <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+            <i class="fas fa-tags"></i>
+        </span>
+        </small>
+        {% for tag in playlist.tags.all %}
+            <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                {{ tag.name }}
+            </span>
+        {% endfor %}
+    </span>
+</p>
+{% endif %}
                                 <small>
                                     <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} videos</span>
                                     <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>

apps/main/templates/intercooler/search_untube_results.html

@@ -1,4 +1,6 @@
 {% load humanize %}
+
+{% if search_query %}
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
     <h1 class="h2">Playlists <span class="badge bg-primary rounded-pill">{{ playlists.count|default:"0" }}</span></h1>
 </div>
@@ -25,6 +27,22 @@
                                 No description
                             {% endif %}
                         </p>
+                        {% if playlist.tags.all %}
+    <p class="card-text">
+        <span class="d-flex justify-content-start flex-wrap">
+            <small>
+            <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+                <i class="fas fa-tags"></i>
+            </span>
+            </small>
+            {% for tag in playlist.tags.all %}
+                <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                    {{ tag.name }}
+                </span>
+            {% endfor %}
+        </span>
+    </p>
+    {% endif %}
                         <small>
                             <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} views</span>
                             <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
@@ -36,7 +54,7 @@
         {% endfor %}
 
         {% else %}
-        <h5 class="text-white align-content-center">Nothing found :(</h5>
+        <h5 class="text-dark align-content-center">Nothing found :(</h5>
         {% endif %}
     </div>
 </div>
@@ -88,9 +106,64 @@
         {% endfor %}
 
         {% else %}
-        <h5 class="text-white align-content-center">Nothing found :(</h5>
+        <h5 class="text-dark align-content-center">Nothing found :(</h5>
         {% endif %}
     </div>
 </div>
+{% else %}
+{% if all_playlists %}
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">All Playlists <span class="badge bg-primary rounded-pill">{{ all_playlists.count }}</span></h1>
+</div>
+
+<div>
+    <div class="row row-cols-1 row-cols-md-3 g-4">
+        {% for playlist in all_playlists %}
+        <div class="col">
+            <div class="card" style="background-color: #1A4464;">
+                <a style="background-color: #1A4464;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
+
+                    <div class="card-body text-white">
 
+                        <h5 class="card-title">
+                            {{ playlist.name|truncatewords:"15" }}
+                            {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
+                            {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
+                        </h5>
+                        <p class="card-text">
+                            {% if playlist.description %}
+                                {{ playlist.description|truncatewords:"15" }}
+                            {% else %}
+                                No description
+                            {% endif %}
+                        </p>
+                        {% if playlist.tags.all %}
+    <p class="card-text">
+        <span class="d-flex justify-content-start flex-wrap">
+            <small>
+            <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+                <i class="fas fa-tags"></i>
+            </span>
+            </small>
+            {% for tag in playlist.tags.all %}
+                <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                    {{ tag.name }}
+                </span>
+            {% endfor %}
+        </span>
+    </p>
+    {% endif %}
+                        <small>
+                            <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} views</span>
+                            <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
+                        </small>
+                    </div>
+                </a>
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+{% endif %}
+{% endif %}
 <br>

apps/main/templates/playlists_home.html

@@ -107,7 +107,6 @@
     </div>
 </div>
 <br>
-    {% if user.playlist_tags.all %}
     <div class="card bg-dark text-white">
             <div class="card-header">
                 <div class="d-flex justify-content-center">
@@ -116,16 +115,21 @@
             </div>
             <div class="card-body">
                 <div class="d-flex justify-content-evenly h4">
-                    <div class="w-75">
+                    {% if user.playlist_tags.all %}
+                    <div class="w-75 d-flex justify-content-center flex-wrap">
                     {% for tag in user.playlist_tags.all %}
-                        <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none">
-                        <span class="badge rounded-pill bg-warning bg-gradient mb-lg-1 text-black-50">{{ tag.name }} <span class="badge bg-dark text-white">{{ tag.playlists.all.count }}</span> </span>
+                        <a href="{% url 'tagged_playlists' tag.name %}" style="text-decoration: none" class="me-lg-1 mb-lg-1">
+                        <span class="badge rounded-pill bg-warning bg-gradient text-black-50">{{ tag.name }} <span class="badge bg-dark text-white">{{ tag.playlists.all.count }}</span> </span>
                         </a>
                     {% endfor %}
                     </div>
+                    {% else %}
+                        You haven't created any playlist tags yet.
+                    {% endif %}
                 </div>
 
             </div>
+            {% if user.playlist_tags.all %}
             <div class="card-footer">
                 <div class="d-flex justify-content-center">
                     <h3>
@@ -134,7 +138,6 @@
                     </h3>
                 </div>
             </div>
-
+            {% endif %}
     </div>
-    {% endif %}
 {% endblock %}

apps/main/templates/search_untube_page.html

@@ -33,8 +33,8 @@
         <div class="row d-flex justify-content-center">
             <div class="col-md-6">
 
-                <select onchange="triggerSubmit()"
-                     id="choices-multiple-remove-button" name="playlist-tags" placeholder="Add playlist tags" multiple>
+                <select class="visually-hidden" onchange="triggerSubmit()"
+                     id="choices-multiple-remove-button" name="playlist-tags" placeholder="Add playlist tags to search within" multiple>
                     {% for tag in user.playlist_tags.all %}
                     <option value="{{ tag.name }}" hx-post="{% url 'search_UnTube' %}">{{ tag.name }}</option>
                     {% endfor %}
@@ -74,6 +74,60 @@
 </div>
 
     <div id="untube-searchbar-results">
+        {% if user.profile.playlists.all %}
+        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+            <h1 class="h2">All Playlists <span class="badge bg-primary rounded-pill">{{ user.profile.playlists.count }}</span></h1>
+        </div>
+
+        <div>
+            <div class="row row-cols-1 row-cols-md-3 g-4">
+                {% for playlist in user.profile.playlists.all %}
+                <div class="col">
+                    <div class="card" style="background-color: #1A4464;">
+                        <a style="background-color: #1A4464;" href="{% url 'playlist' playlist.playlist_id %}" class="list-group-item list-group-item-action" aria-current="true">
+
+                            <div class="card-body text-white">
+
+                                <h5 class="card-title">
+                                    {{ playlist.name|truncatewords:"15" }}
+                                    {% if playlist.is_private_on_yt %}<small><span class="badge bg-light text-dark">Private</span></small> {% endif %}
+                                    {% if playlist.is_from_yt %}<small><span class="badge bg-danger text-dark">YT</span></small> {% endif %}
+                                </h5>
+                                <p class="card-text">
+                                    {% if playlist.description %}
+                                        {{ playlist.description|truncatewords:"15" }}
+                                    {% else %}
+                                        No description
+                                    {% endif %}
+                                </p>
+                                {% if playlist.tags.all %}
+            <p class="card-text">
+                <span class="d-flex justify-content-start flex-wrap">
+                    <small>
+                    <span style="color: #eed868;" class="me-lg-1 mb-lg-1">
+                        <i class="fas fa-tags"></i>
+                    </span>
+                    </small>
+                    {% for tag in playlist.tags.all %}
+                        <span class="badge rounded-pill bg-info mb-lg-1 me-lg-1 text-black-50">
+                            {{ tag.name }}
+                        </span>
+                    {% endfor %}
+                </span>
+            </p>
+            {% endif %}
+                                <small>
+                                    <span class="badge bg-primary rounded-pill">{{ playlist.video_count }} views</span>
+                                    <span class="badge bg-primary rounded-pill">{{ playlist.playlist_duration }} </span>
+                                </small>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+                {% endfor %}
+            </div>
+        </div>
+        {% endif %}
     </div>
 
 

apps/main/views.py

@@ -142,6 +142,7 @@ def view_playlist(request, playlist_id):
                                                   "unused_tags": unused_tags,
                                                   "videos": videos})
 
+
 @login_required
 def tagged_playlists(request, tag):
     tag = get_object_or_404(Tag, created_by=request.user, name=tag)
@@ -149,6 +150,7 @@ def tagged_playlists(request, tag):
 
     return render(request, 'all_playlists_with_tag.html', {"playlists": playlists, "tag": tag})
 
+
 @login_required
 def all_playlists(request, playlist_type):
     """
@@ -335,6 +337,7 @@ Done! Playlist on UnTube will update in 3s...
         </div>
         """)
 
+
 @login_required
 @require_POST
 def search_tagged_playlists(request, tag):
@@ -343,6 +346,7 @@ def search_tagged_playlists(request, tag):
 
     return HttpResponse("yay")
 
+
 @login_required
 @require_POST
 def search_playlists(request, playlist_type):
@@ -451,11 +455,12 @@ def search_UnTube(request):
                     for v in pl_videos.all():
                         videos.append(v)
 
-
     return HttpResponse(loader.get_template("intercooler/search_untube_results.html")
                         .render({"playlists": playlists,
                                  "videos": videos,
-                                 "videos_count": len(videos)}))
+                                 "videos_count": len(videos),
+                                 "search_query": True if search_query != "" else False,
+                                 "all_playlists": all_playlists}))
 
 
 @login_required
@@ -719,6 +724,7 @@ def update_playlist(request, playlist_id, type):
         {"playlist_changed_text": "\n".join(playlist_changed_text),
          "playlist_id": playlist_id}))
 
+
 @login_required
 def view_playlist_settings(request, playlist_id):
     playlist = request.user.profile.playlists.get(playlist_id=playlist_id)
@@ -733,7 +739,7 @@ def get_playlist_tags(request, playlist_id):
     return HttpResponse(loader.get_template("intercooler/playlist_tags.html")
         .render(
         {"playlist_id": playlist_id,
-            "playlist_tags": playlist_tags}))
+         "playlist_tags": playlist_tags}))
 
 
 def get_unused_playlist_tags(request, playlist_id):
@@ -748,6 +754,7 @@ def get_unused_playlist_tags(request, playlist_id):
         .render(
         {"unused_tags": unused_tags}))
 
+
 @login_required
 @require_POST
 def create_playlist_tag(request, playlist_id):
@@ -771,9 +778,9 @@ def create_playlist_tag(request, playlist_id):
                             Already created. Try Again >w<
                     """)
 
-    #playlist_tags = playlist.tags.all()
+    # playlist_tags = playlist.tags.all()
 
-    #unused_tags = user_created_tags.difference(playlist_tags)
+    # unused_tags = user_created_tags.difference(playlist_tags)
 
     return HttpResponse(f"""
             Created and Added!
@@ -784,7 +791,6 @@ def create_playlist_tag(request, playlist_id):
 @login_required
 @require_POST
 def add_playlist_tag(request, playlist_id):
-
     tag_name = request.POST["playlistTag"]
 
     if tag_name == 'Pick from existing unused tags':
@@ -823,4 +829,3 @@ def remove_playlist_tag(request, playlist_id, tag_name):
         return HttpResponse("Whoops >w<")
 
     return HttpResponse("")
-