Adoro essa ideia! Ficarei mais do que feliz em revisar e mesclar um PR que implemente esse recurso 
11 curtidas
Eu realmente gosto dessa ideia 
Então, brinquei um pouco com isso. Acredito que existe uma maneira muito melhor de fazer isso, mas por enquanto funciona bem no meu site. 
Uso o código do componente Big Header - Little Header dentro da tag <head> do modelo para fazer isso.
Infelizmente, no iPhone há uma limitação porque a barra de navegação inferior (footer-nav) cobre completamente a barra de abas do Discourse. Por isso, eu a oculto.
Atualizei este código!
Agora vou compartilhar o código aqui (não tenho certeza se é mesclável):
Coloque isso na seção <head> para dispositivos móveis:
<script type="text/discourse-plugin" version="0.8.18">
$(document).ready(function() {
var lastScrollTop = 0;
var body = $("body");
var scrollMax = 30;
$(window).scroll(function() {
var scroll = $(this).scrollTop();
if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
body.addClass("tab-bar-hidden");
} else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
body.removeClass("tab-bar-hidden");
}
lastScrollTop = scroll;
});
});
</script>
Coloque isso na seção de CSS para dispositivos móveis:
html:not(.anon) {
#topic-progress-wrapper,
#reply-control.draft {
bottom: 49px;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .1s ease-out;
}
.posts-filtered-notice {
transition: all .1s ease-out;
bottom: 49px;
}
}
body.tab-bar-hidden {
.d-tab-bar {
bottom: -49px;
transition: all .2s ease-in;
}
#topic-progress-wrapper:not(.docked),
#reply-control.draft {
bottom: 0;
transition: all .2s ease-in;
}
#reply-control.draft {
margin-bottom: env(safe-area-inset-bottom);
padding-bottom: 0px;
transition: all .2s ease-in;
}
.posts-filtered-notice {
transition: all .2s ease-in;
bottom: 0;
}
}
.d-tab-bar {
transition: all .1s ease-out;
}
body:not(.footer-nav-ipad) .footer-nav {
display: none;
}
Demonstração
17 curtidas
Que coisa bem legal que você fez!
5 curtidas
Um componente prático e útil — obrigado!
Existe alguma maneira de os usuários individuais personalizá-lo ou ocultá-lo completamente?
5 curtidas
Isso é ótimo, @Don, obrigado! Acabei de enviar seu código (com pequenas modificações) para o componente.
Não há uma opção integrada para que usuários individuais personalizem ou escondam o componente, mas há uma solução alternativa no núcleo do Discourse que você pode usar para permitir que usuários individuais escondam o componente: você pode criar uma variação do seu tema principal que não inclua este componente e, em seguida, disponibilizar essa variação para que seus usuários a selecionem em Preferências → Interface.
É assim que ficaria:
Usuários que não desejam este componente podem escolher o Grey Amber (w/o Tab Bar), que é configurado exatamente como o Grey Amber, mas o componente da barra de abas não está incluído.
6 curtidas
Ótima ideia! Obrigado por isso!
4 curtidas
Obrigado, @Osama, isso é incrível!
Notei um problema no CSS. A barra de abas do Discourse pode ativar e empurrar o compositor para cima.
Acredito que ela só deveria ser ativada em #reply-control.draft em vez de em todo o #reply-control.
4 curtidas
Ok, deve estar corrigido agora. Obrigado por me avisar! 
6 curtidas
Só queria agradecer muito por isso, uma adição incrível para qualquer site Discourse. @discoverearth, você conseguiu fazer isso aparecer permanentemente para todos os usuários?
5 curtidas
Estou tentando configurar isso para clicar nas abas enquanto o usuário navega na plataforma. Neste caso de uso, estou tentando configurar botões que abrem as abas dos plugins Kanban, Calendário e Votação.
Kanban:
Se eu estiver em uma categoria ou subcategoria e adicionar ‘?board=default’ à URL, a navegação vai para a aba do Kanban (Board), então deve ser possível. O problema é que este plugin usa o caminho relativo a partir da raiz, em vez do caminho em que o usuário está atualmente.
(também terei que encontrar uma solução alternativa para a página inicial, pois a lógica da URL lá é diferente).
Calendário:
A aba Calendário precisa que ‘/l/calendar’ seja adicionado ao final da URL.
Isso parece possível, mas também é necessário remover qualquer texto na URL que esteja acima da categoria/subcategoria em que o usuário está. Por exemplo, se um usuário navegou para ‘latest’ ou ‘kanban’, essa parte da URL precisa ser removida antes de adicionar ‘/l/calendar’ ao final.
Alguém tem alguma ideia de como fazer isso, já que seria incrível poder usar isso com esses plugins? O seletor de abas está basicamente oculto no mobile agora, o que não é bom para sites que usam componentes como Kanban ou Calendário intensivamente.
1 curtida
Este plugin é um ótimo trabalho, mas não pode ser usado com o DiscourseHub (pelo menos no iPhone) porque ele oculta a aba de navegação na mesma posição. Assim, não é possível trocar de fórum.
Portanto, isso é útil apenas para fóruns que, de alguma forma, não permitem o DiscourseHub ou que quebram drasticamente a experiência do usuário, ensinando a fechar o aplicativo completamente após visitar um fórum 
Claro, alguém que sabe programar pode mostrar essa barra de abas apenas quando se usa um navegador… mas ensinar o usuário a ter uma interface diferente no mesmo dispositivo é realmente uma má ideia.
Com este componente:
E quando é o DiscourseHub puro:
3 curtidas
Você sabe qual é esse fórum? Eu adoro a interface do usuário!
3 curtidas
Gostaria muito que o botão de notificações exibisse o contador de notificações em vermelho, como no botão do menu superior na versão padrão. Poderia me dar uma dica de como fazer isso? Não sou muito bom em programação.
@nildarar, você conseguiu fazer o contador de notificações aparecer no botão? Obrigado.
1 curtida
Olá! Adorei o conceito. Obrigado.
Uma pergunta: prefiro usar a versão contornada dos ícones do FontAwesome em vez das versões preenchidas, para manter mais consistência com outras áreas do meu site.
Existe alguma maneira de especificar isso? Normalmente, usar o nome completo de um ícone — por exemplo, far fa-star (em vez de apenas star) — faria essa distinção. Mas sempre que tento inserir o nome completo de um ícone assim, o componente não exibe nada no seu lugar.
Existe alguma maneira de fazer isso acontecer?
1 curtida
Isso parece muito legal. Existe uma maneira de criar uma aba para mostrar o feed de seguidores? Dessa forma, um usuário pode ver facilmente um feed de todas as pessoas que ele segue.
Também é possível para páginas específicas
.user-main .about {
margin-bottom: 0;
color: var(--secondary);
display: none;
}
Apenas para a página de feed?
1 curtida
Apenas para confirmar, você está se referindo ao feed de seguidores de Discourse Follow? Se sim, então defina feed como a rota (o terceiro segmento) na configuração da aba que você deseja redirecionar para o feed de seguidores.
4 curtidas
Sim, estou. Obrigado!
3 curtidas
Acho que seria bom se pudéssemos adicionar um botão de "Novo Tópico" bem no meio da barra. 
O Reddit serve como um ótimo exemplo.
6 curtidas
Com certeza. Tente o seguinte em qualquer uma das configurações de aba 3ª ou 4ª para obter o efeito do meio.
New, plus, /new-topic
6 curtidas
