Skip to content

Тимофей Семененко / shold.dev5.ashmanov.com

Go to a project
Commit c415b598 by Тимофей Семененко
Options

filter new part1

1 parent 34c2261a
Inline Side-by-side
Showing 6 changed files with 270 additions and 277 deletions
css/main.css
......@@ -11063,3 +11063,206 @@ cursor:pointer;
margin-left: 20px; /* Отступ слева */
padding-left: 10px; /* Расстояние от линии до текста */
}
----------------
body {
margin: 0px;
padding: 0px;
background: #f5f5f5;
font-family: 'Segoe UI';
}
ul.resp-tabs-list, p {
margin: 0px;
padding: 0px;
}
.resp-tabs-list li {
font-weight: 600;
font-size: 13px;
display: inline-block;
padding: 13px 15px;
margin: 0 4px 0 0;
list-style: none;
cursor: pointer;
float: left;
}
.resp-tabs-container {
padding: 0px;
background-color: #fff;
clear: left;
}
h2.resp-accordion {
cursor: pointer;
padding: 5px;
display: none;
}
.resp-tab-content {
display: none;
padding: 15px;
}
.resp-tab-active {
border: 1px solid #5AB1D0 !important;
border-bottom: none;
margin-bottom: -1px !important;
padding: 12px 14px 14px 14px !important;
border-top: 4px solid #5AB1D0 !important;
border-bottom: 0px #fff solid !important;
}
.resp-tab-active {
border-bottom: none;
background-color: #fff;
}
.resp-content-active, .resp-accordion-active {
display: block;
}
.resp-tab-content {
border: 1px solid #c1c1c1;
border-top-color: #5AB1D0;
}
h2.resp-accordion {
font-size: 13px;
border: 1px solid #c1c1c1;
border-top: 0px solid #c1c1c1;
margin: 0px;
padding: 10px 15px;
}
h2.resp-tab-active {
border-bottom: 0px solid #c1c1c1 !important;
margin-bottom: 0px !important;
padding: 10px 15px !important;
}
h2.resp-tab-title:last-child {
border-bottom: 12px solid #c1c1c1 !important;
background: blue;
}
/*-----------Vertical tabs-----------*/
.resp-vtabs ul.resp-tabs-list {
float: left;
width: 30%;
}
.resp-vtabs .resp-tabs-list li {
display: block;
padding: 15px 15px !important;
margin: 0 0 4px;
cursor: pointer;
float: none;
}
.resp-vtabs .resp-tabs-container {
padding: 0px;
background-color: #fff;
border: 1px solid #c1c1c1;
float: left;
width: 68%;
min-height: 250px;
border-radius: 4px;
clear: none;
}
.resp-vtabs .resp-tab-content {
border: none;
word-wrap: break-word;
}
.resp-vtabs li.resp-tab-active {
position: relative;
z-index: 1;
margin-right: -1px !important;
padding: 14px 15px 15px 14px !important;
border-top: 1px solid;
border: 1px solid #5AB1D0 !important;
border-left: 4px solid #5AB1D0 !important;
margin-bottom: 4px !important;
border-right: 1px #FFF solid !important;
}
.resp-arrow {
width: 0;
height: 0;
float: right;
margin-top: 3px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 12px solid #c1c1c1;
}
h2.resp-tab-active span.resp-arrow {
border: none;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid #9B9797;
}
/*-----------Accordion styles-----------*/
h2.resp-tab-active {
background: #DBDBDB;/* !important;*/
}
.resp-easy-accordion h2.resp-accordion {
display: block;
}
.resp-easy-accordion .resp-tab-content {
border: 1px solid #c1c1c1;
}
.resp-easy-accordion .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1;/* !important;*/
}
.resp-jfit {
width: 100%;
margin: 0px;
}
.resp-tab-content-active {
display: block;
}
h2.resp-accordion:first-child {
border-top: 1px solid #c1c1c1;/* !important;*/
}
/*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
@media only screen and (max-width: 768px) {
ul.resp-tabs-list {
display: none;
}
h2.resp-accordion {
display: block;
}
.resp-vtabs .resp-tab-content {
border: 1px solid #C1C1C1;
}
.resp-vtabs .resp-tabs-container {
border: none;
float: none;
width: 100%;
min-height: 100px;
clear: none;
}
.resp-accordion-closed {
display: none !important;
}
.resp-vtabs .resp-tab-content:last-child {
border-bottom: 1px solid #c1c1c1 !important;
}
}
\ No newline at end of file
css/media.css
......@@ -150,7 +150,7 @@ li.additional_list_item{margin-bottom:20px;float:left;}
.header._fixed .fav-link{top:8px;}
.header .fav-link-icon:after{margin:-12px 0 0 -11px;}
.header .fav-link-count, .header .fav-link-clear{left: 5px;}
.out_sub_menu{/*top:193px*/;z-index:10;}
.out_sub_menu{top: 220px;z-index:10;}
.page-head._bigger + .page-content{/* padding-top:180px; */}
.projects-list{margin-top:0;position:relative;z-index:20;}
.filter._inner-page{margin:0;bottom:auto;left:0;width:100%;top:100%;}
......@@ -206,7 +206,7 @@ li.additional_list_item{margin-bottom:20px;float:left;}
.path-current{padding:0 5px;}
.page-head._bigger .path-current{margin-bottom:6px;}
.page-head._mp{overflow:hidden;}
.page-content{padding: 63px 0 30px 0;}
.page-content{/* padding: 200px 0 30px 0; */}
._top .path{padding-top:70px;text-align:center;margin:0;}
.page-head._bigger .path{padding-top:3px;margin:0;text-align:center;}
.page-head._bigger .phone{/* bottom:7px; */top:auto;left:0;width:100%;}
......@@ -447,11 +447,11 @@ li.additional_list_item{margin-bottom:20px;float:left;}
height: 37px;
left: 38%;
top: 8px;
}
}
.page-head._bigger {
.page-head._bigger {
height: 100px;
}
}
.footer > * {
display: block;
......
js/index.js
......@@ -481,5 +481,51 @@ $(document).ready(function() {
});
// фильтры для мобильной версии
$(document).ready(function() {
//Horizontal Tab
$('#parentHorizontalTab').easyResponsiveTabs({
type: 'default', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
tabidentify: 'hor_1', // The tab groups identifier
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#nested-tabInfo');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
// Child Tab
$('#ChildVerticalTab_1').easyResponsiveTabs({
type: 'vertical',
width: 'auto',
fit: true,
tabidentify: 'ver_1', // The tab groups identifier
activetab_bg: '#fff', // background color for active tabs in this group
inactive_bg: '#F5F5F5', // background color for inactive tabs in this group
active_border_color: '#c1c1c1', // border color for active tabs heads in this group
active_content_border_color: '#5AB1D0' // border color for active tabs contect in this group so that it matches the tab head border
});
//Vertical Tab
$('#parentVerticalTab').easyResponsiveTabs({
type: 'vertical', //Types: default, vertical, accordion
width: 'auto', //auto or any width like 600px
fit: true, // 100% fit in a container
closed: 'accordion', // Start closed if in accordion view
tabidentify: 'hor_1', // The tab groups identifier
activate: function(event) { // Callback function if tab is switched
var $tab = $(this);
var $info = $('#nested-tabInfo2');
var $name = $('span', $info);
$name.text($tab.text());
$info.show();
}
});
});
local/include/project-filter.php
<? $projectFilter = \SH\ProjectFilter::getInstance() ; ?>
<form class="js-filter form-filter<? if($arParams['IS_AJAX_FILTER']) { ?> ajax-filter<? } ?>" method="get" action="/projects/<? if(!empty($arParams['IS_FAVE'])) { ?>fave/<? } ?>" id='search_form_main'>
<? foreach($projectFilter->getFilterData() as $key => $filterData) {
?>
<? foreach($filterData['items'] as $code => $filterItem) {
$key == 'section' ? $input_class = 'section_input' : $input_class = 'value_input';
?>
<? if($code == 'all') {
if($APPLICATION->GetCurPage() != '/') {
?> <input type="hidden" name="<?= $key ?>[<?= $code ?>]" value="<?= $filterItem['selected'] ? 1 : 0 ?>" id="<?= $key ?>-<?= $code ?>" class="<?=$input_class;?>"><?
}
} else {
if($APPLICATION->GetCurPage() == '/') { ?>
<input type="hidden" name="<?= $key ?>[<?= $code ?>]" value="<?= $code == 'house' ? 1 : 0 ?>" id="<?= $key ?>-<?= $code ?>" class="<?=$input_class;?>">
<? } else {
?>
<input type="hidden" name="<?= $key ?>[<?= $code ?>]" value="<?= $filterItem['selected'] ? 1 : 0 ?>" id="<?= $key ?>-<?= $code ?>" class="<?=$input_class;?>">
<?}
}?>
<? } ?>
<? } ?>
<div class="filter <? if($APPLICATION->GetCurPage() == '/') { ?>_main-page<? } else { ?>_inner-page<? } ?>">
<div class="filter-element _type">
<? $key = 'section'; $filterData = $projectFilter->getFilterData($key) ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<? if($code == 'all') { // не выводим раздел "все" на главной стр
if($APPLICATION->GetCurPage() != '/') {
?><a href="<?= $filterItem['url'] ?>" class="filter-type" data-input="<?= $key ?>-<?= $code ?>" data-type="<?= $code ?>"><?= $filterItem['name'] ?></a><?
}
} else { ?>
<a href="<?= $filterItem['url'] ?>" class="filter-type" data-input="<?= $key ?>-<?= $code ?>" data-type="<?= $code ?>"><?= $filterItem['name'] ?></a>
<? }?>
<? } ?>
</div>
<?if($APPLICATION->GetCurPage() != '/') {?> </div>
<? if ($_SERVER['REQUEST_URI'] == '/projects/') { ?>
<style>
.text-content H1 {
margin: 0;
padding: 0;
}
.static-content {
padding-bottom: 0;
margin-top: 60px;
}
@media (max-width: 1000px) {
@media (max-width: 1024px) {
.page-head._bigger + .page-content {
padding-top: 0px;
}
}
</style>
<?}?>
<? if ($_SERVER['REQUEST_URI'] == '/projects/doma-iz-kleenogo-brusa/'){ ?>
<style>
.page-content {
/*padding: 100px 0 30px 0;*/
}
.projects-list {
margin-top: 75px;
}
.text-content H1 {
margin: 0;
padding: 0;
}
.static-content {
padding-bottom: 0;
margin-top: 90px;
}
@media (max-width: 1000px) {
.out_sub_menu {
/* top: 193px;*/
z-index: 10;
}
}
@media (max-width: 1024px) {
.page-head._bigger + .page-content {
padding-top: 200px;
}
}
</style>
<?}if ($_SERVER['REQUEST_URI'] == '/projects/bani-iz-kleenogo-brusa/'){?>
<style>
.page-content {
/*padding: 100px 0 30px 0;*/
}
.projects-list {
margin-top: 45px;
}
.text-content H1 {
margin: 0;
padding: 0;
}
.static-content {
padding-bottom: 0;
margin-top: 60px;
}
@media (max-width: 1000px) {
.out_sub_menu {
/*top: 193px;*/
z-index: 10;
}
}
@media (max-width: 1024px) {
.page-head._bigger + .page-content {
padding-top: 100px;
}
}
</style>
<?}if ($_SERVER['REQUEST_URI'] == '/projects/raznye-proekty/'){?>
<style>
.page-content {
/*padding: 100px 0 30px 0;*/
}
.projects-list {
margin-top: 60px;
}
.text-content H1 {
margin: 0;
padding: 0;
}
.static-content {
padding-bottom: 0;
margin-top: 60px;
}
@media (max-width: 1000px) {
.out_sub_menu {
/*top: 193px;*/
z-index: 10;
}
}
@media (max-width: 1024px) {
.page-head._bigger + .page-content {
padding-top: 100px;
}
}
</style>
<?}?>
<?}?>
<?if($APPLICATION->GetCurPage() != '/') {?> <div class='out_sub_menu'> <?}?>
<div class="filter-element _parent">
<div class="filter-element _house _inactive" data-type="house">
<div class="filter-element _select _house-area">
<?if($APPLICATION->GetCurPage() == '/') {?> <a href="#!" class="filter-select-title">площадь</a> <?}?>
<div class="filter-select">
<div class='filter-inner-wrap'>
<? $key = 'square'; $filterData = $projectFilter->getFilterData($key) ; ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-select-item filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
</div>
</div>
<div class="filter-element _select _house-floors">
<?if($APPLICATION->GetCurPage() == '/') {?> <a href="#!" class="filter-select-title">этажи</a> <?}?>
<div class="filter-select">
<div class='filter-inner-wrap'>
<? $key = 'floors'; $filterData = $projectFilter->getFilterData($key) ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-select-item filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
</div>
</div>
<div class="filter-element _select _house-bedrooms">
<?if($APPLICATION->GetCurPage() == '/') {?> <a href="#!" class="filter-select-title">спальни</a> <?}?>
<div class="filter-select">
<div class='filter-inner-wrap'>
<? $key = 'bedrooms'; $filterData = $projectFilter->getFilterData($key) ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-select-item filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
</div>
</div>
<div class="filter-element _select _house-combo">
<?if($APPLICATION->GetCurPage() == '/') {?> <a href="#!" class="filter-select-title">Тип</a> <?}?>
<div class="filter-select">
<div class='filter-inner-wrap'>
<? $key = 'combo'; $filterData = $projectFilter->getFilterData($key) ;?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-select-item filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
</div>
</div>
</div>
<div class="filter-element _bathhouse _inactive" data-type="bathhouse">
<? $key = 'bathhouse-floors'; $filterData = $projectFilter->getFilterData($key) ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-option filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
<div class="filter-element _misc _inactive" data-type="misc">
<? $key = 'misc-type'; $filterData = $projectFilter->getFilterData($key) ; ?>
<? foreach($filterData['items'] as $code => $filterItem) { ?>
<a href="#!" class="filter-option filter-chosable" data-name="<?= $key ?>:<?= $code ?>" data-input="<?= $key ?>-<?= $code ?>"><span><?= $filterItem['name'] ?></span></a>
<? } ?>
</div>
<div class="filter-element _all _inactive" data-type="all"></div>
</div>
<?if($APPLICATION->GetCurPage() == '/') {?> <button class="filter-element _submit filter-submit-button" type="submit">подобрать</button> <?}?>
</div>
</form>
\ No newline at end of file
<? $projectFilter = \SH\ProjectFilter::getInstance(); ?>
<?
//26.04.2017 Hawks
CModule::IncludeModule('nurgush.mobiledetect');
$detect = new Nurgush\MobileDetect\Main();
// Для мобыльных
if ($detect->isMobile() && !$detect->isTablet()) {?>
<? include 'filter_params_mobile.php';?>
<? } else {?>
<? include 'filter_params.php';?>
<? } ?>
\ No newline at end of file
local/templates/main/footer.php
......@@ -78,13 +78,15 @@ if($detect->isMobile() || $detect->isTablet()){?>
<script>if (screen.width<=768) {document.write('<link rel="stylesheet" href="/css/main.css?<?=filemtime(BASE_PATH . '/css/main.css')?>" id="pre_load">');document.body.style.display="block";}</script>
<link rel="stylesheet" type='text/css' href="/css/flaticon.css">
<link rel="stylesheet" type='text/css' href="/css/media.css" >
<link rel="stylesheet" type="text/css" href="/css/easy-responsive-tabs.css " />
<!-- Add mousewheel plugin (this is optional) -->
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/jquery-1.9.1.min.js?<?=filemtime(BASE_PATH . '/js/jquery-1.9.1.min.js')?>"></script>
<script src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="/js/compiled.js?<?=filemtime(BASE_PATH . '/js/compiled.js')?>" type="text/javascript"></script>
<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script>
<script src="//yastatic.net/share2/share.js"></script>
<script src="/js/easyResponsiveTabs.js?<?=filemtime(BASE_PATH . '/js/easyResponsiveTabs.js')?>"></script>
<script src="/js/jquery.maskedinput.js?<?=filemtime(BASE_PATH . '/js/jquery.maskedinput.js')?>" type="text/javascript"></script>
<script src="/js/index.js"></script>
<?php if ((strpos($_SERVER["REQUEST_URI"],'/projects/')!==false)||(strpos($_SERVER["REQUEST_URI"],'/price/')!==false)||(strpos($_SERVER["REQUEST_URI"],'/contacts/')!==false)) { ?>
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!