Модернизация темы Foundation

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

https://meta.discourse.org/g/modernized-foundation

Мы внедрим эти изменения через новую функцию Предстоящие изменения, доступную в Discourse. Это позволит владельцам сайтов включать изменения для любой указанной группы, чтобы протестировать процесс внедрения, не опасаясь возможного нарушения работы тем или текущих настроек.

Что изменится?

Уменьшение высоты заголовка

Мы уменьшили размер заголовка сайта, а также некоторых иконок и аватара, чтобы эффективнее использовать пространство на экране.

Кнопки по умолчанию

Мы переходим от серого фона кнопок по умолчанию к прозрачному фону / фону «вторичного» типа с рамкой.

  • Удаление серого фона
  • Добавление рамок
  • Цвет иконки соответствует цвету текста
  • Кнопки теперь имеют фиксированную высоту

Кнопка «Создать новую тему» на странице списка тем

Соответствие стилю Horizon и присвоение этому элементу фона «CTA» цвета tertiary.

Удаление множества серых фонов

Список тем

  • Удаление верхней границы толщиной 3 пикселя
  • Уменьшение размера шрифта заголовков таблицы
  • Единый цвет для элементов данных таблицы
  • Изменение цветовой схемы для чтения/непрочитанных сообщений
  • Небольшое увеличение жирности шрифта для непрочитанных

Ячейки категорий

  • Выравнивание текста по левому краю
  • Удаление толстой цветной левой границы
  • Чуть более скругленные значки
  • Более тонкая рамка вокруг ячейки

Панель навигации

  • Вкладки навигации на страницах списка тем будут иметь ту же высоту, что и кнопки в этой зоне
  • Более темный цвет текста и иконок в выбранном наборе

Боковая панель

  • Цвет иконки и текста совпадает
  • Более темный текст и иконки
  • Более светлый фон для «активных» элементов
  • Увеличенная жирность шрифта для активных элементов

Приветственный баннер

  • Сбалансированные отступы
  • Добавлены переменные для более удобного выравнивания по левому краю/по центру/по правому краю через настройку
  • Уменьшена жирность шрифта заголовка
  • Уменьшен размер шрифта подзаголовка

Календарь

  • Удален серый фон у «кнопок»
  • Серый цвет используется только для обозначения «активного» состояния
  • Переход к стилю кнопок «с рамкой и прозрачным фоном»

Выпадающие списки

  • Добавлены отступы для контейнера выпадающего списка
  • Высота, отступы и интервалы теперь соответствуют элементам боковой панели
    • Унификация «списков с возможностью клика»
  • Граница наследует переменную --d-border-radius

Новые переменные

Некоторые из этих изменений будут внедрены через дополнительные переменные, добавленные в ядро.

Выравнивание приветственного баннера

Теперь выравнивание приветственного баннера можно изменять с помощью:

// по умолчанию
  --welcome-banner-text-align: center;
  --welcome-banner-search-menu-margin-inline: auto;

// пользовательская настройка
  --welcome-banner-text-align: left;
  --welcome-banner-search-menu-margin-inline: 0 auto;

Высота кнопки

Теперь у нас будет фиксированная высота кнопки через:

// по умолчанию
  --button-height: var(--space-8);

Сглаживание шрифтов

Мы уже применяем это в Horizon, поэтому логично перенести это и на Foundation.

// новое значение по умолчанию
--webkit-font-smoothing: antialiased;
37 лайков

В выпадающем меню кнопки «Gist» есть полоса прокрутки (возможно, из-за свойства overflow у класса fk-d-menu), и, вероятно, ему не требуется тот же min-width: 200px, что и другим классам dropdown-menu.

edit: ладно, уже исправлено :smiley:

6 лайков

Я вижу современную тему Foundation, но почему у меня всё ещё старая раскладка категорий?

Я думаю, что Meta в настройке сайта «Стиль страницы категорий для настольных компьютеров» использует не «Ящики с подкатегориями», а «Только категории».

1 лайк

Ой, я предположил, что скриншоты были сделаны в Meta, но даже не подумал проверить это.


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

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

