From 8fab4a7bfb0de97a4049a752cb466375d7872c61 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maur=C3=ADcio=20Meneghini=20Fauth?= <mauricio@fauth.dev>
Date: Tue, 24 Nov 2020 16:21:14 -0300
Subject: [PATCH] Use Bootstrap's table for the db structure page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
---
 .../structure/body_for_table_summary.twig     | 22 +++++-----
 .../structure/structure_table_row.twig        | 42 +++++++++----------
 .../database/structure/table_header.twig      | 10 ++---
 3 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/templates/database/structure/body_for_table_summary.twig b/templates/database/structure/body_for_table_summary.twig
index 1a21582b7b..9c6b8b9766 100644
--- a/templates/database/structure/body_for_table_summary.twig
+++ b/templates/database/structure/body_for_table_summary.twig
@@ -1,7 +1,7 @@
-<tbody id="tbl_summary_row">
+<tfoot id="tbl_summary_row" class="thead-light">
 <tr>
-    <th class="print_ignore"></th>
-    <th class="tbl_num nowrap">
+    <th class="d-print-none"></th>
+    <th class="tbl_num text-nowrap">
         {% set num_tables_trans -%}
             {% trans %}%s table{% plural num_tables %}%s tables{% endtrans %}
         {%- endset %}
@@ -14,7 +14,7 @@
     {% if num_favorite_tables == 0 %}
         {% set sum_colspan = sum_colspan - 1 %}
     {% endif %}
