La lista de verificación interfiere con las balas

[nathank (Nathan Kershaw)]

Cuando tengo una lista con viñetas que incluye casillas de verificación, las viñetas no se renderizan. No estoy seguro de si esto es una característica o un error. Es un poco difícil de controlar, eso seguro.

1. [] elemento numerado normal con casilla de verificación
   - viñeta normal
    - [] casilla de verificación con viñeta de ejemplo
[] elemento con viñeta de ejemplo 2
- [] elemento con viñeta de ejemplo 3
   - [] elemento con viñeta de ejemplo 4
         - [] elemento con viñeta de ejemplo 5

da como resultado:

1. elemento numerado normal con casilla de verificación
   • viñeta normal
   • casilla de verificación con viñeta de ejemplo
     elemento con viñeta de ejemplo 2

• elemento con viñeta de ejemplo 3
  • elemento con viñeta de ejemplo 4
    - elemento con viñeta de ejemplo 5

[sam (Sam Saffron)]

Es una característica, pero tal vez se pueda refinar un poco. Puedo ver CSS para .has-checkbox, se omite deliberadamente debido al ruido visual.

[rrit (Ayke)]

Acabo de experimentar con el número correcto de espacios de prefijo.
Por supuesto, los puntos de viñeta todavía faltan, ¡pero ahora se ve bastante bien!

1. [] elemento numerado normal con casilla de verificación A (prefijo de 0 espacios)
    - viñeta normal A.1 (prefijo de 4 espacios)
      - [] viñeta de ejemplo con casilla de verificación A.1 (4 + 2 = 6 espacios de prefijo)
    - viñeta normal A.2 (prefijo de 4 espacios)
      - [] viñeta de ejemplo con casilla de verificación A.2 (4 + 2 = 6 espacios de prefijo)

Nota: se agregó una nueva línea aquí entre listas de diferentes tipos

- [] elemento con viñeta de ejemplo B (prefijo de 0 espacios)
  - [] elemento con viñeta de ejemplo B.1 (prefijo de 2 espacios)
    - [] elemento con viñeta de ejemplo B.1.1 (2 + 2 = 4 espacios de prefijo)
      - [] elemento con viñeta de ejemplo B.1.1.1 (2 + 2 + 2 = 6 espacios de prefijo)
      - [] elemento con viñeta de ejemplo B.1.1.2 (2 + 2 + 2 = 6 espacios de prefijo)
    - [] elemento con viñeta de ejemplo B.1.2 (2 + 2 = 4 espacios de prefijo)
  - [] elemento con viñeta de ejemplo B.2 (prefijo de 2 espacios)
    - [] elemento con viñeta de ejemplo B.2.1 (2 + 2 = 4 espacios de prefijo)
    - [] elemento con viñeta de ejemplo B.2.2 (2 + 2 = 4 espacios de prefijo)

1. elemento numerado normal con casilla de verificación A
   • viñeta normal A.1
     • viñeta de ejemplo con casilla de verificación A.1
   • viñeta normal A.2
     • viñeta de ejemplo con casilla de verificación A.2

• elemento con viñeta de ejemplo B
  • elemento con viñeta de ejemplo B.1
    • elemento con viñeta de ejemplo B.1.1
      • elemento con viñeta de ejemplo B.1.1.1
      • elemento con viñeta de ejemplo B.1.1.2
    • elemento con viñeta de ejemplo B.1.2
  • elemento con viñeta de ejemplo B.2
    • elemento con viñeta de ejemplo B.2.1
    • elemento con viñeta de ejemplo B.2.2

[nathank (Nathan Kershaw)]

¿Cómo se obtiene una viñeta Y una casilla de verificación? Se obtienen con números, pero quiero que sea con viñetas.

1. []
   1. []
   - []

Sugerencia

Me encantaría que [] se presentara en listas como:

1. como un reemplazo de viñeta si se usa sin un denotador de viñeta

1.
 []

2. como una viñeta + una casilla de verificación si se usa con un denotador de viñeta

1.
 - []

es decir, las viñetas se tratan igual que los números.

[Firepup650 (Firepup Sixfifty)]

@nathank

¿Cómo se consigue un punto y una casilla de verificación? Se consiguen con números, pero yo lo quiero con puntos.

¿Una sangría muy alta?

• Lista
  - Prueba
  • Prueba
  • Prueba
• Prueba

- Lista
      - [] Prueba
    - [] Prueba
  - [] Prueba
- [] Prueba

No se pone con viñetas de esta manera, pero deja el guion que parece casi un punto.

En realidad, aquí tienes una solución real:

• Lista
  • ​ Elemento A
    • ​ Elemento A.1
      • ​ Elemento A.1.1
        • ​ Elemento A.1.1.1
  • ​ Elemento B

Cualquier ␆ en este ejemplo debe ser reemplazado por un espacio de ancho cero

- Lista
  - ␆[] Elemento A
    - ␆[] Elemento A.1
      - ␆[] Elemento A.1.1
        - ␆[] Elemento A.1.1.1
  - ␆[] Elemento B

Espacio de ancho cero para copiar y probar:

​

[rrit (Ayke)]

@Firepup650 ¡Buen hallazgo! Cualquier carácter añadido delante de la casilla de verificación hará visibles los puntos de la lista.

• Lista
  • . Punto
    • ' Comilla simple (como en Excel texto sin formato)
      • | Barra vertical

Para una solución general: añade este CSS personalizado a tu instancia de Discourse.

ul li.has-checkbox .list-item-checkbox {
  position: relative;
  left: 0;
}

.cooked ul li.has-checkbox,
.d-editor-preview ul li.has-checkbox {
  position: relative;
  list-style-type: disc;
}

.cooked ul ul li.has-checkbox,
.d-editor-preview ul ul li.has-checkbox {
  list-style-type: circle;
}

.cooked ul ul ul li.has-checkbox,
.d-editor-preview ul ul ul li.has-checkbox {
  list-style-type: square;
}

[Jagster (Jakke Lehtonen)]

Esa es una solución, y funciona. Pero, sinceramente… me da dolor de cabeza porque me recuerda fuertemente cómo Excel obliga a marcar las celdas de texto

[rrit (Ayke)]

Así que hagamos de esto una solicitud de características:

Característica: añadir una notación especial para mantener los puntos de viñeta en las listas de casillas de verificación

Si hay una lista de casillas de verificación en este momento, la lista se muestra sin puntos de viñeta.

- [] punto 1
  - [] punto 2
    - [] punto 3
      - [] punto 4

• punto 1
  • punto 2
    • punto 3
      • punto 4

Añadir una comilla simple (por ejemplo, Excel texto sin formato) delante de la casilla de verificación ya deshabilita esta característica y los puntos de viñeta son visibles, pero además la comilla simple debería eliminarse.

- '[] punto 1
  - '[] punto 2
    - '[] punto 3
      - '[] punto 4

• ' punto 1
  • ' punto 2
    • ' punto 3
      • ' punto 4

---
Este código markdown:
--
- '[] punto

<!-- debería convertirse en HTML: (nota: no se ve ninguna comilla simple) -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> punto</li>
</ul>

<!-- en lugar de este HTML: (nota: la comilla simple todavía es visible) -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> punto</li>
</ul>

[nathank (Nathan Kershaw)]

Una solución / limpieza más sencilla para esto podría ser que un segundo espacio (como un espacio normal, no un espacio de 0 pt) indique que se deben mostrar tanto el viñeta como la casilla de verificación.

¡Por supuesto, eso podría ser un verdadero dolor de cabeza para codificar!