Позиционирование уведомлений для сотрудников неоднозначно

Я только сейчас начал использовать уведомления для сотрудников, но понял, что непонятно, к какому именно сообщению они относятся. Мне кажется, очень трудно определить, относится ли уведомление к сообщению выше или ниже.

Разве не логичнее размещать их под разделителем, который отделяет сообщения, как в этом случае?

3 лайка

Думаю, это отчасти связано с используемой вами темой? Скругленные углы внизу уведомления создают ощущение, что оно как бы оторвано от поста ниже. Мне кажется, здесь, на Meta, с темой по умолчанию это выглядит лучше? (Я добавил несколько уведомлений в эту тему в качестве примера)

3 лайка

Спасибо, Дэвид, но я попробовал без темы, и всё равно непонятно. Примеры, которые вы привели здесь, очевидны, потому что один — это первое сообщение, а другой отделён картой темы. Но если выйти за их рамки, непонятно, куда двигаться, если вы не знакомы с этим. Попробуйте так: уберите эти уведомления, ответьте мне здесь и добавьте уведомление к моему ответу.

Я тоже хочу присоединиться к веселью :slight_smile:

редактирование: Мне кажется, всё верно

2 лайка

Если что, отступов немного маловато:
image

Если убрать уведомление над постом Дэвида, возникает большая путаница в том, к какому именно посту оно относится. Я показал эту функцию своим модераторам сегодня, и их первая реакция была такой: это совершенно непонятно.

2 лайка

(Я наткнулся на этот старый пост, когда пересматривал некоторые другие сообщения о путанице с уведомлениями сотрудников…)

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

Альтернатива, которую сегодня можно применить глобально ко всем уведомлениям в постах, — это использование пользовательского CSS для вставки символа Unicode со стрелкой, либо перед аватаром:

image

CSS: перед аватаром
.post-notice::before {
  content: '🡇';
}

(Или, возможно, более корректно):

.post-notice::before {
  content: " \1F847";
}

…либо перед текстовым содержимым:

image

CSS: перед текстом
.post-notice p::before {
  content: " \1F847";
  margin-right: .5rem;
}

О-о — вот трюк для изменения цвета:

image

CSS: изменение цвета
.post-notice p::before {
  content: " \1F847\fe0e";
  color: yellow;
  margin-right: .5rem;
}

(Добавление \fe0e к любому символу Unicode отображает текстовую версию, которая поддерживает цвет. Ссылка.)

Я также решил, что стрелка вниз не подходит для уведомления в основном топике, так как она явно указывает на направление топика. Этот CSS заменяет стрелку на маркер только для первого поста:

image

CSS: отличается для основного топика
#post_1 .post-notice p::before {
  content: " \29BF\fe0e";
  color: yellow;
  margin-right: .5rem;
}
1 лайк

Отличная идея, Тодд! Рад, что я не единственный сумасшедший :wink:

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

.post-notice p::before {
  content: "\2B07\FE0E";
  color: var(--tertiary);
  margin-right: .5rem;
}

#post_1 .post-notice p::before {
  content: "\29BF\FE0E";
}
2 лайка

Из-за того, как сообщения упорядочены в теме, и когда я прокручиваю, для меня естественно и логично ожидать, что это относится к сообщению ниже. Стрелка — это приятный штрих и хорошее решение для большей наглядности. Вы также можете добавить небольшую ссылку в уведомление для сотрудников. :slight_smile:

3 лайка

Без обид, но это звучит как «я знаю это и привык к этому, поэтому мне это кажется очевидным». Я бы возразил, что уведомление от сотрудников, очевидно, могло быть размещено только ПОСЛЕ публикации поста. Поэтому, если всё идёт «по порядку», естественно ожидать, что уведомление от сотрудников будет после него.

Лично я считаю, что у @davidkingham определённо есть аргументы: это двусмысленно. Было бы лучше, если бы это было понятно любому человеку с первого взгляда. А в данном случае это не совсем так (например, если уведомление от сотрудников должно быть вверху поста, то размещение его под именем автора сделало бы это ещё более ясным. Это может быть технически сложнее реализовать или не понравиться по другим причинам).

Для некоторых тем (например, для темы Meta Branded, которую я использую прямо сейчас), уведомление для сотрудников находится ниже линии, отделяющей посты, поэтому ясно, к чему относится это уведомление.
Возможно, другие темы тоже могли бы это принять?

1 лайк

Это вполне возможно. :thinking:

Кажется, я пытался сказать (но выразился нечётко), что при прокрутке темы логично предположить, что ссылка относится к следующему сообщению, несмотря на хронологический порядок постов.

1 лайк

Почему у первого уведомления для сотрудников нет линии, а у остальных есть?

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

Привет, как отобразить уведомления персонала под постом, а не над ним?

Извините, можно ли это сделать через CSS?

1 лайк

Я лично тоже считаю, что логичнее размещать уведомления ПОСЛЕ поста. Пока я не придумал простого способа переместить их туда, поэтому в качестве временного решения добавил этот CSS-стиль:

.post-notice.custom {
    background: linear-gradient(to bottom, rgb(255 0 5) 0%, rgba(255, 137, 139, 0.2) 2%, rgba(255, 137, 139, 0) 70%);
}

Теперь уведомления выглядят так:

Благодаря направлению градиента интуитивно понятно, где находится его «логическое продолжение».
Обратите внимание, что я использовал правило с классом .custom, так как этот класс не применяется к автоматическим уведомлениям, которые создаются, например, когда пользователь пишет первое сообщение или возвращается после длительного перерыва. Для таких случаев мы можем использовать другие цвета градиента.

Кстати, хотел бы узнать, есть ли способ увидеть, какие ещё классы могут быть у уведомлений, и применяется ли класс .custom только к уведомлениям от сотрудников или где-то ещё?

1 лайк