Changeset 25834


Ignore:
Timestamp:
Dec 7, 2013, 9:09:32 PM (7 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.