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] Ajustes Perfil da Candidatura em mobile #268

Merged
merged 9 commits into from
Aug 28, 2024
Merged

[Fix] Ajustes Perfil da Candidatura em mobile #268

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
e7337a8
hotfix(vote): remove gaps on candidate_profile
miguelzinh3 Aug 23, 2024
5809264
hotfix(vote): change align items to center on form_actions in captcha…
miguelzinh3 Aug 23, 2024
d81e244
fix(votepeloclima): add new font sizes and colors
miguelzinh3 Aug 26, 2024
b028c49
hotfix(votepeloclima): refactor carousel from candidature profile
miguelzinh3 Aug 26, 2024
62f6516
hotfix(votepeloclima): add footer styles
miguelzinh3 Aug 27, 2024
68547fe
hotfix(votepeloclima): refactor icons colors to %23C15303
miguelzinh3 Aug 27, 2024
115ff8c
hotfix(votepeloclima): add font size to badges
miguelzinh3 Aug 27, 2024
fbb078c
hotfix(votepeloclima): add padding and new icons to social media temp…
miguelzinh3 Aug 27, 2024
85194a1
hotfix(votepeloclima): change styles from candidate_profile after review
miguelzinh3 Aug 27, 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
62 changes: 62 additions & 0 deletions app/org_eleicoes/votepeloclima/candidature/static/js/carousel-icons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
document.addEventListener("DOMContentLoaded", function () {
const items = [
{ icon: "ds-icon-compromisso-laranja-1", text: "Políticas de adaptação das cidades para reduzir tragédias" },
{ icon: "ds-icon-compromisso-laranja-2", text: "Políticas para redução de emissões e transição energética" },
{ icon: "ds-icon-compromisso-laranja-3", text: "Políticas sociais de apoio às populações atingidas" },
{ icon: "ds-icon-compromisso-laranja-4", text: "Transição climática com justiça social, racial e de gênero" },
{ icon: "ds-icon-compromisso-laranja-5", text: "Proteção ambiental e de recursos naturais" },
{ icon: "ds-icon-compromisso-laranja-6", text: "Incentivo à participação popular e ao engajamento da juventude" },
{ icon: "ds-icon-compromisso-laranja-7", text: "Investimentos em pesquisa e inovação para enfrentar a crise climática" },
{ icon: "ds-icon-compromisso-laranja-8", text: "Valorização de saberes tradicionais e tecnologias sociais na busca de soluções" },
];

const carouselInner = document.querySelector(".carousel-inner");
const carouselIndicators = document.querySelector(".carousel-indicators");

function createSlides(itemsPerSlide) {
carouselInner.innerHTML = "";
carouselIndicators.innerHTML = "";

for (let i = 0; i < items.length; i += itemsPerSlide) {
const slide = document.createElement("div");
slide.className = "carousel-item" + (i === 0 ? " active" : "");

const container = document.createElement("div");
container.className = "d-flex justify-content-center align-items-center";

for (let j = i; j < i + itemsPerSlide && j < items.length; j++) {
const col = document.createElement("div");
col.className = "d-flex flex-column align-items-center text-center";
col.innerHTML = `
<i class="${items[j].icon}"></i>
<p class="mt-2 text-uppercase fw-bold w-75">${items[j].text}</p>
`;
container.appendChild(col);
}

slide.appendChild(container);
carouselInner.appendChild(slide);

// Cria indicadores
const indicator = document.createElement("button");
indicator.type = "button";
indicator.setAttribute("data-bs-target", "#carouselControls");
indicator.setAttribute("data-bs-slide-to", (i / itemsPerSlide).toString());
if (i === 0) indicator.className = "active";
carouselIndicators.appendChild(indicator);
}
}

// Inicializa o carousel com base na largura da tela
function initializeCarousel() {
const itemsPerSlide = window.innerWidth < 992 ? 1 : 4;
createSlides(itemsPerSlide);
}

initializeCarousel();

// Reajusta o número de itens por slide
window.addEventListener("resize", function () {
initializeCarousel();
});
});
101 changes: 38 additions & 63 deletions app/org_eleicoes/votepeloclima/candidature/templates/candidature/candidate_profile.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,17 @@
{% block head_css %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'css/icons.css' %}">
<link rel="stylesheet" href="{% static 'css/custom.css' %}">
{% endblock %}

