Компактная карта на страницах InstantMaps 2 2.X

489
Изначально карта будет отображаться уменьшенной по высоте и раскрываться при клике по ссылке внизу карты.
Компактная карта на страницах InstantMaps 2



Компактная карта на страницах InstantMaps 2

Инструкция

#1 Открыть файл \templates\default\content\places_list.tpl.php

Найти контейнер:
Код PHP:
  1. <div id="maps-map-block">...</div>
Привести к следующему виду:
Код PHP:
  1.  
  2. <div id="maps_map_block">
  3.  
  4. <div id="maps-map-block">
  5. <?php if ($options['is_city_filter']) { ?>
  6. <div id="maps-city-selector">
  7. <a class="ajaxlink ajax-modal" href="<?php echo href_to('places', 'city_select'); ?>" title="<?php echo LANG_PLACES_CITY_SELECT; ?>"><?php echo $city_name; ?></a>
  8. </div>
  9. <?php } ?>
  10. <div id="map-canvas" style="height: <?php echo $options['height']; ?>px"></div>
  11. </div>
  12.  
  13. </div>
  14. <a href="javascript:void(0)" id="map_toggler" onclick="map_toggler($(this));"><span>развернуть</span></a>
  15.  
В этом же файле, перед строкой:
Код PHP:
  1. </script>
Добавить:
Код PHP:
  1.  
  2. map_toggler = function(ths){
  3.  
  4. if($('#maps_map_block').hasClass('is_fulsize')){
  5. $('span',ths).text('развернуть');
  6. $('#maps_map_block').removeClass('is_fulsize');
  7. }else{
  8. $('span',ths).text('свернуть');
  9. $('#maps_map_block').addClass('is_fulsize');
  10. }
  11. }
  12.  

#2 Открыть файл: templates\default\controllers\places\styles.css
Добавить строки:
Код PHP:
  1.  
  2. #maps-map-block{
  3. border:0 !important;
  4. }
  5. #maps_map_block{
  6. max-height:100px;
  7. overflow:hidden;
  8. margin-top:15px;
  9. -webkit-transition: max-height 1s;
  10. -moz-transition: max-height 1s;
  11. -ms-transition: max-height 1s;
  12. -o-transition: max-height 1s;
  13. transition: max-height 1s;
  14. }
  15. #maps-map-block{
  16. margin-top:-170px;
  17. margin-bottom:0;
  18. transition: margin 700ms;
  19. }
  20. #maps_map_block.is_fulsize{
  21. max-height:600px;
  22. }
  23. #maps_map_block.is_fulsize #maps-map-block{
  24. margin-top:0;
  25. }
  26.  
  27. #map_toggler{
  28. display:block;
  29. width:100%;
  30. height:28px;
  31. text-align:center;
  32. background:#fff;
  33. text-decoration:none !important;
  34. padding-top:14px;
  35. margin-bottom:10px;
  36. position:relative;
  37. }
  38. #map_toggler:before{
  39. background:#0078D7;
  40. height:2px;
  41. line-height:2px;
  42. content:" ";
  43. display:block;
  44. margin-bottom:-14px
  45. }
  46. #map_toggler span{
  47. background:#fff;
  48. height:28px;
  49. line-height:28px;
  50. display:block;
  51. width:120px;
  52. text-align:center;
  53. margin:0 auto;
  54. color:#0078D7;
  55. font-size:13px;
  56. font-weight:bold;
  57. padding:0 15px;
  58. text-transform:uppercase;
  59. }
  60.  
  61.  
Компактная Обратная связь. Обновление #5 | Фотосетка с мини галереей
Комментарии (6)
Sergon 7 сентября 2017 в 11:26 0
small user social cms
Класс! +
Денис Васильевич 7 сентября 2017 в 16:36 +1
small user social cms
Его лучше в карму )) А здесь лучше оставлять спасибо или замечания ))
Sergon 12 сентября 2017 в 10:14 0
small user social cms
Денис Васильевич, а что за шаблон выводит объекты? Не смог у вас в разработках найти.
Денис Васильевич 12 сентября 2017 в 10:26 0
small user social cms
Ответил в ЛС
Денис Васильевич 12 сентября 2017 в 10:28 0
small user social cms
Не смог у вас в разработках найти.
Есть такая тема
@dobroznai 18 октября 2017 в 12:42 0
small user social cms
друзья, дайте пожалуйста готовый файл, а то новичкам с этим трудно разобраться look