Переключить новую боковую панель с левой на правую сторону (английский форум)

Всем привет,

Я искал на форумах и спрашивал об этом в новом чате несколько дней назад. Мне посоветовали написать на форумах. Надеюсь, кто-нибудь сможет помочь.

Есть ли плагин для перемещения новой боковой панели на правую сторону?

Или есть встроенный способ переключить сторону с левой на правую?

5 лайков

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

5 лайков

Для настольного вида:

    body #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) 0;
    }
    
    body.sidebar-animate #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
    }
    body.has-sidebar-page #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
        padding: 0 0 0 10px;
    }
8 лайков

Спасибо. Куда мне это вставить, сюда?

На всякий случай поместите его в Desktop->CSS

6 лайков

Спасибо! Это работает частично. Меню-бургер всё ещё находится в левом верхнем углу и сдвигает логотип.

Я бы хотел, чтобы меню-бургер в навигационной панели оставалось на своём исходном месте вместе с иконками справа.

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

Отличная работа, @Lhc_fl :clap:

Для этого есть настройка сайта. Найдите меню навигации и установите значение «Выпадающий список в заголовке» :slight_smile:

4 лайка

Нет, вы упускаете суть вопроса. Когда вы включаете выпадающее меню заголовка, боковая панель исчезает. :slightly_smiling_face:

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

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

Логотип слева ведёт на «главную страницу форума» (прекрасно). Но теперь место логотипа занято иконкой переключения боковой панели, и её можно случайно активировать. Мне кажется, все иконки меню должны оставаться справа.

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

То же самое касается боковой панели: я предпочитаю, чтобы основной контент страницы был слева, а боковая панель — справа.

Это, конечно, только личное предпочтение. Просто интересуюсь, ведь, вероятно, другие владельцы форумов вполне довольны всем, что расположено слева.

4 лайка

Ах, да, я понимаю. Я забыл, что правая «гамбургер-кнопка» не вызывает настоящую боковую панель. Тот же контент, но скорее выпадающее меню, а не боковая панель, что вам нужно.

Я посмотрел код Discourse, который, к сожалению, всё ещё выглядит для меня как таинственные формулы какого-то волшебника
:mage: :scroll:
Кажется, что эти два компонента рендерятся совершенно по-разному.

Содержимое заголовка, содержащее виджет переключения боковой панели: discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

Виджет боковой панели: discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

Текущий код правой «гамбургер-кнопки»: discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

Возможно, это поможет создать тематический компонент для этой цели.

3 лайка

Спасибо! Кстати, это бутерброд с сыром на гриле, а не гамбургер. :nerd_face:

2 лайка

Мне интересно понять, почему вы хотите переместить меню на правую сторону? Это предложение, которое, по вашему мнению, будет лучше для всех сайтов, или есть какая-то особенность вашего сайта, из-за которой расположение слева не подходит? Например, есть ли у вас там другое меню? В противном случае я считаю, что расположение навигационного меню, которое можно скрыть/показать, слева становится отраслевым стандартом.

Какое бы название ни вызывало у вас больший аппетит! :rofl: Хотя, думаю, «гамбургер» узнаваемее. Лично мне нравится называть его «Гамбургларом»! :man_detective:

2 лайка

Хорошо, добавьте эту строку.

span.header-sidebar-toggle {
    order: 1;
}

2 лайка

Кстати, после внедрения некоторые пользователи просили перенести это на правую сторону. Возможно, они привыкли к расположению «гамбургер-меню»?

4 лайка

Спасибо за проделанную работу и обновления. :coffee:

Это возможно сейчас, случайно?

1 лайк

Привет, @haydenjames :slight_smile:
Вы уже задавали этот вопрос как предложение по улучшению здесь.
Нет необходимости дублировать посты в разных темах, поэтому я переместил ваш пост с Discourse 3.0 is Here! :slight_smile:

Кроме того, @Lhc_fl предложил отличные обходные пути. :+1:

Обходной путь действительно был почти идеален. Мне нужно было лишь оставить иконку «гамбургера» второй справа, а не первой. Однако @Lhc_fl подтвердил, что это невозможно реализовать только средствами CSS.

Я предпочитаю располагать контент слева, а боковую панель (используется реже) — справа, не меняя при этом исходное положение иконки «гамбургера».

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

В настоящее время включение боковой панели разбивает иконки меню на крайнюю левую и крайнюю правую части, а логотип форума перемещается так, что иконка «гамбургера» оказывается прямо рядом с кнопкой перехода на главную страницу форума.

Я хотел бы сохранить это:
image

И при этом получить это:

Если это станет возможным в будущем… Спасибо. :handshake:

4 лайка

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

1 лайк

Не совсем понял. Извините. Скриншоты в том плагине выглядят точно так же, как новый подход Discourse с разделением иконок по левому и правому краям.

Однако я не хочу, чтобы иконка-переключатель меню (гамбургер) находилась так близко к логотипу возврата на главную страницу форума. Я хочу переключать боковую панель, а затем нормально пользоваться форумом, не имея иконки переключения боковой панели в горячей зоне с логотипом слева.

В настоящее время отключение меню (как это реализовано разработчиками) не добавляет никакой ценности или преимущества, поскольку ширина страницы возвращается к уже слишком узкой. Это означает, что большинство пользователей не будут постоянно включать и выключать боковую панель — и это правильно.

Даже если бы они это делали, размещение иконки гамбургера слева от горячей зоны логотипа возврата на главную (на мой взгляд) не является хорошим решением и противоречит предыдущему дизайну Discourse, где все иконки располагались справа в верхней панели меню. Я хотел бы сохранить это:
image
…одновременно оставив контент слева, а боковую панель — справа (как на скриншоте выше).

Спасибо за ответ! Я продолжу читать больше об этом плагине, чтобы лучше понять, говорим ли мы об одних и тех же изменениях.

1 лайк

Я имел в виду, что в сочетании с перемещением панели вправо с помощью компонента @Lhc_fl. Изучив код в связанном мной компоненте, вы, возможно, сможете вернуть «гамбургер-меню» между поиском и профилем. Если я правильно понял ваш запрос и проблему с текущим обходным решением, созданным Lhc_fl.

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

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

Кто-то с опытом сможет извлечь код, используемый на мобильном устройстве, и применить его к рабочему столу. Это можно сделать, изучив элемент через «Инструменты разработчика» на рабочем столе при загрузке сайта в мобильном режиме.

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

1 лайк

Да, я надеюсь на это. Вы правы насчёт иконок меню для мобильных и десктопных версий.

1 лайк