Skip to content

Commit

Permalink
Feat/noti responsiva (#218)
Browse files Browse the repository at this point in the history
* insercao da rota da  agenda

* troquei a ordem na navbar, inseri censo e redirecionei botao da landing

* extract common tasks aliases

* criando responsividade na noticia 6 e eliminando o ponto final nos titulos das noticias

---------

Co-authored-by: Zoey de Souza Pessanha <[email protected]>
  • Loading branch information
Annabell and zoedsoupe authored Sep 18, 2024
1 parent 2bf8779 commit a275966
Show file tree
Hide file tree
Showing 7 changed files with 188 additions and 33 deletions.
1 change: 1 addition & 0 deletions assets/css/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ footer {
@import "./contact.scss";
@import "./article.scss";
@import "./boletins.scss";
@import "./noticias.scss";

// Com autenticação
@import "./pages/app/researcher/profile.scss";
Expand Down
143 changes: 141 additions & 2 deletions assets/css/noticias.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,145 @@
.noticias-grid {
.noticias-grid,
.noticia-wrapper {
max-width: 100vw !important;
div {
max-width: 100vw;
}
}
}

/* trocando gallery-carousel por land-carousel */
.land-carousel {
margin-bottom: 70px;

.glide1 {
max-width: 100vw;
max-height: 600px;
}

.glide__slide {
max-width: 100%;
height: 100%;

img {
width: 100%;
height: 100%;
max-width: 1100px;
max-height: 600px;
background-size: cover;
margin: 0 auto;
}
}
.glide__slides {
margin: 0;
padding: 0;
list-style: none;
}

.glide__bullets {
display: flex;
justify-content: center;
margin-top: 40px;
}

.glide__bullet {
@apply bg-black-10;
height: 10px;
width: 10px;
border-radius: 50%;
margin: 0 5px;
}

.glide__bullet.active {
@apply bg-blue-80;
}
}

/* pegando o get-to-know do sobre e ajustando as notícias */
.get-to-know {
display: flex;
align-items: center;
justify-content: center;
gap: 56px;
padding: 80px 40px;

img {
object-fit: cover;
height: 465px;
width: 50%;
max-width: 668px;
border-radius: 16px;
flex-shrink: 1;
}
.know-content {
display: flex;
flex-direction: column;
width: 50%;
gap: 25px;
}
@media (max-width: 768px) {
.get-to-know {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
padding: 40px 20px;
}

img {
width: 100vw;
}

.know-content {
width: 100vw;
padding: 0px 20px;
margin-top: 40px;
}
}
}
/* até aqui */

.phases {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 56px;
padding: 80px 40px;
}

.noticia-text {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 25px;
}


/* Estilo para telas pequenas (móveis) */
@media (max-width: 768px) {
.phases {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 18px;
padding: 40px 20px;
}
.noticia-text {
width: 100vw;
padding: 0px 20px;
margin-top: 40px;
}
}
@media (min-width: 360px) and (max-width: 567px) {
.phases {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 9px;
padding: 20px 10px;
}
.noticia-text {
width: 100vw;
padding: 0px 10px;
margin-top: 20px;
}
}
21 changes: 12 additions & 9 deletions lib/pescarte_web/templates/landing_html/show.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -36,10 +36,13 @@
<!-- CARDS LINKS -->
<div class="landing-links">
<div class="links-item">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/landing/landing_card_noticias.png?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL2xhbmRpbmcvbGFuZGluZ19jYXJkX25vdGljaWFzLnBuZyIsImlhdCI6MTcyNDM3Mzk1NCwiZXhwIjoyMDM5NzMzOTU0fQ.cF9b5tdo-FVUIDHh_PRpCyjl7qnhCmjTzSZgtJd2G-s&t=2024-08-23T00%3A45%3A54.250Z" />
<.text size="h3" color="text-white-100">Notícias</.text>
<DesignSystem.link href={~p"/noticias"} class="text-sm font-semibold">
<.button style="link">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/seminario%20pesca/interna1.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL3NlbWluYXJpbyBwZXNjYS9pbnRlcm5hMS5KUEciLCJpYXQiOjE3MjQ0MjEzNzAsImV4cCI6MjAzOTc4MTM3MH0.cuu5MTJuVaRDsBHa3_JbzLhO-QjnbdkbZUNkmP5xGJo&t=2024-08-23T13%3A56%3A10.362Z" />
<DesignSystem.link href="/noticias" class="text-sm font-semibold">
<.text size="h3" color="text-white-100">Notícias</.text>
<.text size="base" color="text-white-100">
Notícias do Projeto
</.text>
<.button style="primary">
Saiba mais <Lucideicons.arrow_right class="text-white-100" />
</.button>
</DesignSystem.link>
Expand Down Expand Up @@ -180,7 +183,7 @@
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Reuniões são organizadas pelo Núcleo de Direitos e Benefícios (NDB) e acontecem toda última quinta-feira do mês, a partir das 15 horas."
"Reuniões são organizadas pelo Núcleo de Direitos e Benefícios (NDB) e acontecem toda última quinta-feira do mês, a partir das 15 horas"
) %>
</.text>
<DesignSystem.link href="/noticias/noti4" class="text-sm font-semibold">
Expand All @@ -198,13 +201,13 @@
<a href="/noticias/noti1">
<.text size="h4" color="text-blue-100">
<%= handle_notice_title_length(
"Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa."
"Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa"
) %>
</.text>
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Estudo aponta tecnologias utilizadas na pesca e maricultura que auxiliem nas soluções de infraestrutura dos Projetos de Geração de Trabalho e Renda."
"Estudo aponta tecnologias utilizadas na pesca e maricultura que auxiliem nas soluções de infraestrutura dos Projetos de Geração de Trabalho e Renda"
) %>
</.text>
<DesignSystem.link href="/noticias/noti1" class="text-sm font-semibold">
Expand All @@ -227,7 +230,7 @@
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Pesquisas desenvolvidas cumprem com o desafio de mitigar os impactos das atividades de extração e produção de petróleo e gás na Bacia de Campos."
"Pesquisas desenvolvidas cumprem com o desafio de mitigar os impactos das atividades de extração e produção de petróleo e gás na Bacia de Campos"
) %>
</.text>
<DesignSystem.link href="/noticias/noti2" class="text-sm font-semibold">
Expand All @@ -251,7 +254,7 @@
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados."
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados"
) %>
</.text>
<DesignSystem.link href="/noticias/noti3" class="text-sm font-semibold">
Expand Down
2 changes: 1 addition & 1 deletion lib/pescarte_web/templates/noti1_html/show.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="phases">
<div class="nossas-equipes-wrapper">
<.text size="h2" color="text-blue-100">
Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa.
Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa
</.text>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lib/pescarte_web/templates/noti5_html/show.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="phases">
<div class="nossas-equipes-wrapper">
<.text size="h2" color="text-blue-100">
1ª edição do Seminário Internacional da Pesca Artesanal marca os 10 anos do PEA Pescarte e reúne mais de 500 pessoas.
1ª edição do Seminário Internacional da Pesca Artesanal marca os 10 anos do PEA Pescarte e reúne mais de 500 pessoas
</.text>
</div>
</div>
Expand Down
19 changes: 10 additions & 9 deletions lib/pescarte_web/templates/noti6_html/show.html.heex
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
<main class="equipes-wrapper">
<main class="noticia-wrapper">
<div class="phases">
<div class="nossas-equipes-wrapper">
<div class="noticia-text">
<.text size="h2" color="text-blue-100">
Núcleo de Pesquisa organiza grupos focais para levantamento de seis temáticas nas comunidades
de pesca da região.
de pesca da região
</.text>
</div>
</div>

