Редизайн сообщества
На modx.pro обновили интерфейс сообщества: v2, тёмная тема и доработки поиска. Ниже — что поменялось и куда писать, если что-то поехало.
Интерфейс v2
Перекрасили оболочку и основные экраны:
Тёмная тема
Переключатель в шапке. Выбор лежит в localStorage. При первом заходе подхватываем prefers-color-scheme из системы.
Интерфейс v2
Перекрасили оболочку и основные экраны:
- лента, карточки топиков, страница заметки, комментарии;
- разделы, пользователи, профиль, вход и регистрация;
- поиск, «О нас», страницы ошибок;
- общие пустые состояния и пагинация;
- одни CSS-токены --v2-* вместо цветов, размазанных по шаблонам.
Тёмная тема
Переключатель в шапке. Выбор лежит в localStorage. При первом заходе подхватываем prefers-color-scheme из системы.
- инициализация в , без белой вспышки при загрузке;
токены темы подключаются до отрисовки страницы;
Ya-share, Bootstrap-модалки, MarkItUp, Prism и утилиты Bootstrap сидят на общих переменных;
подтянули контраст: кнопки, рейтинг, чекбоксы, тултип голосов, футер на всю ширину экрана.
Поиск - сортировка: релевантность или дата;
- вес результата виден только при сортировке по релевантности;
- совпадения в заголовке и сниппете подсвечиваются красным #b91c1c, не только жирным.
- «Наверх»: клик и по левой полосе, и по кнопке; логотип в шапке не перекрывается;
- закрытие фото в lightbox: кликабелен весь круг, не только крестик;
- ветки комментариев: убрали точки вложенности, урезали отступ на длинных тредах;
- ссылки на пакеты Modstore в сайдбаре ведут на канонические URL;
- фильтры пользователей и подписка на комментарии: свои чекбоксы v2 вместо синего Bootstrap.
- URL или шаги воспроизведения;
- браузер и ОС;
- светлая или тёмная тема;
- скрин или запись экрана, если есть;
- что ждали и что увидели.
Комментарии: 36
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
И шрифт мелковат. Читать тяжело.
Так и было задумано? — file.modx.pro/files/2/3/1/231e5a9643a087d8a69ccbef2bbb78aa.png
Нет отступа — file.modx.pro/files/4/c/e/4cefb3e4c7a3c6fc9462257bafcedfb7.png
Если я не ошибаюсь запрещено сейчас в РФ использовать авторизацию через иностранные соцсети. Вроде бы большой штраф — file.modx.pro/files/4/d/5/4d5e20a47f221f4cd3675d6e1f76598e.png
При наведении на кнопку «наверх» серая полоска пропадает — file.modx.pro/files/1/6/0/160b0b84b447c7a8720f54e3c13c7661.png
При нажатии на стрелочки вверх вниз у комментария или у автора (прибавить карму) было бы не плохо у неавторизованного пользователя предлагать авторизоваться в модальном окне.
В правом сайдбаре когда создаешь заметку вот так — file.modx.pro/files/3/c/6/3c630164e3d987485c306725c550467e.png
Из мелочей, отступ в превью комментария
Уточняю: только кнопка — 2 отрабатывает некорректно, начиная с 3 и далее, всё работает
так выглядит вопрос на подтверждение удаления заметки в темной теме.
Кроме того при публикации заметки не увидел всплывающего уведомления об успешной публикации из-за чего опубликовал две одинаковые заметки)))
— заведу баг (это было до редизайна).
На мобилке шапка не помещается на 1 строке, плюс иконки растягиваются до овала из-за иконки, вместо того, чтобы оставаться круглыми
display: flex;
flex-wrap: nowrap;
align-items: center;
min-height: 4rem;
padding-top: 0.625rem;
padding-right: 1rem;
padding-bottom: 0.625rem;
padding-left: 1rem;
}
и
или
- Шапка. На мобиле лого, поиск, тема и профиль остаются в одной строке. Меню уходит на вторую. На планшете/узком десктопе навигация тоже переносится отдельной строкой. Кнопки логина, аватара, поиска и темы выровнены по размеру, без схлопывания.
- Карточки и страница заметки. Подписи кнопок («Изменить», «В черновики» и т.д.) короткие на мобиле, полные на десктопе, есть aria-label. Статистика и голоса/избранное собраны в одну строку engagement.
- Сайдбар пакетов. Версия и дата идут в одну строку, длинные версии обрезаются с ellipsis, сетка чуть плотнее.
Итого: меньше переносов и «ломаной» шапки на телефоне, компактнее действия и мета в ленте.Позвольте вставить свои 5 копеек:
1. А можно сделать прилипающую шапку меню сверху? (сейчас надо или скролить вверх или жать кнопку «Наверх»)
2. В темной теме сделать белые линии серыми (цвет как верхняя линия)
1) просили — я упустил.
Рамка в рамке в рамке в рамке – создает визуальный шум. Не то чтобы это было плохо или хорошо (по факту это вкусовщина), но минимализм всегда в моде.
Правило простое, если нет объяснения «зачем оно надо?» значит можно убрать. Разделить текст и нижние элементы? Там линия этот вопрос решает. Разделить один комментарий от другого? Общий белый блок решил этот вопрос.
А ну и еще кнопку «Ответить» можно перенести в общий ряд элементов и сделать визуально кнопкой.
На скрине было/стало предлагаю своё виденье.
P.S. Там ещё кнопка «Изменить» имеется, её тоже предлагаю в этот ряд.