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

Вот как это выглядит в брендинге Foundation и Meta:

image image

Контейнеры с цифрами и стрелками должны быть одного размера.

2 лайка

Я не вижу этого на мобильном устройстве. Я предполагаю, что это desktop?

Спасибо, я копнул глубже: это связано с новой темой Foundation, которая также используется на Meta Branded, и проблема проявляется как на настольных компьютерах, так и на мобильных устройствах.

Не уверен, стоит ли перенести это обсуждение на Modernizing the Foundation theme или нет.

1 лайк

Принял окончательное решение :wink:

3 лайка

Это исправлено и скоро будет обновлено

3 лайка

В тёмной теме состояние active на некоторых кнопках (в основном заметно при навигации с клавиатуры, при использовании мыши или сенсорного экрана оно проявляется лишь кратковременно) — тёмно-фиолетовый на тёмном фоне, что слишком резко бросается в глаза:
image

Также это касается состояния hover красного цвета:
image

Но самое худшее — кнопка «danger» с красным фоном и тёмным текстом:
image

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

2 лайка

Это только для этой темы Meta?

Да. На основе:

active
image

hover
image

danger
image

Лучший контраст, чем у Meta Branded.

2 лайка

Это всё ещё актуально:

Планируется ли корректировка границ кнопок при использовании цветовой палитры WCAG? Сейчас мне трудно различить тонкие, очень светлые границы, из-за чего в некоторых местах кажется, что иконки просто парят в воздухе, а не являются кнопками. С предыдущими кнопками сплошного серого цвета такой проблемы не было.

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

Например, текстовые поля в настройках имеют более тёмную обводку:

Я также заметил, что это, похоже, нарушает стилизацию настроек безопасности категорий:

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


3 лайка

Я думаю, что размер текста навигационной панели слишком мал на мобильных устройствах. Шрифт в разделах «Предлагаемое»/«Связанное» тоже слишком мелкий.

См. также

2 лайка

Я думаю, что это вопрос вкуса, потому что я придерживаюсь мнения, прямо противоположного вашему: «старая» версия Foundation с шрифтами и кнопками кажется мне слишком массивной, тогда как более изящные элементы «новой» версии выглядят гораздо лучше в общей структуре. У меня нет никаких претензий к функциональности ни на десктопе, ни на мобильных устройствах; мои пользователи тоже не жаловались с момента включения. :woman_shrugging:t2:

Кроме того, вы можете оставить отзыв своим администраторам — возможно, они создадут тему с изменениями из «старой» версии? Увеличение указанных вами шрифтов с помощью CSS не составляет труда. Либо вы можете использовать расширение браузера типа Stylus, чтобы добавить собственные модификации (я делаю это на всех сайтах Discourse, которые посещаю, включая этот).

4 лайка

Под кнопкой «Связанные» есть небольшой зазор


Это становится более заметным при увеличении размера шрифта

Stylus

.more-topics__container .nav .d-button-label {
   font-size: 150%;
}


2 лайка

Да, поэтому я и сказал «что-то вроде», потому что у них в теме могут быть свои особенности. Я использовал Meta, а не форум Rust. Я посмотрю для тебя, потому что я добрый. Но мне нужно подождать, пока появятся новые непрочитанные сообщения, чтобы увидеть полный верхний и нижний колонтитулы. Судя по скриншоту с аватаром, это мобильный вид?

3 лайка

Особенность видна здесь

2 лайка

Хорошо, это ошибка UX с новой темой Foundation и вставленной кнопкой темы, связанной с ИИ. Классы кнопок немного отличаются, и лишняя line-height, похоже, тоже всё ломает.

image

Но это немного исправит ситуацию — можно применить патч, отрегулировав отступы и убрав line-height:

.more-topics__container .nav {
    font-size: larger;
    
    li .btn {
        padding: .5em;
        line-height: 0;
    }
}

на рабочем столе:

на мобильном:

2 лайка

В меню закрепленного состояния опции сильно перекрываются:

3 лайка

В мобильном браузере страница управления группами вкладок отображается с ошибками — Вклад / Пользовательский опыт — Discourse Meta

Всё ещё можно отказаться от этого изменения здесь, в Meta? Я не вступал в группу, но изменение, похоже, уже включено для меня, из-за чего я едва вижу границы кнопок, хотя использую палитру WCAG.

2 лайка

Нет, в Meta функция отключения больше не доступна, группа теперь устарела.

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

1 лайк

Вы ошибаетесь. Я подожду, пока не будут исправлены проблемы, о которых я уже сообщал, чтобы вы могли полностью сосредоточиться на них :wink: Если серьёзно, мне не кажется разумным тратить время на описание того, что я замечаю, когда то, что я написал в феврале, ещё не исправлено. Кроме того, я уверен, вы поймёте, что пользоваться сайтом, на котором интерфейс отображается некорректно, не очень приятно. Жаль, что доступность для вас имеет такой низкий приоритет.

4 лайка