Repository navigation
feat(web): two shells, because the two people use opposite devices (E13-T10, T11) - #109
Merged
Merged
Conversation
E13-T10 and T11. The citizen reads one document on a phone, once, afraid. The lawyer works a list on a computer, every day. Giving both the same narrow column serves neither: she gets a good screen and he gets a phone screen stretched across a monitor, with the list hidden behind scrolling. Above 1024px the journey opens in three zones: the points on the left, the explanation in the centre, the document on the right. Below it, one thing at a time, which is deliberate rather than a limitation. The side rails are sticky and scroll on their own while the centre scrolls with the page, which is the pattern DocsShell already uses and is sturdier than three fixed-height panes that depend on guessing the header and footer heights. Separate scrolling is what makes checking bearable: without it, scrolling the document drags the explanation along and she loses the line she was reading every time she checks an excerpt. The document rail is mounted only when the screen is wide, and that is why lib/wide.ts exists rather than a CSS class. It fetches the whole extracted text, twenty-five thousand characters in the real agravo, and pulling that onto a basic phone just to hide it with display:none would spend the data and memory of whoever has least of it. If that fetch fails the rail renders nothing instead of an error: it is support, the journey works without it, and a red banner beside the explanation would frighten someone over a problem that is not hers and that blocks nothing. The lawyer gets the navy sidebar the tokens always reserved for him and never had anywhere, and his list becomes columns: a real table, not a grid of divs, because this is tabular data and a screen reader then says "Estado: aguardando revisão" instead of "the third field of this row". The citizen keeps cards even on a computer, because she has one document and the card says more about one thing than a row does. The breakpoint number now lives in two places that cannot read each other: tokens.css and lib/wide.ts. Media queries cannot read a CSS variable and JavaScript cannot read @theme, so lib/breakpoint.test.ts is what keeps them equal.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Sétima fatia do E13 (#23), e a que fecha as duas cascas.
O problema, dito de uma vez
As duas pessoas deste produto usam aparelhos opostos, por motivos opostos. A cidadã lê um documento no celular, uma vez, com medo. O advogado trabalha numa lista, no computador, todo dia.
Dar a mesma coluna estreita aos dois é atender mal aos dois: ela ganha uma tela boa, ele ganha uma tela de celular esticada num monitor de 27 polegadas, com a lista escondida atrás de rolagem.
A jornada, acima de 1024 px
Três zonas: os pontos à esquerda, a explicação no centro, o documento à direita. Abaixo, uma coisa de cada vez — o que é deliberado, não limitação.
Os trilhos ficam grudados e rolam por conta; o centro rola com a página. É o padrão que o
DocsShelljá usa e é mais robusto que três painéis de altura fixa, que dependem de adivinhar a altura do cabeçalho e do rodapé.Rolagem separada é o que torna a conferência suportável: sem ela, rolar o documento leva a explicação junto, e a pessoa perde a linha que estava lendo toda vez que confere um trecho.
Por que
lib/wide.tsexiste, e não uma classe de CSSO trilho do documento só é montado quando a tela é larga. Ele busca o texto extraído inteiro — vinte e cinco mil caracteres no agravo real — e trazer isso para um celular básico só para escondê-lo com
display:nonegastaria os dados e a memória de quem menos os tem.Se essa busca falha, o trilho não desenha nada, em vez de erro: ele é apoio, a jornada funciona sem ele, e uma tarja vermelha ao lado da explicação assustaria por um problema que não é da pessoa e que não a impede de nada.
O advogado ganha a lateral navy
O
tokens.csssempre reservou o navy a esse papel (lawyer sidebar) e ele não existia em lugar nenhum além do cabeçalho. A lista vira colunas: tabela de verdade, não grade dediv— são dados tabulares, e o leitor de tela então diz "Estado: aguardando revisão" em vez de "o terceiro campo desta linha".A cidadã continua no cartão mesmo no computador: ela tem um documento, e o cartão diz mais sobre uma coisa do que uma linha de tabela.
Uma dívida que fica declarada
O número do ponto de virada agora vive em dois lugares que não conseguem se ler:
tokens.csselib/wide.ts. Consulta de mídia não lê variável de CSS e JavaScript não lê@theme. Olib/breakpoint.test.tsé quem garante que continuam iguais.96 testes, lint limpo, build limpo. Vale correr a régua no preview em 360, 768, 1023 e 1024 px.