admtracksteel/BrainWind
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: shrink form inputs, labels, grids and tabs inside global settings modal for mobile compatibility

Browse Source
This commit is contained in:
Marcos
2026-07-10 14:14:40 +00:00
parent 4433dd38e8
commit 5c0688d807
1 changed files with 44 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/components/GlobalWindSettingsModal.tsx
+44 -43
View File
@@ -60,26 +60,26 @@ export function GlobalWindSettingsModal() {
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<Tabs defaultValue="norma" className="w-full mt-2"> <Tabs defaultValue="norma" className="w-full mt-2 min-w-0">
<TabsList className="grid w-full grid-cols-3 mb-4"> <TabsList className="flex w-full mb-4 bg-muted p-1 text-xs min-w-0">
<TabsTrigger value="norma">NBR 6123</TabsTrigger> <TabsTrigger value="norma" className="text-xs py-1 px-1.5 flex-1">NBR 6123</TabsTrigger>
<TabsTrigger value="cpi">Cpi</TabsTrigger> <TabsTrigger value="cpi" className="text-xs py-1 px-1.5 flex-1">Cpi</TabsTrigger>
<TabsTrigger value="local">Local</TabsTrigger> <TabsTrigger value="local" className="text-xs py-1 px-1.5 flex-1">Local</TabsTrigger>
</TabsList> </TabsList>
<TabsContent value="norma" className="space-y-6"> <TabsContent value="norma" className="space-y-4 min-w-0">
<div className="space-y-3"> <div className="space-y-2">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<label className="text-sm font-medium text-foreground">Velocidade Básica (V₀)</label> <label className="text-xs font-medium text-foreground">Velocidade Básica (V₀)</label>
<span className="text-sm text-muted-foreground font-mono">{v0} m/s</span> <span className="text-xs text-muted-foreground font-mono">{v0} m/s</span>
</div> </div>
<Slider min={25} max={55} step={1} value={[v0]} onValueChange={(vals) => setV0(vals[0])} className="py-1 cursor-pointer" /> <Slider min={25} max={55} step={1} value={[v0]} onValueChange={(vals) => setV0(vals[0])} className="py-1 cursor-pointer" />
</div> </div>
<div className="space-y-2"> <div className="space-y-1">
<label className="text-sm font-medium text-foreground">Fator Topográfico (S₁)</label> <label className="text-xs font-medium text-foreground">Fator Topográfico (S₁)</label>
<Select value={s1.toString()} onValueChange={(val) => setS1(Number(val))}> <Select value={s1.toString()} onValueChange={(val) => setS1(Number(val))}>
<SelectTrigger className="w-full"><SelectValue placeholder="S₁" /></SelectTrigger> <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="S₁" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="0.9">0,9 (Vale profundo protegido)</SelectItem> <SelectItem value="0.9">0,9 (Vale profundo protegido)</SelectItem>
<SelectItem value="1">1,0 (Terreno plano)</SelectItem> <SelectItem value="1">1,0 (Terreno plano)</SelectItem>
@@ -89,10 +89,10 @@ export function GlobalWindSettingsModal() {
</Select> </Select>
</div> </div>
<div className="space-y-2"> <div className="space-y-1">
<label className="text-sm font-medium text-foreground">Categoria do Terreno (S₂)</label> <label className="text-xs font-medium text-foreground">Categoria do Terreno (S₂)</label>
<Select value={terrainCategory} onValueChange={(val) => setTerrainCategory(val as typeof terrainCategory)}> <Select value={terrainCategory} onValueChange={(val) => setTerrainCategory(val as typeof terrainCategory)}>
<SelectTrigger className="w-full"><SelectValue placeholder="Categoria" /></SelectTrigger> <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Categoria" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="I">I — Superfícies lisas (Mar calmo, lagos, rios)</SelectItem> <SelectItem value="I">I — Superfícies lisas (Mar calmo, lagos, rios)</SelectItem>
<SelectItem value="II">II — Terrenos abertos em nível (Campos, pastos)</SelectItem> <SelectItem value="II">II — Terrenos abertos em nível (Campos, pastos)</SelectItem>
@@ -103,17 +103,17 @@ export function GlobalWindSettingsModal() {
</Select> </Select>
</div> </div>
<div className="rounded-md border bg-muted/40 p-3 text-xs space-y-1"> <div className="rounded-md border bg-muted/40 p-2 text-[11px] space-y-1">
<div className="flex justify-between"><span>Classe (maior dimensão):</span><span className="font-mono font-medium">{structureClass}</span></div> <div className="flex justify-between"><span>Classe (maior dimensão):</span><span className="font-mono font-medium">{structureClass}</span></div>
<div className="flex justify-between"><span>S₂:</span><span className="font-mono font-medium">{s2.toFixed(3)}</span></div> <div className="flex justify-between"><span>S₂:</span><span className="font-mono font-medium">{s2.toFixed(3)}</span></div>
<div className="flex justify-between"><span>Vₖ:</span><span className="font-mono font-medium">{vk.toFixed(2)} m/s</span></div> <div className="flex justify-between"><span>Vₖ:</span><span className="font-mono font-medium">{vk.toFixed(2)} m/s</span></div>
<div className="flex justify-between"><span>q:</span><span className="font-mono font-medium">{q.toFixed(4)} kN/m²</span></div> <div className="flex justify-between"><span>q:</span><span className="font-mono font-medium">{q.toFixed(4)} kN/m²</span></div>
</div> </div>
<div className="space-y-2"> <div className="space-y-1">
<label className="text-sm font-medium text-foreground">Grupo Estatístico (S₃)</label> <label className="text-xs font-medium text-foreground">Grupo Estatístico (S₃)</label>
<Select value={s3Group.toString()} onValueChange={(val) => setS3Group(Number(val) as 1 | 2 | 3 | 4 | 5)}> <Select value={s3Group.toString()} onValueChange={(val) => setS3Group(Number(val) as 1 | 2 | 3 | 4 | 5)}>
<SelectTrigger className="w-full"><SelectValue placeholder="Grupo" /></SelectTrigger> <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Grupo" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="1">Grupo 1 — Risco à vida (Hospitais, quartéis) (S₃=1,11)</SelectItem> <SelectItem value="1">Grupo 1 — Risco à vida (Hospitais, quartéis) (S₃=1,11)</SelectItem>
<SelectItem value="2">Grupo 2 — Edificações comuns (Hotéis, residências) (S₃=1,06)</SelectItem> <SelectItem value="2">Grupo 2 — Edificações comuns (Hotéis, residências) (S₃=1,06)</SelectItem>
@@ -124,20 +124,20 @@ export function GlobalWindSettingsModal() {
</Select> </Select>
</div> </div>
<div className="space-y-3"> <div className="space-y-2">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<label className="text-sm font-medium text-foreground">S₃ customizado</label> <label className="text-xs font-medium text-foreground">S₃ customizado</label>
<span className="text-sm text-muted-foreground font-mono">{s3.toFixed(2)}</span> <span className="text-xs text-muted-foreground font-mono">{s3.toFixed(2)}</span>
</div> </div>
<Slider min={0.83} max={1.10} step={0.01} value={[s3]} onValueChange={(vals) => setS3(vals[0])} className="py-1 cursor-pointer" /> <Slider min={0.83} max={1.10} step={0.01} value={[s3]} onValueChange={(vals) => setS3(vals[0])} className="py-1 cursor-pointer" />
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="cpi" className="space-y-4"> <TabsContent value="cpi" className="space-y-4 min-w-0">
<div className="space-y-2"> <div className="space-y-1">
<label className="text-sm font-medium text-foreground">Caso de Permeabilidade</label> <label className="text-xs font-medium text-foreground">Caso de Permeabilidade</label>
<Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}> <Select value={permeabilityCase} onValueChange={(val) => setPermeabilityCase(val as PermeabilityCase)}>
<SelectTrigger className="w-full"><SelectValue placeholder="Selecione" /></SelectTrigger> <SelectTrigger className="w-full text-xs h-8"><SelectValue placeholder="Selecione" /></SelectTrigger>
<SelectContent> <SelectContent>
<SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem> <SelectItem value="two-opposite-permeable">Duas faces opostas permeáveis</SelectItem>
<SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem> <SelectItem value="four-equally-permeable">Quatro faces igualmente permeáveis</SelectItem>
@@ -150,52 +150,53 @@ export function GlobalWindSettingsModal() {
</div> </div>
{(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && ( {(permeabilityCase === 'dominant-windward' || permeabilityCase === 'dominant-lateral') && (
<div className="space-y-3 mt-4"> <div className="space-y-2 mt-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<label className="text-sm font-medium text-foreground">Razão de áreas</label> <label className="text-xs font-medium text-foreground">Razão de áreas</label>
<span className="text-sm text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span> <span className="text-xs text-muted-foreground font-mono">{cpiRatio.toFixed(2)}</span>
</div> </div>
<Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" /> <Slider min={0.1} max={5} step={0.05} value={[cpiRatio]} onValueChange={(vals) => setCpiRatio(vals[0])} className="py-1 cursor-pointer" />
<p className="text-xs text-muted-foreground"> <p className="text-[10px] leading-tight text-muted-foreground">
Razão entre a área da abertura dominante e a área total das demais aberturas em faces com sucção externa. Razão entre a área da abertura dominante e a área total das demais aberturas em faces com sucção externa.
</p> </p>
</div> </div>
)} )}
<div className="rounded-md border bg-muted/40 p-3 mt-4"> <div className="rounded-md border bg-muted/40 p-2 mt-3">
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<span className="text-sm font-medium">Cpi calculado:</span> <span className="text-xs font-medium">Cpi calculado:</span>
<Badge variant="default" className="font-mono text-base">{cpi.toFixed(2)}</Badge> <Badge variant="default" className="font-mono text-sm">{cpi.toFixed(2)}</Badge>
</div> </div>
<p className="text-xs text-muted-foreground mt-2"> <p className="text-[10px] leading-tight text-muted-foreground mt-1">
Limitado a ±0,9 conforme norma. A pressão final usada é p = q · (Cpe − Cpi). Limitado a ±0,9 conforme norma. A pressão final usada é p = q · (Cpe − Cpi).
</p> </p>
</div> </div>
</TabsContent> </TabsContent>
<TabsContent value="local" className="space-y-4"> <TabsContent value="local" className="space-y-3 min-w-0">
<div className="space-y-3"> <div className="space-y-2">
<Input <Input
placeholder="Buscar cidade ou estação..." placeholder="Buscar cidade ou estação..."
value={stationQuery} value={stationQuery}
onChange={(e) => setStationQuery(e.target.value)} onChange={(e) => setStationQuery(e.target.value)}
className="h-8 text-xs"
/> />
<div className="max-h-[300px] overflow-y-auto rounded-md border divide-y"> <div className="max-h-[200px] overflow-y-auto rounded-md border divide-y">
{filteredStations.slice(0, 30).map((s) => ( {filteredStations.slice(0, 30).map((s) => (
<button <button
key={s.id} key={s.id}
onClick={() => setV0(s.v0)} onClick={() => setV0(s.v0)}
className="w-full text-left px-3 py-2 hover:bg-muted/60 transition-colors" className="w-full text-left px-2 py-1.5 hover:bg-muted/60 transition-colors"
> >
<div className="flex justify-between"> <div className="flex justify-between items-center">
<span className="font-medium text-sm">{s.nome}</span> <span className="font-medium text-xs truncate max-w-[150px]">{s.nome}</span>
<Badge variant="outline" className="font-mono text-xs">V₀ = {s.v0} m/s</Badge> <Badge variant="outline" className="font-mono text-[10px] py-0 px-1">V₀ = {s.v0} m/s</Badge>
</div> </div>
<div className="text-xs text-muted-foreground">{s.latitude} · {s.longitude} · {s.altitude} m</div> <div className="text-[10px] text-muted-foreground">{s.latitude} · {s.longitude} · {s.altitude} m</div>
</button> </button>
))} ))}
</div> </div>
<p className="text-xs text-muted-foreground"> <p className="text-[10px] leading-tight text-muted-foreground">
Selecionar uma estação ajusta V₀. Você pode sobrescrever manualmente na aba NBR. Selecionar uma estação ajusta V₀. Você pode sobrescrever manualmente na aba NBR.
</p> </p>
</div> </div>