style: make login page responsive on mobile devices

- Removed the second column, and moved image to the back on mobile devices

refs: #191

Author: yinanazhou

web-app/django/VIM/templates/main/registration/login.html

@@ -7,17 +7,22 @@
 {% endblock registration_title %}
 
 {% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 align-content-center account-container">
+  <div class="container content-container px-0 px-md-4 d-flex justify-content-center align-items-center">
+    <div class="col-12 p-4 align-content-center account-container position-relative">
       {% if form.errors %}
         <div class="alert alert-danger p-2 z-2 message-container">
           {% for field, error in form.errors.items %}{{ error }}{% endfor %}
         </div>
       {% endif %}
-      <div class="container z-1">
-        <div class="row">
-          <div class="col-6 my-4 px-4 d-flex justify-content-center align-items-center">
-            <div class="col-12 mx-4 px-2">
+      <!-- Mobile background image (visible only on small screens) -->
+      <div class="d-md-none position-absolute top-50 start-50 translate-middle z-0 w-100 h-100 d-flex justify-content-center align-items-center">
+        <img src="{% static "assets/images/sign-up.svg" %}" alt="" class="img-fluid opacity-50 w-100 h-100" style="max-width: 80%; max-height: 80%;" />
+      </div>
+      <div class="container z-1 position-relative">
+        <div class="row flex-column flex-md-row">
+          <!-- Login Form Column -->
+          <div class="col-12 col-md-6 my-4 px-0 px-md-4">
+            <div class="col-12 mx-md-4 px-2">
               <h5>
                 <strong>Login</strong>
               </h5>
@@ -38,15 +43,21 @@ <h5>
               </form>
             </div>
           </div>
-          <div class="col-6 my-4 create-account-link d-flex align-items-center">
-            <div id="signup-option-separator" class="flex-fill">
+          <!-- Sign Up Option Column (hidden on mobile) -->
+          <div class="col-12 col-md-6 my-4 create-account-link d-flex align-items-center">
+            <div id="signup-option-separator" class="flex-fill d-none d-md-block">
               <div class="text-center" id="error">
                 <img src="{% static "assets/images/sign-up.svg" %}" alt="sign up image" id="signup-decor" class="my-4" />
                 <p class="mb-1">Don't have an account?</p>
                 <a href="{% url 'main:register' %}">Create a new account</a>
               </div>
             </div>
           </div>
+          <!-- Mobile Sign Up Link (visible only on small screens) -->
+          <div class="col-12 d-md-none text-center">
+            <p class="mb-1">Don't have an account?</p>
+            <a href="{% url 'main:register' %}">Create a new account</a>
+          </div>
         </div>
       </div>
     </div>

web-app/django/VIM/templates/main/registration/registration_base.html

@@ -12,7 +12,7 @@
 {% endblock css_files %}
 
 {% block content %}
-  <div class="container py-5">
+  <div class="container py-0 py-md-5">
     <div class="row">
       <div class="col-12">
         {% block registration_content %}

web-app/frontend/assets/css/main/login.css

@@ -1,14 +1,13 @@
 .content-container {
-  height: 80vh;
-  width: 80vw;
+  min-height: 80vh;
+  min-width: 80vw;
 }
 
 .account-container {
   background-color: white;
   border: 3px solid #9eb384;
   border-radius: 30px;
-  height: 60vh;
-  min-height: 400px;
+  min-height: 60vh;
   position: relative;
   color: #435334;
 }