Перенос и прокрутка заголовка боковой панели

Внести вклад UX
1

Мне это не особенно нравится. Боковая панель навигации в режиме выпадающего списка:

IMG_3301
IMG_3301633×399 77.7 KB

Кроме того, в режиме выпадающего списка меню начинает прокручиваться уже при минимальном количестве элементов, даже если на экране ещё достаточно места для его расширения. Можно ли это исправить?

menu
menu391×679 42.7 KB

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

И почему раздел «Всё» включает пункты «Новые» и «Непрочитанные»? Они должны быть разделены?

Мне также нужно убрать оттуда ссылку на FAQ, но я пока не разобрался с CSS для этого.

1 лайк
2

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

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

Оно нацелено на текущее положение родительского элемента ссылки на FAQ (последний элемент минус 1). Наличие других элементов между ссылкой на FAQ и концом списка приведёт к тому, что CSS-селектор перестанет нацеливаться на нужный элемент.

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

1 лайк
3

Спасибо, @Canapin — я неплохо разбираюсь в CSS и довольно часто использую его на своём форуме, так что всё в порядке. Я пока не совсем понял, как таргетировать эти элементы, и надеялся обойтись без кода для дочерних элементов по той причине, которую вы указали. Я также использовал много CSS для изменения содержимого старого устаревшего меню, но с ним было проще работать. На самом деле я хочу изменить весь раздел под «Сообщество» и переставить элементы в другом порядке, поэтому, думаю, мне придётся использовать и JavaScript. Мне очень важно, чтобы эта часть была настраиваемой для администраторов. Ещё раз спасибо за совет! :slight_smile:

Также до сих пор не совсем понятно, что имеется в виду под «всем». Я бы хотел переименовать это, чтобы было более конкретно. :thinking:

5

Да, контейнер ссылок не имеет уникальных классов, поэтому в текущем состоянии их сложно адресовать.

Вас может заинтересовать это: sidebarMod: Add/Remove Sidebar Links and Sections

Вы можете найти js.sidebar.sections.community.links.everything.content в разделе Настройка —> Текст :slight_smile:

1 лайк
6

Окей, этот CSS-код сработал. Я переживал, что это повлияет на вид этого пункта меню для сотрудников. Спасибо! :innocent:

К сожалению, мне не удалось заставить замену текста работать :expressionless:

edit: даже после многократной перезагрузки браузера мне пришлось сменить тему, чтобы замена текста применилась. Кэширование в Chrome — это боль. :woman_facepalming:

1 лайк
7

Я также изменил соответствующий текст при наведении мыши:

IMG_3332
IMG_3332873×143 58.2 KB

1 лайк
8

так что это действительно скрывает раздел «Часто задаваемые вопросы», но я позже обнаружил, что это также имеет нежелательный эффект — скрывает один элемент в каждом разделе меню :sweat_smile: но, конечно же, так и должно быть :woman_facepalming: :upside_down_face:

мне действительно стоит просто взяться за дело и написать раздел «Часто задаваемые вопросы» или делегировать это пользователю.

1 лайк
9

Ага, да.

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

Должно стать лучше.

2 лайка
10

Здравствуйте,

Вы также можете нацеливаться на них с помощью атрибута data-link-name.
Например:

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
2 лайка
11

Да, я пытался использовать этот метод в первый раз, но у меня был неверный синтаксис data-link. Я забыл часть «-name» и подумал, что это как-то невозможно. Глупо с моей стороны, ведь это похоже на то, как я делал это с старым устаревшим меню. Ой :woman_facepalming: Спасибо.

Кстати, метод child доступен только для настольной версии.

1 лайк
12

Проблема в том, что все ссылки находятся внутри элементов списка, у которых одинаковые классы.
Если скрыть ссылку, элемент списка останется и будет занимать место, несмотря на то что он «пустой».
Разве я что-то упускаю?

2 лайка
13

Это будет очень здорово, когда изменение раздела «Сообщество» станет полностью рабочим в ядре. Я легко изменил заголовок «Сообщество», но хотел бы изменить порядок элементов. Например, в мобильном виде ссылка «Мои сообщения» находится выше «Администрирование» и «Модерация», поэтому «Модерация» оказывается в разделе «… Ещё». Мой персонал недоволен этим, и я согласен, что элементы управления модераторами должны иметь приоритет над «Мои сообщения». Мне, наверное, стоит создать тему с предложением по UX, но я знаю, что команда в любом случае работает над тем, чтобы сделать это настраиваемым для нас в будущем.

Кажется, я всегда могу скрыть ссылку на «Мои сообщения», а затем переместить её в раздел глобальных ссылок. Не знаю, я, наверное, пытаюсь сделать слишком много с этим меню.

2 лайка
14

Да, я понял. Для таких проблем было бы круто использовать псевдо-класс :has, но он немного ограничен.

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2 лайка