RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajustes na responsividade do modulo de pacientes

Browse Source
This commit is contained in:
Jonas Francisco 2025-11-07 00:17:40 -03:00
parent 444daa553b
commit eb8570d3e3
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
susconecta/app/paciente/resultados/ResultadosClient.tsx
View File

@ -730,15 +730,15 @@ export default function ResultadosClient() {
</section> </section>
{/* Barra de filtros secundários (agora fluída, sem sticky) */} {/* Barra de filtros secundários (agora fluída, sem sticky) */}
<section className="rounded-2xl border border-border bg-card/90 p-3 sm:p-4 shadow-lg backdrop-blur"> <section className="rounded-2xl border border-border bg-card/80 p-4 sm:p-5 shadow-md backdrop-blur">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-3"> <div className="grid grid-cols-1 sm:grid-cols-12 gap-3">
{/* Segmented control: tipo da consulta */} {/* Segmented control: tipo da consulta */}
<div className="col-span-1 sm:col-span-2 lg:col-span-3"> <div className="sm:col-span-12">
<div className="flex w-full overflow-hidden rounded-full border border-primary/40 bg-primary/5"> <div className="flex w-full overflow-hidden rounded-full border border-primary/25 bg-primary/5 shadow-sm ring-1 ring-primary/10">
<Toggle <Toggle
pressed={tipoConsulta === 'teleconsulta'} pressed={tipoConsulta === 'teleconsulta'}
onPressedChange={() => setTipoConsulta('teleconsulta')} onPressedChange={() => setTipoConsulta('teleconsulta')}
className="flex-1 rounded-none first:rounded-l-full px-4 py-2.5 text-sm font-medium transition data-[state=on]:bg-primary data-[state=on]:text-primary-foreground" className="flex-1 rounded-none first:rounded-l-full px-4 py-2.5 text-sm font-medium transition data-[state=on]:bg-primary data-[state=on]:text-primary-foreground hover:bg-primary/10"
> >
<Globe className="mr-2 h-4 w-4" /> <Globe className="mr-2 h-4 w-4" />
Teleconsulta Teleconsulta
@ -746,7 +746,7 @@ export default function ResultadosClient() {
<Toggle <Toggle
pressed={tipoConsulta === 'local'} pressed={tipoConsulta === 'local'}
onPressedChange={() => setTipoConsulta('local')} onPressedChange={() => setTipoConsulta('local')}
className="flex-1 rounded-none last:rounded-r-full px-4 py-2.5 text-sm font-medium transition data-[state=on]:bg-primary data-[state=on]:text-primary-foreground" className="flex-1 rounded-none last:rounded-r-full px-4 py-2.5 text-sm font-medium transition data-[state=on]:bg-primary data-[state=on]:text-primary-foreground hover:bg-primary/10"
> >
<Building2 className="mr-2 h-4 w-4" /> <Building2 className="mr-2 h-4 w-4" />
Consulta no local Consulta no local
@ -754,10 +754,13 @@ export default function ResultadosClient() {
</div> </div>
</div> </div>
{/* divider visual */}
<div className="sm:col-span-12 h-px bg-border/60 my-1" />
{/* Convênio */} {/* Convênio */}
<div className="col-span-1"> <div className="sm:col-span-6 lg:col-span-4">
<Select value={convenio} onValueChange={setConvenio}> <Select value={convenio} onValueChange={setConvenio}>
<SelectTrigger className="h-10 w-full rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:border-primary! focus:ring-2 focus:ring-primary cursor-pointer"> <SelectTrigger className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:border-primary focus:ring-2 focus:ring-primary">
<SelectValue placeholder="Convênio" /> <SelectValue placeholder="Convênio" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -772,18 +775,18 @@ export default function ResultadosClient() {
</div> </div>
{/* Busca por nome + Mais filtros/Limpar */} {/* Busca por nome + Mais filtros/Limpar */}
<div className="col-span-1"> <div className="sm:col-span-6 lg:col-span-4">
<div className="flex items-center gap-2"> <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2">
<Input <Input
placeholder="Buscar médico por nome" placeholder="Buscar médico por nome"
value={searchQuery} value={searchQuery}
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
className="w-full rounded-full" className="w-full sm:min-w-[220px] rounded-full"
/> />
{searchQuery ? ( {searchQuery ? (
<Button <Button
variant="ghost" variant="ghost"
className="h-10 w-full sm:w-auto" className="h-10 w-full sm:w-auto rounded-full"
onClick={async () => { onClick={async () => {
setSearchQuery('') setSearchQuery('')
setCurrentPage(1) setCurrentPage(1)
@ -807,7 +810,7 @@ export default function ResultadosClient() {
) : ( ) : (
<Button <Button
variant="outline" variant="outline"
className="h-10 w-full sm:w-auto rounded-full border border-primary/40 bg-primary/10 text-primary hover:bg-primary! hover:text-white! transition-colors" className="h-10 w-full sm:w-auto rounded-full border border-primary/30 bg-primary/5 text-primary hover:bg-primary hover:text-primary-foreground"
> >
<Filter className="mr-2 h-4 w-4" /> <Filter className="mr-2 h-4 w-4" />
Mais filtros Mais filtros
@ -817,9 +820,9 @@ export default function ResultadosClient() {
</div> </div>
{/* Bairro */} {/* Bairro */}
<div className="col-span-1"> <div className="sm:col-span-6 lg:col-span-4">
<Select value={bairro} onValueChange={setBairro}> <Select value={bairro} onValueChange={setBairro}>
<SelectTrigger className="h-10 w-full rounded-full border border-primary/40 bg-primary/10 text-primary transition duration-200 hover:border-primary! focus:ring-2 focus:ring-primary cursor-pointer"> <SelectTrigger className="h-10 w-full rounded-full border border-primary/30 bg-primary/5 text-primary hover:border-primary focus:ring-2 focus:ring-primary">
<SelectValue placeholder="Bairro" /> <SelectValue placeholder="Bairro" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
@ -832,10 +835,10 @@ export default function ResultadosClient() {
</div> </div>
{/* Voltar */} {/* Voltar */}
<div className="col-span-1 sm:col-span-2 lg:col-span-3"> <div className="sm:col-span-12">
<Button <Button
variant="ghost" variant="ghost"
className="w-full rounded-full text-primary hover:bg-primary! hover:text-white! transition-colors" className="w-full rounded-full text-primary hover:bg-primary hover:text-primary-foreground transition-colors"
onClick={() => router.back()} onClick={() => router.back()}
> >
Voltar Voltar