<div class="phases">
<div class="get-to-know">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/grupos%20focais/interna.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL2dydXBvcyBmb2NhaXMvaW50ZXJuYS5KUEciLCJpYXQiOjE3MjQ0MjExMTEsImV4cCI6MjAzOTc4MTExMX0.vXUzVUkScTiPy9sv84a4YLFzrUAlP55SwU73AvRatZE&t=2024-08-23T13%3A51%3A51.153Z" />
<div class="phase-content">
<div class="know-content">
<.text size="lg" color="text-black-80">
O PEA Pescarte tem na pesquisa um de seus braços para o fortalecimento da organização comunitária
da cadeia produtiva da pesca artesanal, como preconiza o plano de trabalho para a implementação de
Expand All @@ -30,16 +30,17 @@
equipes municipais, que realizaram as mobilizações dos integrantes da cadeia produtiva da pesca e
auxiliaram na realização da atividade.
</.text>
</div>
</div>

<div class="get-to-know">
<div class="noticia-text">
<.text size="lg" color="text-black-80">
Neste ano, os grupos focais foram realizados pela primeira vez com as comunidades de pesca de
Búzios, Carapebus e Rio das Ostras. Em Arraial do Cabo, Cabo Frio, Campos, Macaé, Quissamã, São
Francisco de Itabapoana e São João da Barra a atividade havia sido promovida em 2015, na primeira
fase do PEA Pescarte
</.text>
</div>
</div>
<div class="phases">
<div class="phase-content">
<.text size="lg" color="text-black-80">
O grupo focal tem como uma das funções aprofundar os debates com base nos dados levantados do
Censo da Pesca, que já vinham sendo desenvolvidos pelas linhas de pesquisa. A atividade
Expand Down
33 changes: 22 additions & 11 deletions lib/pescarte_web/templates/noticias_html/show.html.heex
Original file line number Diff line number Diff line change
Expand Up @@ -3,29 +3,40 @@
<%= @error_message %>
</.flash>

