Detalles sobre los cambios de estilo del tema - Comentarios

Este es un tema de comentarios para el experimento de cambios de estilo de detalles.

Un ejemplo de la etiqueta details usando BBCode:

Un ejemplo de la etiqueta details usando HTML:

Usar la etiqueta HTML <details> parece ejecutar el contenido en el resumen:

Veo. No se le ha añadido una nueva línea automática y yo no he añadido una manualmente:

<details open>
<summary>
This is an open details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>

Sí, tienes razón. Parece que al agregarlo tú mismo, no incluiste etiquetas p, mientras que al agregarlo con la herramienta de inserción de detalles, lo hará.

El tuyo:

<details dir="ltr" open="">
<summary>
This is a HTML details
</summary>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et ultricies ante. Fusce vel nisi tristique, tristique urna ut, dapibus lacus. Nulla dignissim quis ex a interdum. Integer nisl nisl, egestas in efficitur a, gravida vitae odio. Proin ut velit sit amet quam malesuada aliquet. Cras tempus in risus vel lacinia. Vivamus ut luctus nunc. Duis risus velit, molestie non lectus vitae, ornare gravida elit.
</details>

Herramientas de inserción:

<details dir="ltr" open="">
<summary>Summary</summary>
<p>This text will be hidden</p>
</details>

La etiqueta p agregada por la herramienta de inserción mantiene el texto en una nueva línea.

Ah. No necesitas añadir las etiquetas \u003cp\u003e al estilo existente. Supongo que esta nueva es más \u003cp\u003epegajosa.

Algunos comentarios iniciales:

1. Me pasé por alto el nuevo elemento [details] cuando lo encontré por primera vez. Simplemente no lo registré como un [details]. Podría ser “simplemente porque es nuevo”, pero…
2. Está divorciado del diseño anterior y de la implementación predeterminada del navegador: el cheurón está después del resumen en lugar de antes, y el estado cerrado apunta en la dirección que anteriormente (y por defecto) significaba el estado abierto.
   cerrado:
   abierto:
3. El botón/resumen ocupa mucho más espacio (anteriormente era un elemento semi-en línea)
   
   

   39fbd320470a56d690557dcf1ebc9798ac02382f272×238 2.09 KB
   vs
   

   a3fb90130fd87d41108a24ed0729f5451ce3e900286×402 2.51 KB
4. Como se ve arriba, anteriormente el triángulo/cheurón estaba alineado con el texto y ahora el texto “Summary” no lo está, debido al relleno del botón (nada está alineado con nada )
   
   

   ab4fb0a6f7cd98f304c30c176018e86b586b2ad2242×376 2.88 KB
5. En el móvil, después de interactuar con él, el fondo del botón permanece resaltado
   
   

   958cd25a96de8fe709805f50e339070059efb5d8_2_344x140344×140 4.52 KB
6. Habría votado por el borde en lugar de la opción de fondo: preferiría que ocultar algo de contenido solo hiciera eso, sin afectar el contraste (relevante principalmente en el caso de imágenes incrustadas y emojis)
   
   

   5c7bc1c39495778f2cdcdf6349b748c4a888c201_2_690x180690×180 22.9 KB

actualización:

7. Un área de clic reducida:
   
   

   image1478×156 9.55 KB
   
   vs
   
   

   image1528×202 8.33 KB

Ese fue un poco el punto, hacerlo mejor significa divergir de la forma en que era, especialmente divergir de un navegador predeterminado. Ahora seguimos el patrón del botón “Respuestas” en la parte inferior de las publicaciones con varias respuestas.

¡Buena observación!

Otra buena observación, lo revisaré

No estoy seguro de que usar un emoji negro/oscuro sobre un fondo oscuro/negro sea algo que podamos resolver aquí…

Esto también es un poco confuso, ¿estabas haciendo clic en algún lugar que no fuera el texto antes? ¿Era común para ti hacer clic aquí?

Screenshot 2023-11-14 at 10.44.44 AM1260×114 21.6 KB

Sí. Lo usé bastante, especialmente en el móvil. Es más difícil acertar en el área más pequeña. Creo que es donde mi pulgar está en la pantalla.

