From 2c5f4c151488e6adffdd06dd355c4d77a585a428 Mon Sep 17 00:00:00 2001 From: Vinicius Bueno Date: Mon, 3 Jun 2024 13:20:35 -0300 Subject: [PATCH 1/6] header desktop to mobile --- Frontend/src/components/Header.css | 63 ++++++++++++++++++------------ 1 file changed, 39 insertions(+), 24 deletions(-) diff --git a/Frontend/src/components/Header.css b/Frontend/src/components/Header.css index d32faba..2236037 100644 --- a/Frontend/src/components/Header.css +++ b/Frontend/src/components/Header.css @@ -6,14 +6,14 @@ margin-top: 3rem; display: flex; justify-content: space-between; + flex-direction: column; align-items: center; padding-inline: 1.5rem; padding-bottom: 3rem; } .header__logo { - position: absolute; - left: calc(50vw - 118px); + position: static; } .account-icon { @@ -28,12 +28,15 @@ .header__icons { display: flex; align-items: center; + padding-top: 16px; + gap: 24px; } .header__corner-menu { display: flex; gap: 24px; align-items: center; + margin: auto; } .header__login-box { @@ -41,6 +44,7 @@ align-items: center; justify-content: space-around; flex-direction: column; + margin: auto; } .header__login-button { @@ -68,15 +72,19 @@ } .header__hamburguer { - display: none; + display: flex; + padding-top: 0; } .header__menu { display: none; } -.header__user-button { - margin-left: 24px; +.header__menu_open { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; } .header__line { @@ -141,48 +149,55 @@ align-items: center; } -@media screen and (max-width: 880px) { +.header__user-button { + margin: 0; +} + +.header input { + padding-bottom: 10px; +} + +@media screen and (min-width: 880px) { .header__hamburguer { - display: flex; + display: none; } .header__hamburger { - padding-top: 10px; + padding-top: 0; + } + .header__user-button { + margin-left: 24px; } .header__menu_open { - display: flex; - justify-content: center; - flex-direction: column; - align-items: center; + display: none; } .header__logo { - position: static; + position: absolute; + left: calc(50vw - 118px); } .header__icons { - gap: 24px; - } - - .header__user-button { - margin: 0; + gap: 0 !important; } } -@media screen and (max-width: 580px) { +@media screen and (min-width: 580px) { .header__top { - flex-direction: column; + flex-direction: row; } + .header__hamburger { + padding-top: 0; + } .header__icons { - padding-top: 16px; - display: flex; - align-items: center; + padding-top: 0; + gap: 24px; } .header__login-box { - margin: auto; + margin: 0; } .header__corner-menu { From 8e7618e1072f5c14db433004c768b302f0574d3e Mon Sep 17 00:00:00 2001 From: Vinicius Bueno Date: Mon, 3 Jun 2024 14:18:42 -0300 Subject: [PATCH 2/6] fixed sobre css mobile --- Frontend/src/pages/Sobre.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/Frontend/src/pages/Sobre.css b/Frontend/src/pages/Sobre.css index be8970f..ab7d23b 100644 --- a/Frontend/src/pages/Sobre.css +++ b/Frontend/src/pages/Sobre.css @@ -37,10 +37,15 @@ margin: 0; padding-bottom: 1rem; } +.sobre__main-box { + display: flex; + flex-direction: column; + align-items: center; +} .sobre__main-container { display: grid; - padding: 2rem; + padding: 1rem; grid-template-areas: 'vasos' 'paragraph1' @@ -78,8 +83,6 @@ background-size: cover; } .sobre__main-box { - display: flex; - flex-direction: column; padding-top: 96px; } .sobre__main-container { From fdf671ca700d7442a7826e75c648db9dd62d1f59 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Bueno?= <141737376+vinib96@users.noreply.github.com> Date: Mon, 3 Jun 2024 14:57:39 -0300 Subject: [PATCH 3/6] Update README.md --- README.md | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/README.md b/README.md index 81bb9c5..138bc07 100644 --- a/README.md +++ b/README.md @@ -7,3 +7,29 @@ Além disso, seguimos a metodologia BEM (Block, Element, Modifier) para garantir Para isso, aproveitamos o hook useContext do React, que nos permitiu compartilhar dados e funcionalidades entre componentes sem a necessidade de passar props manualmente. Além disso, utilizamos o hook useState para controlar o estado local de certos componentes, como a abertura e o fechamento de popups e menus. Isso nos proporcionou uma maneira simples e eficaz de lidar com a interatividade da interface do usuário. No backend, construímos rotas, modelos e controladores para lidar com usuários e produtos. Usando o conceito de API RESTful, garantimos uma comunicação eficiente entre o front-end e o back-end. As rotas foram implementadas para realizar operações CRUD (Create, Read, Update, Delete) nos modelos de usuário e produto. Para conectar o front-end ao back-end, utilizamos o fetch API. + +# Como usar o site + +Bem-vindo ao Marketplace de Produtos Reciclados! Abaixo estão algumas instruções para você começar a explorar e utilizar nosso site: + +1. **Navegação**: + - Acesse o site em [aqui](https://green-cycle.netlify.app/sobre). + - Utilize o menu de navegação para explorar as diferentes páginas disponíveis. + +2. **Registro/Login**: + - Se é a sua primeira vez aqui, clique em "Registrar" para criar uma conta. + - Se você já é um membro, basta clicar em "Login" para acessar sua conta. + +3. **Busca e Compra**: + - Utilize a barra de busca para encontrar produtos específicos ou navegue pelas categorias para descobrir novas opções. + - Ao encontrar um produto que deseja comprar, clique no icone de "+" para adicioná-lo direto à sacola ou clique nele para ver mais detalhes e, em seguida, clique em "Adicionar ao carrinho" para iniciar o processo de compra. + +4. **Carrinho e Checkout**: + - Acesse sua sacola de compras clicando no ícone de sacola de compras no canto superior direito da página. + - Caso possua cumpom de desconto, vocÊ pode inseri-lo no campo "cupom de desconto" e aplicá-lo clicando em "aplicar". + - Revise os itens em seu carrinho e clique em "Finalizar Compra" para prosseguir para o processo de checkout. + +5. **Suporte**: + - Se você tiver alguma dúvida sobre um produto ou encontrar algum problema durante o processo de compra, entre em contato conosco clicando no icone de contato presente na barra de navegação de nosso site. + +Esperamos que estas instruções facilitem sua experiência ao usar nosso Marketplace de Produtos Reciclados. Para mais informações sobre o site, consulte a seção "Sobre" do site. From bc29aaa53a0168947a008fa96382335da27641f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Bueno?= <141737376+vinib96@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:01:50 -0300 Subject: [PATCH 4/6] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 138bc07..53c7112 100644 --- a/README.md +++ b/README.md @@ -10,14 +10,14 @@ No backend, construímos rotas, modelos e controladores para lidar com usuários # Como usar o site -Bem-vindo ao Marketplace de Produtos Reciclados! Abaixo estão algumas instruções para você começar a explorar e utilizar nosso site: +Bem-vindo ao Marketplace de GreenCycle! Abaixo estão algumas instruções para você começar a explorar e utilizar nosso site: 1. **Navegação**: - Acesse o site em [aqui](https://green-cycle.netlify.app/sobre). - Utilize o menu de navegação para explorar as diferentes páginas disponíveis. 2. **Registro/Login**: - - Se é a sua primeira vez aqui, clique em "Registrar" para criar uma conta. + - Se é a sua primeira vez aqui, clique em "Crie sua conta" para criar uma conta. - Se você já é um membro, basta clicar em "Login" para acessar sua conta. 3. **Busca e Compra**: From 74b05c07e2275aa9704e88d23ce3f001f0b3c750 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Bueno?= <141737376+vinib96@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:02:12 -0300 Subject: [PATCH 5/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 53c7112..774ebd3 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ No backend, construímos rotas, modelos e controladores para lidar com usuários Bem-vindo ao Marketplace de GreenCycle! Abaixo estão algumas instruções para você começar a explorar e utilizar nosso site: 1. **Navegação**: - - Acesse o site em [aqui](https://green-cycle.netlify.app/sobre). + - Acesse o site em [aqui](https://green-cycle.netlify.app). - Utilize o menu de navegação para explorar as diferentes páginas disponíveis. 2. **Registro/Login**: From a6fdae6fa0bb88f7958c6af6f1899c81fcc1af26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Bueno?= <141737376+vinib96@users.noreply.github.com> Date: Mon, 3 Jun 2024 15:02:40 -0300 Subject: [PATCH 6/6] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 774ebd3..7e87ab7 100644 --- a/README.md +++ b/README.md @@ -32,4 +32,4 @@ Bem-vindo ao Marketplace de GreenCycle! Abaixo estão algumas instruções para 5. **Suporte**: - Se você tiver alguma dúvida sobre um produto ou encontrar algum problema durante o processo de compra, entre em contato conosco clicando no icone de contato presente na barra de navegação de nosso site. -Esperamos que estas instruções facilitem sua experiência ao usar nosso Marketplace de Produtos Reciclados. Para mais informações sobre o site, consulte a seção "Sobre" do site. +Esperamos que estas instruções facilitem sua experiência ao usar o GreenCycle. Para mais informações sobre o site, consulte a seção "Sobre" do site.