Reativar alternância de tela cheia do Composer para tablets

:information_source: Resumo Restaura o botão de alternar tela cheia no editor em dispositivos touchscreen com telas maiores (por exemplo, tablets), onde ele está oculto por padrão
:eyeglasses: Prévia Theme Creator
:hammer_and_wrench: Repositório https://github.com/moin-Jana/unhide-composer-fullscreen-toggle-for-tablets
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo nos Temas do Discourse? Guia para iniciantes sobre o uso de Temas do Discourse

Instale este componente de tema

É um componente muito simples. Ele faz apenas o que o nome diz: revela o botão de tela cheia do editor em dispositivos touchscreen com telas mais largas. A única mudança visível é o pequeno botão no canto superior direito:

O motivo ainda é o mesmo que quando relatei que o botão estava faltando:

Especialmente ao usar um tablet em orientação paisagem, o espaço vertical é bastante limitado. Nesse caso, pode ser muito útil poder ocultar os campos de seleção de título e categoria ao escrever uma nova postagem. No meu tablet, a diferença é de 7 linhas de texto adicionais que consigo ver quando uso o botão de tela cheia.

Além disso, às vezes acho realmente difícil usar a alça no topo do editor para redimensioná-lo. Infelizmente, quando tento reduzir o tamanho arrastando para baixo, frequentemente acabo atualizando a página e tenho que reabrir meu rascunho. Com o botão de alternar, é apenas um clique — e sem atualização acidental :tada:

Criei o componente para tornar as coisas o mais simples possível para administradores. Dito isso, a mudança de CSS é tão mínima que administradores que preferem não instalar um componente por uma única linha podem fazer o mesmo adicionando-a diretamente ao seu tema. E para usuários cujo administrador não o instalou, extensões e aplicativos de navegador como Stylus funcionam tão bem — é assim que eu o uso aqui no Meta:

@media (hover: none) and (width >= 40rem) {
  .discourse-touch #reply-control .toggle-fullscreen,
  .mobile-device #reply-control .toggle-fullscreen {
    display: flex;
  }
}
1 curtida