fix(ui): adjust layout for alert message

DDMAL · Jul 23, 2024 · 4ff0092 · 4ff0092
1 parent 2c5fe3d
commit 4ff0092
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git a/web-app/django/VIM/apps/main/static/main/css/login.css b/web-app/django/VIM/apps/main/static/main/css/login.css
@@ -8,6 +8,12 @@
   border: 3px solid #9eb384;
   border-radius: 30px;
   height: auto !important;
+  position: relative;
+}
+
+.message-container {
+  position: absolute;
+  top: 10px;
 }
 
 .login-form {
@@ -74,5 +80,10 @@ a:hover {
 }
 
 .errorlist {
-  color: red;
+  margin: 0;
+}
+
+ul {
+  list-style-type: none;
+  padding: 0 0.5rem;
 }
diff --git a/web-app/django/VIM/apps/main/templates/registration/login.html b/web-app/django/VIM/apps/main/templates/registration/login.html
@@ -14,18 +14,13 @@
 
 {% block content %}
   <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-8 p-4 login-container">
-      {% if messages %}
-        <div class="alert alert-success alert-dismissible">
-          {% for message in messages %}{{ message }}{% endfor %}
-        </div>
-      {% endif %}
+    <div class="col-8 p-4 align-items-center login-container">
       {% if form.errors %}
-        <div class="alert alert-danger alert-dismissible">
+        <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">
+      <div class="container z-1">
         <div class="row">
           <div class="col-6 my-4 px-4 d-flex justify-content-center align-items-center login-form"
                id="login">