Fix mobile styling (#36)

* Fix mobile styling * Add to footer
aurora-dot · Jul 20, 2024 · 5d3ae83 · 5d3ae83
1 parent fb656af
commit 5d3ae83
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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>