Changeset 24745

Timestamp:

Oct 3, 2013, 11:09:23 PM (11 years ago)

Author:

rvelices

Message:

rv_gmaps compatibility with small screens / mobile devices

Location:

extensions/rv_gmaps/trunk

Files:

• include/picture_map.inc.php (modified) (1 diff)
• template/picture_map_content.tpl (modified) (1 diff)

extensions/rv_gmaps/trunk/include/picture_map.inc.php

@@ -56 +56 @@
   global $template;
   $template->assign( 'COMMENT_IMG', null);  // no legend below picture (we put it left)
-  $rating = & $template->get_template_vars('rating');
-  if (isset($rating))
-    $rating['F_ACTION'] = add_url_params( $rating['F_ACTION'], array('map'=>null) );
 }
 

extensions/rv_gmaps/trunk/template/picture_map_content.tpl

@@ -4 +4 @@
 {combine_script id='jquery.colorbox' load='async' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'}
 {combine_css path='themes/default/js/plugins/colorbox/style2/colorbox.css'}
-{/html_head}{html_style}{literal}
-#mapPicture {
-        position:absolute;
-        width: 310px;
+{/html_head}{html_style}
+{$thumb_size=$current.derivatives.thumb->get_size()}
+#mapPicture{
+        float:left;
+        width:{max(240,5+$thumb_size[0])}px;
 }
 
-#map {
+#map{
         position:relative;
-        left: 320px;
-        margin-right: 320px;
-        height: 512px;
-        min-height: 512px;
+        height:512px;
+        min-width:300px;
 }
 
-#linkPrev, #linkNext {display:none}
-{/literal}{/html_style}
+#linkPrev,#linkNext{
+        display:none
+}
+@media screen and (-webkit-min-device-pixel-ratio:1.3){
+        #thumbImg{
+                width:{($thumb_size[0]/1.5)|intval}px;
+                height:{($thumb_size[1]/1.5)|intval}px
+        }
+}
+@media screen and (-webkit-min-device-pixel-ratio:2){
+        #thumbImg{
+                width:{($thumb_size[0]/2)|intval}px;
+                height:{($thumb_size[1]/2)|intval}px
+        }
+}
+
+@media screen and (max-height:512px){
+        #map{   height:400px;}
+}
+@media screen and (max-height:360px){
+        #map{   height:250px;}
+}
+@media screen and (max-height:320px){
+        #map{   height:200px;}
+}
+{/html_style}
 
 <div id="mapPicture">
-<a href="{$U_NO_MAP}" title="{'return to normal view mode'|@translate}" rel="nofollow"><img src="{$current.THUMB_SRC}" alt="thumb"></a>
+<a href="{$U_NO_MAP}" title="{'return to normal view mode'|@translate}" rel="nofollow"><img id="thumbImg" src="{$current.THUMB_SRC}" width={$thumb_size[0]} height={$thumb_size[1]} alt="thumb"></a>
 <br/>
 <a href="{$U_BLOWUP}" onclick="return blowupUrl(this.href);">{'More photos near this location'|@translate}</a>