Changeset 25834 for extensions/rv_gmaps

Timestamp:

Dec 7, 2013, 9:09:32 PM (10 years ago)

Author:

rvelices

Message:

rv_gmaps improvements on mobile/tablets

Location:

extensions/rv_gmaps/trunk/template

Files:

• map.tpl (modified) (6 diffs)
• style.css (modified) (7 diffs)

extensions/rv_gmaps/trunk/template/map.tpl

@@ -8 +8 @@
 
 <script src="//maps.googleapis.com/maps/api/js?sensor=false&amp;language={$lang_info.code}&amp;libraries=places" type="text/javascript"></script>
-{combine_script id='jquery' load='header' path='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'}
+{combine_script id='jquery' load='header' path='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'}
 {combine_script id='jquery.colorbox' load='async' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'}
 {combine_css path="`$PLUGIN_LOCATION`/template/style.css" version=$RVM_PLUGIN_VERSION}
@@ -45 +45 @@
 }
 
+function positionMap(){
+        $("#map").css('top', ($("#titlebar").height())+"px");
+}
+
 function load()
 {
@@ -50 +54 @@
                 mapTypeId: google.maps.MapTypeId.{/literal}{$MAP_TYPE}{literal},
                 overviewMapControl: true,
-                overviewMapControlOptions: {opened: true}
+                overviewMapControlOptions: {opened: document.documentElement.offsetWidth>640}
         }
 
@@ -101 +105 @@
 
         map.pwgDataLoader.start( "{/literal}{$U_MAP_DATA}{literal}" );
-        
+
+        positionMap();
+        $(window).on("resize", positionMap);
         var ac = new google.maps.places.Autocomplete( document.getElementById('q') );
         ac.bindTo('bounds', map);
@@ -175 +181 @@
 <div id="titlebar">
         <div class="titlebar_links">
-                <span id="dataLoadStatus"></span>
+                <span id="dataLoadStatus">{'Loading'|translate}</span>
+                <span class="gmnoprint">
+                        <input type="text" size="24" id="q">
+                </span>
                 <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>
                 <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>
@@ -182 +191 @@
                         <span>{'Show all'|@translate}</span>
                 </a>
-    <span class="gmnoprint">
-                        <input type="text" size="48" id="q">
-                </span>
   </div>
   <div class="titlebar_title">

extensions/rv_gmaps/trunk/template/style.css

@@ -22 +22 @@
 #titlebar {
         width: 100%;
-        height: 18px;
-        overflow: hidden;
+        min-height: 18px;
 }
 
@@ -37 +36 @@
 
 
-#titlebar .titlebar_links { float:right; }
+#titlebar .titlebar_links {
+        float: right;
+        margin-left: 5px;
+        margin-right: 5px;
+}
 
 #titlebar .titlebar_title {
   margin-left: 5px;
-  margin-right: 5px;
 }
 
@@ -49 +51 @@
 }
 
-#titlebar INPUT {
+#q {
   border: 1px solid gray;
   font-size:80%;
@@ -57 +59 @@
 
 
-#titlebar INPUT:focus {
+#q:focus {
   color: black;
   background-color: #ffffff;
@@ -78 +80 @@
 
 #titlebar #dataLoadStatus {
-        min-width: 150px;
-        width: 150px;
-        margin-right: 5px;
-        margin-left: 10px;
         font-weight: bold;
 }
@@ -139 +137 @@
 
 
-@media (max-width:980px){
-        #q {
-                max-width:200px; 
-        }
-        #titlebar {
-                height: 36px;
-        }
-
-        #map {
-                top: 36px;
-        }
+/*google autocomplete dropdown*/
+.pac-container {
+        min-width: 250px;
 }
 
 @media (max-width:640px){
-        #q {
-                max-width: 150px;
-        }
         .hideable {
                 display:none;
@@ -162 +149 @@
 
 @media (max-width:360px){
+        #titlebar .titlebar_links {
+                margin: 0;
+        }
+
+        .gmiw_imageContent {
+                min-width: 280px;
+                width: 280px;
+        }
+
         #q {
-                display: none; 
+                max-width: 100px;
         }
 }