Added styles.css to .gitignore. Added focus-visible duplicate to each…

… hover in templates.

.gitignore

@@ -3,3 +3,4 @@ __pycache__/
 *.py[cod]
 db.sqlite3
 media/audio_files/
+theme/static/css/dist/styles.css

audioapp/forms.py

@@ -15,9 +15,9 @@ class Meta:
         widgets = {
             "text": forms.Textarea(
                 attrs={
-                    "rows": 5,  # Number of rows
-                    "cols": 30,  # Number of columns
-                    "class": "w-full p-2 border border-gray-300 rounded",  # Tailwind CSS classes
+                    "rows": 5,
+                    "cols": 30,  
+                    "class": "w-full p-2 border border-gray-300 rounded",
                     "placeholder": "Write your comment here...",
                 }
             ),

audioapp/templates/audioapp/base.html

@@ -9,19 +9,19 @@
     <header class="bg-white shadow">
         <nav class="container mx-auto flex justify-between items-center p-4">
             <div class="flex items-center space-x-4">
-                <a href="{% url 'for_you' %}" class="text-blue-500 hover:text-blue-700">For You</a>
-                <a href="{% url 'upload_audio' %}" class="text-blue-500 hover:text-blue-700">Upload Sound</a>
+                <a href="{% url 'for_you' %}" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">For You</a>
+                <a href="{% url 'upload_audio' %}" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">Upload Sound</a>
             </div>
             <div class="flex items-center space-x-4">
                 {% if user.is_authenticated %}
-                    <a href="{% url 'profile' %}" class="text-blue-500 hover:text-blue-700">{{ user.username }}</a>
+                    <a href="{% url 'profile' %}" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">{{ user.username }}</a>
                     <form method="post" action="{% url 'account_logout' %}" class="inline">
                         {% csrf_token %}
-                        <button type="submit" class="text-blue-500 hover:text-blue-700">Sign Out</button>
+                        <button type="submit" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">Sign Out</button>
                     </form>
                 {% else %}
-                    <a href="{% url 'account_login' %}" class="text-blue-500 hover:text-blue-700">Sign In</a>
-                    <a href="{% url 'account_signup' %}" class="text-blue-500 hover:text-blue-700">Sign Up</a>
+                    <a href="{% url 'account_login' %}" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">Sign In</a>
+                    <a href="{% url 'account_signup' %}" class="text-blue-500 hover:text-blue-700 focus-visible:text-blue-700">Sign Up</a>
                 {% endif %}
             </div>
         </nav>

audioapp/templates/audioapp/for_you.html

@@ -6,7 +6,7 @@ <h1 class="text-2xl font-bold text-center my-8">For You</h1>
         <div class="flex items-center space-x-4">
             <h2 id="audio-title" class="text-xl font-bold">{{ audio_file.title }}</h2>
             <p id="audio-username" class="text-sm text-gray-600">
-                By <a id="audio-user-link" href="{% url 'user_detail' audio_file.user.username %}" class="text-sm text-gray-600 hover:underline">{{ audio_file.user.username }}</a>
+                By <a id="audio-user-link" href="{% url 'user_detail' audio_file.user.username %}" class="text-sm text-gray-600 hover:underline focus-visible:underline">{{ audio_file.user.username }}</a>
             </p>            
         </div>
         <div class="flex items-center space-x-4 ml-auto">
@@ -57,11 +57,11 @@ <h2 class="text-xl font-bold">Comments</h2>
                 {{ field }}
             {% endfor %}
             <div></div>
-            <button type="submit" name="action" value="comment" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700">Comment</button>
+            <button type="submit" name="action" value="comment" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-700 focus-visible:bg-blue-700">Comment</button>
         </form>
         <ul id="comments-list">
             {% for comment in comments %}
-                <li><a href="{% url 'user_detail' comment.user.username %}" class="text-m text-black-600 hover:underline">{{ comment.user.username }}</a>: {{ comment.text }}</li>
+                <li><a href="{% url 'user_detail' comment.user.username %}" class="text-m text-black-600 hover:underline focus-visible:underline">{{ comment.user.username }}</a>: {{ comment.text }}</li>
             {% endfor %}
         </ul>
     {% else %}
@@ -117,7 +117,7 @@ <h2 class="text-xl font-bold">Comments</h2>
 
                         var userLink = document.createElement('a');
                         userLink.href = comment.profile_url;
-                        userLink.className = 'text-m text-black-600 hover:underline';
+                        userLink.className = 'text-m text-black-600 hover:underline focus-visible:underline';
                         userLink.textContent = comment.user;
 
                         li.appendChild(userLink);

audioapp/views.py

@@ -125,14 +125,15 @@ def handle_comment(request, audio_file):
             comment.save()
 
     def handle_like(request, audio_file):
-        if not has_liked(request, audio_file):
+        if has_liked(request, audio_file):
+            Like.objects.filter(user=request.user, audio_file=audio_file).delete()
+        else:
             like, created = Like.objects.get_or_create(
                 user=request.user, audio_file=audio_file
             )
             if created:
                 print("Like created:", like)
-        else:
-            Like.objects.filter(user=request.user, audio_file=audio_file).delete()
+
 
     def has_liked(request, audio_file):
         return Like.objects.filter(user=request.user, audio_file=audio_file).exists()