¡Sí! Esa es una de las expectativas de los valores predeterminados de la plataforma: \u003cdetails\u003e, como las casillas de verificación/radios y sus \u003clabel\u003es, se ven y se comportan de cierta manera. Por ejemplo, yo hago lo mismo en GH:

Screenshot 2023-11-14 at 18.03.191290×462 43.9 KB

¡Hola! Por favor, perdóname si mi pregunta no es del todo correcta
¿Sería posible añadir una función para mostrar contenido oculto dependiendo del grupo de usuarios? Por ejemplo, si el usuario no está registrado o no pertenece a este o aquel grupo, entonces no podrá ver los detalles y se le mostrará una ventana modal, donde habrá instrucciones para obtener acceso (por ejemplo, registrarse).
Conozco la existencia de componentes temáticos/plugins que ocultan todo el tema o categoría. Simplemente, a veces quieres dar a los usuarios la oportunidad de leer solo información primaria.

No es algo que se haya utilizado de esa manera, ya que normalmente una categoría está restringida a ciertos grupos o usuarios, y no a los detalles dentro de una publicación en esa categoría.

Dicho esto, estoy seguro de que esto podría hacerse en un plugin, pero este tema no sería ideal para esa discusión.

Una pequeña objeción, pero esto se ve ligeramente diferente al color de fondo de la cita, este es el tipo de “casi pero no del todo” que puede parecer un error. Creo que debería coincidir o ser obviamente diferente.

Screenshot 2023-11-14 at 1.37.18 PM266×365 11.7 KB

Otras ideas…

Esta es una cita manual

Esta es una cita parcial, que puede expandirse

¿Quizás cooptamos este estilo ligeramente? Mismo relleno, fondo y expansión… tendríamos que al menos quitar el borde para que se parezca menos a una cita

¿Quizás un estilo completamente diferente?

Me molesta un poco renunciar a la alineación aquí:

image438×330 43.7 KB

Esto se nota más cuando empiezas con un bloque de detalles.

Hola Solo estoy pensando en voz alta… ¿Es necesario mostrar la cabecera por defecto? Quiero decir, la mayor parte del tiempo se usa el Summary por defecto y probablemente la mayoría de los usuarios no saben que puede ser único y tal vez sería más natural si el texto dentro de details se truncara con puntos suspensivos y al final se mostrara ...mostrar más si está colapsado y mostrar menos si está expandido. Por ejemplo, la primera línea truncada del contenido sería la cabecera automáticamente. ¿Podría esta ser una vista por defecto pero los usuarios pueden añadir la cabecera por separado si quieren?

Para ser justos: la implementación es que hacer clic en una etiqueta debe seleccionar su botón de radio, no necesariamente que hacer clic en toda la fila vacía detrás de una etiqueta también funcione.

¿Cómo te sentirías si el estado de desplazamiento fuera permanente? Entonces estaría alineado como un “botón” con el texto debajo y arriba.

image1268×1122 162 KB

8. El chevrón no está alineado con el texto (está un poco más arriba)
   
   

   image234×112 1.25 KB
   vs
   (¿y no es el mismo icono de chevrón? :ojos:)
9. El menú del compositor utiliza un triángulo para indicar la función de detalles
   
   

   image464×258 6.64 KB
10. Añadiendo a 2.
    Colocar el icono después del texto dificulta su reconocimiento, especialmente al escanear rápidamente una publicación
11. También añadiendo a 2.
    En cuanto a la dirección hacia la que apunta el icono: dado que actúa como un conmutador, ¿no tendría sentido invertirlo para que denote el estado actual en lugar de la acción/estado futuro (esto también se aplica al botón “Respuestas”)?
12. No tiene estado de enfoque cuando se navega a él con tab
13. El estado de pasar el ratón solo es visible cuando está cerrado

Quizás… @awesomerobot ¿opiniones?

Error menor – Al abrir un detalle, te desplazas hacia arriba hasta que cargas más publicaciones (y un poco más); una vez que regresas, el contenido del detalle no se renderiza (EDITAR: o se cierra, pero no esperaría que se cerrara aquí)

Sí, tratarlo como un botón podría funcionar… casi como la etiqueta HTML details existente (más un cheurón)

También…