Lista de temas MD Componente móvil

Después de mi trabajo en un pequeño rediseño de las páginas de lista de temas en escritorio, trabajé un poco en una versión móvil con algunas ideas similares, como más espacio para los títulos de los temas, una segunda línea con más información y una columna dedicada únicamente a la última publicación.


Compatibilidad

Este componente de tema es compatible con las funciones de etiquetas, enlaces destacados y cualquier función disponible en la versión original de la lista de temas. Cualquier estilo de presentación de categoría (viñeta, barra, cuadro) debería funcionar con este componente.

El componente de tema se ha probado en algunas paletas de colores; funcionará con temas claros, neutros u oscuros.

Lamentablemente, es posible que el componente de tema no funcione con plugins que ya cambian la presentación de la lista de temas, como las Vistas previas de la lista de temas.

¡Hágamelo saber si tiene algún problema!

21 Me gusta

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 Me gusta

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 Me gusta

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 Me gusta

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

2 Me gusta

Acabo de aplicar una pequeña actualización. No hay ninguna función nueva, pero he añadido la compatibilidad con las nuevas funciones de miniaturas.

El componente del tema es ahora totalmente compatible con estos componentes:

4 Me gusta

Me encanta, está muy limpio. @Steven, me preguntaba si es posible añadir con CSS esta función nativa al hacer clic en ‘respuestas totales’.

No con CSS, pero la plantilla puede corregirse.

Personalmente, solo uso esta función para acceder al primer mensaje, pero no debo imponer mi forma de navegar a todos. Veré si puedo restaurar la función.

2 Me gusta

He actualizado el componente para restaurar esta función. Lo he probado en dos soportes, pero si surge algún problema, avísame.

2 Me gusta

Hola @Steven, parece que las notificaciones de nuevos mensajes se muestran dos veces. Una vez a la derecha del título del tema y otra en lugar del contador de respuestas. ¿Es un error o me estoy perdiendo algo?

Por cierto, la vista de temas en móvil es muy buena. A mis usuarios les gusta.

1 me gusta

Debe provenir de la última actualización con el botón de entrada al tema. Creo que será mejor volver a la versión anterior. No está realmente adaptado al componente.

Mejoraré en unos minutos.

edit: Actualizado hace un momento, avísame si es mejor.

1 me gusta

Sí, funciona perfectamente ahora, gracias. Fue rápido :slight_smile:

1 me gusta

Creo que deberías eliminar el emoji de etiqueta que agregaste delante de la lista de etiquetas:

Se ve diferente en distintos sistemas operativos:

image

Es posible que no se ajuste al diseño del foro y debería respetar las opciones de diseño para escritorio (donde no hay un icono por defecto).

Si realmente agregas un icono de etiqueta con componente de iconos de etiqueta, se verá así:

image

Por eso oculté el emoji con CSS, pero creo que no debería estar aquí en primer lugar :slight_smile:

Así es como se muestra en mi foro ahora:

image

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

Gracias por tus comentarios. Tengo problemas graves con internet, así que voy un poco atrasado en todo el trabajo de Discourse.

Me gusta la idea del icono o emoji de etiqueta, pero probablemente cambiaré los dos componentes del tema a una etiqueta d-icon. Al mismo tiempo, crearé una rama sin ningún icono para garantizar la compatibilidad con el componente de iconos de etiqueta.

1 me gusta

¡Hola Steven!
Parece que hay algunos problemas de diseño con la versión actual de Discourse.
He creado un tema vacío y solo he incluido el componente móvil MD Topic List, y este parece ser, de hecho, el problema.
Aquí está la vista móvil:

Hay algo extraño con los márgenes/rellenos.

2 Me gusta

Gracias, lo revisaré ahora mismo.

Intentaré reescribir la plantilla para eliminar también el máximo de clases personalizadas, creo que es lo mejor con el rediseño en curso en el núcleo.

edición: Nuevo commit, hice una reescritura de la plantilla y la hoja de estilo para que sea más fácil de actualizar en el futuro.

Avísame si tienes algún problema @Canapin

4 Me gusta

¡Parece perfecto. Gracias!

1 me gusta

¿Podemos añadir el total de “me gusta” y las vistas del tema junto al recuento de respuestas?

2 Me gusta