From 30b786d51e10df46c072be33718a285013fdfcec Mon Sep 17 00:00:00 2001
From: pacnpal <183241239+pacnpal@users.noreply.github.com>
Date: Thu, 14 Nov 2024 01:02:54 +0000
Subject: [PATCH] Make sign in and registration screens scrollable

- Remove fixed height constraints from main pages
- Add responsive padding
- Add max-height and overflow handling to modals
- Make modal headers sticky
- Improve overall scrolling behavior
---
 templates/account/login.html                 |   4 +-
 templates/account/partials/login_modal.html  |  97 +++---
 templates/account/partials/signup_modal.html | 324 ++++++++++---------
 templates/account/signup.html                |   4 +-
 4 files changed, 216 insertions(+), 213 deletions(-)

diff --git a/templates/account/login.html b/templates/account/login.html
index b1d8c4c4..3b41c43f 100644
--- a/templates/account/login.html
+++ b/templates/account/login.html
@@ -6,8 +6,8 @@
 {% block title %}Login - ThrillWiki{% endblock %}
 
 {% block content %}
-<div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-  <div class="w-full max-w-lg">
+<div class="flex items-center justify-center py-8 md:py-12">
+  <div class="w-full max-w-lg px-4">
     <div class="auth-card">
       <h1 class="auth-title">{% trans "Welcome Back" %}</h1>
 
diff --git a/templates/account/partials/login_modal.html b/templates/account/partials/login_modal.html
index de075452..5b536172 100644
--- a/templates/account/partials/login_modal.html
+++ b/templates/account/partials/login_modal.html
@@ -4,11 +4,10 @@
 
 <div 
   id="login-modal"
-  class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
-  @click.away="document.getElementById('login-modal').remove()"
+  class="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto bg-black/50 backdrop-blur-sm"
 >
-  <div class="w-full max-w-lg p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
-    <div class="flex justify-between mb-4">
+  <div class="w-full max-w-lg my-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 max-h-[90vh] overflow-y-auto">
+    <div class="sticky top-0 flex justify-between p-6 bg-white border-b dark:bg-gray-800 dark:border-gray-700">
       <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans "Welcome Back" %}</h2>
       <button 
         onclick="this.closest('#login-modal').remove()"
@@ -18,53 +17,55 @@
       </button>
     </div>
 
-    {% get_providers as socialaccount_providers %}
-    {% if socialaccount_providers %}
-    <div class="space-y-3">
-      {% for provider in socialaccount_providers %}
-      <a
-        href="{% provider_login_url provider.id process='login' %}"
-        class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
-        role="button"
-        tabindex="0"
-        onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
-      >
-        {% if provider.id == 'google' %}
-        <img
-          src="{% static 'images/google-icon.svg' %}"
-          alt="Google"
-          class="w-5 h-5 mr-3"
-        />
-        <span>Continue with Google</span>
-        {% elif provider.id == 'discord' %}
-        <img
-          src="{% static 'images/discord-icon.svg' %}"
-          alt="Discord"
-          class="w-5 h-5 mr-3"
-        />
-        <span>Continue with Discord</span>
-        {% endif %}
-      </a>
-      {% endfor %}
-    </div>
-
-    <div class="auth-divider">
-      <span>Or continue with email</span>
-    </div>
-    {% endif %}
-
-    {% include "account/partials/login_form.html" %}
-
-    <div class="mt-6 text-sm text-center">
-      <p class="text-gray-600 dark:text-gray-400">
-        {% trans "Don't have an account?" %}
+    <div class="p-6">
+      {% get_providers as socialaccount_providers %}
+      {% if socialaccount_providers %}
+      <div class="space-y-3">
+        {% for provider in socialaccount_providers %}
         <a
-          href="{% url 'account_signup' %}"
-          class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
+          href="{% provider_login_url provider.id process='login' %}"
+          class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
+          role="button"
+          tabindex="0"
+          onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
         >
-          {% trans "Sign up" %}
+          {% if provider.id == 'google' %}
+          <img
+            src="{% static 'images/google-icon.svg' %}"
+            alt="Google"
+            class="w-5 h-5 mr-3"
+          />
+          <span>Continue with Google</span>
+          {% elif provider.id == 'discord' %}
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
+          <span>Continue with Discord</span>
+          {% endif %}
         </a>
