Как изменить порядок кнопок в заголовке?

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

Всем привет! Я хочу полностью переделать шапку форума Discourse.

Дизайнер нашей компании набросал для меня такой макет, но с помощью CSS у меня не получилось его реализовать.

Однако у меня возникла проблема с перемещением кнопки профиля в начало. Я искал информацию в источниках и нашёл упоминание файла \app\assets\javascripts\discourse\app\widgets\header.js.

Используя эту подсказку, я смог убрать иконки из продакшена и немного продвинуться вперёд: [Solved] How to use virtual-dom's "h" helper in <head> for header-dropdown hamburger widget override? + How to override @computed method?

Но переместить кнопку у меня так и не получилось.

Сейчас форум выглядит так:

Screenshot_2
Screenshot_2325×100 2.11 KB

А нужно вот так (переместить кнопку аккаунта и изменить иконку):

Screenshot_1
Screenshot_1424×108 5.96 KB

Подскажите, куда именно нужно копать, чтобы это сделать?

2 лайка
2

Вы можете сделать что-то подобное с помощью CSS:

.d-header-icons { 
  display: flex;
}

.header-dropdown-toggle.current-user { 
  order: 1; 
}
.header-dropdown-toggle.search-dropdown { 
  order: 2; 
}
.header-dropdown-toggle.hamburger-dropdown { 
  order: 3; 
}
5 лайков
Quick Messages Plugin
3

Спасибо, очень хорошо.

Небольшая доработка мне помогла.

2 лайка
4

Эта тема была автоматически закрыта через 2 дня после последнего ответа. Новые ответы больше не принимаются.