<div class="gallery-carousel">
<.text size="h2" color="text-blue-100">Galeria de Notícias Pescarte</.text>
<div class="glide glide2">
<div class="land-carousel">
<!-- <.text size="h2" color="text-blue-100">Galeria de Notícias Pescarte</.text> -->
<div class="glide1">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/mulheres%20e%20direitos/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL211bGhlcmVzIGUgZGlyZWl0b3MvY2FwYS5KUEciLCJpYXQiOjE3MjQ0MjA0NzIsImV4cCI6MjAzOTc4MDQ3Mn0.sewu3JT9ZCyFomQkKeuf6HMGnA3dtEmnIupv0Y7AWyY&t=2024-08-23T13%3A41%3A12.698Z" />
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/seminario%20pesca/interna1.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL3NlbWluYXJpbyBwZXNjYS9pbnRlcm5hMS5KUEciLCJpYXQiOjE3MjQ0MjEzNzAsImV4cCI6MjAzOTc4MTM3MH0.cuu5MTJuVaRDsBHa3_JbzLhO-QjnbdkbZUNkmP5xGJo&t=2024-08-23T13%3A56%3A10.362Z" />
</li>
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/tecnologia%20social/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL3RlY25vbG9naWEgc29jaWFsL2NhcGEuSlBHIiwiaWF0IjoxNzI0NDE4NDQzLCJleHAiOjIwMzk3Nzg0NDN9.i6DpnsFFdRpOuEy5Kqyu0h_S7ziJt1p1qtmD94YkB6k&t=2024-08-23T13%3A07%3A23.299Z" />
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/grupos%20focais/interna.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL2dydXBvcyBmb2NhaXMvaW50ZXJuYS5KUEciLCJpYXQiOjE3MjQ0MjExMTEsImV4cCI6MjAzOTc4MTExMX0.vXUzVUkScTiPy9sv84a4YLFzrUAlP55SwU73AvRatZE&t=2024-08-23T13%3A51%3A51.153Z" />
</li>
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/realinhamento%20pesquisa/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL3JlYWxpbmhhbWVudG8gcGVzcXVpc2EvY2FwYS5KUEciLCJpYXQiOjE3MjQ0MTk4ODQsImV4cCI6MjAzOTc3OTg4NH0.Wbh5_ZGtPO6xO4VMnxAI5admEo6XdU1FUacdPMwlJSA&t=2024-08-23T13%3A31%3A24.302Z" />
</li>
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/mapeamento%20mercado/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL21hcGVhbWVudG8gbWVyY2Fkby9jYXBhLkpQRyIsImlhdCI6MTcyNDQxOTgyOCwiZXhwIjoyMDM5Nzc5ODI4fQ.TxJyAKUE4gvGwGDBOMd4bCupVFCyCO1OLDfbfa0Z_oE&t=2024-08-23T13%3A30%3A29.142Z" />
</li>
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/mulheres%20e%20direitos/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL211bGhlcmVzIGUgZGlyZWl0b3MvY2FwYS5KUEciLCJpYXQiOjE3MjQ0MjA0NzIsImV4cCI6MjAzOTc4MDQ3Mn0.sewu3JT9ZCyFomQkKeuf6HMGnA3dtEmnIupv0Y7AWyY&t=2024-08-23T13%3A41%3A12.698Z" />
</li>
<li class="glide__slide">
<img src="https://rrosgcmviafnxjshljoq.supabase.co/storage/v1/object/sign/static/images/noticias/tecnologia%20social/capa.JPG?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJzdGF0aWMvaW1hZ2VzL25vdGljaWFzL3RlY25vbG9naWEgc29jaWFsL2NhcGEuSlBHIiwiaWF0IjoxNzI0NDE4NDQzLCJleHAiOjIwMzk3Nzg0NDN9.i6DpnsFFdRpOuEy5Kqyu0h_S7ziJt1p1qtmD94YkB6k&t=2024-08-23T13%3A07%3A23.299Z" />
</li>
</ul>
</div>