-    <th colspan="{{ sum_colspan }}" class="print_ignore">{% trans 'Sum' %}</th>
+    <th colspan="{{ sum_colspan }}" class="d-print-none">{% trans 'Sum' %}</th>
     {% set row_count_sum = format_number(sum_entries, 0) %}
     {# If a table shows approximate rows count, display update-all-real-count anchor. #}
     {% set row_sum_url = [] %}
@@ -34,7 +34,7 @@
     {% else %}
         {% set cell_text = row_count_sum %}
     {% endif %}
-    <th class="value tbl_rows">{{ cell_text }}</th>
+    <th class="value tbl_rows text-monospace text-right">{{ cell_text }}</th>
     {% if not (properties_num_columns > 1) %}
         {# MySQL <= 5.5.2 #}
         {% set default_engine = dbi.fetchValue('SELECT @@storage_engine;') %}
@@ -60,12 +60,12 @@
         {% set sum = format_byte_down(sum_size, 3, 1) %}
         {% set sum_formatted = sum[0] %}
         {% set sum_unit = sum[1] %}
-        <th class="value tbl_size">{{ sum_formatted }} {{ sum_unit }}</th>
+        <th class="value tbl_size text-monospace text-right">{{ sum_formatted }} {{ sum_unit }}</th>
 
         {% set overhead = format_byte_down(overhead_size, 3, 1) %}
         {% set overhead_formatted = overhead[0] %}
         {% set overhead_unit = overhead[1] %}
-        <th class="value tbl_overhead">{{ overhead_formatted }} {{ overhead_unit }}</th>
+        <th class="value tbl_overhead text-monospace text-right">{{ overhead_formatted }} {{ overhead_unit }}</th>
     {% endif %}
 
     {% if show_charset %}
@@ -75,19 +75,19 @@
         <th></th>
     {% endif %}
     {% if show_creation %}
-        <th class="value tbl_creation">
+        <th class="value tbl_creation text-monospace text-right">
             {{ create_time_all }}
         </th>
     {% endif %}
     {% if show_last_update %}
-        <th class="value tbl_last_update">
+        <th class="value tbl_last_update text-monospace text-right">
             {{ update_time_all }}
         </th>
     {% endif %}
     {% if show_last_check %}
-        <th class="value tbl_last_check">
+        <th class="value tbl_last_check text-monospace text-right">
             {{ check_time_all }}
         </th>
     {% endif %}
 </tr>
-</tbody>
+</tfoot>
diff --git a/templates/database/structure/structure_table_row.twig b/templates/database/structure/structure_table_row.twig
index dea94c2da9..45563d15b6 100644
--- a/templates/database/structure/structure_table_row.twig
+++ b/templates/database/structure/structure_table_row.twig
@@ -1,5 +1,5 @@
 <tr id="row_tbl_{{ curr }}"{{ table_is_view ? ' class="is_view"' }} data-filter-row="{{ current_table['TABLE_NAME']|upper }}">
-    <td class="text-center print_ignore">
+    <td class="text-center d-print-none">
         <input type="checkbox"
             name="selected_tbl[]"
             class="{{ input_class }}"
@@ -21,7 +21,7 @@
 
     {# Favorite table anchor #}
     {% if num_favorite_tables > 0 %}
-        <td class="text-center print_ignore">
+        <td class="text-center d-print-none">
             {# Check if current table is already in favorite list #}
             {% set fav_params = {
                 'db': db,
@@ -38,35 +38,35 @@
         </td>
     {% endif %}
 
-    <td class="text-center print_ignore">
+    <td class="text-center d-print-none">
         <a href="{{ url('/sql', table_url_params|merge({'pos': 0})) }}">
           {{ may_have_rows ? get_icon('b_browse', 'Browse'|trans) : get_icon('bd_browse', 'Browse'|trans) }}
         </a>
     </td>
-    <td class="text-center print_ignore">
+    <td class="text-center d-print-none">
         <a href="{{ url('/table/structure', table_url_params) }}">
           {{ get_icon('b_props', 'Structure'|trans) }}
         </a>
     </td>
-    <td class="text-center print_ignore">
+    <td class="text-center d-print-none">
         <a href="{{ url('/table/search', table_url_params) }}">
           {{ may_have_rows ? get_icon('b_select', 'Search'|trans) : get_icon('bd_select', 'Search'|trans) }}
         </a>
     </td>
 
     {% if not db_is_system_schema %}
-        <td class="insert_table text-center print_ignore">
+        <td class="insert_table text-center d-print-none">
             <a href="{{ url('/table/change', table_url_params) }}">{{ get_icon('b_insrow', 'Insert'|trans) }}</a>
         </td>
         {% if table_is_view %}
-            <td class="text-center print_ignore">
+            <td class="text-center d-print-none">
                 <a href="{{ url('/view/create', {
                     'db': db,
                     'table': current_table['TABLE_NAME']
                 }) }}">{{ get_icon('b_edit', 'Edit'|trans) }}</a>
             </td>
         {% else %}
-          <td class="text-center print_ignore">
+          <td class="text-center d-print-none">
                 <a class="truncate_table_anchor ajax" href="{{ url('/sql') }}" data-post="{{ get_common(table_url_params|merge({
                   'sql_query': empty_table_sql_query,
                   'message_to_show': empty_table_message_to_show
@@ -75,7 +75,7 @@
                 </a>
           </td>
         {% endif %}
-        <td class="text-center print_ignore">
+        <td class="text-center d-print-none">
             <a class="ajax drop_table_anchor
                 {{- table_is_view or current_table['ENGINE'] == null ? ' view' }}" href="{{ url('/sql') }}" data-post="
                 {{- get_common(table_url_params|merge({
@@ -96,7 +96,7 @@
 
         {# Content to be appended into 'tbl_rows' cell.
         If row count is approximate, display it as an anchor to get real count. #}
-        <td class="value tbl_rows"
+        <td class="value tbl_rows text-monospace text-right"
             data-table="{{ current_table['TABLE_NAME'] }}">
             {% if approx_rows %}
                 <a href="{{ url('/database/structure/real-row-count', {
@@ -130,12 +130,12 @@
         {% endif %}
 
         {% if is_show_stats %}
-            <td class="value tbl_size">
+            <td class="value tbl_size text-monospace text-right">
                 <a href="{{ url('/table/structure', table_url_params) }}#showusage">
                     <span>{{ formatted_size }}</span>&nbsp;<span class="unit">{{ unit }}</span>
                 </a>
             </td>
-            <td class="value tbl_overhead">
+            <td class="value tbl_overhead text-monospace text-right">
                 {{ overhead|raw }}
             </td>
         {% endif %}
@@ -163,32 +163,32 @@
         {% endif %}
 
         {% if show_creation %}
-            <td class="value tbl_creation">
+            <td class="value tbl_creation text-monospace text-right">
                 {{ create_time }}
             </td>
         {% endif %}
 
         {% if show_last_update %}
-            <td class="value tbl_last_update">
+            <td class="value tbl_last_update text-monospace text-right">
                 {{ update_time }}
             </td>
         {% endif %}
 
         {% if show_last_check %}
-            <td class="value tbl_last_check">
+            <td class="value tbl_last_check text-monospace text-right">
                 {{ check_time }}
             </td>
         {% endif %}
 
     {% elseif table_is_view %}
-        <td class="value tbl_rows">-</td>
+        <td class="value tbl_rows text-monospace text-right">-</td>
         <td class="nowrap">
             {% trans 'View' %}
         </td>
         <td class="nowrap">---</td>
         {% if is_show_stats %}
-            <td class="value tbl_size">-</td>
-            <td class="value tbl_overhead">-</td>
+            <td class="value tbl_size text-monospace text-right">-</td>
+            <td class="value tbl_overhead text-monospace text-right">-</td>
         {% endif %}
         {% if show_charset %}
             <td></td>
@@ -197,13 +197,13 @@
             <td></td>
         {% endif %}
         {% if show_creation %}
-            <td class="value tbl_creation">-</td>
+            <td class="value tbl_creation text-monospace text-right">-</td>
         {% endif %}
         {% if show_last_update %}
-            <td class="value tbl_last_update">-</td>
+            <td class="value tbl_last_update text-monospace text-right">-</td>
         {% endif %}
         {% if show_last_check %}
-            <td class="value tbl_last_check">-</td>
+            <td class="value tbl_last_check text-monospace text-right">-</td>
         {% endif %}
 
     {% else %}
diff --git a/templates/database/structure/table_header.twig b/templates/database/structure/table_header.twig
index fc85f2f1ae..edb822191b 100644
--- a/templates/database/structure/table_header.twig
+++ b/templates/database/structure/table_header.twig
@@ -1,10 +1,10 @@
 <form method="post" action="{{ url('/database/structure') }}" name="tablesForm" id="tablesForm">
 {{ get_hidden_inputs(db) }}
-<div class="responsivetable">
-<table id="structureTable" class="pma-table data">
-    <thead>
+<div class="table-responsive">
+<table class="table table-light table-striped table-hover table-sm w-auto">
+    <thead class="thead-light">
         <tr>
-            <th class="print_ignore"></th>
+            <th class="d-print-none"></th>
             <th>{{ sortable_table_header('Table'|trans, 'table') }}</th>
             {% if replication %}
                 <th>{% trans 'Replication' %}</th>
@@ -18,7 +18,7 @@
             {% if num_favorite_tables > 0 %}
                 {% set action_colspan = action_colspan + 1 %}
             {% endif %}
-            <th colspan="{{ action_colspan }}" class="print_ignore">
+            <th colspan="{{ action_colspan }}" class="d-print-none">
                 {% trans 'Action' %}
             </th>
             {# larger values are more interesting so default sort order is DESC #}