Мобильная версия приложения Жилые комплексы

[Realtor 47]

Подскажите как убрать карту при просмотре с планшета или смартфона

 

[TopRaN 235]

В media запросе, в определенном разрешение установить на класс карты параметр display:none;

[Realtor 47]

32 минуты назад, TopRaN сказал:

В media запросе, в определенном разрешение установить на класс карты параметр display:none;

А где этот медиа  запрос?

[TopRaN 235]

Нужно прописывать в css стилях.

[Realtor 47]

а методом бутстрапа получится? Если да, то как и где прописать

[TopRaN 235]

2 часа назад, Realtor сказал:

а методом бутстрапа получится? Если да, то как и где прописать

Да, получитЬся. Нужно к блоку вывода карты добавить класс xs-hidden

[Realtor 47]

Подскажите  , где и в каком файле находится блок вывода карты и как он называется

[abushyk 694]

Бутстрапом не выйдет. Там нужно не только прятать полосу с картой, но еще и тянуть и убирать автопрокрутку с полосы со списком. Я изменил стили так, что при узком экране правая полоса будет выключаться а вывод левой станет потоковым. Просто пройдитесь п разным устройствам, посмотрите нормально ли.

[doma 22]

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

[Realtor 47]

11 час назад, abushyk сказал:

Бутстрапом не выйдет. Там нужно не только прятать полосу с картой, но еще и тянуть и убирать автопрокрутку с полосы со списком. Я изменил стили так, что при узком экране правая полоса будет выключаться а вывод левой станет потоковым. Просто пройдитесь п разным устройствам, посмотрите нормально ли.

Прошелся смартфоном, карта так и осталась на экране

[abushyk 694]

тут что-то не догрузило - вон даже лого в шапке не закачалось. возможно что и стили так же не дошли.

[Realtor 47]

Спасибо, заработало без показа карты на мобильных устройствах

[Realtor 47]

При просмотре карты на  мобильном устройстве в приложении Жилые комплексы , центр карты смещен относительно балуна влево. Т.е. балун не видно в поле зрения карты. Но если карту сместить вправо или уменьшить масштаб карты, то балун на карте виден. Что предпринять для центрировки карты относительно балуна?

 

 

[abushyk 694]

тут смотрите что получается. карта располагается в табе. там изначально закрытый, т.е. невидимый. для такого состояния разметки карта не сгенерируется, так как у закрытого таба нет никаких размеров. тут применяется хак - карта реально создается вне таба в убранном за край страницы блоке а при открытии таба просто переносится в таб из-за края. что бы карта была соотвественной, блок за краем имеет ширину "по-больше". поэтому в десктопе она вставляется норм. а для мобильного экран мелкий и карта при вставке встраивается в его размер - путем сдвига края. вот балун и сваливает.

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

[doma 22]

Только что, abushyk сказал:

тут смотрите что получается. карта располагается в табе. там изначально закрытый, т.е. невидимый. для такого состояния разметки карта не сгенерируется, так как у закрытого таба нет никаких размеров. тут применяется хак - карта реально создается вне таба в убранном за край страницы блоке а при открытии таба просто переносится в таб из-за края. что бы карта была соотвественной, блок за краем имеет ширину "по-больше". поэтому в десктопе она вставляется норм. а для мобильного экран мелкий и карта при вставке встраивается в его размер - путем сдвига края. вот балун и сваливает.

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

а если к примеру сделать в карточке объекта шаблон реалия а не в жилищных комплексах 
2 таба - причем в 1 табе размер например 100*400, а во 2 табе 800*600
это будет работать ? это будет 2 обращения к яндекс картам или одно? в итоге если 2 таба обращаются по отдельности то и скорость загрузки страницы наверное падает?

[Realtor 47]

10 часов назад, abushyk сказал:

тут смотрите что получается. карта располагается в табе. там изначально закрытый, т.е. невидимый. для такого состояния разметки карта не сгенерируется, так как у закрытого таба нет никаких размеров. тут применяется хак - карта реально создается вне таба в убранном за край страницы блоке а при открытии таба просто переносится в таб из-за края. что бы карта была соотвественной, блок за краем имеет ширину "по-больше". поэтому в десктопе она вставляется норм. а для мобильного экран мелкий и карта при вставке встраивается в его размер - путем сдвига края. вот балун и сваливает.

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

Подскажите, как вынести карту из таба?

