Fix #1497 Resizing images is not working on tablet in paysage mode

templates/mobile/common/index.html.twig

@@ -15,23 +15,6 @@
                 margin: 0px;
                 padding: 0px;
             }
-
-             .ui-content{
-                height: 85%;
-                width: 100%;
-                margin: 0px;
-                padding: 0px;
-                display:table;
-            }
-
-            #map {
-                height: 100%;
-                width: 100%;
-                padding: 0px;
-                display:table-cell;
-                vertical-align: middle;
-                text-align: center
-            }
         </style>
         {% block stylesheet %}{% endblock %}
         {% block icon %}{% endblock %}

templates/mobile/common/thumbnail.html.twig

@@ -72,7 +72,6 @@
 
 {% macro format100percent(thumbnail, extraclass)%}
     {% set record_type = thumbnail.get_type() %}
-    <div id="map">
         {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
           {% set random = thumbnail.get_random() %}
           <div class="record record_video imgTips">
@@ -102,8 +101,7 @@
             "{{thumbnail.get_width()}}", "{{thumbnail.get_height()}}", "9.0.0", false, false,
             {menu: "false",flashvars: "playerID=2&autostart=yes&noinfo=yes&animation=no&remaining=yes&soundFile={{thumbnail.get_url()}}", movie: "/include/jslibs/audio-player/player.swf",  allowFullScreen :"true",wmode: "transparent"}, false);</script>
         {% else %}
-          <img style="height:100%;" class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
+          <img style="max-height: 100%;max-width:100%" class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
-               src="{{thumbnail.get_url()}}" ondragstart="return false;">
+               src="{{thumbnail.get_url()}}" ondragstart="return false;" />
         {% endif %}
-    </div>
 {% endmacro %}

templates/mobile/lightbox/basket_element.html.twig

@@ -8,17 +8,32 @@
 
 {% block stylesheet %}
     <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
+
+    <style type="text/css">
+        div[data-role="page"] {
+            position: relative;
+        }
+
+        #content {
+            position:absolute;
+            top:50px;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            text-align: center;
+        }
+    </style>
 {% endblock %}
 
 {% block content %}
   {% set record = basket_element.getRecord(app) %}
-<div data-role="page">
+<div data-role="page" id="page">
   <div data-role="header">
     <a href="{{ path('lightbox_validation', { 'ssel_id' : basket_element.getBasket().getId() }) }}" data-rel="back" data-icon="arrow-l">Back</a>
     <h1>{{basket_element.getOrd()}} - {{record.get_title()}}</h1>
     <a rel="external" href="{{ path('lightbox') }}" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
   </div>
-  <div data-role="content">
+  <div id="content" data-role="content">
     {{ thumbnail.format100percent(record.get_preview()) }}
     {% if basket_element.getBasket().getValidation() %}
       {% if basket_element.getBasket().getValidation().getParticipant(app['authentication'].getUser(), app).getCanAgree() %}
@@ -44,11 +59,5 @@
   <div data-role="footer">
 
   </div>
-    <script type="text/javascript">
-        $( window ).on( "orientationchange", function( event ) {
-            $("#map").height($(window).height() - 50);
-        });
-        $( window ).orientationchange();
-    </script>
 </div>
 {% endblock %}

templates/mobile/lightbox/feed_element.html.twig

@@ -8,6 +8,21 @@
 
 {% block stylesheet %}
     <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
+
+    <style type="text/css">
+        div[data-role="page"] {
+            position: relative;
+        }
+
+        #content {
+            position:absolute;
+            top:50px;
+            bottom: 0;
+            right: 0;
+            left: 0;
+            text-align: center;
+        }
+    </style>
 {% endblock %}
 
 {% block content %}
@@ -22,13 +37,5 @@
     {{ thumbnail.format100percent(record.get_preview()) }}
   </div>
   <div data-role="footer">
-
-  </div>
-    <script type="text/javascript">
-        $( window ).on( "orientationchange", function( event ) {
-            $("#map").height($(window).height() - 50);
-        });
-        $( window ).orientationchange();
-    </script>
 </div>
 {% endblock %}

templates/web/common/macros.html.twig

@@ -78,4 +78,4 @@
             </div>
         {% endfor %}
     {% endfor %}
-{% endmacro %}
+{% endmacro %}