{% block content %}
<section class="container">
<div class="grid py-5">
<div class="grid py-3">
<div class="g-col-12 g-col-md-4">
{% if candidature.photo %}
<p><img src="{{ candidature.photo.url }}" alt="Foto de {{ candidature.ballot_name }}" class="img-fluid"/></p>
<div class="candidature-profile-photo">
<img src="{{ candidature.photo.url }}" alt="Foto de {{ candidature.ballot_name }}" class="img-fluid rounded-2"/>
</div>
{% endif %}
</div>
<div class="g-col-12 g-col-md-8">
Expand All @@ -29,11 +32,13 @@ <h1 class="text-uppercase fw-bold">{{ candidature.ballot_name }} | {{ candidatur
{% if candidature.deputy_mayor %}
<p><strong>Vice:</strong> {{ candidature.deputy_mayor }}</p>
{% endif %}
<span class="badge bg-primary">{{ candidature.get_intended_position_display }}</span>
<span class="badge bg-primary">{{ candidature.get_political_party_display }}</span>
{% if candidature.primary %}
<span class="badge rounded-pill bg-primary">Mandato Coletivo</span>
{% endif %}
<div class="d-flex flex-row gap-2">
<span class="badge bg-primary fs-6">{{ candidature.get_intended_position_display }}</span>
<span class="badge bg-primary fs-6">{{ candidature.get_political_party_display }}</span>
{% if candidature.is_collective_mandate %}
<span class="badge bg-primary fs-6">Mandato Coletivo</span>
{% endif %}
</div>
</div>
</div>
<div class="pt-3">
Expand All @@ -42,13 +47,13 @@ <h1 class="text-uppercase fw-bold">{{ candidature.ballot_name }} | {{ candidatur
<hr class="hr my-4"/>
<div>
<h3 class="text-uppercase pb-2">Informações</h2>
<div class="grid gap-5">
<div class="g-col-12 g-col-md-6">
<div class="d-flex flex-wrap">
<div class="col pe-2">
<p><strong>Data de Nascimento:</strong> {{ candidature.birth_date }}</p>
<p><strong>Raça:</strong> {{ candidature.get_color_display }}</p>
<p><strong>Gênero:</strong> {{ candidature.get_gender_display }}</p>
</div>
<div class="g-col-12 g-col-md-6">
<div class="col">
{% if candidature.sexuality %}<p><strong>Sexualidade:</strong> {{ candidature.get_sexuality_display }}</p>{% endif %}
{% if candidature.education %}<p><strong>Escolaridade:</strong> {{ candidature.get_education_display }}</p>{% endif %}
{% if candidature.employment %}<p><strong>Ocupação:</strong> {{ candidature.employment }}</p>{% endif %}
Expand Down Expand Up @@ -97,58 +102,24 @@ <h3 class="text-uppercase">Histórico de atuação</h2>
<section class="py-5 bg-primary">
<div class="container">
<h1 class="text-center text-white text-uppercase fw-bold">O que {{ candidature.ballot_name }} tem a dizer</h1>
<div class="d-flex justify-content-center py-5">
<video controls src="{{ candidature.video.url }}" class="img-fluid"></video>
<div class="candidature-video d-flex justify-content-center py-5">
<video controls src="{{ candidature.video.url }}" class="w-100"></video>
miguelzinh3 marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
</section>
{% endif %}
<section class="py-5">
<div class="container">
<h1 class="text-center text-uppercase fw-bold">O que esperar de {{ candidature.ballot_name }}</h1>
<div id="carouselControls" class="carousel slide carousel-dark py-5">
<h2 class="text-center text-uppercase fw-bold">O que esperar de {{ candidature.ballot_name }}</h2>
<div id="carouselControls" class="carousel slide carousel-dark py-4" data-bs-ride="carousel">
<!-- Indicadores de Slides -->
<div class="carousel-indicators"></div>

<!-- Itens do Carousel -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="grid">
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-1"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Políticas de adaptação das cidades para reduzir tragédias</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-2"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Políticas para redução de emissões e transição energética</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-3"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Políticas sociais de apoio às populações atingidas</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-4"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Transição climática com justiça social, racial e de gênero</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="grid">
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-5"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Proteção ambiental e de recursos naturais</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-6"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Incentivo à participação popular e ao engajamento da juventude</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-7"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Investimentos em pesquisa e inovação para enfrentar a crise climática</p>
</div>
<div class="g-col-6 g-col-md-3 px-2 text-center d-flex flex-column align-items-center">
<i class="ds-icon-compromisso-laranja-8"></i>
<p class="mt-2 text-uppercase fw-bold w-75">Valorização de saberes tradicionais e tecnologias sociais na busca de soluções</p>
</div>
</div>
</div>
</div>

<!-- Controles do Carousel -->
<button class="carousel-control-prev w-auto" type="button" data-bs-target="#carouselControls" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Anterior</span>
Expand All @@ -157,41 +128,44 @@ <h1 class="text-center text-uppercase fw-bold">O que esperar de {{ candidature.b
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Próximo</span>
</button>
</div>
</div>


<p class="text-center">*As organizações da plataforma não se comprometem com a efetividade e execução dos compromissos firmados. O controle social e a participação ativa da cidadania são fundamentais para que parlamentares e gestores públicos cumpram suas promessas.</p>
</div>
</section>
<hr class="w-100" />
<section class="py-5">
<div class="container">
<div class="grid gap-5">
<div class="grid">
<div class="g-col-12 g-col-md-8">
<div class="d-flex flex-column justify-content-between h-100">
<div>
<h2 class="fw-bold text-uppercase">Compartilhe nas redes</h2>
<p class="w-75">Compartilhe esse perfil nas redes sociais e com seus amigos para que as propostas de {{ candidate.ballot_name }} cheguem em mais gente:</p>
<h2 class="fw-bold text-uppercase mb-3">Compartilhe nas redes sociais
para apoiar {{ candidature.ballot_name }}!</h2>
<p class="w-75">Compartilhe esse perfil nas redes sociais e com seus amigos para que as propostas de {{ candidature.ballot_name }} cheguem em mais gente:</p>
</div>
<p>
Viu algo estranho? <a href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Clique aqui para denunciar esse perfil.</a>
Viu algo estranho? <a class="fw-bold text-black" href="mailto:[email protected]" target="_blank" rel="noopener noreferrer">Clique aqui para denunciar esse perfil.</a>
</p>
</div>
</div>
<div class="g-col-12 g-col-md-4">
<p class="fw-bold text-uppercase">Compartilhe em:</p>
<div class="d-flex flex-column justify-content-center gap-2">
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://wa.me/?text=Confira a candidatura de {{ request.build_absolute_uri|urlencode }}">
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://wa.me/?text=Oi! As eleições estão chegando e o futuro da nossa cidade depende do nosso voto. Compartilho com você uma das candidaturas comprometidas na luta pelo meio ambiente e contra as ameaças climáticas. Conheça as propostas na plataforma *Vote pelo Clima!* {{ request.build_absolute_uri|urlencode }}">
<span class="ds-icon-whatsapp"></span>
WhatsApp
</a>
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri|urlencode }}&text=Confira a candidatura de {{ candidature.ballot_name }}" target="_blank">
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://twitter.com/intent/tweet?url={{ request.build_absolute_uri|urlencode }}&text=O clima mudou. A política precisa mudar. #VotePeloClima é a plataforma que reúne candidaturas de todo o Brasil comprometidas com a pauta climática, eu sou uma delas! Acesse o perfil e conheça as propostas." target="_blank">
<span class="ds-icon-x"></span>
Twitter
</a>
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri|urlencode }}&title=Confira a candidatura de {{ candidature.ballot_name }}" target="_blank">
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://www.linkedin.com/shareArticle?mini=true&url={{ request.build_absolute_uri|urlencode }}&title=O clima mudou. A política precisa mudar.&summary=A #VotePeloClima é a plataforma que reúne candidaturas de todo o Brasil comprometidas com a pauta climática, eu sou uma delas! Acesse o perfil e conheça as propostas." target="_blank">
<span class="ds-icon-linkedin"></span>
LinkedIn
</a>
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri|urlencode }}" target="_blank">
<a class="btn btn-primary text-uppercase d-inline-flex justify-content-center align-items-center gap-1" href="https://www.facebook.com/sharer/sharer.php?u={{ request.build_absolute_uri|urlencode }}&quote=O clima mudou. A política precisa mudar. #VotePeloClima é a plataforma que reúne candidaturas de todo o Brasil comprometidas com a pauta climática, eu sou uma delas! Acesse o perfil e conheça as propostas." target="_blank">
<span class="ds-icon-facebook"></span>
Facebook
</a>
Expand All @@ -207,4 +181,5 @@ <h2 class="fw-bold text-uppercase">Compartilhe nas redes</h2>

