Feat/adaptive signup page

* feat: setup adaptive signup * fix: change redirect after verification * feat: fixed dorm fields * feat: add background * feat: fixed form fields
RezenkovD · Aug 4, 2023 · 54c8cac · 54c8cac
1 parent c17c2c3
commit 54c8cac
Show file tree

Hide file tree

Showing 3 changed files with 201 additions and 8 deletions.
diff --git a/users/templates/account/signup.html b/users/templates/account/signup.html
@@ -5,7 +5,7 @@
 {% block head %}
 <link rel="stylesheet" href="{% static 'style/signup.css' %}">
 {% endblock %}
-{% block main %}
+{% block intro_bg_block %}
 <div class="intro_bg_block">
     <div class="ellipse-1"></div>
     <div class="ellipse-3"></div>
@@ -214,14 +214,17 @@
             fill="#A74C00" />
     </svg>
 </div>
+
+{% endblock %}
+{% block main %}
 <section>
     <div class="main">
         <div>
             <div class="main-text">
                 <span><span class="span1">Зареєструйся та отримуй </span><span class="span2">знижку
-                        10%*</span></span>
+                        10%<span class="span1">*</span</span></span>
             </div>
-            <div class="sub-main-text">на першу гру в нашому клубі</div>
+            <div class="sub-main-text">*на першу гру в нашому клубі</div>
         </div>
         {% block content %}
         <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
@@ -246,7 +249,7 @@
                         </div>
                     </div>
                     {% else %}
-                    <div class="input-container" style="margin-bottom: 28px">
+                    <div class="input-container">
                         <label for="{{ form.first_name.id_for_label }}">
                             <div class="frame-23">
                                 <span class="e1">Ваше ім’я</span>
@@ -272,7 +275,7 @@
                         </div>
                     </div>
                     {% else %}
-                    <div class="input-container" style="margin-bottom: 44px">
+                    <div class="input-container">
                         <label for="{{ form.email.id_for_label }}">
                             <span class="e1">Електронна адреса</span>
                             <span class="e2">*</span>
@@ -316,7 +319,7 @@
                         </div>
                     </div>
                     {% else %}
-                    <div class="input-container" style="margin-bottom: 28px">
+                    <div class="input-container">
                         <label for="{{ form.password1.id_for_label }}">
                             <span class="e1">Пароль</span>
                             <span class="e2">*</span>
@@ -376,7 +379,7 @@
                         </div>
                     </div>
                     {% else %}
-                    <div class="input-container" style="margin-bottom: 44px">
+                    <div class="input-container">
                         <label for="{{ form.password2.id_for_label }}">
                             <span class="e1">Підтвердіть пароль</span>
                             <span class="e2">*</span>
@@ -427,6 +430,48 @@
 </section>
 {% endblock %}
 {% block script %}
