Changeset 25834


Ignore:
Timestamp:
12/07/13 21:09:32 (6 years ago)
Author:
rvelices
Message:

rv_gmaps improvements on mobile/tablets

Location:
extensions/rv_gmaps/trunk/template
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • extensions/rv_gmaps/trunk/template/map.tpl

    r25792 r25834  
    88 
    99<script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}&amp;libraries=places" type="text/javascript"></script> 
    10 {combine_script id='jquery' load='header' path='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'} 
     10{combine_script id='jquery' load='header' path='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'} 
    1111{combine_script id='jquery.colorbox' load='async' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'} 
    1212{combine_css path="`$PLUGIN_LOCATION`/template/style.css" version=$RVM_PLUGIN_VERSION} 
     
    4545} 
    4646 
     47function positionMap(){ 
     48        $("#map").css('top', ($("#titlebar").height())+"px"); 
     49} 
     50 
    4751function load() 
    4852{ 
     
    5054                mapTypeId: google.maps.MapTypeId.{/literal}{$MAP_TYPE}{literal}, 
    5155                overviewMapControl: true, 
    52                 overviewMapControlOptions: {opened: true} 
     56                overviewMapControlOptions: {opened: document.documentElement.offsetWidth>640} 
    5357        } 
    5458 
     
    101105 
    102106        map.pwgDataLoader.start( "{/literal}{$U_MAP_DATA}{literal}" ); 
    103          
     107 
     108        positionMap(); 
     109        $(window).on("resize", positionMap); 
    104110        var ac = new google.maps.places.Autocomplete( document.getElementById('q') ); 
    105111        ac.bindTo('bounds', map); 
     
    175181<div id="titlebar"> 
    176182        <div class="titlebar_links"> 
    177                 <span id="dataLoadStatus"></span> 
     183                <span id="dataLoadStatus">{'Loading'|translate}</span> 
     184                <span class="gmnoprint"> 
     185                        <input type="text" size="24" id="q"> 
     186                </span> 
    178187                <a id="aKml" href="" type="application/vnd.google-earth.kml+xml" class="gmnoprint"><img src="//maps.google.com/mapfiles/ms/view_as_kml.png" width="16" height="16" alt="kml"><span class="hideable"> KML</span></a> 
    179188                <a id="aLinkToThisPage" href="" class="gmnoprint"><img src="//maps.google.com/mapfiles/bar_icon_link.gif" alt="&lt;-&gt;" width="16" height="16"><span class="hideable"> {'Link to this page'|@translate}</span></a> 
     
    182191                        <span>{'Show all'|@translate}</span> 
    183192                </a> 
    184     <span class="gmnoprint"> 
    185                         <input type="text" size="48" id="q"> 
    186                 </span> 
    187193  </div> 
    188194  <div class="titlebar_title"> 
  • extensions/rv_gmaps/trunk/template/style.css

    r25792 r25834  
    2222#titlebar { 
    2323        width: 100%; 
    24         height: 18px; 
    25         overflow: hidden; 
     24        min-height: 18px; 
    2625} 
    2726 
     
    3736 
    3837 
    39 #titlebar .titlebar_links { float:right; } 
     38#titlebar .titlebar_links { 
     39        float: right; 
     40        margin-left: 5px; 
     41        margin-right: 5px; 
     42} 
    4043 
    4144#titlebar .titlebar_title { 
    4245  margin-left: 5px; 
    43   margin-right: 5px; 
    4446} 
    4547 
     
    4951} 
    5052 
    51 #titlebar INPUT { 
     53#q { 
    5254  border: 1px solid gray; 
    5355  font-size:80%; 
     
    5759 
    5860 
    59 #titlebar INPUT:focus { 
     61#q:focus { 
    6062  color: black; 
    6163  background-color: #ffffff; 
     
    7880 
    7981#titlebar #dataLoadStatus { 
    80         min-width: 150px; 
    81         width: 150px; 
    82         margin-right: 5px; 
    83         margin-left: 10px; 
    8482        font-weight: bold; 
    8583} 
     
    139137 
    140138 
    141 @media (max-width:980px){ 
    142         #q { 
    143                 max-width:200px;  
    144         } 
    145         #titlebar { 
    146                 height: 36px; 
    147         } 
    148  
    149         #map { 
    150                 top: 36px; 
    151         } 
     139/*google autocomplete dropdown*/ 
     140.pac-container { 
     141        min-width: 250px; 
    152142} 
    153143 
    154144@media (max-width:640px){ 
    155         #q { 
    156                 max-width: 150px; 
    157         } 
    158145        .hideable { 
    159146                display:none; 
     
    162149 
    163150@media (max-width:360px){ 
     151        #titlebar .titlebar_links { 
     152                margin: 0; 
     153        } 
     154 
     155        .gmiw_imageContent { 
     156                min-width: 280px; 
     157                width: 280px; 
     158        } 
     159 
    164160        #q { 
    165                 display: none;  
     161                max-width: 100px; 
    166162        } 
    167163} 
Note: See TracChangeset for help on using the changeset viewer.