mobile search onipsfocus themes

[Xontero]

hi every one

if you open ipsfocus themes with your mobile and touch search Icon it opens by pop up.

try this: https://ipsfocus.net/themes/

can someone help me to do this?

 

 

Edited November 22, 2021 by LoveHate

[by_ix]

то, чего так не хватает в стандартном ипс.

[Xontero]

кто-нибудь может это сделать?

[Exception]

Найти шаблон includeJS в конец вставить:

<script type="text/javascript">
$(document).ready(function(){
	if (matchMedia) {
		var focus_pageWidth = window.matchMedia( "(min-width: 980px)" );
		focus_pageWidth.addListener(WidthChange);
		WidthChange(focus_pageWidth);
	}
	function WidthChange(focus_pageWidth) {
		if (focus_pageWidth.matches) {
			$("#elSearchWrapper").prependTo(".focus-search");
		} else {
			$("#elSearchWrapper").prependTo(".focus-mobile-search");
		}
	}
  	// Toggle class
	$('[data-class]').on( "click", function(event) { event.preventDefault(); var classContent = $(this).attr('data-class'); var classModifiers = classContent.split(' '); var className = classModifiers[0]; var modifyClass = classModifiers[1]; if (classModifiers[2]){ var targetElement = classModifiers[2]; } else { var targetElement = 'html'; } if (modifyClass === 'add'){ $(targetElement).addClass(className); } else if (modifyClass === 'remove'){ $(targetElement).removeClass(className); } else { $(targetElement).toggleClass(className); } });
});
</script>

Найти шаблон custom.css в конец вставить:

/* Mobile search */
.focus-mobile-search {
    padding-top: 70px;
    background: rgba(31,33,37,0.9);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 6000;
    display: none;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
}
.focus-mobile-search__close {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #fff;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    border-radius: 4px;
}
.focus-mobile-search #elSearch {
    display: block !important;
}
.display--focus-mobile-search .focus-mobile-search {
    display: flex;
}

Найти в шаблоне mobileNavBar:

<li class='ipsJS_show'>
	<a href='{url="app=core&module=search&controller=search" seoTemplate="search"}'><i class='fa fa-search'></i></a>
</li>

Заменить на:

<li class='ipsJS_show'>
	<a href='{url="app=core&module=search&controller=search" seoTemplate="search"}' data-class='display--focus-mobile-search'><i class='fa fa-search'></i></a>
</li>

В конец шаблона mobileNavBar после тега </ul> добавить:

<div class='focus-mobile-search'>
	<div class='focus-mobile-search__close' data-class='display--focus-mobile-search'><i class="fa fa-times" aria-hidden="true"></i></div>
</div>

Now ... give me your money! 😀