<div class="glide__progress">
<div class="glide__progress-bar"></div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0"></button>
<button class="glide__bullet" data-glide-dir="=1"></button>
<button class="glide__bullet" data-glide-dir="=2"></button>
</div>
<!-- <div class="glide__progress">
<div class="glide__progress-bar"></div>
</div> -->
</div>
</div>

Expand Down Expand Up @@ -98,7 +109,7 @@
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados."
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados"
) %>
</.text>
<DesignSystem.link href="/noticias/noti4" class="text-sm font-semibold">
Expand All @@ -117,7 +128,7 @@
<a href="/noticias/noti1">
<.text size="h4" color="text-blue-100">
<%= handle_notice_title_length(
"Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa."
"Tecnologia social nos empreendimentos de geração de renda na cadeia da pesca artesanal é abordado em pesquisa"
) %>
</.text>
</a>
Expand All @@ -142,7 +153,7 @@
<a href="/noticias/noti2">
<.text size="h4" color="text-blue-100">
<%= handle_notice_title_length(
"Reunião de Avaliação e Realinhamento do Núcleo de Pesquisa promove ecologia de saberes no PEA Pescarte."
"Reunião de Avaliação e Realinhamento do Núcleo de Pesquisa promove ecologia de saberes no PEA Pescarte"
) %>
</.text>
</a>
Expand Down Expand Up @@ -172,7 +183,7 @@
</a>
<.text size="sm" color="text-black-60">
<%= handle_notice_desc_length(
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados."
"Pesquisa tem o objetivo de compreender o comportamento do consumidor e dos fornecedores para levar aos PGTR como funciona o mercado de pescados"
) %>
</.text>
<DesignSystem.link href="/noticias/noti3" class="text-sm font-semibold">
Expand Down

0 comments on commit a275966

Please sign in to comment.