Модернизация темы 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: Если серьёзно, мне не кажется разумным тратить время на описание того, что я замечаю, когда то, что я написал в феврале, ещё не исправлено. Кроме того, я уверен, что вы поймёте: пользоваться сайтом, где интерфейс не виден должным образом, — это не очень весело. Жаль, что доступность для вас имеет такой низкий приоритет.

Редактирование: За исключением первого «вы», остальные обращения не относятся лично к chapoi. Извините, что не заметил этой двусмысленности. В немецком языке такой проблемы нет, так как слова различаются.

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

4 лайка