Я, наверное, галлюцинирую :thinking:


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

2 лайка

О да, это исправлено… теперь можно выйти в любой момент.

4 лайка

Не могли бы вы разрешить мне покинуть группу @modernized-foundation.
Редактирование: Теперь, после выхода из группы, я могу добавить скриншот сравнения новой кнопки темы.
image

Кажется, некоторые цвета иконок плохо сочетаются с палитрой WCAG.
image

И, например, селектор группы в верхнем левом углу страницы группы не очень хорошо поддерживает два ряда.

Вот как это выглядит, когда я выхожу из системы.

3 лайка

Мне нравятся большинство изменений. Они тонкие. Некоторые я даже не замечаю, если не смотрю на значения CSS :grinning_face_with_smiling_eyes: (цвета иконки и текста боковой панели, цвета прочитанных и непрочитанных тем в списке тем).

До / После
image image

Мне нравится выделенная кнопка «Новая тема». Я на самом деле настраивал её именно так на своём форуме очень давно (пока мой код не сломался, и я не стал его исправлять).


До / После


Мне тоже это нравится; по крайней мере, в тёмной палитре сочетание тёмно-синего с тёмно-серым выглядело странно.


До / После

Хотя мне нравится новый стиль кнопок,我觉得 в некоторых местах, особенно в подвале темы, им не хватает контраста с фоном.
Это выглядит небрежно. Кнопки не кажутся частью конкретной секции, в отличие от предыдущей версии. Они просто как бы… висят там. Не знаю, имеет ли это смысл.

6 лайков

Это, похоже, работает на странице чтения и в активности тем на некоторых размерах экрана

Но как только я немного уменьшаю ширину, «Ответы» и «Активность» кажутся слишком большими (это также проблема на /latest)

Аналогичная проблема наблюдается с «Обновлено» и «Активность» на /my/activity/bookmarks

Ещё один пример, где цвет иконки и текста не совпадает — это кнопка развёртывания на моём профиле

Вот как это выглядит, когда я покидаю группу:

Кажется, вы не упомянули, что уменьшен не только размер шрифта заголовков таблицы, но и размер чисел в столбцах «Ответы», «Просмотры» и «Активность».

Кажется, иконка в выпадающем списке языков теперь слишком велика по сравнению с текстом.
До:
image

После:
image

7 лайков

Спасибо большое за сравнение «до/после». Мне показалось, что его не хватало в первом посте.

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

Я направляюсь в новую группу, чтобы протестировать её!

2 лайка

Слово «ссылка» в карте тем отображается частично после присоединения к группе:

Скриншот сделан по адресу Add link to sidebar category setting to new admin menu in categories section of the sidebar

Текст в этом модальном окне трудно читать при наведении курсора. Мне кажется, контраст был лучше раньше:

Мы с нетерпением ждем изменений в стиле по умолчанию. Когда они будут выпущены?

1 лайк

Поле ввода поиска и кнопка отправки сжаты!

squish!

редактировать: только на мобильных устройствах

5 лайков

Отличная обратная связь и поиск ошибок на данный момент. Спасибо за обновления.

5 лайков

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

5 лайков

Начертание шрифта для непрочитанных тем жирнее, чем для прочитанных.
На десктопе я этого не заметил, но на мобильном это видно.

Мне это кажется немного грубоватым.

Мне нравилось, что Discourse в основном ограничивался лишь изменением цвета, что выглядело более элегантно, чем каноничное различие в начертании, которое встречается во многих форумах.

Теперь у нас есть и то, и другое. Разница невелика, но я бы предпочел только изменение цвета :paintbrush:

3 лайка

Последний раунд изменений скоро должен быть опубликован в этом PR:

4 лайка

Когда примерно выйдет финальная версия? Я очень жду этого обновления стиля.

Вы, кажется, очень рады. Хотя изменения пока находятся в экспериментальной стадии, вы уже сегодня можете включить «Modernize Foundation theme» (Модернизация темы Foundation): Upcoming Changes

3 лайка