Обновление темы drupal.ru: отступы, размеры, шрифт, контекстное меню и др.

Аватар пользователя madt madt 17 февраля в 22:00
4

Второе большое обновление темы коснулось базового шрифта, основного цвета, полей и отступов, отображения материалов и комментариев, а также списков материалов.

Из наиболее видимых изменений стоит отметить следующие:

  1. Размер шрифта в материалах увеличен до 16px для улучшения читаемости
  2. Базовым шрифтом установлен «IBM Plex Sans»
  3. Шрифтом для сниппетов кода выбран «IBM Plex Mono»
  4. Цвет ссылок в материалах установлен в значение #0678dd — это новый фирменный цвет drupal.ru
  5. Изменены цвета текста, заголовков в списках, ссылок материалов.
  6. Переработана страница материала
  7. Переработан список комментариев к материалу
  8. Переработано меню материала и комментария для улучшения пользовательского взаимодействия
  9. Переработано отображение таксономии материала
  10. Изменен внешний вид сниппетов.
  11. Изменен внешний вид цитат
  12. Переработаны списки материалов (страницы и блоки раздела «Трекер»)
  13. Переработана страница «Блог» в профиле пользователя
  14. В профиль пользователя добавлена страница «Комментарии», отображающая все комментарии пользователя

Кардинальные изменения были внесены в php-, html- и lesscss-код шаблонов страниц, списков и элементов:

  1. Переработаны поля и отступы в материалах, комментариях, списках материалов, элементах для согласованности их внешнего вида. Размеры полей и отступов построены на базе сетки 5×5px.
  2. В шаблонах материала, комментария и списков для css-классов применена BEM-like нотация с состояниями вида `.is-*`.
  3. Унифицирован html- и lesscss-код, отвечающий за стили материалов, комментариев и списков.
  4. Там где возможно, стили были переписаны с использованием Flexbox и CSS Grid.
  5. Удалено большое количество устаревшего и неиспользуемого кода

Скриншоты

1. Список материалов в блоке «Интересное» на главной странице

2. Список материалов в блоке «Последние публикации» (мобильный)

3. Список материалов на странице «Трекер» (десктоп)

4. Список материалов на странице «Последние публикации»

5. Материал с комментариями

6. Страница профиля

7. Список материалов пользователя

8. Список комментариев пользователя

Анимация

1. Новое меню материала (мобильный)

2. Новое меню комментария (мобильный)


Список проблем и багов, а также статус их исправления можно отслеживать в нашем репозитории в issue https://github.com/DrupalRu/drupal.ru/issues/1276

Комментарии

Аватар пользователя Orion76 Orion76 19 февраля в 8:02

О, мой профиль использован для примера!
Я не заслуживаю такой чести-) Ну да ладно..

На UX еще поработать надо..
Да вы и сами наверное понимаете над чем..

Аватар пользователя itcrowd72 itcrowd72 19 февраля в 8:16

Мы погадали немного на кофейной гуще, но давай всё-таки ты напишешь, что ты имеешь ввиду и мы сверим результаты :)

Аватар пользователя Orion76 Orion76 19 февраля в 10:15
2

Да чего там гадать, это "основы", т.е. стандарты.
Но в общем то можно даже и без них.
Надо представить, что мы "блондинки" и только что нагуглили ссылку drupal.ru/tracker про какую-то CMS Drupal.
Заходим на нее самый первый раз.

Представили?

И что мы тут видим.
Таблица текста с какими-то иконками.
Что значит текст в этой таблице и иконки? Непонятно..

О! при наведении мыши на текст он превращается в ссылку!
как нам повезло что мы зашли не с планшета, а с десктопа.
На планшете у нас такой возможности не было бы.

Хм.. а почему бы сразу его не обозначить как ссылку?

Есть стандарт по умолчанию отображения ссылок:
ссылка выделяется синим цветом и "подчеркиванием"
ну или как минимум ссылка должна отличаться от текста хотя бы цветом, желательно специальным цветом "для ссылок".

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

А что они значат надо на форуме поспрашать, мож кто вкурсе.
Хотя, можно же было всплывающие подсказки на событие hover навесить.

