From 5d3ae83d3bd4ae8876a75bcec60026ca14d4a575 Mon Sep 17 00:00:00 2001
From: E <e@pastel.codes>
Date: Sat, 20 Jul 2024 12:27:55 +0100
Subject: [PATCH] Fix mobile styling (#36)

* Fix mobile styling

* Add to footer
---
 app/forms.py                             |  2 +-
 app/templates/app/components/footer.html | 10 +++++--
 app/templates/app/query.html             | 36 +++++++++++++-----------
 3 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/app/forms.py b/app/forms.py
index ab0c1f7..f17c444 100644
--- a/app/forms.py
+++ b/app/forms.py
@@ -10,7 +10,7 @@ class Meta:
         widgets = {
             "query": forms.TextInput(
                 attrs={
-                    "class": "w-1/2 border-0 rounded-full p-2 pl-3 pl-r ring-1 ring-inset ring-gray-500 focus:ring-purple-500 hover:ring-purple-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset",
+                    "class": "sm:w-1/2 w-full border-0 rounded-full p-2 pl-3 pl-r ring-1 ring-inset ring-gray-500 focus:ring-purple-500 hover:ring-purple-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset",
                     "required": "true",
                     "placeholder": "Search...",
                 }
diff --git a/app/templates/app/components/footer.html b/app/templates/app/components/footer.html
index d491729..48c6735 100644
--- a/app/templates/app/components/footer.html
+++ b/app/templates/app/components/footer.html
@@ -1,7 +1,13 @@
-<footer class="flex justify-center py-4">
-  <p class="text-xs text-gray-500">
+<footer class="flex justify-center pb-4 pt-8 space-x-4 text-xs text-gray-500">
+  <p>
     GitHub:
     <a class="text-purple-500 underline"
        href="https://github.com/aurora-dot">aurora-dot</a>
   </p>
+  <p>/</p>
+  <p>
+    Source:
+    <a class="text-purple-500 underline"
+       href="https://github.com/aurora-dot/NotifyTube">NotifyTube</a>
+  </p>
 </footer>
diff --git a/app/templates/app/query.html b/app/templates/app/query.html
index 7032d89..fd253d5 100644
--- a/app/templates/app/query.html
+++ b/app/templates/app/query.html
@@ -9,30 +9,32 @@
     <p class="py-4 text-center text-xl text-green-600">Success!</p>
   {% else %}
     <div class="flex justify-center pt-8 pb-16">
-      <div class="flex flex-col py-12 ring-1 ring-gray-200 rounded-md shadow-lg w-10/12 justify-center">
-        <p class="text-center text-gray-600 font-semibold mb-3">Subscribe to email notifications</p>
+      <div class="flex flex-col sm:py-12 py-8 ring-1 ring-gray-200 rounded-md shadow-lg w-10/12 justify-center">
+        <p class="text-center text-gray-600 font-semibold sm:mb-3 mb-8">Subscribe to email notifications</p>
         <form action="{% url "app:query" object_list.0.youtube_query.query %}"
               method="post"
-              class="justify-center flex flex-row space-x-6 text-sm">
+              class="justify-center flex sm:flex-row flex-col sm:space-x-6 sm:space-y-0 space-y-6 sm:px-3 px-3 text-sm">
           {% for field in email_form %}
-            {% csrf_token %}
-            <div class="flex {% if forloop.last %}w-1/2{% endif %} flex-row items-center">
+            <div class="flex  ml-0 {% if forloop.last %}sm:w-1/2{% endif %} flex-row items-center">
               <label class="pr-4" for="{{ field.auto_id }}">{{ field.label }}:</label>
               {{ field }}
             </div>
           {% endfor %}
-          <button type="submit"
-                  class="rounded-full p-2 ring-1 ring-inset ring-gray-400 hover:ring-purple-500 active:ring-2"
-                  aria-label="submit">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 fill="none"
-                 viewBox="0 0 24 24"
-                 stroke-width="1.5"
-                 stroke="currentColor"
-                 class="size-5 text-gray-500">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
-            </svg>
-          </button>
+          <div class="flex items-center justify-center">
+            <button type="submit"
+                    class="rounded-full p-2 ring-1 ring-inset ring-gray-400 hover:ring-purple-500 active:ring-2"
+                    aria-label="submit">
+              <svg xmlns="http://www.w3.org/2000/svg"
+                   fill="none"
+                   viewBox="0 0 24 24"
+                   stroke-width="1.5"
+                   stroke="currentColor"
+                   class="size-5 text-gray-500">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
+              </svg>
+            </button>
+          </div>
+          {% csrf_token %}
         </form>
       </div>
     </div>