{% block footer_js %}
<script src="{% static 'js/copy-to-clipboard.js' %}" type="text/javascript"></script>
<script src="{% static 'js/carousel-icons.js' %}" type="text/javascript"></script>
{% endblock %}
6 changes: 3 additions & 3 deletions 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 @@ -13,11 +13,11 @@ <h1 class="text-uppercase">Vamos <strong>começar?</strong></h1>
{% block form_fields %}{% endblock %}

{% block form_actions %}
<div class="d-flex flex-column flex-lg-row align-items-end justify-content-between">
<div class="">
<div class="d-flex flex-column flex-lg-row align-items-center align-items-md-end justify-content-between">
<div>
{% crispy wizard.form %}
</div>
<div class="">
<div>
{% if wizard.steps.next %}
<input class="btn btn-secondary mb-3" name="wizard_goto_step" type="submit" value="Iniciar cadastro" />
{% endif %}
Expand Down
4 changes: 2 additions & 2 deletions ...g_eleicoes/votepeloclima/candidature/templates/candidature/templatetags/social_media.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% if url and kind %}
<a href="{{ url }}" class="badge bg-primary p-1">
<span class="ds-icon-{{ kind }}"></span>
<a href="{{ url }}" class="p-1">
<span class="ds-icon-{{ kind }}-cinza"></span>
</a>
{% endif %}
Binary file added app/org_eleicoes/votepeloclima/static/imgs/logo-clima-de-eleicao.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading