Merge pull request #706 from fsolla/plans/plan-issue-39
docs(plans): B200 — Municípios mobile: encaixes dos cards (densidade, labels, avatares)
This commit is contained in:
commit
e3ffb9d8a7
4 changed files with 601 additions and 0 deletions
BIN
docs/plans/municipios-mobile-ajustes-cards-ui-draft-atual.png
Normal file
BIN
docs/plans/municipios-mobile-ajustes-cards-ui-draft-atual.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
docs/plans/municipios-mobile-ajustes-cards-ui-draft-proposto.png
Normal file
BIN
docs/plans/municipios-mobile-ajustes-cards-ui-draft-proposto.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
520
docs/plans/municipios-mobile-ajustes-cards-ui-draft.html
Normal file
520
docs/plans/municipios-mobile-ajustes-cards-ui-draft.html
Normal file
|
|
@ -0,0 +1,520 @@
|
|||
<!doctype html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<title>UI draft — Municípios mobile: encaixes dos cards (pós-B196)</title>
|
||||
</head>
|
||||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-5xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards,
|
||||
alinhamento das labels e comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
|
||||
</p>
|
||||
|
||||
<!-- ============ CENA: ATUAL (referência) ============ -->
|
||||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Atual (referência — 390px)
|
||||
</h2>
|
||||
<section
|
||||
data-shot="atual"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
|
||||
>
|
||||
<!-- header do app (56px) + barra de filtro 40px colada -->
|
||||
<div
|
||||
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
|
||||
>
|
||||
<p class="text-sm font-semibold">Municípios</p>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 py-1">
|
||||
<div class="flex min-h-8 flex-1 items-center gap-1.5 rounded-lg px-2">
|
||||
<input
|
||||
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Digite para filtrar (município, território, cenário…)"
|
||||
/>
|
||||
<span
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
|
||||
>✕</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 1 — gaps grandes + 2 avatares "um em cada canto" + avatares centrados -->
|
||||
<article class="flex flex-col gap-2.5 border-b border-zinc-800 px-4 py-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0.5">
|
||||
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
|
||||
<p class="text-sm text-zinc-400">
|
||||
Território de Identidade Chapada Diamantina · ZE 45
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">12,4%</p>
|
||||
<p class="text-xs text-zinc-500">4º</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-x-3 gap-y-2">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Classe</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Reduto 8,2×</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Tendência</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Alta</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Nível</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
|
||||
Última atualização há 2 dias
|
||||
<span class="text-xs">▾</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CARD 2 — 5 avatares: pontas cortadas pelo overflow-hidden -->
|
||||
<article class="flex flex-col gap-2.5 px-4 py-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0.5">
|
||||
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
|
||||
<p class="text-sm text-zinc-400">Território de Identidade Nordeste · ZE 62</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">7,1%</p>
|
||||
<p class="text-xs text-zinc-500">18º</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-x-3 gap-y-2">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Classe</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Solo 1,1×</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Tendência</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Em disputa</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Nível</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>LS</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>FT</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>DA</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<span class="text-sm text-zinc-500">—</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
|
||||
Última atualização há 1 dia
|
||||
<span class="text-xs">▾</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<!-- ============ CENA: PROPOSTO ============ -->
|
||||
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Proposto (390px)
|
||||
</h2>
|
||||
<section
|
||||
data-shot="proposto"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
|
||||
>
|
||||
<!-- header + barra de filtro mais alta (≈48px), sem pb → 1º card colado -->
|
||||
<div
|
||||
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
|
||||
>
|
||||
<p class="text-sm font-semibold">Municípios</p>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 pt-1 pb-0">
|
||||
<div class="flex min-h-10 flex-1 items-center gap-1.5 rounded-lg px-2">
|
||||
<input
|
||||
class="min-h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Digite para filtrar (município, território, cenário…)"
|
||||
/>
|
||||
<span
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
|
||||
>✕</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CARD 1 — nome/território colados, ritmo vertical enxuto, labels+valores à esquerda, avatares sobrepostos à esquerda -->
|
||||
<article class="flex flex-col gap-2 border-b border-zinc-800 px-4 py-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0">
|
||||
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
|
||||
<p class="text-sm leading-tight text-zinc-400">
|
||||
Território de Identidade Chapada Diamantina · ZE 45
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">12,4%</p>
|
||||
<p class="text-xs text-zinc-500">4º</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-x-3 gap-y-1.5">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Classe</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Reduto 8,2×</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Tendência</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Alta</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Nível</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N2</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
|
||||
Última atualização há 2 dias
|
||||
<span class="text-xs">▾</span>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<!-- CARD 2 — 5 e 6 avatares: todos visíveis, sobreposição cresce, nada cortado -->
|
||||
<article class="flex flex-col gap-2 border-b border-zinc-800 px-4 py-3">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0">
|
||||
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
|
||||
<p class="text-sm leading-tight text-zinc-400">
|
||||
Território de Identidade Nordeste · ZE 62
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">7,1%</p>
|
||||
<p class="text-xs text-zinc-500">18º</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-x-3 gap-y-1.5">
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Classe</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Solo 1,1×</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Tendência</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">Em disputa</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-0.5">
|
||||
<span class="text-xs font-medium text-zinc-500">Nível</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-0.5 text-xs text-zinc-200">N3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-start gap-3">
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>LS</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>FT</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>DA</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>MB</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>TC</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>VL</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>PN</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>TB</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex min-h-11 items-center justify-end gap-1.5 text-sm text-zinc-500">
|
||||
Última atualização há 1 dia
|
||||
<span class="text-xs">▾</span>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
81
docs/plans/municipios-mobile-ajustes-cards.md
Normal file
81
docs/plans/municipios-mobile-ajustes-cards.md
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
# Municípios mobile: encaixes dos cards — densidade, alinhamento e avatares (pós-B196)
|
||||
|
||||
Status: rascunho
|
||||
Atualizado em: 2026-08-11
|
||||
Issue: #704
|
||||
Priority: P2
|
||||
Model: composer-2.5
|
||||
Impeccable: B — encaixe na tela existente `/campanha/municipios` (mobile < md), sem rota nova
|
||||
Rascunho UI: docs/plans/municipios-mobile-ajustes-cards-ui-draft.html (PNGs embutidos abaixo)
|
||||
Appetite: ~0,5–1 dia eng; um encaixe de densidade/alinhamento em superfície já entregue
|
||||
Responsável: —
|
||||
|
||||
## Intenção
|
||||
|
||||
O B196 densificou o card mobile de `/campanha/municipios`, mas a varredura no celular ainda tropeça em arestas finas: a barra de filtro fica baixa para tocar e há um vão entre ela e o primeiro card; nome e território do município ainda respiram demais entre si e entre o bloco de votos estimados; as labels dos blocos (Classe, Tendência, Nível, Assessores, Lideranças, Dobradinhas) e seus valores não lêem como uma coluna alinhada à esquerda; e os avatares — que deveriam ser um grupo sobreposto à esquerda — ficam espalhados (dois avatares saem "um em cada canto") ou têm as pontas cortadas quando passam de 4. Queremos o card lendo como um bloco só: colado à barra, com ritmo vertical enxuto e os avatares sempre agrupados à esquerda, sobrepostos e inteiros.
|
||||
|
||||
## Persona e fluxo
|
||||
|
||||
- **Persona / contexto:** coordenador(a) e assessores(as) no celular, no campo ou entre reuniões; varredura rápida da lista para priorizar municípios.
|
||||
- **Job principal:** ler nome/território e sinais (votos, tendência, nível, rede) de uma olhada, sem tropeçar em vãos ou em avatares cortados/espalhados.
|
||||
- **Fluxo desejado:** abre a lista → barra de filtro um pouco mais alta, confortável para tocar → primeiro card começa colado na barra → cada card lê como um bloco: nome com território colado, ritmo vertical enxuto entre votos/chips/avatares, labels e valores alinhados à esquerda, avatares agrupados e sobrepostos à esquerda (nunca cortados) → toca qualquer dado e edita no sheet (inalterado).
|
||||
- **Anti-goals de produto:** não mexer nos edit-where-you-see (sheets) nem no que cada controle edita; não mudar labels/dados dos chips; não tocar o desktop (`md+`); não esconder pessoas atrás de "…" (continua valendo o anti-goal B196 de não limitar avatares).
|
||||
|
||||
### Rascunho UI (B)
|
||||
|
||||

