Lista de tópicos MD Componente móvel

Após meu trabalho em um pequeno redesenho nas páginas de lista de tópicos no desktop, trabalhei um pouco em uma versão móvel com algumas ideias semelhantes, como mais espaço para os títulos dos tópicos, uma segunda linha com mais informações e uma coluna dedicada apenas à última postagem.


Compatibilidade

Este componente de tema é compatível com as funções de tags, links em destaque e qualquer função disponível na versão original da lista de tópicos. Qualquer estilo de apresentação de categoria (lista, barra, caixa) deve funcionar com este componente.

O componente de tema foi testado em algumas paletas de cores e funcionará com temas claros, neutros ou escuros.

Infelizmente, o componente de tema pode não funcionar com plugins que já alteram a apresentação da lista de tópicos, como as Pré-visualizações da Lista de Tópicos.

Avise-me se tiver algum problema!

21 curtidas

Ótimo plugin. Mas, como uma recomendação geral, poderíamos incluir a versão mínima do Discourse para temas e componentes? Estou na versão estável, mas tenho um sandbox de teste para a 2.5beta. @codinghorror?

Acabei de criar um branch específico para versões mais antigas.

Ao instalar, use o link https://github.com/iunctis/md-topic-list-mobile, nas opções avançadas e adicione older-discourse

Você saberá se funcionou se os avatares na coluna da direita estiverem funcionando corretamente. Daqui a algumas semanas, quando os avatares pararem de funcionar, você só precisará reinstalar o componente sem usar a opção avançada.

2 curtidas

Uma comparação direta:

Padrão / Componente

Gosto do fato de o avatar do último postar estar à direita.
No layout móvel padrão, o avatar grande logo à esquerda do título do tópico grita “autor”.

Apenas por curiosidade, olhei o arquivo SCSS. Há algum motivo para você não ter usado a sintaxe aninhada fornecida pelo SCSS?

7 curtidas

Tentei a opção avançada. Ainda diz “desativado, requer 2.5 beta2”.

Principalmente porque com a sintaxe aninhada no CSS eu cometo mais erros :grimacing:

Mas eu poderia reescrevê-lo em algumas semanas, quando estiver mais confiante com o design da lista de tópicos.

@Heliosurge Editei o arquivo about.json, deve estar tudo certo agora.

3 curtidas

Obrigado pelo seu trabalho incrível. :clinking_beer_mugs::smiling_face_with_sunglasses::+1::sparkles:

2 curtidas

Acabei de fazer uma pequena atualização. Não há novos recursos, mas adicionei compatibilidade com as novas funções de miniaturas.

O componente do tema agora é totalmente compatível com estes componentes:

4 curtidas

Adorei, tão limpo. @Steven, estou me perguntando se é possível adicionar essa funcionalidade nativa com CSS ao clicar no total de respostas?

Não é com CSS, mas o modelo pode ser corrigido.

Eu pessoalmente uso esse recurso apenas para acessar a primeira postagem, mas não deveria impor minha forma de navegação a todos. Vou ver se consigo restaurar o recurso.

2 curtidas

Atualizei o componente para restaurar esse recurso. Testei em dois suportes, mas se houver algum problema, avise-me.

2 curtidas

Olá @Steven, parece que as notificações de novas mensagens estão aparecendo duas vezes. Uma vez à direita do título do tópico e outra no lugar do contador de respostas. Isso é um bug ou estou perdendo algo?

Aliás, a visualização de tópicos no mobile está muito boa. Meus usuários gostaram.

1 curtida

Isso deve vir da última atualização com o botão de entrada do tópico. Acredito que seja melhor voltar para a versão anterior. Não está muito adaptado ao componente.

Vou atualizar em alguns minutos

edit: Atualizei agora mesmo, me avise se ficou melhor

1 curtida

Sim, funciona perfeitamente agora, obrigado. Foi rápido :slight_smile:

1 curtida

Acho que você deveria remover o emoji de tag que adicionou na frente da lista de tags:

Ele aparece diferente em sistemas operacionais diferentes:

image

Pode não combinar com o design do fórum, e deveria respeitar as escolhas de design para desktop (onde não há ícone por padrão).

Se você realmente adicionar um ícone de tag com o componente de ícones de tag, ficará assim:

image

Então, escondi o emoji com CSS, mas acho que ele não deveria estar aqui de qualquer forma :slight_smile:

Como é exibido no meu fórum agora:

image

.md-tlm .discourse-tags::before {
    display: none;
}
.md-tlm .tl-replies {
    margin-right: 8px;
}
1 curtida

Obrigado pelo feedback. Estou com problemas sérios de internet, então estou um pouco atrasado em todo o trabalho relacionado ao discourse.

Gosto da ideia do ícone ou emoji da tag, mas provavelmente vou alterar os dois componentes do tema para um d-icon tag. Ao mesmo tempo, vou criar uma branch sem nenhum ícone para garantir compatibilidade com o componente de ícones de tag.

1 curtida

Olá Steven!
Parece haver alguns problemas de layout com a versão atual do Discourse.
Criei um tema vazio e incluí apenas o componente MD Topic List Mobile, e este parece ser de fato o problema.
Aqui está a visualização móvel:

Há algo estranho com as margens/preenchimentos.

2 curtidas

Obrigado, vou verificar isso agora mesmo.

Tentarei reescrever o template para remover o máximo de classes personalizadas também, acho que é melhor com o redesign em andamento no core.

editar: Novo commit, fiz uma reescrita do template e da folha de estilos para facilitar a atualização no futuro.

Me avise se tiver algum problema @Canapin

4 curtidas

Parece perfeito. Obrigado!

1 curtida

Podemos adicionar o total de curtidas e visualizações do tópico ao lado da contagem de respostas?

2 curtidas