Skip to content

Commit

Permalink
Merge pull request #295 from nossas/hotfix/general-changes-vpc
Browse files Browse the repository at this point in the history 
[Fix] Refinamento geral de Frontend da plataforma Vote Pelo Clima
  • Loading branch information
@igr-santos
igr-santos authored Sep 23, 2024
2 parents 7df71ba + dd79233 commit 139ec0f
Show file tree
Hide file tree
Showing 15 changed files with 119 additions and 62 deletions.
10 changes: 8 additions & 2 deletions app/contrib/partners/templates/partners/partners_list.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
{% for partner in partners %}
<a href="{{ partner.link }}" target="_blank" rel="noopener noreferrer">
{% if partner.link %}
<a href="{{ partner.link }}" target="_blank" rel="noopener noreferrer">
<img src="{{ partner.logo.url }}" alt="{{ partner.name }}">
</a>
{% else %}
<div class="partner-logo">
<img src="{{ partner.logo.url }}" alt="{{ partner.name }}">
</a>
</div>
{% endif %}
{% endfor %}
8 changes: 4 additions & 4 deletions app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidature_search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down Expand Up @@ -58,7 +58,7 @@ <h6>{{ candidature.get_intended_position_display }} | {{ candidature.get_politic
</div>
</div>
<div class="card-footer">
<button class="btn btn-dark text-uppercase">Conheça</button>
<a class="btn btn-dark text-uppercase w-100" href="{% url 'candidate_profile' candidature.slug %}">Conheça</a>
</div>
</a>
</div>
Expand All @@ -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 %}
Expand Down
3 changes: 2 additions & 1 deletion app/org_eleicoes/votepeloclima/candidature/templates/candidature/captcha.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ <h1 class="text-uppercase">Vamos <strong>começar?</strong></h1>
<p class="sub-3 fw-bold text-uppercase">Inscreva-se e aumente a visibilidade da sua candidatura!</h2>
<p>O processo de cadastro é simples e leva cerca de <strong>15 minutos</strong>. Você precisará aceitar alguns <strong>compromissos básicos</strong>, preencher suas <strong>informações pessoais</strong>, fornecer <strong>detalhes sobre sua candidatura e trajetória</strong>, e incluir suas <strong>propostas sobre a agenda climática</strong>.</p>
<p>Após finalizar, você terá acesso a uma área exclusiva onde poderá ver e editar seu perfil, além de acessar ferramentas para compartilhar sua campanha. Vamos lá?</p>
<p>Encontre materiais de apoio para entender o cadastro e fortalecer sua candidatura <a href="https://drive.google.com/drive/folders/1uRMgR3oNIn5YpcsSL15cSqgucs1R6uVs" target="_blank" rel="noopener noreferrer">neste link</a>.</p>
</div>
{% endblock %}

Expand All @@ -19,7 +20,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>
Expand Down
4 changes: 2 additions & 2 deletions app/org_eleicoes/votepeloclima/candidature/templates/candidature/checkout.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
10 changes: 5 additions & 5 deletions app/org_eleicoes/votepeloclima/candidature/templates/candidature/dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions app/org_eleicoes/votepeloclima/candidature/templates/candidature/wizard_form.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand Down
14 changes: 14 additions & 0 deletions app/org_eleicoes/votepeloclima/static/js/toggle_password.js
View file
Original file line number Diff line number Diff line change
@@ -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');
}
});
23 changes: 20 additions & 3 deletions app/org_eleicoes/votepeloclima/static/scss/custom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,9 +178,25 @@ legend.form-label {
padding: 6px 12px;
}

// Login e Recuperar
.candidate-login,
.candidate-reset-password {
padding: 0 72px;
}

// Perfil da Candidatura
@media (max-width: 992px) {
.candidate-login,
.candidate-reset-password {
padding: 0 20px;

h2 {
font-size: 40px;
}
}
}


// Perfil da Candidatura
@media (max-width: 992px) {
.candidature-profile {
h2 {
Expand Down Expand Up @@ -213,7 +229,8 @@ legend.form-label {

// Partner Tag
.partners-list {
a {
a,
div {
display: flex;
justify-content: center;
align-items: center;
Expand All @@ -225,4 +242,4 @@ legend.form-label {
object-fit: contain;
object-position: center;
}
}
}
15 changes: 9 additions & 6 deletions app/org_eleicoes/votepeloclima/templates/oauth/change_password.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
33 changes: 22 additions & 11 deletions app/org_eleicoes/votepeloclima/templates/oauth/login.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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>
Expand All @@ -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 %}
11 changes: 6 additions & 5 deletions app/org_eleicoes/votepeloclima/templates/oauth/password_reset_done.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
17 changes: 10 additions & 7 deletions app/org_eleicoes/votepeloclima/templates/oauth/password_reset_form.html
View file
Original file line number Diff line number Diff line change
@@ -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 %}
Expand All @@ -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 %}
Loading

0 comments on commit 139ec0f

Please sign in to comment.