Чек-лист конфликтует со списками

Внести вклад UX
1

Когда у меня есть маркированный список, включающий флажки, маркеры не отображаются. Не уверен, является ли это функцией или ошибкой. Это действительно немного сложно контролировать.

1. [] обычный нумерованный элемент с флажком
   - обычный маркер
    - [] пример маркированного элемента с флажком
[] пример маркированного элемента 2
- [] пример маркированного элемента 3
   - [] пример маркированного элемента 4
         - [] пример маркированного элемента 5

результат:

  1. обычный нумерованный элемент с флажком
    • обычный маркер
    • пример маркированного элемента с флажком
      пример маркированного элемента 2
  • пример маркированного элемента 3
    • пример маркированного элемента 4
      - пример маркированного элемента 5
1 лайк
2

Это функция, но, возможно, её можно немного доработать. Я вижу CSS для .has-checkbox, он намеренно опущен из-за визуального шума.

6 лайков
3

Я только что поэкспериментировал с правильным количеством отступов в начале строк.
Конечно, маркеры списков всё ещё отсутствуют, но теперь это выглядит довольно хорошо!

1. [] обычный нумерованный элемент с флажком A (0 пробелов отступа)
    - обычный маркер A.1 (4 пробела отступа)
      - [] пример маркера с флажком A.1 (4 + 2 = 6 пробелов отступа)
    - обычный маркер A.2 (4 пробела отступа)
      - [] пример маркера с флажком A.2 (4 + 2 = 6 пробелов отступа)

Примечание: здесь добавлена пустая строка между списками разных типов

- [] пример маркера элемента B (0 пробелов отступа)
  - [] пример маркера элемента B.1 (2 пробела отступа)
    - [] пример маркера элемента B.1.1 (2 + 2 = 4 пробела отступа)
      - [] пример маркера элемента B.1.1.1 (2 + 2 + 2 = 6 пробелов отступа)
      - [] пример маркера элемента B.1.1.2 (2 + 2 + 2 = 6 пробелов отступа)
    - [] пример маркера элемента B.1.2 (2 + 2 = 4 пробела отступа)
  - [] пример маркера элемента B.2 (2 пробела отступа)
    - [] пример маркера элемента B.2.1 (2 + 2 = 4 пробела отступа)
    - [] пример маркера элемента B.2.2 (2 + 2 = 4 пробела отступа)
  1. обычный нумерованный элемент с флажком A
    • обычный маркер A.1
      • пример маркера с флажком A.1
    • обычный маркер A.2
      • пример маркера с флажком A.2
  • пример маркера элемента B
    • пример маркера элемента B.1
      • пример маркера элемента B.1.1
        • пример маркера элемента B.1.1.1
        • пример маркера элемента B.1.1.2
      • пример маркера элемента B.1.2
    • пример маркера элемента B.2
      • пример маркера элемента B.2.1
      • пример маркера элемента B.2.2
3 лайка
4

Как получить одновременно маркер и флажок? С цифрами это получается, но мне нужны маркеры.

1. []
   1. []
   - []

Предложение

Хотелось бы, чтобы [] в списках отображался так:

  1. как замена маркера, если используется без обозначения маркера
1.
 []
  1. как маркер + флажок, если используется с обозначением маркера
1.
 - []

То есть маркеры обрабатываются так же, как и цифры.

5

Очень большой отступ?

  • Список
    - Тест
    • Тест
    • Тест
  • Тест
- Список
      - [] Тест
    - [] Тест
  - [] Тест
- [] Тест

Так маркеры не ставятся, но остаётся тире, которое выглядит почти как маркер.

На самом деле, вот настоящее решение:

  • Список
    • Пункт A
      • Пункт A.1
        • Пункт A.1.1
          • Пункт A.1.1.1
    • Пункт B

Любой ␆ в этом примере следует заменить на символ нулевой ширины

- Список
  - ␆[] Пункт A
    - ␆[] Пункт A.1
      - ␆[] Пункт A.1.1
        - ␆[] Пункт A.1.1.1
  - ␆[] Пункт B

Символ нулевой ширины для копирования и тестирования:
3 лайка
6

@Firepup650 Отличная находка! Любой символ, добавленный перед флажком, сделает маркеры списка видимыми.

  • Список
    • . Точка
      • ' Одинарная кавычка (как в Excel текст без форматирования)
        • | Вертикальная черта

Для общего решения: добавьте этот пользовательский CSS в ваш экземпляр 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;
}
2 лайка
7

Это одно из решений, и оно работает. Но честно говоря… оно вызывает у меня головную боль, потому что напоминает, как Excel заставляет помечать текстовые ячейки :rofl:

8

Итак, давайте оформим это как запрос на новую функцию:

Функция: добавить специальную нотацию для сохранения маркеров в списках с чекбоксами

Сейчас, если есть список чекбоксов, он отображается без маркеров.

- [] пункт 1
  - [] пункт 2
    - [] пункт 3
      - [] пункт 4
  • пункт 1
    • пункт 2
      • пункт 3
        • пункт 4

Добавление одинарной кавычки (например, как в Excel для текста без форматирования) перед чекбоксом уже отключает эту функцию, и маркеры становятся видны, но при этом сама кавычка должна удаляться.

- '[] пункт 1
  - '[] пункт 2
    - '[] пункт 3
      - '[] пункт 4
  • ' пункт 1
    • ' пункт 2
      • ' пункт 3
        • ' пункт 4
<!---
Этот код Markdown:
-->

- '[] пункт

<!-- должно стать таким HTML: (обратите внимание: одинарная кавычка не видна) -->
<ul>
  <li><span class="chcklst-box fa fa-square-o fa-fw"></span> пункт</li>
</ul>

<!-- вместо этого HTML: (обратите внимание: одинарная кавычка всё ещё видна) -->
<ul>
  <li>'<span class="chcklst-box fa fa-square-o fa-fw"></span> пункт</li>
</ul>
2 лайка
9

Более простое решение / улучшение для этого могло бы заключаться в том, чтобы второй пробел (обычный пробел, а не пробел нулевой ширины) указывал на необходимость отображения как маркера, так и флажка.

Конечно, это может стать настоящей головной болью при программировании!