+<script>
+    function adjustColumnStyle() {
+        var columnElements = document.querySelectorAll(".column");
+        var secondColumn = document.querySelector(".column + .column");
+        var firstColumn = columnElements[0];
+
+        var firstHasError = false;
+        {% if form.password1.errors or form.first_name.errors %}
+        firstHasError = true;
+        {% endif %}
+        if (firstHasError){
+            secondColumn.style.gap= "0";
+        }
+
+        var hasError = false;
+        {% if form.password2.errors or form.email.errors %}
+        hasError = true;
+        {% endif %}
+
+        if (window.innerWidth < 768) {
+            columnElements.forEach(function (column) {
+                column.style.marginBottom = hasError ? "auto" : "20px";
+            });
+            firstColumn.style.marginBottom = hasError ? "0" : "12px";
+        } else {
+            columnElements.forEach(function (column) {
+                column.style.marginBottom = hasError ? "auto" : "44px";
+            });
+            firstColumn.style.marginBottom = hasError ? "0" : "12px";
+        }
+    }
+
+    document.addEventListener("DOMContentLoaded", adjustColumnStyle);
+    document.querySelector("#id_password2").addEventListener("input", adjustColumnStyle);
+    document.querySelector("#id_email").addEventListener("input", adjustColumnStyle);
+    document.querySelector("#id_first_name").addEventListener("input", adjustColumnStyle);
+    document.querySelector("#id_password1").addEventListener("input", adjustColumnStyle);
+
+    window.addEventListener("resize", adjustColumnStyle);
+</script>
+
+
 <script>
     function togglePasswordVisibilityOne(fieldId) {
         var field = document.getElementById(fieldId);

diff --git a/users/templates/style/signup.css b/users/templates/style/signup.css
@@ -209,10 +209,13 @@
     display: flex;
     flex-direction: column;
     width: 48%;
+    gap: 28px;
+    margin-bottom: 44px;
 }
 
 .column+.column {
     margin-left: 119px;
+    gap: 28px;
 }
 
 .input-container {
@@ -278,4 +281,149 @@
 
 .error-message {
     box-sizing: border-box;
+}
+
+@media screen and (max-width: 768px) {
+    .main {
+        margin: 55.5px auto 98px;
+    }
+    .main-text {
+        width: auto;
+        text-align: center;
+        height: auto;
+        font: 700 28px "Montserrat", sans-serif;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .span1 {
+        color: #ffffff;
+        font: 700 28px "Montserrat", sans-serif;
+    }
+
+    .span2 {
+        color: #4fb4fe;
+        font: 700 28px "Montserrat", sans-serif;
+    }
+
+    .span3 {
+        color: #ffffff;
+        font: 700 28px "Montserrat", sans-serif;
+    }
+
+    .sub-main-text {
+        font: 500 16px/150% "Montserrat", sans-serif;
+        margin: 5px auto 0;
+    }
+
+    .sign-up-form {
+        display: flex;
+        width: 311px;
+        margin: 23px auto 0;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .column+.column {
+        margin-left: 0;
+        gap: 12px;
+    }
+
+    .column {
+        display: flex;
+        flex-direction: column;
+        width: 311px;
+        gap: 12px;
+    }
+
+    .input-container-1 {
+        width: 311px;
+        margin: 60px auto 12px;
+    }
+
+    .input-container {
+        width: 311px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+
+    .sub-flex-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 20px;
+    }
+
+    .forgot-pswd {
+        font: 500 16px/170% "Montserrat", sans-serif;
+    }
+    .subtext {
+        font: 500 16px/170% "Montserrat", sans-serif;
+        width: 230px;
+    }
+    .subtext .span1 {
+        font: 500 16px/170% "Montserrat", sans-serif;
+    }
+
+    .subtext .span2 {
+        font: 500 16px/170% "Montserrat", sans-serif;
+    }
+
+    .subtext .span3 {
+        font: 500 16px/170% "Montserrat", sans-serif;
+    }
+
+    .btn-blue {
+        margin-top: 24px;
+        width: 311px;
+        height: 48px;
+        padding: 13.71px 55px;
+    }
+
+    .subtext-or {
+        font: 500 12px/170% "Montserrat", sans-serif;
+        margin: 24px auto 0;
+        width: auto;
+    }
+
+    .error-container {
+        font: 500 12px/170% "Montserrat", sans-serif;
+        width: auto;
+    }
+
+    .ellipse-1 {
+        background: #ef7d1e;
+        border-radius: 50%;
+        width: 165px;
+        height: 165px;
+        position: absolute;
+        filter: blur(125px);
+        top: -73px;
+        left: -37px;
+    }
+
+    .ellipse-3 {
+        background: #00a3ff;
+        border-radius: 50%;
+        width: 178px;
+        height: 178px;
+        position: absolute;
+        filter: blur(125px);
+        top: 580px;
+        left: 235px;
+    }
+
+    .blue-object {
+        opacity: 0;
+    }
+
+    .yellow-object {
+        position: fixed;
+        overflow: visible;
+        transform: rotate(352deg);
+        top: -1008px;
+        left: -690px;
+        opacity: 0.11999999731779099;
+    }
 }
diff --git a/vr_club/settings.py b/vr_club/settings.py
@@ -103,7 +103,7 @@
 ACCOUNT_CONFIRM_EMAIL_ON_GET = True
 LOGIN_REDIRECT_URL = "/"
 LOGOUT_REDIRECT_URL = "/"
-ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL = "/site/"
+ACCOUNT_EMAIL_CONFIRMATION_ANONYMOUS_REDIRECT_URL = "/"
 
 ACCOUNT_FORMS = {
     "signup": "users.forms.CustomSignupForm",