-      </p>
+        {% endfor %}
+      </div>
+
+      <div class="auth-divider">
+        <span>Or continue with email</span>
+      </div>
+      {% endif %}
+
+      {% include "account/partials/login_form.html" %}
+
+      <div class="mt-6 text-sm text-center">
+        <p class="text-gray-600 dark:text-gray-400">
+          {% trans "Don't have an account?" %}
+          <a
+            href="{% url 'account_signup' %}"
+            class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
+          >
+            {% trans "Sign up" %}
+          </a>
+        </p>
+      </div>
     </div>
   </div>
 </div>
diff --git a/templates/account/partials/signup_modal.html b/templates/account/partials/signup_modal.html
index 315aaee0..ba2cd68d 100644
--- a/templates/account/partials/signup_modal.html
+++ b/templates/account/partials/signup_modal.html
@@ -5,11 +5,11 @@
 
 <div 
   id="signup-modal"
-  class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
+  class="fixed inset-0 z-50 flex items-center justify-center p-4 overflow-y-auto bg-black/50 backdrop-blur-sm"
   @click.away="document.getElementById('signup-modal').remove()"
 >
-  <div class="w-full max-w-lg p-6 mx-4 bg-white rounded-lg shadow-xl dark:bg-gray-800">
-    <div class="flex justify-between mb-4">
+  <div class="w-full max-w-lg my-auto bg-white rounded-lg shadow-xl dark:bg-gray-800 max-h-[90vh] overflow-y-auto">
+    <div class="sticky top-0 flex justify-between p-6 bg-white border-b dark:bg-gray-800 dark:border-gray-700">
       <h2 class="text-2xl font-bold text-gray-900 dark:text-white">{% trans "Create Account" %}</h2>
       <button 
         onclick="this.closest('#signup-modal').remove()"
@@ -19,178 +19,180 @@
       </button>
     </div>
 
-    {% get_providers as socialaccount_providers %}
-    {% if socialaccount_providers %}
-    <div class="space-y-3">
-      {% for provider in socialaccount_providers %}
-      <a
-        href="{% provider_login_url provider.id process='signup' %}"
-        class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
-        role="button"
-        tabindex="0"
-        onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
-      >
-        {% if provider.id == 'google' %}
-        <img
-          src="{% static 'images/google-icon.svg' %}"
-          alt="Google"
-          class="w-5 h-5 mr-3"
-        />
-        <span>Continue with Google</span>
-        {% elif provider.id == 'discord' %}
-        <img
-          src="{% static 'images/discord-icon.svg' %}"
-          alt="Discord"
-          class="w-5 h-5 mr-3"
-        />
-        <span>Continue with Discord</span>
-        {% endif %}
-      </a>
-      {% endfor %}
-    </div>
+    <div class="p-6">
+      {% get_providers as socialaccount_providers %}
+      {% if socialaccount_providers %}
+      <div class="space-y-3">
+        {% for provider in socialaccount_providers %}
+        <a
+          href="{% provider_login_url provider.id process='signup' %}"
+          class="btn-social {% if provider.id == 'discord' %}btn-discord{% elif provider.id == 'google' %}btn-google{% endif %}"
+          role="button"
+          tabindex="0"
+          onkeydown="if(event.key === 'Enter' || event.key === ' ') { this.click(); event.preventDefault(); }"
+        >
+          {% if provider.id == 'google' %}
+          <img
+            src="{% static 'images/google-icon.svg' %}"
+            alt="Google"
+            class="w-5 h-5 mr-3"
+          />
+          <span>Continue with Google</span>
+          {% elif provider.id == 'discord' %}
+          <img
+            src="{% static 'images/discord-icon.svg' %}"
+            alt="Discord"
+            class="w-5 h-5 mr-3"
+          />
+          <span>Continue with Discord</span>
+          {% endif %}
+        </a>
+        {% endfor %}
+      </div>
 