[TopRaN 235]

Тут целый процесс. Причем есть несколько вариантов решения. 

[Realtor 47]

29 минут назад, TopRaN сказал:

Тут целый процесс. Причем есть несколько вариантов решения. 

Какие варианты?

[TopRaN 235]

10 часов назад, Realtor сказал:

Какие варианты?

Константин написал решение общими словами. Готового кода вам не напишут. Это не входит в рамки поддержки продукции. 

пробуйте что-то вроде этого

<script type="text/javascript">
    ymaps.ready(function () {

        $('#myTab a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        /...../

        $('#myTab').on('shown.bs.tab', function () {
            myMap.container.fitToViewport();
        });
    });
    </script>

и выводить

<ul id="myTab" class="nav nav-tabs">
    <li><a href="#default">По умолчанию</a></li>
    <li><a href="#map">Карта</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="default">
        <p>Содержимое вкладки открытой по умолчанию</p>
    </div>
    <div class="tab-pane" id="map">
        <p>Вкладка с картой</p>
    	<div id="YMapsID"></div>
    </div>
</div>

Вариант № 2

ymaps.ready(init);

var myMap;

function init () {
    // Инициализация вкладок.
    // После исполнения команды tabs() tab-2 получит style='display:none'.
    // Карта будет инициализирована, но будет иметь нулевой размер.
    // В данном случае это хорошо, так как невидимая карта не будет загружать невидимые тайлы.
    $('#tabs').tabs();
    myMap = new ymaps.Map('tab-2', {
        //........//
    });

    // В момент показа новой вкладки будем пересчитывать размер карты.
    // Карта примет максимально возможные значения при активации ее таба
    // и нулевые, как только будет выбран первый таб.
    // Подписываемся на событие 'tabsshow' (а не 'tabselect',
    // так как требуется, чтобы элемент с картой уже был виден).
    $('#tabs').bind('tabsshow', function (event, ui) {
        myMap.container.fitToViewport();
    });
}

вывод 

<div id="tab-2" style="width: 100%; height: 250px; padding: 0;"></div>

дальше разберетесь

[Realtor 47]

Благодарю. Попробую оба варианта. Потом отпишусь. У меня гугл карта, для нее эти варианты подходят?

[Pavel88 7]

В 16.06.2017 в 06:36, TopRaN сказал:

Константин написал решение общими словами. Готового кода вам не напишут. Это не входит в рамки поддержки продукции. 

пробуйте что-то вроде этого

<script type="text/javascript">
    ymaps.ready(function () {

        $('#myTab a').on('click', function (e) {
            e.preventDefault();
            $(this).tab('show');
        });

        /...../

        $('#myTab').on('shown.bs.tab', function () {
            myMap.container.fitToViewport();
        });
    });
    </script>

и выводить

<ul id="myTab" class="nav nav-tabs">
    <li><a href="#default">По умолчанию</a></li>
    <li><a href="#map">Карта</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="default">
        <p>Содержимое вкладки открытой по умолчанию</p>
    </div>
    <div class="tab-pane" id="map">
        <p>Вкладка с картой</p>
    	<div id="YMapsID"></div>
    </div>
</div>

Вариант № 2

ymaps.ready(init);

var myMap;

function init () {
    // Инициализация вкладок.
    // После исполнения команды tabs() tab-2 получит style='display:none'.
    // Карта будет инициализирована, но будет иметь нулевой размер.
    // В данном случае это хорошо, так как невидимая карта не будет загружать невидимые тайлы.
    $('#tabs').tabs();
    myMap = new ymaps.Map('tab-2', {
        //........//
    });

    // В момент показа новой вкладки будем пересчитывать размер карты.
    // Карта примет максимально возможные значения при активации ее таба
    // и нулевые, как только будет выбран первый таб.
    // Подписываемся на событие 'tabsshow' (а не 'tabselect',
    // так как требуется, чтобы элемент с картой уже был виден).
    $('#tabs').bind('tabsshow', function (event, ui) {
        myMap.container.fitToViewport();
    });
}

вывод 

<div id="tab-2" style="width: 100%; height: 250px; padding: 0;"></div>

дальше разберетесь

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

Пользоваться с мобильной версии вообще не возможно, карта постоянно накладывается на объекты и т.д., ну просто невозможно использовать данное приложение с мобильного телефона, даже при огромном желании.