Согласен, квест конечно очень занимательный, есть над чем поломать голову..
Но пользователь зашел не на сайт передачи "Что,Где,Когда",
а узнать чего-нибудь про CMS Drupal.
И желательно без лишних движений, напряжений мозга и потери времени.

Аватар пользователя gun_dose gun_dose 19 февраля в 10:34
2
Orion76 wrote:

Есть стандарт по умолчанию отображения ссылок:
ссылка выделяется синим цветом и "подчеркиванием"
ну или как минимум ссылка должна отличаться от текста хотя бы цветом, желательно специальным цветом "для ссылок".

Молодец, прочитал "ководство", но даже сам сайт студии Артемия Лебедева уже стал отступать от этих правил)))

А вот меню комментария на десктопе раньше было лучше.

Аватар пользователя P.Selfin@drupal.org P.Selfin@drupal.org 20 февраля в 19:04

А вот меню комментария на десктопе раньше было лучше.

Я ошибаюсь, или у нас еще было "Цитировать выделенное"?
И да, согласен, поменьше пестрило пунктами этого меню...
Может и стоит унифицировать интерфейс мобильный и десктопа в данном случае?

Аватар пользователя gun_dose gun_dose 20 февраля в 19:37

"цитировать выбранное" было реализовано не лучшим образом. Всё-таки, выделяя текст мышью и нажимая правую клавишу, ожидаешь увидеть привычное контекстное меню, а не то, что вздумалось дизайнеру.

Аватар пользователя madt madt 21 февраля в 1:25

Есть стандарт по умолчанию отображения ссылок:
ссылка выделяется синим цветом и "подчеркиванием" ну или как минимум ссылка должна отличаться от текста хотя бы цветом, желательно специальным цветом "для ссылок".

Ссылки в тексте у нас отображаются синим цветом. Ссылки в листингах — элемент интерфейса, а значит он может выглядеть как угодно. Адекватному пользователю будет достаточно навести курсор на один из элементов листинга, чтобы понять, что это ссылка. Все списки теперь выглядят и работают одинаково, так что, попробовав раз, человек сразу будет знать, как работают все листинги на сайте.

Кстати, тебя же не смущает, что в главном меню и пейджере ссылки не синие и/или не подчеркнуты.

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

Здесь ты прав, нужна документация по работе с сайтом. Именно поэтому при подготовке поста большое внимание было уделено скриншотам. Как только будет возможность, сделаем страницу с описанием интерфейсных элементов нашего сайта. Если готов помочь, то возьми на себя труд в создании краткого руководства по работе с drupal.ru, чтобы новички, о которых ты переживаешь, могли быстро узнавать про Drupal без лишних движений, напряжения мозга и потери времени.

Аватар пользователя Orion76 Orion76 23 февраля в 9:46

Я бы с удовольствием "помог".
Но не уверен, что "результаты" моей "помощи" будут использованы по назначению.
С предыдущими попытками "помочь" именно так и произошло.
Если ничего не изменилось, то не вижу в дальнейших попытках никакого смысла.

Аватар пользователя mbaev mbaev 21 февраля в 12:01
1

Круто! Ребята большие молодцы!
Я заметил, что границы контента поломались:

Аватар пользователя madt madt 22 февраля в 20:57
2

Обновление

  1. Сделано нормальное форматирование в «правилах сайта» (кстати, они теперь на одной странице и всё пронумеровано)
  2. Заголовки в статьях (теги h2-h6) теперь выделяются полужирным начертанием
  3. Комментарий, отмеченный как «Решение» теперь выделяется рамкой и под материалом и в ветке обсуждения. А при клике на якорь у «решения» под материалом будет перекидывать к оригинальному комментарию
  4. Исправлено отображения отметки для новых комментариев в материале
  5. Увеличен размер переключателя меню материала/комментария, чтобы было удобнее пользоваться на мобильных
  6. Цвет основного текста сделан менее ярким
  7. Устранены ошибки валидации главной страницы html https://validator.w3.org/nu/?doc=https%3A%2F%2Fdrupal.ru%2F