From 5b552012f59adc96a0b385ce03cbb8036235944e Mon Sep 17 00:00:00 2001 From: Mayara Marques <231035731@aluno.unb.br> Date: Mon, 16 Dec 2024 02:25:30 -0300 Subject: [PATCH] feat: accordion processo seletivo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Primeira versão do accordion da página do processo seletivo foi realizada --- mamutes/guest/static/css/admission.css | 45 +++++++++++- mamutes/guest/static/scripts/script.js | 8 +++ mamutes/guest/templates/admission.html | 97 ++++++++++++++++++++++---- 3 files changed, 135 insertions(+), 15 deletions(-) diff --git a/mamutes/guest/static/css/admission.css b/mamutes/guest/static/css/admission.css index 1ea9205..8646c85 100644 --- a/mamutes/guest/static/css/admission.css +++ b/mamutes/guest/static/css/admission.css @@ -481,10 +481,9 @@ body{ } .fac{ display: flex; - padding: 53px 33px; + padding: 3%; flex-direction: column; align-items: flex-start; - gap: 30px; align-self: stretch; border-radius: 8px; border: 2px solid #36B5FF; @@ -493,8 +492,50 @@ body{ display: flex; flex-direction: column; align-items: flex-start; + /* align-self: stretch; */ + max-width: 100%; + cursor: pointer; +} +.accordionHeader{ + display: flex; + padding: 24px; + justify-content: space-between; + align-items: center; align-self: stretch; + /* border-top: 1px solid #EEE; */ + background: #FFF; +} +.headerAccordionText{ + color: #1E1E1E; + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: normal; + flex: 1 0 0; +} +.accordionContent{ + /* padding-top: 1rem; DEIXAM ESPAÇAMENTO DO CONTEUDO À CABEÇA + line-height: 1.6; */ + background: #F9F9F9; + font-size: 14px; + color:#1E1E1E; + overflow: hidden; + max-height: 0; + transition: max-height 1s ease; +} +.accordion.active .accordionContent{ + max-height: 300px; } + +.accordion.active svg{ + transform: rotate(180deg); +} + +svg{ + transition: transform .5s ease-in; +} + #titleFAQ{ position: absolute; left: 349px; diff --git a/mamutes/guest/static/scripts/script.js b/mamutes/guest/static/scripts/script.js index aaec170..8aa418a 100644 --- a/mamutes/guest/static/scripts/script.js +++ b/mamutes/guest/static/scripts/script.js @@ -69,3 +69,11 @@ document.addEventListener("DOMContentLoaded", function () { }); }); + +const accordions = document.querySelectorAll(".accordion"); + +accordions.forEach(accordion => { + accordion.addEventListener("click", () => { + accordion.classList.toggle("active"); + }) +}) \ No newline at end of file diff --git a/mamutes/guest/templates/admission.html b/mamutes/guest/templates/admission.html index dc3d99d..b2a3d96 100644 --- a/mamutes/guest/templates/admission.html +++ b/mamutes/guest/templates/admission.html @@ -8,7 +8,9 @@ {% endblock %} + {% block content %} +
@@ -32,7 +34,7 @@

Por que entrar na

-

Mamutes do Cerrado?

+

Mamutes do Cerrado?

@@ -41,7 +43,7 @@
-

Trabalho em equipe

+

Trabalho em equipe

@@ -49,7 +51,7 @@
-

Experiência em projetos reais

+

Experiência em projetos reais

@@ -57,15 +59,15 @@
-

Participação em competições de alto nível

+

Participação em competições de alto nível

-

Como funciona o Processo Seletivo?

+

Como funciona o Processo Seletivo?

- Com a finalidade de se repor vagas e prover a manutenção do quadro de membros, um processo seletivo é realizado anualmente no semestre que se sucede a competição SAE-Aerodesign e eleição de novo capitão.

- As vagas disponíveis estão de acordo com o número de membros estipulados em cada grupo de desenvolvimento e por isso, o conselho diretor pode limitar o número de vagas oferecidas em cada processo seletivo de acordo com a necessidade do projeto, e pode divulgar ou não o número de vagas oferecidas aos candidatos. + Com a finalidade de se repor vagas e prover a manutenção do quadro de membros, um processo seletivo é realizado anualmente no semestre que se sucede a competição SAE-Aerodesign e eleição de novo capitão.

+ As vagas disponíveis estão de acordo com o número de membros estipulados em cada grupo de desenvolvimento e por isso, o conselho diretor pode limitar o número de vagas oferecidas em cada processo seletivo de acordo com a necessidade do projeto, e pode divulgar ou não o número de vagas oferecidas aos candidatos.

@@ -132,12 +134,12 @@
-

O conselho diretor se reserva ao direito de desclassificar os candidatos que não possuem o perfil desejado para a equipe desde que o número de candidatos exceda o dobro do número de vagas, em qualquer etapa. Bem como também, à possibilidade de agregar novos membros a equipe em caráter extraordinário, desde que tais tenham sido previamente estabelecidas pelo conselho.

+

O conselho diretor se reserva ao direito de desclassificar os candidatos que não possuem o perfil desejado para a equipe desde que o número de candidatos exceda o dobro do número de vagas, em qualquer etapa. Bem como também, à possibilidade de agregar novos membros a equipe em caráter extraordinário, desde que tais tenham sido previamente estabelecidas pelo conselho.

O Processo Seletivo está aberto!

-

Pronto para se juntar à nossa equipe?

+

Pronto para se juntar à nossa equipe?

Não perca a chance de fazer parte dessa família.

@@ -148,11 +150,80 @@
- +
+

Quando ocorre o processo seletivo?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Quantas vagas estão disponíveis?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Quem pode participar?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
+
+
+
+

Como é feita a seleção?

+ + + + + + + + + + +
+
+

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus molestias eaque, debitis harum rerum et iste doloribus dolore quaerat provident aspernatur perspiciatis architecto sunt deserunt velit, voluptate ex, hic aperiam!

+
-

Perguntas frequentes

+

Perguntas frequentes

- - {% endblock %} \ No newline at end of file + +{% endblock %} \ No newline at end of file