Переместить кнопку свернутого меню с док-панели

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

#if($is_signed_in)
    #dockbar()
#end

в шаблонах темы\portal_normal.vm.

Это представляет собой еще одну проблему: когда страница переупорядочивается, чтобы соответствовать экрану мобильного устройства, меню сворачивается до кнопки на панели док-станции, которая скрыта. Я бы хотел, чтобы он рухнул где-нибудь еще, просто чтобы он не был скрыт — например, рядом с небольшим логотипом / названием сайта или в качестве первого элемента хлебных крошек.

Как это сделать или с чего начать. Я ценю любую помощь.

введите здесь описание изображения


liferay-theme liferay-6
person majkinetor    schedule 30.12.2014    source источник
comment
добавьте скрины если можно   -  person ASR    schedule 30.12.2014
comment
Первое изображение — когда экран достаточно большой, второе — когда экран достаточно мал. Меню сворачивается в кнопку. Поскольку я скрываю док-бар, мне нужно переместить кнопку меню в другое место.   -  person majkinetor    schedule 30.12.2014

Ответы (1)


arrow_upward
4
arrow_downward

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

Шаблон скорости темы:

#if(!$is_signed_in)
<div id="mainNavigationToggle" class="btn btn-secondary">
    <i class="icon-reorder"></i>
</div>
#end

Тема main.js:

AUI().ready(function (A) {
        var navigationToggleBtn = A.one('#mainNavigationToggle'); // get our toggle button
        var navigationUl = A.one(Liferay.Data.NAV_SELECTOR); // get default navigation ul element
        if (navigationToggleBtn && navigationUl) { // do nothing when toggle button not present (user not signed in) or if navigation is not present
            navigationToggleBtn.on( // otherwise assign simple function that'll toggle 'open' menu class on default navigation which will cause it to open, same for menu toggle button
                'click',
                function (event) {
                    navigationToggleBtn.toggleClass('open');
                    navigationUl.toggleClass('open');
                }
            );
        }
    }
);

Тема custom.css:

#mainNavigationToggle {
  display: none; /* hide by default */
  @include respond-to(phone, tablet) {
    display: block; /* show only for phone and tablet viewports */
  }
}
person Pawel Kruszewski    schedule 02.01.2015
comment
Работает как шарм. Спасибо большое Павел :) - person majkinetor; 20.01.2015
comment
Не за что :) Я рад, что это работает так, как вы ожидаете. - person Pawel Kruszewski; 21.01.2015
comment
Отличный пост, очень полезный! Спасибо Павел :) - person lgd; 06.10.2015