-    <div class="auth-divider">
-      <span>Or continue with email</span>
-    </div>
-    {% endif %}
-
-    <form 
-      class="space-y-6" 
-      hx-post="{% url 'account_signup' %}"
-      hx-target="this"
-      hx-swap="outerHTML"
-      hx-indicator="#signup-indicator"
-    >
-      {% csrf_token %}
-      {% if form.non_field_errors %}
-      <div class="alert alert-error">
-        <div class="text-sm">{{ form.non_field_errors }}</div>
+      <div class="auth-divider">
+        <span>Or continue with email</span>
       </div>
       {% endif %}
 
-      <div>
-        <label for="id_username" class="form-label">
-          {% trans "Username" %}
-        </label>
-        <input
-          type="text"
-          name="username"
-          id="id_username"
-          required
-          autocomplete="username"
-          class="form-input"
-        />
-        {% if form.username.errors %}
-        <p class="form-error">{{ form.username.errors }}</p>
+      <form 
+        class="space-y-6" 
+        hx-post="{% url 'account_signup' %}"
+        hx-target="this"
+        hx-swap="outerHTML"
+        hx-indicator="#signup-indicator"
+      >
+        {% csrf_token %}
+        {% if form.non_field_errors %}
+        <div class="alert alert-error">
+          <div class="text-sm">{{ form.non_field_errors }}</div>
+        </div>
         {% endif %}
-      </div>
 
-      <div>
-        <label for="id_email" class="form-label">{% trans "Email" %}</label>
-        <input
-          type="email"
-          name="email"
-          id="id_email"
-          required
-          autocomplete="email"
-          class="form-input"
-        />
-        {% if form.email.errors %}
-        <p class="form-error">{{ form.email.errors }}</p>
-        {% endif %}
-      </div>
+        <div>
+          <label for="id_username" class="form-label">
+            {% trans "Username" %}
+          </label>
+          <input
+            type="text"
+            name="username"
+            id="id_username"
+            required
+            autocomplete="username"
+            class="form-input"
+          />
+          {% if form.username.errors %}
+          <p class="form-error">{{ form.username.errors }}</p>
+          {% endif %}
+        </div>
 
-      <div>
-        <label for="id_password1" class="form-label">
-          {% trans "Password" %}
-        </label>
+        <div>
+          <label for="id_email" class="form-label">{% trans "Email" %}</label>
+          <input
+            type="email"
+            name="email"
+            id="id_email"
+            required
+            autocomplete="email"
+            class="form-input"
+          />
+          {% if form.email.errors %}
+          <p class="form-error">{{ form.email.errors }}</p>
+          {% endif %}
+        </div>
+
+        <div>
+          <label for="id_password1" class="form-label">
+            {% trans "Password" %}
+          </label>
+          <input
+            type="password"
+            name="password1"
+            id="id_password1"
+            required
+            autocomplete="new-password"
+            class="form-input"
+            oninput="validatePassword(this.value)"
+          />
+          {% if form.password1.errors %}
+          <p class="form-error">{{ form.password1.errors }}</p>
+          {% endif %}
+          <div class="mt-3 password-requirements">
+            <ul id="passwordRequirements">
+              <li class="invalid" id="req-length">
+                <i class="text-xs fas fa-circle"></i>
+                <span>Must be at least 8 characters long</span>
+              </li>
+              <li class="invalid" id="req-similar">
+                <i class="text-xs fas fa-circle"></i>
+                <span>Can't be too similar to your personal information</span>
+              </li>
+              <li class="invalid" id="req-common">
+                <i class="text-xs fas fa-circle"></i>
+                <span>Can't be a commonly used password</span>
+              </li>
+              <li class="invalid" id="req-numeric">
+                <i class="text-xs fas fa-circle"></i>
+                <span>Can't be entirely numeric</span>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div>
+          <label for="id_password2" class="form-label">
+            {% trans "Confirm Password" %}
+          </label>
+          <input
+            type="password"
+            name="password2"
+            id="id_password2"
+            required
+            autocomplete="new-password"
+            class="form-input"
+            oninput="validatePasswordMatch()"
+          />
+          {% if form.password2.errors %}
+          <p class="form-error">{{ form.password2.errors }}</p>
+          {% endif %}
+        </div>
+
+        {% turnstile_widget %}
+        {% if redirect_field_value %}
         <input
-          type="password"
-          name="password1"
-          id="id_password1"
-          required
-          autocomplete="new-password"
-          class="form-input"
-          oninput="validatePassword(this.value)"
+          type="hidden"
+          name="{{ redirect_field_name }}"
+          value="{{ redirect_field_value }}"
         />
