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

Buen plugin. Aunque como recomendación general, ¿podríamos incluir una lista de temas y componentes con la versión mínima de Discourse? Estoy en la rama estable, pero tengo un entorno de pruebas para la versión 2.5beta. @codinghorror?

Acabo de crear una rama específica para versiones anteriores.

Al instalar, utiliza el enlace https://github.com/iunctis/md-topic-list-mobile, abre las opciones avanzadas y añade older-discourse.

Sabrás que funciona si los avatares en la columna de la derecha se muestran correctamente. En unas pocas semanas, cuando los avatares dejen de funcionar, solo tendrás que reinstalar el componente sin usar la opción avanzada.

2 Me gusta

Una comparación directa:

Predeterminado / Componente

Me gusta que el avatar del último poster esté a la derecha.
En la disposición predeterminada para móviles, el avatar grande justo a la izquierda del título del tema grita “autor”.

Por pura curiosidad, revisé el archivo SCSS. ¿Hay alguna razón por la que no hayas utilizado la sintaxis anidada que ofrece SCSS?

7 Me gusta

Probé la opción avanzada. Sigue diciendo “deshabilitado, se requiere 2.5 beta2”.

Principalmente porque cometo más errores con la sintaxis anidada en CSS :grimacing:

Pero podría reescribirlo en unas pocas semanas cuando tenga más confianza con el diseño de la lista de temas.

@Heliosurge edité el archivo about.json, debería estar bien ahora.

3 Me gusta

¡Gracias por tu increíble trabajo! :clinking_beer_mugs::smiling_face_with_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