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

Nice Plugin. Though a general Reccommendation can we have Theme & Components list min Discourse version? I am on Stable branch but do have a test sandbox for 2.5beta. @codinghorror?

I just did a specific branch for older versions.

When installing, use the link https://github.com/iunctis/md-topic-list-mobile the advanced options and add older-discourse

You’ll know if it works if the avatars on the right column works fine. In a few weeks, when the avatars will be broken, you’ll just have to reinstall the component without using the advanced option

2 curtidas

A direct comparison:

Default / Component

I like the fact that the last poster avatar is on the right.
On the default mobile layout, the big avatar just on the left of the topic title screams “author”.

Just out of curiosity, I looked at the scss file, any reason for which you didn’t use nested syntax provided by scss?

7 curtidas

Tried the advanced option. Still says disabled req 2.5 beta2

Mostly because I make more mistakes with nested syntax on css :grimacing:

But I could rewrite it in a few weeks when I’m more confident with the topic list design

@Heliosurge I edited the about.json file, it should be ok now

3 curtidas

Thank you for your awesome work. :beers::sunglasses::+1::sparkles:

2 curtidas

I pushed a little upgrade just now. No new feature but I added the compatibility with the new thumbnails functions.

The theme component is now fully compatible with these components:

4 curtidas

I love it, so clean. @Steven I was wondering if its possible too add with CSS this native feature when you click in total replies?

Not with css but the template can be corrected.

I personally only use this feature to access the first post but I shouldn’t impose my way of navigating to everyone. I’ll see if I can reinstore the feature

2 curtidas

I upgraded the component to reinstore this feature, I tested on two supports but if there’s any issue let me know

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