Рефакторинг темы: отступы, размеры, шрифт, контекстное меню

[avakorin]

Описание

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

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

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. Включить новый блок «Интересное» в регион «Frontpage Content»
3. Поместить обновленный файл аватара по-умолчанию в директорию default/files/
4. Изменить стиль изображений «avatar» на 25x25px
5. Обновить стили avatar и avatar_profile
6. Включить модуль field_group
7. Создать для материала вида «Запись в блог» на вкладке «Управление отображением» на вкладках «По умолчанию» и «Анонс» группу group_taxonomy (метка «Таксономия»): 7.1. Вид группы: «HTML-элемент» 7.2. Элемент: «ul» 7.3. Показать метку: «нет» 7.4. Дополнительные классы CSS: «node__taxonomy» 7.5. Переместить в группу поля в следующем порядке
   • Версия Drupal
   • Модули и темы
   • Тип материала
   • Форумы
8. Для материала вида «Запись в блог» включить view mode «Анонс» на вкладке «Отображение комментария» 8.1. На вкладке «Анонс» для поля «Комментарий» установить формат «Обрезанный текст» и значение 600
9. Изменить заголовок блока «Последние публикации» на «Новые материалы»
10. Изменить заголовок страницы «Последние публикации» на «Новые материалы»

Экспортированные представления:

1. tracker_featured.view.txt
2. tracker_my.view.txt
3. tracker_new.view.txt
4. tracker.view.txt (обновлено)
5. user_blog.view.txt (обновлено)
6. user_comments.view.txt (обновлено)

Скриншоты

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

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

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

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

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

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

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

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

Анимация

1. Новое меню материала (мобильный) https://dump.video/i/WzvFmo.mp4

2. Новое меню комментария (мобильный) https://dump.video/i/uZ60Po.mp4

TBC

[ivnish]

Отправлено на дев