From 684dcc788fc059d84327b1c699af01679babca37 Mon Sep 17 00:00:00 2001 From: Alicelspires Date: Thu, 7 May 2026 22:32:55 -0300 Subject: [PATCH 1/2] feat: responsividade e layout de busca e calendario --- .../src/assets/styles/home/card-psicologo.css | 5 ++- .../src/assets/styles/perfil/calendario.css | 36 +++++++++++++------ frontend/src/assets/styles/perfil/section.css | 11 +++--- frontend/src/assets/styles/popups/verpsi.css | 5 +-- 4 files changed, 37 insertions(+), 20 deletions(-) diff --git a/frontend/src/assets/styles/home/card-psicologo.css b/frontend/src/assets/styles/home/card-psicologo.css index 2a28450..dcaa29b 100644 --- a/frontend/src/assets/styles/home/card-psicologo.css +++ b/frontend/src/assets/styles/home/card-psicologo.css @@ -13,8 +13,8 @@ border-radius: var(--border-radius-md); padding: 10px; display: grid; - grid-template-columns: repeat(auto-fit, minmax(max(180px, calc(25% - 22.5px)), 1fr)); - gap: 30px; + grid-template-columns: repeat(auto-fit, minmax(200px, max-content)); + gap: var(--spacing-xs); justify-content: center; width: 100%; align-self: center; @@ -51,7 +51,6 @@ var(--secondary-cream-700) 20%); padding: 20px; gap: 10px; - height: 350px; margin: 0px 5px 15px 5px; } diff --git a/frontend/src/assets/styles/perfil/calendario.css b/frontend/src/assets/styles/perfil/calendario.css index 04cff14..051dad3 100644 --- a/frontend/src/assets/styles/perfil/calendario.css +++ b/frontend/src/assets/styles/perfil/calendario.css @@ -1,6 +1,6 @@ .container-calendario { background-color: var(--secondary-cream-700); - border-radius: var(--border-radius-lg); + border-radius: var(--border-radius-md); display: flex; flex-direction: column; width: 100%; @@ -10,35 +10,35 @@ .container-calendario h1 { background-color: var(--tertiary-light-green-500); width: 100%; - padding: 10px; + padding: var(--spacing-xs); border-radius: var(--border-radius-md) var(--border-radius-md) 0 0; text-align: center; - font-size: 2rem; + font-size: 1.5rem; font-weight: 600; color: var(--black-950); } .wrapper-content-calendar { - padding: 15px; + padding: var(--spacing-xs) 0px ; background-color: white; - margin: 15px; + margin: var(--spacing-xs); border-radius: var(--border-radius-md); display: flex; flex-direction: column; - gap: 15px; + gap: var(--spacing-xs); } .header-calendario { display: flex; justify-content: center; align-items: center; - gap: 15px; + gap: var(--spacing-xs); margin-bottom: 20px; } .header-calendario h2 { font-size: 1.4rem; - font-weight: 800; + font-weight: 600; text-transform: capitalize; text-align: center; margin: 0; @@ -74,7 +74,10 @@ .calendar-unified-grid { display: grid; - grid-template-columns: 35px repeat(7, 1fr) 35px; + grid-template-columns: + 30px + repeat(7, minmax(50px, 1fr)) + 30px; gap: var(--spacing-xs); width: 100%; align-items: center; @@ -87,7 +90,7 @@ .dia-semana { text-align: center; - font-weight: 600; + font-weight: 700; color: var(--black-950); font-size: 1.1rem; padding: 10px 0; @@ -227,3 +230,16 @@ @keyframes ping { 75%, 100% { transform: scale(2.5); opacity: 0; } } + + +/* Responsividade */ +@media (max-width:950px){ + .container-calendario, + .wrapper-content-calendar{ + max-width: 100%; + } + + .calendar-unified-grid{ + grid-template-columns: 35px repeat(7, 1fr) 35px; + } +} \ No newline at end of file diff --git a/frontend/src/assets/styles/perfil/section.css b/frontend/src/assets/styles/perfil/section.css index 0d89ea6..01ad54c 100644 --- a/frontend/src/assets/styles/perfil/section.css +++ b/frontend/src/assets/styles/perfil/section.css @@ -20,8 +20,8 @@ border-radius: 12px; justify-content: space-between; margin-bottom: 2rem; - width: 50%; - gap: 1rem; + /* width: 50%; */ + gap: var(--spacing-sm); flex-direction: column; height: 100%; } @@ -31,7 +31,7 @@ .sobre-info-container{ width: 100%; } -@media (max-width:1024px){ +@media (max-width:1046px){ .container-section-perfil{ padding-inline: 2%; @@ -41,12 +41,13 @@ .container-section-perfil{ flex-direction: column; } -} -@media (max-width:768px){ .perfil-container{ width: 100%; } .container-sair{ order: 3; } +} +@media (max-width:768px){ + } \ No newline at end of file diff --git a/frontend/src/assets/styles/popups/verpsi.css b/frontend/src/assets/styles/popups/verpsi.css index 15a7ce6..4fa920b 100644 --- a/frontend/src/assets/styles/popups/verpsi.css +++ b/frontend/src/assets/styles/popups/verpsi.css @@ -5,7 +5,8 @@ position: fixed; background-color: var(--secondary-cream-700); max-height: 90vh; - overflow-y: auto; + overflow-y: auto; + overflow-x: hidden; padding: var(--spacing-xs); display: flex; flex-direction: column; @@ -18,7 +19,7 @@ text-align: center; gap: 10px; z-index: 81; - width: 600px; + width: max-content; } .container-info-psi{ From 901437f55d6ed56d95d3de3033de31ac8e944d41 Mon Sep 17 00:00:00 2001 From: Alicelspires Date: Fri, 8 May 2026 00:11:05 -0300 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20atualiza=C3=A7=C3=A3o=20de=20layout?= =?UTF-8?q?s=20gerais?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../styles/configuracoes/configuracoes.css | 409 +++++++++--------- .../src/assets/styles/home/card-psicologo.css | 8 +- .../styles/landingpage/hero-apresentacao.css | 10 - frontend/src/assets/styles/ui/buttons.css | 39 +- .../src/components/common/NavbarDesktop.jsx | 45 +- frontend/src/components/landingpage/Hero.jsx | 2 +- 6 files changed, 237 insertions(+), 276 deletions(-) diff --git a/frontend/src/assets/styles/configuracoes/configuracoes.css b/frontend/src/assets/styles/configuracoes/configuracoes.css index 3bcab15..dcc66b3 100644 --- a/frontend/src/assets/styles/configuracoes/configuracoes.css +++ b/frontend/src/assets/styles/configuracoes/configuracoes.css @@ -1,288 +1,289 @@ @import url("../popups/deletar.css"); -section.config{ - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - position: relative; - padding-inline: 3rem; +section.config { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + position: relative; + padding-inline: 3rem; } -section.config h1{ - font-size: clamp(1.5rem, 5vw, 2rem); +section.config h1 { + font-size: clamp(1.5rem, 5vw, 2rem); } -.container-section{ - display: flex; - justify-content: space-between; - width: 100%; - gap:50px; - margin:20px 0; +.container-section { + display: flex; + justify-content: space-between; + width: 100%; + gap: 50px; + margin: 20px 0; } .input-e-span input, .input-e-span select, -.tags-especializacoes-input{ - width:100%; - padding:10px; - border-radius: var(--border-radius-sm); - border: 1px solid var(--white-800); - font-size: 1rem; - margin-top:2px; +.tags-especializacoes-input { + width: 100%; + padding: 10px; + border-radius: var(--border-radius-sm); + border: 1px solid var(--white-800); + font-size: 1rem; + margin-top: 2px; } -.container-perfil h1{ - font-size: 2rem; - border-bottom: 3px solid var(--accent-dark-green-900); - margin:30px 0; - color: var(--accent-dark-green-900) +.container-perfil h1 { + font-size: 2rem; + border-bottom: 3px solid var(--accent-dark-green-900); + margin: 30px 0; + color: var(--accent-dark-green-900); } /* Imagem de perfil ----------- */ .container-img, -.img-options{ - display: flex; - flex-direction: column; - align-items: center; - gap: 2.5rem; +.img-options { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.5rem; } -.container-img{ - margin-left:0px; - padding:10px; - width: 30%; +.container-img { + margin-left: 0px; + padding: 10px; + width: 30%; +} +.imgEdit { + width: clamp(150px, 20vw, 180px); + height: clamp(150px, 20vw, 180px); + border-radius: 50%; + background-color: #29292969; + border: 1px solid #ccc; } -.imgEdit{ - width: clamp(150px, 20vw, 180px); - height: clamp(150px, 20vw, 180px); - border-radius: 50%; - background-color: #29292969; - border: 1px solid #ccc; -} /* Imagem de wallpaper */ -.img-wallpaper{ - display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; - gap: 10px; +.img-wallpaper { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: space-between; + align-items: center; + gap: 10px; } -.img-edit-wallpaper{ - width: 70%; - height: clamp(150px, 20vw, 180px); - border-radius: 10px; - background-color: #29292969; - border: 1px solid #ccc; +.img-edit-wallpaper { + width: 70%; + height: clamp(150px, 20vw, 180px); + border-radius: 10px; + background-color: #29292969; + border: 1px solid #ccc; } /* Indice da página -------------------- */ .atalhos { - width: 100%; - display: flex; - flex-direction: column; - gap: 10px; - padding:10px; - border: 1px solid black; - border-radius: 12px; + width: 100%; + display: flex; + flex-direction: column; + gap: 10px; + padding: 10px; + border: 1px solid black; + border-radius: 12px; } .atalhos li { - color: black; - padding: 5px; - border-bottom: 1px solid black; - cursor: pointer; + color: black; + padding: 5px; + border-bottom: 1px solid black; + cursor: pointer; } -#Deletar{ - color: red; +#Deletar { + color: red; } -.atalhos li:hover{ - background-color: var(--tertiary-light-green-600); - border-radius: var(--border-radius-sm); +.atalhos li:hover { + background-color: var(--tertiary-light-green-600); + border-radius: var(--border-radius-sm); } li > a#Geral, li > a#Perfil, li > a#Horarios, -li > a#Deletar{ - display:block; - width: 100%; - height: 100%; +li > a#Deletar { + display: block; + width: 100%; + height: 100%; } /* Forms =============================== */ -.container-inputs{ - width: 100%; +.container-inputs { + width: 100%; } /* Informações gerais -------- */ -.container-input-1{ - display: grid; - grid-template-columns: auto auto; - gap: 1.5rem; - margin-top:var(--spacing-sm); +.container-input-1 { + display: grid; + grid-template-columns: auto auto; + gap: 1.5rem; + margin-top: var(--spacing-sm); } /* Atualização de credenciais */ -.container-input-2{ - margin-top: 1.5rem ; - display: grid; - grid-template-columns: auto; - gap: 1.5rem; +.container-input-2 { + margin-top: 1.5rem; + display: grid; + grid-template-columns: auto; + gap: 1.5rem; } /* Informações perfil ------- */ -.container-perfil{ - display: flex; - flex-direction: column; - gap:var(--spacing-sm); +.container-perfil { + display: flex; + flex-direction: column; + gap: var(--spacing-sm); } -.container-sobre-mim, -.container-medicamento, -.container-preferencias, -.container-especializacoes, +.container-sobre-mim, +.container-medicamento, +.container-preferencias, +.container-especializacoes, .container-horario-atendimento, -.containers-articles{ - display: flex; - flex-direction: column; +.containers-articles { + display: flex; + flex-direction: column; } -.container-sobre-mim span, -.container-medicamento span, -.container-preferencias span, +.container-sobre-mim span, +.container-medicamento span, +.container-preferencias span, .container-horario-atendimento span, -.containers-articles span{ - opacity: 70%; - font-size:1rem; +.containers-articles span { + opacity: 70%; + font-size: 1rem; } -.container-sobre-mim h3, -.container-medicamento h3, -.container-preferencias h3, -.container-especializacoes h3, -.container-horario-atendimento h3{ - font-size: 1.3rem; - font-weight: 500; +.container-sobre-mim h3, +.container-medicamento h3, +.container-preferencias h3, +.container-especializacoes h3, +.container-horario-atendimento h3 { + font-size: 1.3rem; + font-weight: 500; } -.container-sobre-mim textarea, -.container-medicamento textarea, +.container-sobre-mim textarea, +.container-medicamento textarea, .container-preferencias textarea, -.containers-articles textarea{ - height: 100px; - border-radius: var(--border-radius-sm); - border: 1px solid var(--white-800); - padding: var(--spacing-xs); - transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - +.containers-articles textarea { + height: 100px; + border-radius: var(--border-radius-sm); + border: 1px solid var(--white-800); + padding: var(--spacing-xs); + transition: + border-color 0.15s ease-in-out, + box-shadow 0.15s ease-in-out; } -.container-sobre-mim textarea:focus, -.container-medicamento textarea:focus, -.container-preferencias textarea:focus, -.container-sobre-mim textarea:focus, +.container-sobre-mim textarea:focus, +.container-medicamento textarea:focus, +.container-preferencias textarea:focus, +.container-sobre-mim textarea:focus, .container-agendamento:focus, .input-e-span input:focus, .input-e-span select:focus, .containers-articles input:focus, -.containers-articles textarea:focus{ - outline: 0; - border-color: var(--primary-orange-700); - box-shadow: 0 0 0 0.2rem var(--primary-orange-700); +.containers-articles textarea:focus { + outline: 0; + border-color: var(--primary-orange-700); + box-shadow: 0 0 0 0.2rem var(--primary-orange-700); } /* Tags de especializações */ -ul.tags-list{ - display: flex; - flex-wrap: row; - gap: 10px; - margin-top: 10px; +ul.tags-list { + display: flex; + flex-wrap: row; + gap: 10px; + margin-top: 10px; } -ul.tags-list > .tag-item{ - display: flex; - align-items: center; - gap: 5px; - background-color: var(--tertiary-light-green-700); - color: var(--black-900); - padding: 5px 10px; - border-radius: var(--border-radius-lg); - margin-top: 10px; - font-size: 0.9rem; - text-align: center; - list-style:none; +ul.tags-list > .tag-item { + display: flex; + align-items: center; + gap: 5px; + background-color: var(--tertiary-light-green-700); + color: var(--black-900); + padding: 5px 10px; + border-radius: var(--border-radius-lg); + margin-top: 10px; + font-size: 0.9rem; + text-align: center; + list-style: none; } -.btn-remove-tag{ - background: none; - border: none; - display: flex; - color: var(--black-900); - cursor: pointer; - font-size: 0.9rem; +.btn-remove-tag { + background: none; + border: none; + display: flex; + color: var(--black-900); + cursor: pointer; + font-size: 0.9rem; } /* Botão de atualizar ------ */ -.container-atualizar{ - margin: 1.5rem 0 6rem 0; - display: flex; - justify-content: end; +.container-atualizar { + margin: 1.5rem 0 6rem 0; + display: flex; + justify-content: end; } /* Seção de deletar conta -- */ -.container-deletar{ - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - background-color: var(--accent-mid-orange-700); - padding: var(--spacing-sm); - border-radius: var(--border-radius-md); - color:var(--black-950); - gap:2rem; - margin:30px 0px; +.container-deletar { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + background-color: var(--accent-mid-orange-700); + padding: var(--spacing-sm); + border-radius: var(--border-radius-md); + color: var(--black-950); + gap: 2rem; + margin: 30px 0px; } -input[type="file"]{ - display:none; +input[type="file"] { + display: none; } /* Responsividade -------------------------- */ -@media(max-width:800px){ - section.config{ - padding-inline: var(--spacing-sm); - } - .atalhos{ - width:100%; - } - .container-section{ - flex-direction: column; - align-items: center; - margin: 1.5rem; - } - .container-img{ - margin: auto; - width: 100%; - } - .container-input-1{ - grid-template-columns: auto; - } - .container-atualizar{ - justify-content: center; - } - .container-deletar{ - flex-direction: column; - margin: 1.5rem; - align-items: center; - } - .pop-up-deletar div{ - width:80%; - } - .img-edit-wallpaper{ - width: 100%; - } -} \ No newline at end of file +@media (max-width: 800px) { + section.config { + padding-inline: var(--spacing-sm); + } + .atalhos { + width: 100%; + } + .container-section { + flex-direction: column; + align-items: center; + margin: 1.5rem; + } + .container-img { + margin: auto; + width: 100%; + } + .container-input-1 { + grid-template-columns: auto; + } + .container-atualizar { + justify-content: center; + } + .container-deletar { + flex-direction: column; + margin: 1.5rem; + align-items: center; + } + .pop-up-deletar div { + width: 80%; + } + .img-edit-wallpaper { + width: 100%; + } +} diff --git a/frontend/src/assets/styles/home/card-psicologo.css b/frontend/src/assets/styles/home/card-psicologo.css index dcaa29b..99c660f 100644 --- a/frontend/src/assets/styles/home/card-psicologo.css +++ b/frontend/src/assets/styles/home/card-psicologo.css @@ -110,9 +110,11 @@ border-radius: 5px; font-size: 10px; font-weight: 500; - width: max-content; - height: max-content; - flex-shrink: 0; + max-width: 100%; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + display: block; } .tags-more { diff --git a/frontend/src/assets/styles/landingpage/hero-apresentacao.css b/frontend/src/assets/styles/landingpage/hero-apresentacao.css index 1c5d45c..3d8bc22 100644 --- a/frontend/src/assets/styles/landingpage/hero-apresentacao.css +++ b/frontend/src/assets/styles/landingpage/hero-apresentacao.css @@ -94,16 +94,6 @@ main.main p { gap: var(--spacing-sm); } -.btn-hero { - background-color: transparent !important; -} - -.btn-hero:hover { - background-color: var(--tertiary-light-green-400) !important; -} - - - /* Apresentação Section-------------------- */ #apresentacao { diff --git a/frontend/src/assets/styles/ui/buttons.css b/frontend/src/assets/styles/ui/buttons.css index 2268b5b..6eed2b4 100644 --- a/frontend/src/assets/styles/ui/buttons.css +++ b/frontend/src/assets/styles/ui/buttons.css @@ -2,20 +2,9 @@ /* Navbar button */ .nav-btn-login{ - box-sizing: border-box; - background-color: var(--accent-dark-green-700); - color: var(--black-50); - padding: 9px 31px; - border: none; - font-weight: 600; - font-size: 1.2rem; - border-radius: var(--spacing-xs); - cursor: pointer; - transition: 200ms; -} - -.nav-btn-login:hover{ - background-color: var(--accent-dark-green-800); + padding: 9px 31px !important; + font-weight: 600 !important; + font-size: 1.2rem !important; } /* Button (confirmação) */ @@ -194,6 +183,28 @@ background-color: var(--accent-dark-green-600); } +/* Botão de destaque (borda e fundo transparente) */ + +.btn-hero-section{ + background-color: #a7e2938c; + color: var(--black-950); + padding: 7px 20px; + font-weight: 600; + font-size: 1rem; + border: 4px solid var(--accent-dark-green-700); + border-radius: var(--border-radius-md); + cursor: pointer; + display:flex; + justify-content: center; + align-items: center; + gap: var(--spacing-sm); + text-wrap: nowrap; +} + +.btn-hero-section:hover{ + background-color: var(--tertiary-light-green-700); +} + /* Botão Skip Navigation (Acessibilidade) */ .sr-only { diff --git a/frontend/src/components/common/NavbarDesktop.jsx b/frontend/src/components/common/NavbarDesktop.jsx index d1d75b6..27f98f4 100644 --- a/frontend/src/components/common/NavbarDesktop.jsx +++ b/frontend/src/components/common/NavbarDesktop.jsx @@ -132,7 +132,7 @@ export default function NavDesktop() { - - )} - setDropdownOpen(false)} - > - - - {user.tipo === "psicologo" && ( - setDropdownOpen(false)} - > - - - )} - - - ) : ( - <> - - )} - - diff --git a/frontend/src/components/landingpage/Hero.jsx b/frontend/src/components/landingpage/Hero.jsx index 5de9370..fc56e75 100644 --- a/frontend/src/components/landingpage/Hero.jsx +++ b/frontend/src/components/landingpage/Hero.jsx @@ -40,7 +40,7 @@ export default function Hero() { {!isAuthenticated ? ( - + ) : (<>)}