Другой вид для details-block

Разработка
1

Я пытался добиться похожего вида, как у одной финской медиакомпании.

Скриншот говорит сам за себя, полагаю:

IMG_3465
IMG_34651306×887 166 KB

У меня лишь базовые навыки работы с CSS, и я не уверен, что это можно сделать (легко) с помощью CSS. Но моя первая попытка… ну, не очень удалась.

Вот что я использовал (комментарии, конечно, для меня):

/*- Кастомный стиль для элемента details - */
/* Замена фона и внешнего вида кнопки */
summary {
  background-color: #f5f5f5; /* Цвет фона */
  border: 1px solid #d8d8d8; /* Граница */
  padding: 10px; /* Отступы */
  border-radius: 5px; /* Скруглённые углы */
  cursor: pointer; /* Стиль курсора */
  display: flex; /* Использование Flexbox */
  justify-content: space-between; /* Выравнивание */
  align-items: center; /* Центрирование */
}
summary:hover {
  background-color: #eaeaea;
}
summary::marker {
  display: none; /* Убрать стандартный маркер списка */
}
summary::after {
  content: '⮟'; /* Добавить стрелку */
  font-size: 20px; /* Размер стрелки */
}

/*- Кастомный стиль для содержимого элемента details - */
details[open] summary::after {
  content: '⮝'; /* Изменить стрелку наверх при открытии */
}
details {
  margin-bottom: 10px; /* Отступ снизу для блока */
}
details > div {
  padding: 10px; /* Отступы для содержимого */
}

Часть я сделал сам, а часть — подсказки от GPT.

Есть идеи?

2

Привет, @Jagster :wave:

Я создал компонент темы для этого… :tada:

3

Вы просто потрясающие :+1: А теперь я разберусь, что же вы там натворили.

Спасибо!

6

Сначала я сделал что-то вроде «hello world» на Visual Basic около 20 лет назад. Также я настраивал плагины WordPress методом проб и ошибок, и однажды мне удалось изменить владельца всех файлов на моём VPS, начиная с root.

Это отличное решение больше не работает с [details .. open]. Связано ли это с тем, что Details block doesn’t obey open, я полагаю.

Проблема возникает из-за этой части:


c cookedDetails.forEach((details) => {
            details.setAttribute("open", "");

Почему именно так? Потому что это похоже на код из Discourse :joy:

expect(cooked_html).to match_html <<~HTML
      <details open="">
      <summary></summary>
        <p>bar</p>
      </details>