Deixando os links do banner horizontais na versão móvel

Existe alguma maneira de fazer com que os links do banner na versão móvel apareçam horizontalmente em vez de verticalmente? Obrigado!

Muito obrigado, por algum motivo não notei. Funciona perfeitamente!

Aqui está um exemplo de código de como você pode personalizar o banner para que ele fique menos alto em telas pequenas:
:warning: Coloque isso na aba mobile da personalização do seu tema!

// Torna o banner de boas-vindas adaptado para tamanhos de tela pequenos
.below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-image: url($mobile-banner-bg);
        background-size: cover;
        .welcome-wrapper {
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                >div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 0.75em;
                        white-space: normal;
                    }
                }
            }
        }
    }
}

Para ser ajustado de acordo com suas necessidades (é por isso que existem aninhamentos SCSS “vazios”).

Como está, fica assim no meu projeto atual:


edit: @Moin foi mais rápido do que eu em mencionar meus próprios ajustes… Bravo :clap: :smile:

Esta é uma grande melhoria na aparência móvel do Banner de Boas-Vindas. Ontem mesmo, vi um novo usuário se inscrever no meu site via celular, e ele tropeçou no tamanho grande do banner; basicamente, ele não percebeu que precisava rolar para baixo para ver a ação. Por isso, tenho procurado algo melhor, e esse trecho de CSS é brilhante.

Tive que remover background-image: url($mobile-banner-bg); pois é claro que você retirou isso de um TC bifurcado.

@awesomerobot, você consideraria um PR para adicionar essa melhoria móvel ao Componente de Tema?

Claro, PRs são sempre bem-vindos.

Olá @awesomerobot, como ainda não vi um PR para isso, acabei de criar um PR para adicionar a melhoria feita por @Canapin e adicionei duas localidades. :wink:

Dei uma olhada e vi que você removeu as alterações de Locale conforme solicitado pela @team. No entanto, o PR foi fechado, então abri um novo para você:

Incrível! Quando você acha que será mesclado?

Não tenho certeza - @awesomerobot, meu PR está bom?

Parece bom para mim, mesclado agora. Obrigado!

Legal! Mas o problema dos ícones verticais também ocorre em tablets, então usar apenas o CSS personalizado para dispositivos móveis começa em um tamanho de tela muito baixo. Infelizmente, o CSS personalizado do Discourse não permite segmentar tablets. Minha solução foi colocar o seguinte texto na guia CSS personalizado comum.

Ele também inclui correções para espaçamento indesejado à direita na visualização do tablet, e também escolhi aumentar o tamanho da fonte dos links para 1em.

@media (max-width: 768px) {
  .below-site-header-outlet.welcome-link-banner-connector {
    .welcome-link-banner-wrapper {
        background-size: cover;
        .welcome-wrapper {
            .welcome-content {
                > p {
                    max-width: initial;
                }
            }
            .featured-banner-link {
                flex-direction: row;
                padding-bottom: 0.5em;
                > div a {
                    padding: 0 5px;
                    h3 {
                        font-size: 1em;
                        white-space: normal;
                        }
                    }
                }
            }
        }
    }
}

Obrigado por esta informação!
Não fiz um pull request para o componente de tema com minha versão mobile porque não a testei em várias configurações. E sua mensagem mostra que o código mobile realmente precisaria de trabalho adicional :slight_smile: