made table structure page responsive

Signed-off-by: Manish Bisht <manish.bisht490@gmail.com>
manishbisht · Jun 15, 2017 · 3e1d1bf · 3e1d1bf
1 parent 7225791
commit 3e1d1bf
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 9 deletions.
diff --git a/js/menu-resizer.js b/js/menu-resizer.js
@@ -28,11 +28,11 @@
 
         if (windowWidth < 768) {
             // Sets the image for the left and right scroll indicator
-            $(PMA_getImage('b_right.png').toString()).prependTo($('.scrollindicator--right'));
-            $(PMA_getImage('b_left.png').toString()).prependTo($('.scrollindicator--left'));
+            $('.scrollindicator--right').html($(PMA_getImage('b_right.png').toString()));
+            $('.scrollindicator--left').html($(PMA_getImage('b_left.png').toString()));
 
             // Set the width of the navigation bar without scroll indicator
-            $('.navigationbar').css({'width': widthCalculator.call($container) - 58});
+            $('.navigationbar').css({'width': widthCalculator.call($container) - 59});
 
             // Scroll the navigation bar on click
             $('.scrollindicator--right')
@@ -130,7 +130,7 @@
         }
         // Show/hide the "More" tab as needed
         if (windowWidth < 768) {
-            $('.navigationbar').css({'width': wmax - 58});
+            $('.navigationbar').css({'width': wmax - 59});
         }
         else if ($submenu_ul.find('li').length > 0) {
             $submenu.addClass('shown');

diff --git a/js/tbl_structure.js b/js/tbl_structure.js
@@ -35,7 +35,7 @@
  * @return int
  */
 function PMA_tbl_structure_menu_resizer_callback() {
-    var pagewidth = $('body').width();
+    /*var pagewidth = $('body').width();
     var $page = $('#page_content');
     pagewidth -= $page.outerWidth(true) - $page.outerWidth();
     var columnsWidth = 0;
@@ -47,7 +47,7 @@ function PMA_tbl_structure_menu_resizer_callback() {
     $columns.each(function () {
         totalCellSpacing -= $(this).outerWidth(true);
     });
-    return pagewidth - columnsWidth - totalCellSpacing - 15; // 15px extra margin
+    return pagewidth - columnsWidth - totalCellSpacing - 15; // 15px extra margin*/
 }
 
 /**

diff --git a/libraries/Index.php b/libraries/Index.php
@@ -706,6 +706,7 @@ static public function getHtmlForIndexes($table, $schema, $print_mode = false)
                 return $r;
             }
         }
+        $r .= '<div class="responsivetable">';
         $r .= '<table id="table_index">';
         $r .= '<thead>';
         $r .= '<tr>';
@@ -820,6 +821,7 @@ static public function getHtmlForIndexes($table, $schema, $print_mode = false)
         } // end while
         $r .= '</tbody>';
         $r .= '</table>';
+        $r .= '</div>';
         if (! $print_mode) {
             $r .= '</fieldset>';
         }

diff --git a/templates/table/structure/display_structure.phtml b/templates/table/structure/display_structure.phtml
@@ -17,6 +17,7 @@ $rownum = 0; ?>
     <?php else: ?>
         "table" />
     <?php endif; ?>
+    <div class="responsivetable">
     <table id="tablestructure" class="data topmargin">
         <!-- table header -->
         <?= PMA\libraries\Template::get('table/structure/table_structure_header')->render(
@@ -122,6 +123,7 @@ $rownum = 0; ?>
         <?php endforeach; ?>
         </tbody>
     </table>
+    </div>
     <?= Template::get('table/structure/check_all_table_column')->render(
         array(
             'pma_theme_image' => $GLOBALS['pmaThemeImage'],

diff --git a/templates/table/structure/display_table_stats.twig b/templates/table/structure/display_table_stats.twig
@@ -10,7 +10,7 @@
         <a id="showusage"></a>
 
         {% if not tbl_is_view and not db_is_system_schema %}
-            <table id="tablespaceusage" class="data">
+            <table id="tablespaceusage" class="width100 data">
                 <caption class="tblHeaders">{% trans 'Space usage' %}</caption>
                 <tbody>
                     <tr>

diff --git a/templates/table/structure/row_stats_table.twig b/templates/table/structure/row_stats_table.twig
@@ -1,4 +1,4 @@
-<table id="tablerowstats" class="data">
+<table id="tablerowstats" class="width100 data">
 <caption class="tblHeaders">{% trans 'Row statistics' %}</caption>
 <tbody>
     {% if showtable['Row_format'] is defined %}

diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php
@@ -3568,7 +3568,7 @@
     }
 
     .responsivetable {
-        overflow-x: scroll;
+        overflow-x: auto;
     }
 
     body#loginform div.container {
@@ -3579,6 +3579,10 @@
         display: none;
     }
 
+    .width100 {
+        width: 100%;
+    }
+
     #page_nav_icons {
         display: none;
     }