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

Feat / update-news #253

Draft
wants to merge 4 commits into
base: main
Choose a base branch
from
Draft

Feat / update-news #253

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0a24a24
bug: liveview not loads
juanzeen Jan 18, 2025
4dd1206
Merge branch 'main' into feat/show-news
zoedsoupe Jan 19, 2025
dedb47c
bug: liveview not loads
juanzeen Jan 18, 2025
27d29bd
format
zoedsoupe Jan 19, 2025
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
2 changes: 1 addition & 1 deletion .env.dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
export DATABASE_USER=postgres
export DATABASE_PASS=postgres
export DATABASE_HOST=127.0.0.1
export DATABASE_NAME=postgres
export DATABASE_NAME=pescarte
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

isso aqui vai quebrar todo mundo... se precisar os valores, cria um .env.dev.local e sobrescreve as que vc precisa mudar nesse arquivo por favor

export DATABASE_PORT=54322
export DATABASE_URL=ecto://$DATABASE_USER:$DATABASE_PASS@$DATABASE_HOST:$DATABASE_PORT/$DATABASE_NAME

Expand Down
246 changes: 230 additions & 16 deletions assets/css/noticias.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,25 @@
.noticias-grid,
.noticia-wrapper {
.noticia-wrapper {
max-width: 100vw !important;
div {
max-width: 100vw;
}
}

.landing-grid {
.news-container {
margin-top: -15%;
}
}

@media (max-width: 768px) {
.landing-grid {
.news-container {
margin-top: -35%;
}
}
}

/* trocando gallery-carousel por land-carousel */
.land-carousel {
margin-bottom: 70px;
Expand Down Expand Up @@ -56,28 +70,28 @@
/* pegando o get-to-know do sobre e ajustando as notícias */
.get-to-know {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 56px;
padding: 80px 40px;
padding: 10px 10px 60px 10px;

img {
object-fit: cover;
height: 465px;
width: 50%;
max-width: 668px;
width: 75%;
max-width: 75%;
border-radius: 16px;
flex-shrink: 1;
}
.know-content {
display: flex;
flex-direction: column;
width: 50%;
width: 75%;
gap: 25px;
}
@media (max-width: 768px) {
.get-to-know {
flex-direction: column;
align-items: center;
justify-content: center;
gap: 18px;
Expand All @@ -103,17 +117,18 @@
justify-content: center;
gap: 56px;
padding: 80px 40px;
width: 75%;
margin: 0 auto;
}

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


/* Estilo para telas pequenas (móveis) */
@media (max-width: 768px) {
.phases {
Expand All @@ -122,6 +137,7 @@
justify-content: center;
gap: 18px;
padding: 40px 20px;
margin: 0;
}
.noticia-text {
width: 100vw;
Expand Down Expand Up @@ -158,7 +174,7 @@
}

.noticia .noticia-descricao h2 {
color: #0064C8;
color: #0064c8;
Copy link

@coderabbitai coderabbitai bot Jan 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Padronize os valores de cores

As cores estão definidas em diferentes formatos. Para melhor manutenção, considere usar variáveis CSS ou um padrão único de declaração.

:root {
+  --primary-blue: #0064c8;
+  --text-dark: #404040;
}

.noticia .noticia-descricao h2 {
-  color: #0064c8;
+  color: var(--primary-blue);
}

Also applies to: 195-195, 209-209

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

o bot tá certo kk a gente um arquivo com todas as constantes de cores pra css, por favor, prefira usar elas doq literais de hexadecimal

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zoedsoupe Entendi! Sim, encontrei o sistema de cores no tailwind.config.js. Para o caso específico do #0064c8, devemos usar a classe text-blue-100 ao invés do valor hexadecimal.

Aqui está como ficaria a correção:

.noticia .noticia-descricao h2 {
  @apply text-blue-100;
  // ao invés de color: #0064c8;
}

O mesmo se aplica para outras cores no arquivo. Por exemplo:

  • #404040 -> text-black-80
  • #66a2de -> text-blue-60
  • #E7E7E7 -> text-black-10
🔗 Analysis chain
🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Search for CSS/SCSS files that might contain color variables
fd -e scss -e css | xargs rg -l "(:root|--|\$color|\$blue|\$primary)"

Length of output: 141

Script:

#!/bin/bash
# Check content of the identified files for color definitions
echo "=== radio.scss ==="
rg "(:root|--|\$color|\$blue|\$primary)" assets/css/radio.scss -A 2 -B 2

echo -e "\n=== landing.scss ==="
rg "(:root|--|\$color|\$blue|\$primary)" assets/css/landing.scss -A 2 -B 2

echo -e "\n=== date_input.scss ==="
rg "(:root|--|\$color|\$blue|\$primary)" assets/css/date_input.scss -A 2 -B 2

Length of output: 1264

Script:

#!/bin/bash
# Search for files that might contain color definitions
echo "=== Looking for color definition files ==="
fd -e scss -e css "colors|variables|theme|tokens"

echo -e "\n=== Looking for tailwind config ==="
fd "tailwind.config"

Length of output: 280

Script:

#!/bin/bash
# Check Tailwind config for color definitions
echo "=== Tailwind Config Colors ==="
cat assets/tailwind.config.js

Length of output: 1954

✏️ Learnings added 
Learnt from: zoedsoupe
PR: peapescarte/pescarte-plataforma#253
File: assets/css/noticias.scss:177-177
Timestamp: 2025-01-19T18:27:27.837Z
Learning: In the Pescarte project, color values should be applied using Tailwind's utility classes (defined in tailwind.config.js) instead of hex literals. The color system includes semantic scales from 100 to 5 for various colors (blue, black, orange, green, yellow, red). For example, use `@apply text-blue-100` instead of `color: #0064c8`.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.

font-size: 32px;
line-height: 38px;
font-weight: 700;
Expand All @@ -176,7 +192,7 @@

.noticia .noticia-descricao strong em {
text-decoration: underline;
color: #0064C8;
color: #0064c8;
font-weight: 400;
font-style: normal;
}
Expand All @@ -187,11 +203,10 @@
margin-bottom: 40px;
}


.noticia .noticia-descricao p a {
font-weight: 700;
line-height: 24px;
color: #0064C8;
color: #0064c8;
}

.noticia .noticia-descricao p a::after {
Expand All @@ -218,3 +233,202 @@
padding: 40px;
}
}

/* Estilização página de listagem de notícias */
.news-container {
grid-area: news;

h2 {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 5rem;
}

.news-cards {
@apply flex flex-wrap justify-center md:mt-10;

.news-item {
@apply flex flex-col max-w-sm;
margin: 0 2.5rem 2.5rem 2.5rem;
width: 20.125rem;
gap: 6px;

.text-container {
display: flex;
flex-direction: column;
gap: 6px;

.news-date {
font-size: 12px;
font-weight: 400;
color: #66a2de;
line-height: 24px;
}
}

img {
border-radius: 8px;
width: 100%;
height: auto;
object-fit: cover;
max-height: 238px;
}

h2 {
display: flex;
justify-content: center;
}

a.link {
display: flex;
align-items: center;
margin: auto 0 1.5rem 1.5rem;

button {
gap: 1rem;

p {
font-family: "Work Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.125rem;
}

svg {
width: 1.5rem;
height: 1.5rem;
}
}
}
}
}
}
Comment on lines +238 to +307
Copy link

@coderabbitai coderabbitai bot Jan 18, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Boa implementação do grid de notícias!

A estrutura do grid de notícias está bem organizada e responsiva. Alguns pontos de melhoria:

  • Considere usar CSS Grid para melhor controle do layout
  • Adicione transições suaves nos elementos interativos
 .news-container {
   .news-cards {
     @apply flex flex-wrap justify-center md:mt-10;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(20.125rem, 1fr));
+    gap: 2.5rem;

     .news-item {
+      transition: transform 0.2s ease;
+
+      &:hover {
+        transform: translateY(-5px);
+      }
     }
   }
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.news-container {
grid-area: news;
h2 {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 5rem;
}
.news-cards {
@apply flex flex-wrap justify-center md:mt-10;
.news-item {
@apply flex flex-col max-w-sm;
margin: 0 2.5rem 2.5rem 2.5rem;
width: 20.125rem;
gap: 6px;
.text-container {
display: flex;
flex-direction: column;
gap: 6px;
.news-date {
font-size: 12px;
font-weight: 400;
color: #66a2de;
line-height: 24px;
}
}
img {
border-radius: 8px;
width: 100%;
height: auto;
object-fit: cover;
max-height: 238px;
}
h2 {
display: flex;
justify-content: center;
}
a.link {
display: flex;
align-items: center;
margin: auto 0 1.5rem 1.5rem;
button {
gap: 1rem;
p {
font-family: "Work Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.125rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
}
}
}
}
}
}
.news-container {
grid-area: news;
h2 {
display: flex;
justify-content: center;
margin-top: 40px;
margin-bottom: 5rem;
}
.news-cards {
@apply flex flex-wrap justify-center md:mt-10;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20.125rem, 1fr));
gap: 2.5rem;
.news-item {
@apply flex flex-col max-w-sm;
margin: 0 2.5rem 2.5rem 2.5rem;
width: 20.125rem;
gap: 6px;
transition: transform 0.2s ease;
&:hover {
transform: translateY(-5px);
}
.text-container {
display: flex;
flex-direction: column;
gap: 6px;
.news-date {
font-size: 12px;
font-weight: 400;
color: #66a2de;
line-height: 24px;
}
}
img {
border-radius: 8px;
width: 100%;
height: auto;
object-fit: cover;
max-height: 238px;
}
h2 {
display: flex;
justify-content: center;
}
a.link {
display: flex;
align-items: center;
margin: auto 0 1.5rem 1.5rem;
button {
gap: 1rem;
p {
font-family: "Work Sans";
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.125rem;
}
svg {
width: 1.5rem;
height: 1.5rem;
}
}
}
}
}
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

concordo com o bot tbm! css grid é bem mais simples de manter e de tornar responsível

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@zoedsoupe Obrigado por confirmar! Sim, o CSS Grid oferece um controle mais preciso sobre o layout e torna o código mais limpo e fácil de manter. A sugestão anterior também incluiu transições suaves para melhorar a experiência do usuário.

(｀･ω･´)ゞ

✏️ Learnings added 
Learnt from: zoedsoupe
PR: peapescarte/pescarte-plataforma#253
File: assets/css/noticias.scss:238-307
Timestamp: 2025-01-19T18:26:43.978Z
Learning: CSS Grid is preferred over flexbox for grid layouts in the Pescarte platform due to its better maintainability and responsiveness capabilities.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.


/* Estilização da notícia destaque na página */
.main-new {
width: 90%;
display: flex;
justify-content: space-around;
align-items: flex-start;
margin: 0 auto;

a {
width: 60%;

img {
border-radius: 16px;
width: 90%;
max-height: 432px;
}
}

.main-new-text-container {
width: 40%;
padding: 3rem 0;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: start;

.news-date {
font-size: 14px;
font-weight: 400;
color: #66a2de;
line-height: 24px;
}

a{
width: 100%;
}

.news-title {
font-size: 32px;
font-weight: 700;
line-height: 46px;
color: #0064c8;
}

.news-description {
font-size: 14px;
font-weight: 400;
color: #101010;
line-height: 24px;
}
}
}

@media (max-width: 768px) {
.main-new {
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center;

a {
width: 90%;

img {
width: 100%;
min-height: 400px;
max-height: none;
}
}

.main-new-text-container {
width: 80%;
}
}
}
/*Fim notícia destaque*/

/*Estilização searchbar*/
.search-container {
width: 600px;
display: flex;
flex-direction: column;
margin: -1rem auto 2rem auto;
border-radius: 4px;
gap: 12px;

input{
width: inherit;
border: 1.5px solid #E7E7E7;
border-radius: 4px;
padding: 12px;

::placeholder{
color: #E7E7E7;
}
}
.tags-container{
display: flex;
gap: 12px;
justify-content: space-around;
align-items: center;

li{
color: #0064c8;
background-color: #F2F7FC;
padding: 6px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}

.active{
background-color: #0064c8;
color: #FFF;
}

}

}
Comment on lines +387 to +427
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick (assertive)

Melhore a acessibilidade da barra de pesquisa

A implementação da barra de pesquisa está boa, mas pode ser melhorada com:

  • Labels para acessibilidade
  • Feedback visual mais claro para estados de foco
  • Cores com melhor contraste
 .search-container {
   input {
+    &:focus {
+      outline: 2px solid #0064c8;
+      border-color: transparent;
+    }
   }
   
   .tags-container {
     li {
+      &:focus-visible {
+        outline: 2px solid #0064c8;
+        outline-offset: 2px;
+      }
     }
   }
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
.search-container {
width: 600px;
display: flex;
flex-direction: column;
margin: -1rem auto 2rem auto;
border-radius: 4px;
gap: 12px;
input{
width: inherit;
border: 1.5px solid #E7E7E7;
border-radius: 4px;
padding: 12px;
::placeholder{
color: #E7E7E7;
}
}
.tags-container{
display: flex;
gap: 12px;
justify-content: space-around;
align-items: center;
li{
color: #0064c8;
background-color: #F2F7FC;
padding: 6px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.active{
background-color: #0064c8;
color: #FFF;
}
}
}
.search-container {
width: 600px;
display: flex;
flex-direction: column;
margin: -1rem auto 2rem auto;
border-radius: 4px;
gap: 12px;
input{
width: inherit;
border: 1.5px solid #E7E7E7;
border-radius: 4px;
padding: 12px;
&:focus {
outline: 2px solid #0064c8;
border-color: transparent;
}
::placeholder{
color: #E7E7E7;
}
}
.tags-container{
display: flex;
gap: 12px;
justify-content: space-around;
align-items: center;
li{
color: #0064c8;
background-color: #F2F7FC;
padding: 6px 30px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
&:focus-visible {
outline: 2px solid #0064c8;
outline-offset: 2px;
}
}
.active{
background-color: #0064c8;
color: #FFF;
}
}
}


@media (max-width: 768px){
.search-container{
margin-top: 0px;
width: 328px;
}
}
29 changes: 8 additions & 21 deletions assets/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion docker-compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
version: "3.8"


services:
pescarte:
Expand Down
Loading
Loading