Перейти к публикации
4.3.6
Dyatel

Настройка для мобильного вида

Рекомендованные сообщения

Dyatel

Добрый день

Подскажите, а есть ли где настройки или плагин какой, в котором можно настроить отображение на мобильных устройствах. По идее для этого пишется отдельный шаблон. И подключается. Но в IPS так-то все адаптируется под мобильные устройства, но отображается все вплоть до блоков с объявлениями и т.д. и отображается вертикально в одну колонку. В мобильном виде это все отключить бы, а оставить например только форум.

Если плагинов нет, то можно как-то это поднастроить ?

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
anufmikh

В настройках стиля можно отключить показ сайдбара в мобильной версии.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
WOLF
1 час назад, Dyatel сказал:

Добрый день

Подскажите, а есть ли где настройки или плагин какой, в котором можно настроить отображение на мобильных устройствах. По идее для этого пишется отдельный шаблон. И подключается. Но в IPS так-то все адаптируется под мобильные устройства, но отображается все вплоть до блоков с объявлениями и т.д. и отображается вертикально в одну колонку. В мобильном виде это все отключить бы, а оставить например только форум.

Если плагинов нет, то можно как-то это поднастроить ?

css редактируется и скрывается через него ненужное через медиа

гугл как бы всегда все знает, нужно лишь не лениться

https://www.google.ru/search?q=%D1%81%D0%BA%D1%80%D1%8B%D1%82%D1%8C+%D0%BD%D0%B0+%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D1%85+%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%D1%85+css&rlz=1C1GIGM_enRU721RU721&oq=%D1%81%D0%BA%D1%80%D1%8B%D1%82%D1%8C+%D0%BD%D0%B0+%D0%BC%D0%BE%D0%B1%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D1%85+%D1%83%D1%81%D1%82%D1%80%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%B0%D1%85+css+&aqs=chrome..69i57.15222j0j7&sourceid=chrome&ie=UTF-8

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Dyatel

Спасибо всем.

Ну если честно, то я не поискал.

В гугле.

Но это как-то придется реализовать в IPs. А это я скорее всего не смогу.

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
anufmikh

Что не нужно показывать на мобильных устройствах можете добавить класс ipsResponsive_hidePhone самостоятельно через шаблоны.

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Dyatel

Всем добрый день

В принципе сделал. Класс добавил, убрал, то, что не нужно. Уже гуд.

Хочется чуть-чуть добавить функционала в мобильной версии. А именно:

Если открыть справа вверху менюшку, то там показываются ссылки, те что есть в navbar

Вопрос: как можно сделать отдельное меню в том же navbar, которое будет отображаться только в мобильной версии

Понимаю, что нужно будет создать div с классом уже не   ipsResponsive_hidePhone, а  ipsResponsive_hideDesktop, но как правильно 

это прописать...... именно те ссылки, которые надо в мобильной версии отобразить

На всякий случай код из navbar:

<div class='navPositon {{if theme.ipbf_dropDownNavBar}}hiddenLinks{{endif}}'>
{{if !in_array('ipsLayout_minimal', \IPS\Output::i()->bodyClasses )}}
	<nav class='ipsClearfix' {{if !theme.ipbf_dropDownNavBar}}data-controller='core.front.core.navBar'{{endif}}>
		<div class='ipsNavBar_primary {{if !count( \IPS\core\FrontNavigation::i()->subBars( $preview ) )}}ipsNavBar_noSubBars{{endif}} ipsClearfix'>	
			<ul data-role="primaryNavBar" class='{{if !$preview}}ipsResponsive_showDesktop ipsResponsive_block{{endif}}'>
			{{if theme.ipbf_homePageIcon}}
				<li><a class='ipbforoHomeIcon ipsResponsive_showDesktop ipsResponsive_block' href='{setting="base_url"}' title='{lang="go_community_home"}'></a></li>
			
			{{endif}}
				{template="navBarItems" app="core" group="global" location="front" params="\IPS\core\FrontNavigation::i()->roots( $preview ), \IPS\core\FrontNavigation::i()->subBars( $preview ), 0, $preview"}
              {{if theme.ipbf_dropDownNavBar}}
              	<li class="ipbforoNav_more ipbforoNav_hidden" data-width="80">
                	<a href="#"> {lang="more"} </a>
                	<ul class='ipsNavBar_secondary'></ul>
                </li>
              {{else}}
				<li class='ipsHide' id='elNavigationMore' data-role='navMore'>
					<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore' id='elNavigationMore_dropdown'>{lang="more"}</a>
					<ul class='ipsNavBar_secondary ipsHide' data-role='secondaryNavBar'>
						<li class='ipsHide' id='elNavigationMore_more' data-role='navMore'>
							<a href='#' data-ipsMenu data-ipsMenu-appendTo='#elNavigationMore_more' id='elNavigationMore_more_dropdown'>{lang="more"} <i class='fa fa-caret-down'></i></a>
							<ul class='ipsHide ipsMenu ipsMenu_auto' id='elNavigationMore_more_dropdown_menu' data-role='moreDropdown'></ul>
						</li>
					</ul>
				</li>
              {{endif}}
			</ul>
		</div>
	</nav>
{{elseif member.group['g_view_board']}}
	<nav class='ipsLayout_container'>
		<div class='ipsNavBar_primary ipsNavBar_noSubBars ipsClearfix'>
          	<ul data-role="primaryNavBar" class='{{if !$preview}}ipsResponsive_showDesktop ipsResponsive_block{{endif}}'>
            	<li><a id='elBackHome' href='{setting="base_url"}' title='{lang="go_community_home"}'> {lang="community_home"} </a></li>
            </ul>
		</div>
	</nav>
{{endif}}
</div>

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
anufmikh
@media screen and (min-width: 980px) {
	a[data-navitem-id="1"],
	a[data-navitem-id="2"],
	a[data-navitem-id="3"] {
		display: none !important;
	}
}

Где 1, 2, 3 - идентификаторы элементов меню, которые необходимо скрыть на десктопе, можете найти их в просмотре кода страницы.

  • Нравится 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Dyatel

Спасибо.

Попробую. Отпишусь. Завтра наверное

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
Dyatel

Попробовал убрать из navbar  на пробу, ссылку на контакты. у меня она идет в коде с id elNavSecondary_39

Следуя рекомендации выше, прописал:

@media screen and (min-width: 980px) {
	a[data-navitem-id="elNavSecondary_39] {
		display: none !important;
	}
}

Но не скрылось.

Если не трудно,  покажите где в коде вставлять. Код navbar я выше писал.

И надо ли этот код оборачивать в div

Если глупости спросил, то я не специально.

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас

  • Сейчас на странице   0 пользователей

    Нет пользователей, просматривающих эту страницу.

×