Debug the UI (margins & font styles) in the registration templates

hussein-m-kandil · Sep 2, 2023 · c2c98ee · c2c98ee
1 parent de6ead0
commit c2c98ee
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 16 deletions.
diff --git a/posts/templates/base_generic.html b/posts/templates/base_generic.html
@@ -67,7 +67,7 @@
   <main>
     <div class="container">
       <div class="row mt-5">
-        <div class="col-12 col-sm-11 col-md-9 col-lg-7 col-xl-6 mx-auto my-4">
+        <div class="col-11 col-md-9 col-lg-7 col-xl-6 mx-auto my-4">
           <div id="root-url" style="display: none;">{% url 'posts:index' %}</div>
           {% block content %}{% endblock %}
           {% block pagination %}

diff --git a/templates/registration/logged_out.html b/templates/registration/logged_out.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-    <h1 class="mt-5">Logged out!</h1>
+    <h1>Logged out!</h1>
 
     <a class="link-dark text-decoration-none" href="{% url 'login' %}">Click here to login again.</a>
 

diff --git a/templates/registration/login.html b/templates/registration/login.html
@@ -2,10 +2,10 @@
 
 {% block content %}
 
-    <h1 class="mx-auto mt-5 text-left">
-        <strong>Login</strong>
+    <h1 class="mx-auto text-left" style="font-weight: bold;">
+        Login
     </h1>
-    <div class="mx-auto" style="text-align: justify; font-weight: lighter;">
+    <div class="mx-auto" style="text-align: justify; font-weight: normal; font-style: italic;">
         There are two accounts available to test the site with anyone of them.<br>
         The login inputs, for both account, should be filled automatically.<br>
         Mostly, all you need to do is to press login on the chosen account.<br>
@@ -26,27 +26,27 @@ <h1 class="mx-auto mt-5 text-left">
     {% endif %}
 <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start align-items-md-center">
     <div class="mt-3">
-        <h3 class="text-left my-2"><strong>Login as 'King':</strong></h3>
+        <h3 class="text-left my-2" style="font-weight: bold;">Login as 'King': </h3>
         <form method="post" action="{% url 'login' %}">
             {% csrf_token %}
-            <label class="text-left mt-2" for="username-1"><strong>Username:</strong></label>
+            <label class="text-left mt-2" for="username-1" style="font-weight: bold;">Username: </label>
             <input type="text" name="username" autocapitalize="none" maxlength="150" 
-                id="username-1" class="form-control" value="King" autofocus required>
-            <label class="text-left mt-2" for="password-1"><strong>Password:</strong></label>
+                id="username-1" class="form-control" value="King" required>
+            <label class="text-left mt-2" for="password-1" style="font-weight: bold;">Password: </label>
             <input type="password" name="password" id="password-1" class="form-control" 
                 value="django123" required>
             <input class="btn btn-outline-dark mt-2" type="submit" value="login">
             <input type="hidden" name="next" value="{{ next }}">
         </form>
     </div>
     <div class="mt-3">
-        <h3 class="text-left my-2"><strong>Login as 'Queen':</strong></h3>
+        <h3 class="text-left my-2" style="font-weight: bold;">Login as 'Queen': </h3>
         <form method="post" action="{% url 'login' %}">
             {% csrf_token %}
-            <label class="text-left mt-2" for="username-2"><strong>Username:</strong></label>
+            <label class="text-left mt-2" for="username-2" style="font-weight: bold;">Username: </label>
             <input type="text" name="username" autocapitalize="none" maxlength="150" 
                 id="username-2" class="form-control" value="Queen" required>
-            <label class="text-left mt-2" for="password-2"><strong>Password:</strong></label>
+            <label class="text-left mt-2" for="password-2" style="font-weight: bold;">Password: </label>
             <input type="password" name="password" id="password-2" class="form-control" 
                 value="django123" required>
             <input class="btn btn-outline-dark mt-2" type="submit" value="login">

diff --git a/templates/registration/password_reset_complete.html b/templates/registration/password_reset_complete.html
@@ -1,6 +1,6 @@
 {% extends "base_generic.html" %}
 
 {% block content %}
-  <h1 class="mt-5">The password has been changed!</h1>
+  <h1>The password has been changed!</h1>
   <p><a class="link-dark text-decoration-none" href="{% url 'login' %}">log in again?</a></p>
 {% endblock %}
diff --git a/templates/registration/password_reset_confirm.html b/templates/registration/password_reset_confirm.html
@@ -1,7 +1,7 @@
 {% extends "base_generic.html" %}
 
 {% block content %}
-    <div class="mt-5">
+    <div>
         {% if validlink %}
             <p>Please enter (and confirm) your new password.</p>
             <form action="" method="post">

diff --git a/templates/registration/password_reset_done.html b/templates/registration/password_reset_done.html
@@ -1,7 +1,7 @@
 {% extends "base_generic.html" %}
 
 {% block content %}
-  <p class="mt-5">
+  <p>
     We've emailed you instructions for setting your password. If they haven't arrived in a few minutes, check your spam folder.
   </p>
 {% endblock %}
diff --git a/templates/registration/password_reset_form.html b/templates/registration/password_reset_form.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 
-  <form action="" method="post" class="mt-5 w-50">
+  <form action="" method="post" class="w-50">
   {% csrf_token %}
   {% if form.email.errors %}
     {{ form.email.errors }}