pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-20 07:11:08 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make sign in and registration screens scrollable

Browse Source 
- 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
This commit is contained in:
pacnpal
2024-11-14 01:02:54 +00:00
parent 8d70bf8994
commit 30b786d51e
4 changed files with 216 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
templates/account/login.html
View File

@@ -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>

9
templates/account/partials/login_modal.html
View File

@@ -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,6 +17,7 @@
</button>
</div>
<div class="p-6">
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<div class="space-y-3">
@@ -67,4 +67,5 @@
</p>
</div>
</div>
</div>
</div>

8
templates/account/partials/signup_modal.html
View File

@@ -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,6 +19,7 @@
</button>
</div>
<div class="p-6">
{% get_providers as socialaccount_providers %}
{% if socialaccount_providers %}
<div class="space-y-3">
@@ -193,6 +194,7 @@
</p>
</div>
</div>
</div>
</div>
<script>

4
templates/account/signup.html
View File

@@ -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>