Детали изменений в оформлении тем — обратная связь

[chapoi]

@cvx

(и это не тот же самый значок chevrons? )

Вы правы, но проблема кроется в различном способе настройки этих компонентов: один использует d-icon, а другой в данный момент не позволяет этого сделать. Было бы здорово увидеть изменения, так что не стесняйтесь помочь, если знаете, как это сделать.

@cvx

Элемент button/summary занимает гораздо больше места (раньше он был полустрочным элементом)

С новым стилем потребуется больше места, но я согласен, что текущие отступы слишком велики.

@cvx

Также добавлю к пункту 2.
Касательно направления, в которое указывает значок: учитывая, что он работает как переключатель, не логичнее ли было бы изменить его так, чтобы он обозначал текущее состояние, а не действие/будущее состояние (это также относится к кнопке «Ответы»)

Это постоянные споры среди дизайнеров с момента появления переключателя. Нет правильного или неправильного ответа.

---

Это была одна из идей с дизайнерской сессии, которая мне лично очень понравилась. Она решает (часть) замечаний Sam и cvx. Я попробую реализовать это в следующей итерации.

[mcwumbly (Dave McClure)]

@chapoi

Это была одна из идей с дизайн-сессии, которая мне очень понравилась. Она решает (часть) замечаний от Сэма и CVX. Я попробую реализовать это в следующей итерации.

мои мысли об этом пока что...

Выглядит вполне неплохо!

[j127]

Я думаю, что шеврон лучше разместить слева. Я считаю, что большинство людей не заметят его справа. Он выглядит как обычный текст (что-то вроде блока кода), если не навести на него курсор. Я почти его пропустил.

[cvx (Jarek Radosz)]

(14. ) Недавнее добавление обработчика кликов означает, что клик по ссылке, использование кнопки копирования кода, попытка развернуть изображение или даже попытка выделить любой текст приведут к сворачиванию блока деталей…

[gerhard (Gerhard Schlager)]

@j127

Я думаю, что шеврон лучше разместить слева. Мне кажется, большинство людей не заметят его справа.

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

это не код

пусто

это код

[chapoi]

@cvx

Недавно добавленный обработчик кликов приводит к тому, что клик по ссылке, нажатие кнопки «Копировать код», попытка развернуть изображение или даже выделение любого текста вызывают сворачивание блока details…

Странно, у меня клик по ссылке работает. Блок details сворачивается, но ссылка при этом тоже открывается. Остальные сценарии я не проверял. И я согласен, что тут можно немного доработать JS

Касательно положения стрелочки, @jordan.vidrine, что думаешь?
Стоит ли мне сделать ещё одну итерацию? Может, как я изначально задумывал: с обычным треугольником вместо стрелочки и фоном только в открытом состоянии?

[jordan.vidrine]

@chapoi

Может, так, как я изначально задумывал: обычный треугольник вместо галочки и фон только для открытого состояния?

Я думаю, галочку всё же стоит использовать, но размещение слева — отличная идея.

[jordan.vidrine]

@Jarek Radosz

Недавнее добавление обработчика кликов означает, что клик по ссылке, нажатие кнопки «Копировать код», попытка развернуть изображение или даже попытка выделить любой текст приведут к сворачиванию блока с деталями…

Вы имеете в виду что-то другое? Мы не добавляли обработчик кликов здесь.

[cvx (Jarek Radosz)]

Обработчик был. Чарли удалил его сегодня в 2c941c4.

[jordan.vidrine]

Ха! Вау, я wondered, что это было. Прямо в лоб, а я не заметил.

[chapoi]

Да, мне очень понравилась идея возможности навести курсор в любое место → выделить → кликнуть, чтобы закрыть, вместо того чтобы кликать только на часть с кратким описанием, но я упустил распространение других кликов

[Moin]

Также очень легко упустить детали в цитатах, так как фоновая подсветка почти невидима, а стрелка находится далеко от текста

@Sam Saffron

Пример тега details с использованием BBCode:

abc

testing 123 123
123

Пример тега details с использованием HTML:

···

Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент... Вот некоторый обрезанный контент...

[awesomerobot (Kris)]

Несколько придирчивых мыслей о последней итерации…

Не стоит ли выравнивать стрелку по базовой линии, а не по центру? Для меня это выглядит лучше, чем центрирование в многострочных примерах… хотя это может быть субъективно:

по центру

по базовой линии

должны ли отступы соответствовать цитатам? Верхняя часть сейчас кажется немного тесной

если мы добавим отступ ко всему контейнеру, возможно, стоит убрать отступы у последнего элемента… это может оказаться слишком сложным, так как у нас много типов контента… но, возможно, что-то вроде:

details > :last-child {
  padding-bottom: 0;
}

Я согласен, что в цитате стоит сделать цвет немного темнее, чтобы фон не терялся

Summary

Этот текст будет скрыт

Думаю, можно было бы использовать какую-то переменную для решения этой задачи… если бы у details фон задавался чем-то вроде

:root {
  --d-details-bg: var(--primary-100);
}

details {
  background: var(--d-details-bg);
}

то в цитате можно было бы переопределить это… возможно, даже ввести универсальную переменную «нужно сделать темнее» для цитат? Не помню, есть ли у нас подобные ситуации…

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}

[chapoi]

@Kris

базовый уровень

На все 100% согласен — если сейчас это не причина, то это просто ошибка.

[jordan.vidrine]

@Kris

blockquote {
  --darker-quote-bg: var(--primary-200);
  --d-details-bg: var(--darker-quote-bg); 
}

Мне нравится использовать для таких целей что-то вроде rgba(var(--primary-rgb),0.25), так как это просто немного затемняет текущий фон элемента, в который оно включено.

[sam (Sam Saffron)]

В целом у меня складывается впечатление, что последняя версия очень-очень близка к готовности к релизу

Есть один небольшой нюанс, который, возможно, невозможно устранить:

Это не является критической проблемой, но серая панель создаёт впечатление, что вы смотрите на единый объект.

[chapoi]

Да, я уверен, что мы сможем это решить, добавив, возможно, границу или что-то подобное, чтобы сделать это более понятным. Посмотрю сегодня.

[angus (Angus McLeod)]

В целом, мне это нравится. Тем не менее, это предложение привлекло моё внимание.

@awesomerobot

Может, полностью другой стиль?

Пытаясь выбрать фон для текстового элемента, иногда чувствуешь себя так, будто ищешь идеальный оттенок светло-серого.

var(--primary-not-so-light-you-cant-see-it-but-not-so-dark-it-looks-clunky)

Но, похоже, вы уже близко, и в целом мне это нравится.

[chapoi]

Я добавляю такое же затемнение фона для блока кода, как и для цитаты

Это должно решить проблему, @sam

[cvx (Jarek Radosz)]

Ещё два момента (15. и 16., если угодно )

• Фактическая кликабельная область элемента summary меньше, чем область, которая меняет курсор и подсвечивается при наведении
• Из-за этого при наведении цвет фона и последующее изменение при раскрытии элемента приводят к кратковременной вспышке цвета фона при раскрытии

edit:

17. Несоответствие между отображаемым сообщением и редактором:
    
    
    
    против