Sem mais layouts comutáveis entre mobile/desktop?

Olá, eu estava no stable, agora estou na versão esr mais recente, e parece que não há mais um layout móvel/desktop explicitamente comutável? Não vejo mais a opção de alternância no canto inferior esquerdo da barra lateral, e ?mobile_view=1 / ?mobile_view=0 não tem mais efeito. Agora ele transiciona do modo desktop com a barra lateral e o menu hambúrguer à esquerda para o layout móvel sem barra lateral e o menu à direita apenas redimensionando horizontalmente a janela do navegador desktop. Então, agora é baseado apenas na largura do navegador? Anteriormente, permitia o uso do layout móvel simplificado em uma tela de tablet mais ampla, se desejado, ou alternativamente, permitia o uso do modo desktop (com mais detalhes na lista de tópicos, por exemplo) em um telefone menor ou em uma janela de navegador estreita para aqueles usuários que preferiam.

2 curtidas

Isso mesmo - temos migrado para simplificar nossos layouts para serem devidamente responsivos, pois é um padrão de design mais amplamente aceito usar um ponto de interrupção responsivo à largura. Também achamos mais simples de manter, e um layout baseado em largura também funciona bem com outros elementos de design externos, como ao integrar banners compartilhados em um site principal + fórum.

5 curtidas

Uma das desvantagens dessa abordagem é que você não pode executar lógica específica do dispositivo em um inicializador.

Um exemplo clássico é definir uma página inicial diferente para celular versus desktop - você não pode fazer isso agora.

Na minha humilde opinião, isso exigirá uma abordagem muito mais dinâmica sobre como os modelos são criados.

3 curtidas

Obrigado pela resposta. Em princípio, isso faz sentido, mas na prática é um pouco problemático para usuários mais avançados/frequentes. Como mencionei, há muito menos informações visíveis na lista de tópicos quando no modo de layout reduzido, especialmente ao usar algo como Sam's Simple Theme, então alguns preferiram forçar explicitamente o layout de desktop, e ele ainda se adaptava corretamente para caber horizontalmente sem transbordar.

2 curtidas

Existem limites para fazer isso que removemos com novos métodos — determinar as capacidades na inicialização é bem inflexível, se algo mudar teríamos que recarregar a página inteira.

Isso é útil porque os dispositivos estão menos previsíveis agora: telefones podem se desdobrar em tablets, laptops podem se converter em tablets, você pode conectar um teclado e um mouse em tantas coisas…

Parece diferente se você está acostumado com o jeito antigo, mas qualquer coisa que você estivesse fazendo em um inicializador provavelmente ainda é possível e mais responsiva a capacidades em mudança.

Você pode, agora é mais granular e você condicionalmente mostra/oculta conteúdo dentro do mesmo template em vez de substituir tudo. Por exemplo, nós temos um objeto de viewport no nosso serviço de capacidades agora…

Em um template…

{{#if this.capabilities.viewport.lg}}
  Conteúdo para telas grandes
{{/if}}

{{#if this.capabilities.viewport.sm}}
  Conteúdo para telas muito pequenas
{{/if}}

ou em JS…

get myContent() {
  if (this.capabilities.viewport.sm) {
    return "conteúdo curto";
  } else {
    return "o conteúdo muito muito longo"
  }
}

e então em CSS você pode alinhar com os mesmos pontos de interrupção como…

@use "lib/viewport";

.my-element {
  font-size: 1em;
  @include viewport.until(sm) {
     font-size: 2em;
  } 
}
8 curtidas

Claro, estou ciente dessas substituições.

No entanto, estou ansioso para ver padrões como este sendo usados de forma mais fundamental.

Por exemplo, se a minha página inicial for Categorias no Desktop, eu vejo uma Lista de Tópicos.

Uma Lista de Tópicos também deveria, argumentavelmente, aparecer no Celular… atualmente você perde o elemento Lista de Tópicos.

É por isso que o TC de Forçar Página Inicial Móvel existiu…

Espero que eu esteja fazendo sentido…

4 curtidas

Sim, faz sentido, acho que faremos gradualmente mudanças de suporte como essa… é só complicado quando construímos tanto usando os métodos antigos e temos que dar suporte a eles de uma forma que não quebre imediatamente a personalização.

5 curtidas

Infelizmente, preciso continuar um pouco mais com este tópico devido aos usuários que realmente não gostam do layout móvel simplificado. Isso parece ser especialmente o caso com usuários de tablet em orientação vertical.

Então, acho que ainda estou um pouco confuso sobre exatamente o que mudou; o alternador :desktop_computer: / :mobile_phone: foi apenas removido da barra lateral? Esse mesmo método JS ainda pode ser invocado com um script personalizado ou algo assim? Ou há alguma alteração no código do layout de desktop que fará com que ele não se adapte mais responsivamente a larguras de navegador mais estreitas?

Parece que o alternador “Site para desktop” do navegador (testado no Chrome e Firefox em um tablet Android) força o layout antigo que costumava corresponder ao alternador :desktop_computer: / :mobile_phone: do próprio Discourse, e ele ainda se adapta responsivamente sem transbordar. Mas o texto parece ser muito menor do que eu me lembro.

Eu também sei como selecionar pontos de interrupção de largura específicos, ou seja, @media screen and (max-width: 1000px) {… mas não tenho certeza se algo poderia ser feito lá com substituições de CSS?

1 curtida

Concordo com isto, eu nunca gostei muito do layout móvel no meu telefone, parece muito mais restritivo e tudo é muito grande, a menos que meu zoom esteja pela metade. Eu sempre usei o layout de desktop aqui até eu literalmente não poder mais.

Eu entendo a simplicidade de manter um layout e não se preocupar em alternar, mas a escolha é boa às vezes…

1 curtida

Não, não foi apenas removido da barra lateral. Removemos a estrutura subjacente para alternar.

3 curtidas

Isso significa que Force Mobile Homepage deve ser marcado como #quebrado?

1 curtida

Eu marquei como quebrado.

Por esta razão:

2 curtidas

Então, para forçá-lo a não reverter para o layout móvel simplificado com larguras verticais normais de tablet, eu poderia usar algo assim no CSS? @media screen and (max-width: 700px) {

Ou a opção “Site para desktop” no navegador móvel é a única opção para recomendar aos usuários?

Eles podem testar usando o “Solicitar versão para computador” juntamente com o aumento do tamanho da fonte em https://meta.discourse.org/my/preferences/interface?

Olá, obrigado pela resposta.
Um usuário tentou a opção “Site para computador” no navegador, mas relatou que não fez diferença. No meu tablet, ele muda para o layout de desktop com informações completas, mas mesmo em “Maior”, o texto é mal grande o suficiente, e não é ideal configurá-lo nas preferências do usuário porque deixa o texto grande demais em outros dispositivos, como um PC que usa a mesma conta.

2 curtidas

Você não precisa usar o mesmo tamanho de fonte em todos os dispositivos.

1 curtida

Hmm, não tenho certeza por que não tenho essa opção?

Eu acho que “normal” é o seu padrão atual. Você tentou selecionar outra coisa?

2 curtidas

Ah, claro. :wink: Obrigado, isso ajuda um pouco, eu acho.

Sinceramente, não me lembro como funcionava o dimensionamento do tamanho da fonte no modo desktop explícito antigo em uma tela vertical menor, mas me lembro que eram maiores no geral. Talvez eu tenha que adicionar algumas substituições de CSS para a configuração “Maior”…

1 curtida