Jump to content
4.4.4
Sign in to follow this  
Dyatel

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

Recommended Posts

Dyatel

Добрый день

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

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

Share this post


Link to post
Share on other sites
anufmikh

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

Share this post


Link to post
Share on other sites
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

 

Share this post


Link to post
Share on other sites
Dyatel

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

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

В гугле.

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

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

Share this post


Link to post
Share on other sites
anufmikh

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

  • Спасибо 1

Share this post


Link to post
Share on other sites
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>

 

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
Dyatel

Спасибо.

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

Share this post


Link to post
Share on other sites
Dyatel

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

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

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

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

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

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

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...