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.

1 curtida

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.

2 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;
  } 
}
5 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…

3 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.

3 curtidas