Detalhes nas mudanças de estilo do tópico - Feedback

Você não está errado, mas a culpa reside na maneira diferente como esses componentes são configurados, um usando o d-icon e o outro não se prestando a isso no momento. Adoraria ver isso mudar, então sinta-se à vontade para ajudar se souber como.

Com o novo estilo, ele precisará de mais espaço, mas concordo que o preenchimento atual é excessivo.

Este tem sido um debate contínuo entre os designers desde a criação do alternador. Não há resposta certa ou errada.


Screenshot 2023-11-14 at 1.48.35 PM

Esta foi uma das ideias da sessão de design que eu pessoalmente gostei muito. Ela resolve (algumas) observações de Sam e cvx. Vou tentar isso na próxima iteração.

3 curtidas
meus pensamentos até agora...

Parece muito bom para mim!

4 curtidas

Eu acho que o chevron ficaria melhor à esquerda. Acho que a maioria das pessoas não o verá à direita. Ele se parece com texto normal (meio que como um bloco de código) a menos que o mouse passe sobre ele. Quase não o notei.

3 curtidas

(14. :wink:) A adição recente de um manipulador de clique significa que clicar em um link, usar o botão copiar código, tentar expandir uma imagem ou até mesmo tentar selecionar qualquer texto resultará no colapso do bloco de detalhes… :flushed_face:

4 curtidas

Concordo plenamente com isso. Eu (quase) deixei de ler vários blocos de detalhes nos últimos dias. Acho que é porque eles se parecem com blocos de código à primeira vista.

isto não é código

vazio

isto é código
8 curtidas

Estranho, clicar em um link funciona para mim. Ele fecha os detalhes, mas o link também abre. Não tentei os outros cenários. E concordo que pode ser feito com um trabalho de JS mais refinado :winking_face_with_tongue:

Sobre a posição do chevron, @jordan.vidrine o que você acha?
Devo fazer outra iteração? Talvez como eu tinha em mente originalmente, com o triângulo regular em vez de chevron e apenas um fundo quando aberto?

1 curtida

Acho que o chevron ainda deve ser usado, mas o posicionamento à esquerda parece uma boa ideia.

1 curtida

Você está se referindo a outra coisa? Não adicionamos um manipulador de cliques aqui.

Havia um handler. Charlie o removeu hoje em 2c941c4. :slightly_smiling_face:

Ha! Uau, eu me perguntava o que estava causando isso. Bem na minha cara e eu não vi.

2 curtidas

Sim, eu realmente gostei da ideia de poder pairar em qualquer lugar \u003e destacar \u003e clicar para fechar, em vez de só poder clicar na parte do resumo, mas eu não tinha percebido a propagação de outros cliques :woman_facepalming:

Também é muito fácil perder detalhes nas citações, pois o destaque de fundo é quase invisível e a seta está longe do texto

5 curtidas

Algumas observações detalhistas sobre a última iteração…

A seta deve ser alinhada pela linha de base em vez de centralizada? Isso me parece melhor do que centralizar em exemplos de várias linhas… mas isso pode ser subjetivo:

centralizado

linha de base

o preenchimento deve corresponder às citações? o topo parece um pouco apertado no momento

se preenchermos todo o contêiner, talvez devêssemos tentar remover qualquer preenchimento do último elemento… isso pode ser muito complicado porque temos muitos tipos de conteúdo… mas talvez algo como:

detalhes > :last-child {
  padding-bottom: 0;
}

Concordo que devemos usar um tom mais escuro quando isso estiver dentro de uma citação, para que o fundo não se perca

Resumo

Este texto ficará oculto

Acho que provavelmente poderíamos ter algum tipo de variável que possa ajudar com isso… se detalhes tivesse o fundo definido por algo como

:root {
  --d-details-bg: var(--primary-100);
}

detalhes {
  background: var(--d-details-bg);
}

então uma citação pode substituí-lo… talvez pudéssemos até ter uma variável genérica “precisa ser mais escuro” em uma citação? não me lembro se temos outras situações como essa…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg);
}
4 curtidas

100% isso - se não for a causa atual, isso é apenas um erro

3 curtidas

Eu gosto de usar algo como rgba(var(--primary-rgb),0.25) para este propósito, pois apenas torna o fundo atual do elemento em que está incluído um pouco mais escuro.

2 curtidas

No geral, sinto que a última iteração está muito, muito perto de estar pronta para ser lançada :hugs:

Uma pequena ressalva que não tenho certeza se é solucionável:

Não é um bloqueador de forma alguma, mas o painel cinza faz você pensar que está olhando para uma entidade.

3 curtidas

Sim, tenho certeza que podemos resolver isso com talvez uma borda ou algo para torná-lo mais claro. Vou dar uma olhada hoje.

1 curtida

No geral, eu gostei. Dito isso, esta sugestão chamou minha atenção.

Tentar escolher o fundo de um elemento de texto às vezes parece a busca pela tonalidade perfeita de cinza claro.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

Mas parece que você está perto e, no geral, eu gostei.

5 curtidas

Estou adicionando o mesmo escurecimento do BG para o bloco de código como para a citação em bloco

Isso deve resolver o problema @sam

2 curtidas

Mais duas coisas (15. e 16., se preferir :wink:)

  • A área clicável real do elemento de resumo é menor que o elemento que muda o cursor e destaca ao passar o mouse
  • Por causa dessa cor de fundo ao passar o mouse e da mudança seguinte ao expandir um elemento – há um breve flash de cor de fundo ao expandir um elemento

editar:

  1. Uma discrepância entre uma postagem renderizada e o composer:

    vs
2 curtidas