hotfix(vote): add text-uppercase to btns at vpc

nossas · Sep 12, 2024 · 2f941fe · 2f941fe
1 parent 68be819
commit 2f941fe
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 57 deletions.
diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html
@@ -22,7 +22,7 @@ <h2 class="text-uppercase fw-bold">Conheça candidaturas da sua cidade</h2>
         <div class="g-col-12">
             <div class="search-header">
                 {% crispy form.header %}
-                <button class="btn btn-primary" type="submit"><i class="ds-icon-search"></i><span class="d-inline-block d-md-none mx-auto">Buscar</span></button>
+                <button class="btn btn-primary text-uppercase" type="submit"><i class="ds-icon-search"></i><span class="d-inline-block d-md-none mx-auto">Buscar</span></button>
             </div>
         </div>
         <!-- Sidebar -->
@@ -68,8 +68,8 @@ <h6>{{ candidature.get_intended_position_display }} | {{ candidature.get_politic
                     <h5 class="text-uppercase fw-bold text-center">Infelizmente nenhuma candidatura foi encontrada</h5>
                     <p class="text-center">Tente ajustar os filtros para encontrar uma candidatura que se alinhe com suas prioridades climáticas.</p>
                     <div class="d-flex flex-column flex-md-row justify-content-center" style="--bs-gap:1rem;">
-                        <a href="{% url 'candidature_search' %}" class="btn btn-secondary">Limpar filtros</a>
-                        <a href="{% url 'register' %}" class="btn btn-outline-secondary">Cadastre sua candidatura</a>
+                        <a href="{% url 'candidature_search' %}" class="btn btn-secondary text-uppercase">Limpar filtros</a>
+                        <a href="{% url 'register' %}" class="btn btn-outline-secondary text-uppercase">Cadastre sua candidatura</a>
                     </div>
                 </div>
                 {% endfor %}

diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/captcha.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/captcha.html
@@ -19,7 +19,7 @@ <h1 class="text-uppercase">Vamos <strong>começar?</strong></h1>
     </div>
     <div>
         {% if wizard.steps.next %}
-        <input class="btn btn-secondary mb-3" name="wizard_goto_step" type="submit" value="Iniciar cadastro" />
+        <input class="btn btn-secondary text-uppercase mb-3" name="wizard_goto_step" type="submit" value="Iniciar cadastro" />
         {% endif %}
     </div>
 </div>

diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/checkout.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/checkout.html
@@ -18,15 +18,15 @@ <h2 class="fw-bold text-uppercase">Para finalizar, confirme suas informações</
                 <div class="me-3" style="max-width: 620px;">
                     {{ wizard.form|crispy }}
                 </div>
-                <button class="btn btn-secondary mb-3 d-flex align-items-center justify-content-center" style="min-width: 320px;--bs-gap:10px;" type="submit" name="submit"><i class="ds-icon-confirm"></i>Concluir Cadastro</button>
+                <button class="btn btn-secondary text-uppercase mb-3 d-flex align-items-center justify-content-center" style="min-width: 320px;--bs-gap:10px;" type="submit" name="submit"><i class="ds-icon-confirm"></i>Concluir Cadastro</button>
             </div>
         </form>
     {% else %}
         <div class="mb-2{% if not forloop.first %} border-top{% endif %}">
             <div class="d-flex justify-content-between align-items-center pt-4 pb-2 gap-2">
                 <h5 class="fw-bold text-uppercase m-0">{{ step.title }}</h5>
                 {% if step.edit_url %}
-                <a class="btn btn-secondary d-flex align-items-center px-2" style="--bs-gap:10px;" href="{{ step.edit_url }}"><i class="ds-icon-pencil"></i>Editar</a>
+                <a class="btn btn-secondary d-flex align-items-center text-uppercase px-2" style="--bs-gap:10px;" href="{{ step.edit_url }}"><i class="ds-icon-pencil"></i>Editar</a>
                 {% endif %}
             </div>
             {% if step.form.helper %}

diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/dashboard.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/dashboard.html
@@ -18,12 +18,12 @@ <h1 class="fw-bold text-uppercase text-secondary">Olá, {{ request.user.first_na
       {% if flow.status == "draft" %}
         <div class="mt-2 px-2 d-flex flex-column align-items-end">
           <p>Seu cadastro está incompleto e seu perfil não está ativo. Por favor, complete as informações necessárias para ativar seu perfil e torná-lo visível aos eleitores. Clique em "Continuar Cadastro" para finalizar o cadastro.</p>
-          <{% if checkout_is_valid %}a href="{% url 'register_step' step='checkout' %}"{% else %}button type="button" disabled{% endif %} class="btn btn-secondary">Submeter para análise</{% if checkout_is_valid %}a{% else %}button{% endif %}>
+          <{% if checkout_is_valid %}a href="{% url 'register_step' step='checkout' %}"{% else %}button type="button" disabled{% endif %} class="btn btn-secondary text-uppercase">Submeter para análise</{% if checkout_is_valid %}a{% else %}button{% endif %}>
         </div>
       {% elif flow.status == "editing" %}
       <div class="mt-2 px-2 d-flex flex-column align-items-end">
         <p>Sua edição está incompleta e seu perfil está ativo. Você pode desativar seu perfil para que ele não fique público durante o processo de edição, se preferir.</p>
-        <{% if checkout_is_valid %}a href="{% url 'register_step' step='checkout' %}"{% else %}button type="button" disabled{% endif %} class="btn btn-secondary">Submeter para análise</{% if checkout_is_valid %}a{% else %}button{% endif %}>
+        <{% if checkout_is_valid %}a href="{% url 'register_step' step='checkout' %}"{% else %}button type="button" disabled{% endif %} class="btn btn-secondary text-uppercase">Submeter para análise</{% if checkout_is_valid %}a{% else %}button{% endif %}>
       </div>
       {% elif flow.status == "invalid" %}
       <div class="mt-2 px-2 d-flex flex-column">
@@ -38,14 +38,14 @@ <h1 class="fw-bold text-uppercase text-secondary">Olá, {{ request.user.first_na
 
     </div>
     <div class="d-flex flex-column" style="--bs-gap:10px;width:245px;">
-      <{% if is_public %}a href="{% url 'candidate_profile' slug=flow.candidature.slug %}"{% else %}button disabled{% endif %} class="btn btn-secondary">Visualizar perfil</{% if is_public %}a{% else %}button{% endif %}>
+      <{% if is_public %}a href="{% url 'candidate_profile' slug=flow.candidature.slug %}"{% else %}button disabled{% endif %} class="btn btn-secondary text-uppercase">Visualizar perfil</{% if is_public %}a{% else %}button{% endif %}>
       <!-- <a class="btn btn-secondary" href="#">Compartilhar seu perfil</a> -->
       {% if flow.status == "draft" or flow.status == "editing" %}
-      <a class="btn btn-secondary" href="{% url 'register_step' step='checkout' %}">Editar informações</a>
+      <a class="btn btn-secondary text-uppercase" href="{% url 'register_step' step='checkout' %}">Editar informações</a>
       {% else %}
       <form method="post">
         {% csrf_token %}
-        <input class="btn btn-secondary w-100" type="submit" name="request_change" value="Editar informações" />
+        <input class="btn btn-secondary text-uppercase w-100" type="submit" name="request_change" value="Editar informações" />
       </form>
       {% endif %}
     </div>

diff --git a/app/org_eleicoes/votepeloclima/candidature/templates/candidature/wizard_form.html b/app/org_eleicoes/votepeloclima/candidature/templates/candidature/wizard_form.html
@@ -24,12 +24,12 @@ <h2 class="fw-bold text-uppercase">{{ step_title }}</h2>
     {% block form_actions %}
     <div class="d-flex flex-column flex-lg-row justify-content-between mt-5" style="--bs-gap: 1rem;">
     {% if wizard.steps.prev %}
-    <button class="btn btn-outline-dark" name="wizard_goto_step" type="submit" value="{% if editing %}checkout{% else %}{{ wizard.steps.prev }}{% endif %}">Voltar</button>
+    <button class="btn btn-outline-dark text-uppercase" name="wizard_goto_step" type="submit" value="{% if editing %}checkout{% else %}{{ wizard.steps.prev }}{% endif %}">Voltar</button>
     {% endif %}
     {% if wizard.steps.next and not editing %}
-    <input class="btn btn-secondary" name="wizard_goto_step" type="submit" value="{% translate "Continuar " %}" />
+    <input class="btn btn-secondary text-uppercase" name="wizard_goto_step" type="submit" value="{% translate "Continuar " %}" />
     {% elif editing %}
-    <button class="btn btn-secondary" type="submit" name="wizard_goto_last">Salvar</button>
+    <button class="btn btn-secondary text-uppercase" type="submit" name="wizard_goto_last">Salvar</button>
     {% endif %}
     </div>
     {% endblock %}

diff --git a/app/org_eleicoes/votepeloclima/static/js/toggle_password.js b/app/org_eleicoes/votepeloclima/static/js/toggle_password.js
@@ -0,0 +1,14 @@
+document.getElementById('togglePassword').addEventListener('click', function () {
+  var passwordInput = document.getElementById('id_password');
+  var toggleIcon = document.getElementById('toggleIcon');
+
+  if (passwordInput.type === 'password') {
+      passwordInput.type = 'text';
+      toggleIcon.classList.remove('bi-eye-slash');
+      toggleIcon.classList.add('bi-eye');
+  } else {
+      passwordInput.type = 'password';
+      toggleIcon.classList.remove('bi-eye');
+      toggleIcon.classList.add('bi-eye-slash');
+  }
+});
diff --git a/app/org_eleicoes/votepeloclima/static/scss/custom.scss b/app/org_eleicoes/votepeloclima/static/scss/custom.scss
@@ -178,9 +178,25 @@ legend.form-label {
     padding: 6px 12px;
 }
 
+// Login e Recuperar
+.candidate-login,
+.candidate-reset-password {
+    padding: 0 72px;
+}
+
+@media (max-width: 992px) {
+    .candidate-login,
+    .candidate-reset-password {
+        padding: 0 20px;
+
+        h2 {
+            font-size: 40px;
+        }
+    }
+}
 
-// Perfil da Candidatura
 
+// Perfil da Candidatura
 @media (max-width: 992px) {
     .candidature-profile {
         h2 {

diff --git a/app/org_eleicoes/votepeloclima/templates/oauth/change_password.html b/app/org_eleicoes/votepeloclima/templates/oauth/change_password.html
@@ -2,17 +2,20 @@
 {% load crispy_forms_filters %}
 
 {% block content %}
-<div class="d-flex">
-  <div class="bg-light" style="height:100vh;width:50%;">
+<div class="d-flex" style="height:100vh;">
+  <div class="bg-screenside d-none d-lg-flex">
+    <div class="screenside" style="background-image:url({% static 'imgs/bg-steps.svg' %});"></div>
   </div>
-  <div class="container px-5 py-4 my-auto">
-    <h1 class="fw-bold text-uppercase">CRIE UMA SENHA</h1>
+  <div class="candidate-reset-password container py-5 my-auto">
+    <h2 class="fw-bold text-uppercase">CRIE UMA SENHA</h2>
     <p>Acesse a área restrita das candidaturas para verificar, editar e compartilhar suas informações.</p>
     <form method="post">
         {% csrf_token %}
         {{ form|crispy }}
-        <button class="btn btn-secondary" type="submit">Criar senha</button>
+        <div class="mt-3 d-flex flex-column align-items-md-start">
+          <button class="btn btn-secondary text-uppercase" type="submit">Criar senha</button>
+        </div>
     </form>
   </div>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/org_eleicoes/votepeloclima/templates/oauth/login.html b/app/org_eleicoes/votepeloclima/templates/oauth/login.html
@@ -1,12 +1,13 @@
 {% extends 'votepeloclima/base.html' %}
-{% load crispy_forms_filters %}
+{% load static crispy_forms_filters %}
 
 {% block content %}
-<div class="d-flex">
-  <div class="bg-light" style="height:100vh;width:50%;">
-  </div>
-  <div class="container px-5 py-4 my-auto">
-    <h1 class="fw-bold text-uppercase">Login</h1>
+<div class="d-flex" style="height:100vh;">
+    <div class="bg-screenside d-none d-lg-flex">
+        <div class="screenside" style="background-image:url({% static 'imgs/bg-steps.svg' %});"></div>
+    </div>
+  <div class="candidate-login container py-5 my-auto">
+    <h2 class="fw-bold text-uppercase">Login</h2>
     <p>Acesse a área restrita das candidaturas para verificar, editar e compartilhar suas informações.</p>
     <form method="post">
       {% csrf_token %}
@@ -17,13 +18,18 @@ <h1 class="fw-bold text-uppercase">Login</h1>
       </div>
       <div id="div_id_password" class="mb-3">
         <label for="id_password" class="form-label requiredField">Senha<span class="asteriskField">*</span> </label>
-        <input type="password" name="password" autocomplete="current-password" class="passwordinput form-control" required="" id="id_password" placeholder="Insira sua senha" />
-      </div>
+        <div class="input-group">
+            <input type="password" name="password" autocomplete="current-password" class="passwordinput form-control" required="" id="id_password" placeholder="Insira sua senha" />
+            <button class="btn btn-outline-secondary text-uppercase" type="button" id="togglePassword">
+                <i class="bi bi-eye-slash" id="toggleIcon"></i>
+            </button>
+        </div>
+    </div>    
       <div class="d-flex flex-column align-items-end">
         <a class="text-dark" href="{% url 'oauth:reset-password' %}">Esqueci minha senha</a>
       </div>
-      <div class="mt-3 d-flex flex-column align-items-start" style="--bs-gap:1.5rem;">
-        <button class="btn btn-secondary" type="submit" style="min-width:320px;">Entrar</button>
+      <div class="mt-3 d-flex flex-column align-items-md-start" style="--bs-gap:1.5rem;">
+        <button class="btn btn-secondary text-uppercase" type="submit" style="min-width:320px;">Entrar</button>
         <span>Não tem uma conta? <a href="{% url 'register' %}">Cadastre-se</a></span>
         <span>Não finalizou seu cadastro? <a href="{% url 'oauth:reset-password' %}">Crie uma senha e finalize o cadastro</a></span>
       </div>
@@ -32,4 +38,9 @@ <h1 class="fw-bold text-uppercase">Login</h1>
 </div>
 {% endblock %}
 
-{% block footer %}{% endblock %}
+{% block footer %}{% endblock %}
+
+
+{% block footer_js %}
+    <script src="{% static "js/toggle_password.js" %}" type="module"></script>
+{% endblock %}
diff --git a/app/org_eleicoes/votepeloclima/templates/oauth/password_reset_done.html b/app/org_eleicoes/votepeloclima/templates/oauth/password_reset_done.html
@@ -2,12 +2,13 @@
 {% load crispy_forms_filters %}
 
 {% block content %}
-<div class="d-flex">
-  <div class="bg-light" style="height:100vh;width:50%;">
+<div class="d-flex" style="height:100vh;">
+  <div class="bg-screenside d-none d-lg-flex">
+    <div class="screenside" style="background-image:url({% static 'imgs/bg-steps.svg' %});"></div>
   </div>
-  <div class="container px-5 py-4 my-auto">
-    <h1 class="fw-bold text-uppercase">E-mail enviado</h1>
+  <div class="candidate-reset-password container py-5 my-auto">
+    <h2 class="fw-bold text-uppercase">E-mail enviado</h2>
     <p>Confira na sua caixa de mensagem</p>
   </div>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/org_eleicoes/votepeloclima/templates/oauth/password_reset_form.html b/app/org_eleicoes/votepeloclima/templates/oauth/password_reset_form.html
@@ -1,12 +1,13 @@
 {% extends 'votepeloclima/base.html' %}
-{% load crispy_forms_filters %}
+{% load static crispy_forms_filters %}
 
 {% block content %}
-<div class="d-flex">
-  <div class="bg-light" style="height:100vh;width:50%;">
+<div class="d-flex" style="height:100vh;">
+  <div class="bg-screenside d-none d-lg-flex">
+    <div class="screenside" style="background-image:url({% static 'imgs/bg-steps.svg' %});"></div>
   </div>
-  <div class="container px-5 py-4 my-auto">
-    <h1 class="fw-bold text-uppercase">Recuperar acesso</h1>
+  <div class="candidate-reset-password container py-5 my-auto">
+    <h2 class="fw-bold text-uppercase">Recuperar acesso</h2>
     <p>Insira seu e-mail abaixo para receber um link que permitirá criar uma nova senha. Este link será enviado para o endereço de e-mail registrado e você poderá usá-lo para finalizar seu cadastro ou redefinir sua senha esquecida.</p>
     <form method="post">
         {% csrf_token %}
@@ -15,8 +16,10 @@ <h1 class="fw-bold text-uppercase">Recuperar acesso</h1>
             {{ form.email.errors }}
             <input type="email" name="email" autofocus="" autocapitalize="none" autocomplete="email" maxlength="150" class="textinput form-control" required="" id="id_email" placeholder="Insira seu e-mail" />
         </div>
-        <button class="btn btn-secondary" type="submit">Enviar e-mail</button>
+        <div class="mt-3 d-flex flex-column align-items-md-start">
+          <button class="btn btn-secondary text-uppercase" type="submit">Enviar e-mail</button>
+        </div>
     </form>
   </div>
 </div>
-{% endblock %}
+{% endblock %}
diff --git a/app/org_eleicoes/votepeloclima/templates/votepeloclima/base.html b/app/org_eleicoes/votepeloclima/templates/votepeloclima/base.html
@@ -23,7 +23,7 @@
       <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarText">
-      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+      <ul class="navbar-nav me-auto my-2 my-lg-0">
         {% show_menu 0 100 100 100 "votepeloclima/menu_item.html" %}
         <!-- <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#">Menu 1</a>
@@ -35,14 +35,14 @@
           <a class="nav-link" href="#">Pricing</a>
         </li> -->
       </ul>
-      <div class="d-flex" style="--bs-gap:1rem;">
+      <div class="d-flex flex-column flex-md-row" style="--bs-gap:1rem;">
         {% block navbar_actions %}
         {% if request.user.is_authenticated %}
-        <a class="btn btn-outline-light" href="{% url 'dashboard' %}">Área da Candidatura</a>
-        <a class="btn btn-light" href="{% url 'oauth:logout' %}">Sair</a>
+        <a class="btn btn-outline-light text-uppercase" href="{% url 'dashboard' %}">Área da Candidatura</a>
+        <a class="btn btn-light text-uppercase" href="{% url 'oauth:logout' %}">Sair</a>
         {% else %}
-        <a class="btn btn-outline-light" href="{% url 'register' %}" role="button">Cadastre-se</a>
-        <a class="btn btn-light" href="{% url 'dashboard' %}" role="button">Login</a>
+        <a class="btn btn-outline-light text-uppercase" href="{% url 'register' %}" role="button">Cadastre-se</a>
+        <a class="btn btn-light text-uppercase" href="{% url 'dashboard' %}" role="button">Login</a>
         {% endif %}
         {% endblock %}
       </div>
@@ -62,7 +62,7 @@
       <div class="g-col-12 g-col-md-8">
         <img src="{% static "imgs/logo-footer.svg" %}" alt="Vote Pelo Clima">
         <p class="mt-3">Vote pelo Clima é uma iniciativa para fortalecer a democracia por meio da participação popular nas eleições municipais, com ênfase na crise climática. Nosso objetivo é dar visibilidade a candidaturas comprometidas em enfrentar amplamente as mudanças climáticas nas cidades</p>
-        <ul class="d-flex list-unstyled gap-2 mb-2">
+        <ul class="d-flex flex-wrap list-unstyled gap-2 mb-2">
           {% comment %} <li><a class="text-white text-uppercase fw-bold" href="{% url 'candidature-list' %}" rel="noopener noreferrer">Conheça as candidaturas</a></li> {% endcomment %}
           <li><a class="text-white text-uppercase fw-bold" href="{% url 'register' %}" rel="noopener noreferrer">Cadastre-se</a></li>
           <li><a class="text-white text-uppercase fw-bold" href="{% url 'dashboard' %}" rel="noopener noreferrer">Login</a></li>

diff --git a/app/org_eleicoes/votepeloclima/templates/votepeloclima/home.html b/app/org_eleicoes/votepeloclima/templates/votepeloclima/home.html
@@ -96,8 +96,8 @@
       <div class="d-flex" style="--bs-gap:1rem;">
 
 
-        <a class="btn btn-outline-light" href="/candidatura/cadastro/" role="button">Cadastre-se</a>
-        <a class="btn btn-light" href="/area-da-candidatura/login/" role="button">Login</a>
+        <a class="btn btn-outline-light text-uppercase" href="/candidatura/cadastro/" role="button">Cadastre-se</a>
+        <a class="btn btn-light text-uppercase" href="/area-da-candidatura/login/" role="button">Login</a>
 
 
       </div>
@@ -165,7 +165,7 @@ <h1>A POLÍTICA PRECISA MUDAR.</h1>
 
 <p>&nbsp;</p>
 
-    <a class="btn btn-secondary" href="/candidatura/cadastro" target="_self">
+    <a class="btn btn-secondary text-uppercase" href="/candidatura/cadastro" target="_self">
 
 
         SOU CANDIDATO/A
@@ -306,4 +306,4 @@ <h1>A POLÍTICA PRECISA MUDAR.</h1>
   }
 </script>
 
-</body></html>
+</body></html>
diff --git a/app/org_eleicoes/votepeloclima/templates/votepeloclima/menu_item.html b/app/org_eleicoes/votepeloclima/templates/votepeloclima/menu_item.html
@@ -2,6 +2,6 @@
 
 {% for child in children %}
 <li class="nav-item{% if child.ancestor %} ancestor{% endif %}{% if child.sibling %} sibling{% endif %}{% if child.descendant %} descendant{% endif %}">
-	<a class="nav-link{% if child.selected %} active{% endif %}" href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
+	<a class="nav-link text-uppercase fw-bold{% if child.selected %} active{% endif %}" href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">{{ child.get_menu_title }}</a>
 </li>
-{% endfor %}
+{% endfor %}