Merge pull request #362 from roccivic/operations-layout

Improved layout on db and table operations pages

ChangeLog

@@ -10,6 +10,7 @@ phpMyAdmin - ChangeLog
 + rfe #1414 Allow specifying controlport
 + PMA_DBI functions in database interface libraries renamed to be compliant with PEAR standards
 + rfe #1412 Creating a view from an empty set of results
++ Improved layout on db and table operations pages
 
 4.0.2.0 (not yet released)
 + center loading indicator for navigation refresh, related to bug #3920

db_operations.php

@@ -208,6 +208,8 @@ if (empty($is_info)) {
 $_REQUEST['db_collation'] = PMA_getDbCollation($db);
 $is_information_schema = PMA_is_system_schema($db);
 
+$response->addHTML('<div id="boxContainer" data-box-width="300">');
+
 if (!$is_information_schema) {
     if ($cfgRelation['commwork']) {
         /**
@@ -273,6 +275,7 @@ if (!$is_information_schema) {
     } // end if
 } // end if (!$is_information_schema)
 
+$response->addHTML('</div>');
 
 // not sure about displaying the PDF dialog in case db is information_schema
 if ($cfgRelation['pdfwork'] && $num_tables > 0) {

js/functions.js

@@ -3849,3 +3849,35 @@ $('a.login-link').live('click', function (e) {
     e.preventDefault();
     window.location.reload(true);
 });
+
+/**
+ * Dynamically adjust the width of the boxes
+ * on the table and db operations pages
+ */
+(function () {
+    function DynamicBoxes() {
+        var $boxContainer = $('#boxContainer');
+        if ($boxContainer.length) {
+            var minWidth = $boxContainer.data('box-width');
+            var viewport = $(window).width() - $('#pma_navigation').width();
+            var slots = Math.floor(viewport / minWidth);
+            $boxContainer.children()
+            .each(function () {
+                if (viewport < minWidth) {
+                    $(this).width(minWidth);
+                } else {
+                    $(this).css('width', ((1 /  slots) * 100) + "%");
+                }
+            })
+            .removeClass('clearfloat')
+            .filter(':nth-child(' + slots + 'n+1)')
+            .addClass('clearfloat');
+        }
+    }
+    AJAX.registerOnload('functions.js', function () {
+        DynamicBoxes();
+    });
+    $(function () {
+        $(window).resize(DynamicBoxes);
+    });
+})();

libraries/operations.lib.php

@@ -626,10 +626,13 @@ function PMA_getHtmlForOrderTheTable($columns)
             . htmlspecialchars($fieldname['Field']) . '</option>' . "\n";
     }
     $html_output .= '</select> ' . __('(singly)') . ' '
-        . '<select name="order_order">'
-        . '<option value="asc">' . __('Ascending') . '</option>'
-        . '<option value="desc">' . __('Descending') . '</option>'
-        . '</select>'
+        . '<br />'
+        . '<input id="order_order_asc" name="order_order"'
+        . ' type="radio" value="asc" checked="checked" />'
+        . '<label for="order_order_asc">' . __('Ascending') . '</label>'
+        . '<input id="order_order_desc" name="order_order"'
+        . ' type="radio" value="desc" />'
+        . '<label for="order_order_desc">' . __('Descending') . '</label>'
         . '</fieldset>'
         . '<fieldset class="tblFooters">'
         . '<input type="hidden" name="submitorderby" value="1" />'
@@ -666,12 +669,12 @@ function PMA_getHtmlForMoveTable()
             . 'name="target_db" value="' . htmlspecialchars($GLOBALS['db'])
             . '"/>';
     } else {
-        $html_output .= '<select name="target_db">'
+        $html_output .= '<select class="halfWidth" name="target_db">'
             . $GLOBALS['pma']->databases->getHtmlOptions(true, false)
             . '</select>';
     }
     $html_output .= '&nbsp;<strong>.</strong>&nbsp;';
-    $html_output .= '<input type="text" size="20" name="new_name"'
+    $html_output .= '<input class="halfWidth" type="text" size="20" name="new_name"'
         . ' onfocus="this.select()"'
         . 'value="' . htmlspecialchars($GLOBALS['table']) . '" /><br />';
 
@@ -996,16 +999,16 @@ function PMA_getHtmlForCopytable()
         . __('Copy table to (database<b>.</b>table):') . '</legend>';
 
     if (count($GLOBALS['pma']->databases) > $GLOBALS['cfg']['MaxDbList']) {
-        $html_output .= '<input type="text" maxlength="100" '
+        $html_output .= '<input class="halfWidth" type="text" maxlength="100" '
             . 'size="30" name="target_db" '
             . 'value="'. htmlspecialchars($GLOBALS['db']) . '"/>';
     } else {
-        $html_output .= '<select name="target_db">'
+        $html_output .= '<select class="halfWidth" name="target_db">'
             . $GLOBALS['pma']->databases->getHtmlOptions(true, false)
             . '</select>';
     }
     $html_output .= '&nbsp;<strong>.</strong>&nbsp;';
-    $html_output .= '<input type="text" size="20" name="new_name" '
+    $html_output .= '<input class="halfWidth" type="text" size="20" name="new_name" '
         . 'onfocus="this.select()" '
         . 'value="'. htmlspecialchars($GLOBALS['table']) . '"/><br />';
 

tbl_operations.php

@@ -230,6 +230,8 @@ $columns = PMA_DBI_getColumns($GLOBALS['db'], $GLOBALS['table']);
 /**
  * Displays the page
  */
+$response->addHTML('<div id="boxContainer" data-box-width="300">');
+
 /**
  * Order the table
  */
@@ -278,8 +280,6 @@ $response->addHTML(
  */
 $response->addHTML(PMA_getHtmlForCopytable());
 
-$response->addHTML('<br class="clearfloat"/>');
-
 /**
  * Table maintenance
  */
@@ -344,7 +344,6 @@ if (! (isset($db_is_information_schema) && $db_is_information_schema)) {
         )
     );
 }
-$response->addHTML('<br class="clearfloat">');
 
 if (PMA_Partition::havePartitioning()) {
     $partition_names = PMA_Partition::getPartitionNames($db, $table);
@@ -375,4 +374,6 @@ if ($cfgRelation['relwork'] && ! $is_innodb) {
 
 } // end  if (!empty($cfg['Server']['relation']))
 
+$response->addHTML('</div>');
+
 ?>

themes/original/css/common.css.php

@@ -1305,7 +1305,18 @@ li.no_bullets {
     width: 48%;
     float: <?php echo $left; ?>;
 }
-
+.operations_half_width input[type=text],
+.operations_half_width select {
+    width: 95%;
+}
+.operations_half_width input[type=text].halfWidth,
+.operations_half_width select.halfWidth {
+    width: 40%;
+}
+.operations_half_width ul {
+    list-style-type: none;
+    padding: 0;
+}
 .operations_full_width {
     width: 100%;
     clear: both;

themes/pmahomme/css/common.css.php

@@ -1681,7 +1681,18 @@ li.no_bullets {
     width: 48%;
     float: <?php echo $left; ?>;
 }
-
+.operations_half_width input[type=text],
+.operations_half_width select {
+    width: 95%;
+}
+.operations_half_width input[type=text].halfWidth,
+.operations_half_width select.halfWidth {
+    width: 40%;
+}
+.operations_half_width ul {
+    list-style-type: none;
+    padding: 0;
+}
 .operations_full_width {
     width: 100%;
     clear: both;