|
||||
|
||||

|
||||
|
||||
## Objetivo e aceite
|
||||
|
||||
- Barra de filtro mobile visivelmente um pouco mais alta que hoje (≈40px → ≈48px no total da barra), sem voltar o anel vermelho de foco nem o campo alto do B184.
|
||||
- Primeiro card começa encostado na barra de filtro (sem vão entre o topo do card e a barra); demais cards mantêm o ritmo atual.
|
||||
- Nome do município e território colados verticalmente (vão ≈0–2px, sem sobrepor).
|
||||
- Vão entre o bloco nome/território e a barra de votos estimados reduzido; vão entre a barra de votos e a linha Classe/Tendência/Nível reduzido; vão entre a linha Classe/Tendência/Nível e a linha Assessores/Lideranças/Dobradinhas reduzido — sem encolher área de toque dos controles (min 44px dos triggers de chip/sheet permanece).
|
||||
- Labels e valores dos seis blocos (Classe, Tendência, Nível, Assessores, Lideranças, Dobradinhas) alinhados à esquerda: cada label e seu valor começam no mesmo eixo; nenhum valor (especialmente avatares) fica centralizado ou espalhado sob a label.
|
||||
- Avatares sempre agrupados à esquerda do bloco e com sobreposição mínima garantida (ex.: dois avatares ligeiramente sobrepostos, não um em cada canto).
|
||||
- Nenhum avatar cortado na borda do bloco, qualquer que seja a quantidade (ex.: 5–6 avatares todos visíveis; a sobreposição pode crescer com a quantidade, desde que nada invada o grupo vizinho).
|
||||
|
||||
## Dados (intenção)
|
||||
|
||||
- **Vou apresentar dados?** Não — sem métrica nova; é densidade e alinhamento da superfície existente.
|
||||
- **Decisões desbloqueadas:** nenhuma leitura nova de dado. Guardrail: nomes/iniciais dos avatares continuam acessíveis (sr-only) e os chips mantêm os valores atuais.
|
||||
|
||||
## Direção no codebase (hipótese)
|
||||
|
||||
- **Áreas prováveis:**
|
||||
- Omnibox (chassis compartilhado): `src/components/campaign/shared/CampaignListOmnibox.tsx` — campo mobile `min-h-8`/`size-8` (barra ≈40px; subir ~8px sem inflar), e o `campaignListOmniboxFormClassName` (`py-1` — o pb de 4px é o vão atual entre a barra e o primeiro card).
|
||||
- Card mobile: `src/components/campaign/municipality/MunicipalityMobileCard.tsx` — ritmo vertical `gap-2.5` entre blocos, `gap-0.5` entre nome/território, labels via `ChipLabel`/`ChipBlock`.
|
||||
- Avatares: `src/components/campaign/shared/MunicipalityRelationAvatarStack.tsx` (modo `overlapRow` do B196 — células `flex-1 justify-center` com `overflow-hidden`; é isso que espalha 2 avatares e corta as pontas com 5+).
|
||||
- **Precedente a olhar:** plano pai `docs/plans/municipios-mobile-polimento-omnibox-cards.md` (B196, #607) e `docs/plans/municipios-card-mobile-edit-where-you-see.md` (B193); desktop usa `-space-x-2` com cap 3 em `MunicipalityList.tsx`.
|
||||
- **Risco de acoplamento:** o omnibox é chassis de TODAS as listas — mexer na altura da barra muda as outras listas de uma vez (padrão já aceito no B196: "vale para todas"). O avatar stack `overlapRow` só é usado pelo card mobile; o modo com cap do desktop não deve mudar.
|
||||
|
||||
## Dependências
|
||||
|
||||
- Nenhuma (sucessor de B196, já em produção). Soft: manter o padrão visual do desktop intacto.
|
||||
|
||||
## Fora de escopo
|
||||
|
||||
- Desktop (`md+`) da lista de municípios e das demais listas.
|
||||
- Comportamento de edição (sheets/edit-where-you-see), ferramentas de busca/sugestões do omnibox, labels/dados dos chips.
|
||||
- Outras superfícies mobile (feed de atualizações, agenda…) — só o que o chassis compartilhado carregar.
|
||||
- Limite de avatares com "…" (anti-goal B196 continua valendo).
|
||||
|
||||
## Rabbit holes de produto
|
||||
|
||||
- **"Já que vai mexer no omnibox, ajusta as outras listas também."** O pedido é altura + vão do primeiro card; o chassis leva isso para todas as listas por padrão (como no B196). **Corte:** nada além do chassis e do card de municípios; o resto vira item separado.
|
||||
- **Sistema de avatares para o app inteiro.** O pedido é sobre os três grupos do card mobile. **Corte:** só o card; o modo desktop (cap 3 + tooltip) permanece.
|
||||
- **"Aproveitar e polir" mais a tela.** A lista mobile ainda tem outras arestas. **Corte:** somente os pontos do aceite; o resto vira item separado.
|
||||
|
||||
## Questões em aberto (produto)
|
||||
|
||||
- **Com 6+ avatares num bloco de ~110px, o que vence: sobreposição mais profunda ou avatar menor?** **Opções:** A — sobreposição cresce com a quantidade (todos visíveis, tamanho fixo); B — avatar encolhe a partir de um limite (tamanho variável). **Recomendação:** A — preserva a leitura de "pilha de pessoas" e não muda o toque; o caso extremo (7+) é raro e a sobreposição de ~14px ainda lê como grupo. _(assumido — validar no gate)_
|
||||
- **A barra mais alta vale para todas as listas?** O omnibox é chassis compartilhado. **Recomendação:** A — vale para todas (mesmo padrão do B196); é a área de toque que melhora. _(assumido — validar no gate)_
|
||||
|
||||
## Referências
|
||||
|
||||
- GitHub Issue: #704 (registrada 2026-08-11, blocked até o plano em main)
|
||||
- Rascunho UI (gate): `docs/plans/municipios-mobile-ajustes-cards-ui-draft.html` + PNGs embutidos acima
|
||||
- Pai: `docs/plans/municipios-mobile-polimento-omnibox-cards.md` (B196, #607) · `docs/plans/municipios-card-mobile-edit-where-you-see.md` (B193, #576) · `docs/plans/municipios-mobile-sem-moldura.md` (B184)
|
||||
- Arquivos a abrir primeiro: `src/components/campaign/shared/CampaignListOmnibox.tsx` · `src/components/campaign/municipality/MunicipalityMobileCard.tsx` · `src/components/campaign/shared/MunicipalityRelationAvatarStack.tsx`
|
||||
Loading…
Reference in a new issue