-        {% if form.password1.errors %}
-        <p class="form-error">{{ form.password1.errors }}</p>
         {% endif %}
-        <div class="mt-3 password-requirements">
-          <ul id="passwordRequirements">
-            <li class="invalid" id="req-length">
-              <i class="text-xs fas fa-circle"></i>
-              <span>Must be at least 8 characters long</span>
-            </li>
-            <li class="invalid" id="req-similar">
-              <i class="text-xs fas fa-circle"></i>
-              <span>Can't be too similar to your personal information</span>
-            </li>
-            <li class="invalid" id="req-common">
-              <i class="text-xs fas fa-circle"></i>
-              <span>Can't be a commonly used password</span>
-            </li>
-            <li class="invalid" id="req-numeric">
-              <i class="text-xs fas fa-circle"></i>
-              <span>Can't be entirely numeric</span>
-            </li>
-          </ul>
+
+        <div>
+          <button type="submit" class="w-full btn-primary">
+            <i class="mr-2 fas fa-user-plus"></i>
+            {% trans "Create Account" %}
+          </button>
+        </div>
+      </form>
+
+      <!-- Loading indicator -->
+      <div id="signup-indicator" class="htmx-indicator">
+        <div class="flex items-center justify-center w-full py-4">
+          <div class="w-8 h-8 border-4 rounded-full border-primary border-t-transparent animate-spin"></div>
         </div>
       </div>
 
-      <div>
-        <label for="id_password2" class="form-label">
-          {% trans "Confirm Password" %}
-        </label>
-        <input
-          type="password"
-          name="password2"
-          id="id_password2"
-          required
-          autocomplete="new-password"
-          class="form-input"
-          oninput="validatePasswordMatch()"
-        />
-        {% if form.password2.errors %}
-        <p class="form-error">{{ form.password2.errors }}</p>
-        {% endif %}
+      <div class="mt-6 text-sm text-center">
+        <p class="text-gray-600 dark:text-gray-400">
+          {% trans "Already have an account?" %}
+          <a
+            href="{% url 'account_login' %}"
+            class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
+            onkeydown="if(event.key === 'Enter') { this.click(); }"
+          >
+            {% trans "Sign in" %}
+          </a>
+        </p>
       </div>
-
-      {% turnstile_widget %}
-      {% if redirect_field_value %}
-      <input
-        type="hidden"
-        name="{{ redirect_field_name }}"
-        value="{{ redirect_field_value }}"
-      />
-      {% endif %}
-
-      <div>
-        <button type="submit" class="w-full btn-primary">
-          <i class="mr-2 fas fa-user-plus"></i>
-          {% trans "Create Account" %}
-        </button>
-      </div>
-    </form>
-
-    <!-- Loading indicator -->
-    <div id="signup-indicator" class="htmx-indicator">
-      <div class="flex items-center justify-center w-full py-4">
-        <div class="w-8 h-8 border-4 rounded-full border-primary border-t-transparent animate-spin"></div>
-      </div>
-    </div>
-
-    <div class="mt-6 text-sm text-center">
-      <p class="text-gray-600 dark:text-gray-400">
-        {% trans "Already have an account?" %}
-        <a
-          href="{% url 'account_login' %}"
-          class="ml-1 font-medium transition-colors text-primary hover:text-primary/80 focus:outline-none focus:underline"
-          onkeydown="if(event.key === 'Enter') { this.click(); }"
-        >
-          {% trans "Sign in" %}
-        </a>
-      </p>
     </div>
   </div>
 </div>
diff --git a/templates/account/signup.html b/templates/account/signup.html
index f617baf7..ba5bbbfd 100644
--- a/templates/account/signup.html
+++ b/templates/account/signup.html
@@ -7,8 +7,8 @@
 {% block title %}Register - ThrillWiki{% endblock %}
 
 {% block content %}
-<div class="flex items-center justify-center min-h-[calc(100vh-16rem)]">
-  <div class="w-full max-w-lg">
+<div class="flex items-center justify-center py-8 md:py-12">
+  <div class="w-full max-w-lg px-4">
     <div class="auth-card">
       <h1 class="auth-title">{% trans "Create Account" %}</h1>