Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Fix] Refinamento geral de Frontend da plataforma Vote Pelo Clima #295

Merged
merged 5 commits into from
Sep 23, 2024
Merged

[Fix] Refinamento geral de Frontend da plataforma Vote Pelo Clima #295

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
061e62d
hotfix(vote): add text-uppercase to btns at vpc
miguelzinh3 Sep 12, 2024
7dd72fa
hotfix(vote): add href to conheça btn
miguelzinh3 Sep 12, 2024
512c309
hotfix(vote): add link to texts in captcha
miguelzinh3 Sep 12, 2024
ac7b3b6
hotfix(vote): add condicional to partners list template
miguelzinh3 Sep 13, 2024
dd79233
hotfix(vote): add w-100 to conheça btn from candidate search
miguelzinh3 Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions app/contrib/partners/templates/partners/partners_list.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading