Modernizando el tema Foundation

El equipo de diseño está en proceso de realizar pequeños pero potentes cambios/ajustes en el tema foundation para alinearlo un poco más con los estándares web modernos. Para ver estos cambios en vivo en meta, únete a este grupo:

https://meta.discourse.org/g/modernized-foundation

Implementaremos este cambio en vivo a través de la nueva función Upcoming Changes disponible en Discourse. Esto permitirá a los propietarios de sitios habilitar los cambios para cualquier grupo que especifiquen, con el fin de probar el despliegue de los cambios sin el temor de posiblemente romper temas o personalizaciones actuales.

¿Qué cambiará?

El encabezado se reduce en altura

Hemos disminuido el tamaño del encabezado junto con algunos de los iconos y el avatar ligeramente para utilizar mejor el espacio en pantalla.

Botones predeterminados

Estamos pasando de un fondo de botón gris predeterminado a un fondo transparente / “secundario” con un borde.

  • eliminación del fondo gris
  • adición de bordes
  • el color del icono coincide con el color del texto
  • los botones ahora tienen una altura fija

Botón Crear nuevo tema en la página de lista de temas

Coincidiendo con Horizon y dándole a este un color de fondo “CTA” de tertiary

Eliminación de mucho fondo gris

Lista de temas

  • eliminación del borde superior de 3 px de grosor
  • disminución del tamaño de fuente de los datos del encabezado de la tabla
  • color consistente para los elementos de datos de la tabla
  • cambio de valor de color para leer/no leído
  • ligero aumento en el grosor de fuente para no leído

Categorías

  • alineación a la izquierda del texto
  • eliminación del borde izquierdo grueso de color
  • insignias ligeramente redondeadas
  • borde más delgado en la caja

Barra de navegación

  • Las píldoras de navegación en las páginas de lista de temas tendrán la misma altura que los botones en esta zona
  • texto e icono de color más oscuro en el kit seleccionado

Barra lateral

  • el icono y el texto coinciden con el color
  • texto e iconos más oscuros
  • fondo “activo” más claro
  • mayor grosor de fuente activa

Banner de bienvenida

  • espaciado equilibrado
  • variables añadidas para una alineación izquierda/derecha/centro más fácil a través de la personalización
  • grosor de fuente del encabezado disminuido
  • disminución del tamaño de fuente del subtítulo

Calendario

  • fondo gris eliminado de los “botones”
  • usar gris solo para indicar “activo”
  • cambio al estilo de botón “transparente con borde”

Menús desplegables

  • relleno añadido al contenedor del menú desplegable
  • la altura, el relleno y el espacio ahora coinciden con los elementos de la barra lateral
    • unificación de las “listas clicables”
  • el borde hereda la variable --d-border-radius

Nuevas variables

Algunos de los cambios aquí se introducirán a través de variables adicionales añadidas al núcleo.

Alineación del banner de bienvenida

La alineación del banner de bienvenida ahora se podrá cambiar a través de:

// predeterminado
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// personalizado
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Altura del botón

Ahora tendremos una altura de botón fija a través de:

// predeterminado
  --button-height: var(--space-8);

Suavizado de fuentes

Ya estamos haciendo esto en Horizon, tiene sentido llevarlo a foundation.

// nuevo predeterminado
--webkit-font-smoothing: antialiased;
29 Me gusta

el menú desplegable del botón de resumen tiene una barra de desplazamiento (¿overflow en el fk-d-menu tal vez?), y probablemente no necesita el mismo min-width: 200px que otras clases dropdown-menu similares.

edición: olvídalo, ya está arreglado :smiley:

6 Me gusta

Puedo ver el tema de base moderno, pero ¿por qué sigo teniendo el diseño de categorías antiguo?

Creo que Meta no usa “Cajas con subcategorías” sino “Solo categorías” en su configuración del sitio Estilo de página de categoría de escritorio.

1 me gusta

Vaya, asumí que las capturas de pantalla se tomaron en meta, pero ni siquiera pensé en comprobarlo.


Comportamiento pequeño pero extraño. En el tema normal, cuando soltamos el botón del ratón sobre , se activa instantáneamente la animación de mostrar u ocultar la barra lateral.

En el tema nuevo, cuando soltamos el botón del ratón sobre cuando la barra lateral está cerrada, hay una fracción de segundo de espera antes de que se active la animación de deslizamiento. No sucede si hacemos clic en el icono cuando la barra lateral está visible.


¿Puedo abandonar el grupo para comparar los cambios con el tema antiguo? No veo la opción de salir.

2 Me gusta

Ah, sí, lo arreglé… ahora deberías poder salir cuando quieras.

4 Me gusta

¿Podrían permitirme abandonar el grupo @modernized-foundation?
Edición: Ahora, después de abandonar el grupo, puedo añadir una captura de pantalla de comparación del nuevo botón de tema.
image

Parece que algunos colores de iconos no funcionan bien con la paleta wcag.
image

Y, por ejemplo, el selector de grupo en la parte superior izquierda de la página del grupo no admite realmente 2 líneas.

Así es como se ve cuando cierro la sesión.

2 Me gusta

Me gustan la mayoría de los cambios. Son sutiles. Algunos ni siquiera veo la diferencia a menos que mire los valores de CSS :smile: (color del icono de la barra lateral y del texto, colores de lectura y no lectura de la lista de temas)

Antes / Después
image image

Me gusta el botón de nuevo tema enfatizado. De hecho, lo personalicé así en mi foro hace mucho tiempo (hasta que mi código se rompió y no me molesté en arreglarlo).


Antes / Después


Esto también me gusta; al menos en la paleta oscura, el azul oscuro sobre el gris oscuro era una combinación extraña.


Antes / Después

Aunque me gusta el nuevo estilo de los botones, siento que carecen de contraste con el fondo en ciertas áreas, especialmente en el pie de página del tema.
Se ve desordenado. Los botones no parecen pertenecer a una sección específica, a diferencia de la versión anterior. Simplemente están ahí. No sé si tiene sentido.

4 Me gusta

Esto parece funcionar en la actividad de lectura y temas en algunos tamaños de pantalla

Pero una vez que reduzco un poco el ancho, “Replies” y “activity” parecen demasiado grandes (esto también es un problema en /latest)

Hay un problema similar con “updated” y “activity” en /my/activity/bookmarks

Otro ejemplo donde el color del icono y el texto no coinciden es el botón de expansión en mi perfil

Así es como se ve cuando salgo del grupo:

Creo que no mencionaste que no solo el tamaño de la fuente de los encabezados de la tabla, sino también el tamaño de los números en las columnas Replies, Views y Activity, parecen haberse reducido.

5 Me gusta

Muchas gracias por el antes/después. Pensé que faltaba en el OP.

Ambos cambios parecen extraños: el lado del después parece mucho menos contrastado y podría causar problemas de accesibilidad (A11y), ¿o no?

¡Me dirijo al nuevo grupo para una prueba!

2 Me gusta

La palabra “link” en el mapa de temas solo se muestra parcialmente después de que me uno al grupo:

Captura de pantalla tomada en Add link to sidebar category setting to new admin menu in categories section of the sidebar

Y el texto en este modal es difícil de leer al pasar el ratón por encima. Creo que el contraste era mejor antes

Tengo muchas ganas de ver los cambios en el estilo predeterminado, ¿cuándo se publicarán aproximadamente?

1 me gusta

¡El campo de búsqueda y el botón de enviar están apretados!

squish!

editar: solo en móvil

3 Me gusta

Todo muy buen comentario/detección de errores hasta ahora. Gracias por las actualizaciones.

4 Me gusta

Esta es una buena observación. Creo que el nuevo estilo de botón también es bastante agradable, pero por alguna razón en esta sección (con tantos juntos), no se siente del todo bien.

4 Me gusta

El peso de la fuente de los no leídos es más grueso que el de los temas leídos.
No me di cuenta en el escritorio, pero lo veo en el móvil.

Me parece un poco tosco.

Me gustaba que Discourse optara principalmente por solo un cambio de color, lo que se sentía más elegante que la diferencia de peso canónica que vemos en muchos programas de foros.

Ahora tenemos ambos. La diferencia es sutil, pero preferiría solo un cambio de color :paintbrush:

3 Me gusta

La última ronda de cambios debería estar activa pronto desde la PR aquí: