Ignore:
Timestamp:
10/03/13 23:09:23 (6 years ago)
Author:
rvelices
Message:

rv_gmaps compatibility with small screens / mobile devices

File:
1 edited

Legend:

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

    r23083 r24745  
    44{combine_script id='jquery.colorbox' load='async' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'} 
    55{combine_css path='themes/default/js/plugins/colorbox/style2/colorbox.css'} 
    6 {/html_head}{html_style}{literal} 
    7 #mapPicture { 
    8         position:absolute; 
    9         width: 310px; 
     6{/html_head}{html_style} 
     7{$thumb_size=$current.derivatives.thumb->get_size()} 
     8#mapPicture{ 
     9        float:left; 
     10        width:{max(240,5+$thumb_size[0])}px; 
    1011} 
    1112 
    12 #map { 
     13#map{ 
    1314        position:relative; 
    14         left: 320px; 
    15         margin-right: 320px; 
    16         height: 512px; 
    17         min-height: 512px; 
     15        height:512px; 
     16        min-width:300px; 
    1817} 
    1918 
    20 #linkPrev, #linkNext {display:none} 
    21 {/literal}{/html_style} 
     19#linkPrev,#linkNext{ 
     20        display:none 
     21} 
     22@media screen and (-webkit-min-device-pixel-ratio:1.3){ 
     23        #thumbImg{ 
     24                width:{($thumb_size[0]/1.5)|intval}px; 
     25                height:{($thumb_size[1]/1.5)|intval}px 
     26        } 
     27} 
     28@media screen and (-webkit-min-device-pixel-ratio:2){ 
     29        #thumbImg{ 
     30                width:{($thumb_size[0]/2)|intval}px; 
     31                height:{($thumb_size[1]/2)|intval}px 
     32        } 
     33} 
     34 
     35@media screen and (max-height:512px){ 
     36        #map{   height:400px;} 
     37} 
     38@media screen and (max-height:360px){ 
     39        #map{   height:250px;} 
     40} 
     41@media screen and (max-height:320px){ 
     42        #map{   height:200px;} 
     43} 
     44{/html_style} 
    2245 
    2346<div id="mapPicture"> 
    24 <a href="{$U_NO_MAP}" title="{'return to normal view mode'|@translate}" rel="nofollow"><img src="{$current.THUMB_SRC}" alt="thumb"></a> 
     47<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> 
    2548<br/> 
    2649<a href="{$U_BLOWUP}" onclick="return blowupUrl(this.href);">{'More photos near this location'|@translate}</a> 
Note: See TracChangeset for help on using the changeset viewer.