Fix #1419 Fix resize issue on mobile view

templates/mobile/common/index.html.twig

@@ -8,6 +8,31 @@
         <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'include/jslibs/jquery.mobile-1.2.1/jquery.mobile-1.2.1.css' }) }}" />
         <script src="{{ path('minifier', { 'f' : 'assets/jquery/jquery.js' }) }}"></script>
         <script src="{{ path('minifier', { 'f' : 'include/jslibs/jquery.mobile-1.2.1/jquery.mobile-1.2.1.js' }) }}"></script>
+        <style type="text/css">
+            html,body, div[data-role ="page"] {
+                height: 100%;
+                width: 100%;
+                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 %}
         {% block javascript %}{% endblock %}

templates/mobile/common/thumbnail.html.twig

@@ -71,12 +71,12 @@
 {% endmacro %}
 
 {% macro format100percent(thumbnail, extraclass)%}
-        {% set record_type = thumbnail.get_type() %}
+    {% set record_type = thumbnail.get_type() %}
-        <div style="width:100%" class="thumb_wrapper {{extraclass|default('')}}">
+    <div id="map">
         {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
           {% set random = thumbnail.get_random() %}
-          <div class="record record_video imgTips" style="100%;">
+          <div class="record record_video imgTips">
-            <video type="video/mp4" controls="controls" style="width:100%;" autoplay="autoplay">
+            <video type="video/mp4" controls="controls" style="height:100%;" autoplay="autoplay">
               <source src="{{thumbnail.get_url()}}" type="video/mp4"></source>
             </video>
           </div>
@@ -84,8 +84,6 @@
           {% set random = thumbnail.get_random() %}
           <div class="record record_document imgTips" style="width:100%;">
               <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
-            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
           </div>
           <script type="text/javascript">
             swfobject.embedSWF("/include/FlexPaper_flash/FlexPaperViewer.swf",
@@ -97,8 +95,6 @@
           {% set random = thumbnail.get_random() %}
           <div class="record record_audio audioTips" style="width:100%;">
             <div id="preview_{{thumbnail.get_base_id()}}_{{thumbnail.get_record_id()}}_{{random}}" class="PNB" style=""></div>
-            <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
-            <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
           </div>
           <script type="text/javascript">
             swfobject.embedSWF("/include/jslibs/audio-player/player.swf",
@@ -106,12 +102,8 @@
             "{{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 class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
+          <img style="height:100%;" class="record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
                src="{{thumbnail.get_url()}}" ondragstart="return false;">
-          <input type="hidden" name="width" value="{{thumbnail.get_width()}}"/>
-          <input type="hidden" name="height" value="{{thumbnail.get_height()}}"/>
         {% endif %}
-        </div>
+    </div>
-
-
 {% endmacro %}

templates/mobile/lightbox/basket_element.html.twig

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block stylesheet %}
-  <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
+    <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
 {% endblock %}
 
 {% block content %}
@@ -19,13 +19,12 @@
     <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">
-    {{ thumbnail.format100percent(record.get_preview(),'', record.get_thumbnail()) }}
+    {{ thumbnail.format100percent(record.get_preview()) }}
     {% if basket_element.getBasket().getValidation() %}
       {% if basket_element.getBasket().getValidation().getParticipant(app['authentication'].getUser(), app).getCanAgree() %}
         <fieldset data-role="controlgroup" data-type="horizontal" style="text-align:center;">
           <input {% if basket_element.getUserValidationDatas(app['authentication'].getUser(), app).getAgreement() == true%}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-yes_{{basket_element.getId()}}" value="yes"  />
             <label class="agreement_radio" style="width:130px;text-align:center;" for="radio-view-yes_{{basket_element.getId()}}">{% trans 'validation:: OUI' %}</label>
-
           <input {% if basket_element.getUserValidationDatas(app['authentication'].getUser(), app).getAgreement() == false and basket_element.getUserValidationDatas(app['authentication'].getUser(), app).getAgreement() is not null %}checked="checked"{% endif %} type="radio" name="radio-view" id="radio-view-no_{{basket_element.getId()}}" value="no"  />
             <label class="agreement_radio" style="width:130px;text-align:center;" for="radio-view-no_{{basket_element.getId()}}">{% trans 'validation:: NON' %}</label>
         </fieldset>
@@ -45,5 +44,11 @@
   <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

@@ -7,7 +7,7 @@
 {% endblock %}
 
 {% block stylesheet %}
-  <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
+    <link rel="stylesheet" href="{{ path('minifier', { 'f' : 'skins/lightbox/jquery.validator.mobile.css' }) }}" />
 {% endblock %}
 
 {% block content %}
@@ -19,10 +19,16 @@
     <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">
-    {{ thumbnail.format100percent(record.get_preview(),'', record.get_thumbnail()) }}
+    {{ 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/mobile/lightbox/index.html.twig

@@ -39,7 +39,7 @@
     <a href="#about" class="ui-btn-right">{% trans 'a propos'%}</a>
   </div>
     <div data-role="content">
-    <ul data-role="listview">
+    <ul data-role="listview" style="width:100%;margin: 0;">
       <li>
         <a href="#validation">{% trans 'Validations'%}</a>
         <span class="ui-li-count">{{_self.valid_baskets_length(baskets_collection)}}</span>
@@ -86,7 +86,7 @@
     <p>
       {% trans 'Voici vos validations en cours' %}
     </p>
-    <ul data-role="listview">
+    <ul data-role="listview"  style="width:100%;margin: 0;">
             {% for basket in baskets_collection %}
               {% if basket.getValidation() %}
                 {% set basket_length = basket.getElements().count() %}
@@ -115,7 +115,7 @@
     <p>
       {% trans 'Voici vos paniers' %}
     </p>
-    <ul data-role="listview">
+    <ul data-role="listview"  style="width:100%;margin: 0;">
             {% for basket in baskets_collection %}
               {% if basket.getValidation() is empty %}
                 {% set basket_length = basket.getElements().count() %}