From f4276d1ccf154dca19244826097dc768e118eee2 Mon Sep 17 00:00:00 2001
From: Pig Fang <g-plane@hotmail.com>
Date: Tue, 24 Mar 2020 18:44:45 +0800
Subject: [PATCH] "table" tag should not be used for layout

---
 resources/assets/src/styles/common.styl | 17 --------
 resources/views/admin/update.twig       | 55 +++++++++++++------------
 resources/views/forms/form.twig         | 34 +++++++--------
 tests/ServicesTest/OptionFormTest.php   |  3 +-
 4 files changed, 45 insertions(+), 64 deletions(-)

diff --git a/resources/assets/src/styles/common.styl b/resources/assets/src/styles/common.styl
index 015b1a9d..920c0013 100644
--- a/resources/assets/src/styles/common.styl
+++ b/resources/assets/src/styles/common.styl
@@ -8,23 +8,6 @@
 .brand-link, .navbar-brand
   font-family Minecraft
 
-.key
-  vertical-align middle
-
-.value
-  width 70%
-
-.table > tbody > tr
-  td.value, td.key
-    border-top 0
-
-  @media (max-width: 768px)
-    td.value, td.key
-      display block
-
-    td.value
-      width 90%
-
 .breadcrumb
   font-size 14px
 
diff --git a/resources/views/admin/update.twig b/resources/views/admin/update.twig
index de62205d..2f530f55 100644
--- a/resources/views/admin/update.twig
+++ b/resources/views/admin/update.twig
@@ -14,22 +14,24 @@
             <div class="callout callout-info">
               {{ trans('admin.update.info.available') }}
             </div>
-            <table class="table">
-              <tbody>
-                <tr>
-                  <td class="key">{{ trans('admin.update.info.versions.latest') }}</td>
-                  <td class="value">
-                    v{{ info.latest }}
-                  </td>
-                </tr>
-                <tr>
-                  <td class="key">{{ trans('admin.update.info.versions.current') }}</td>
-                  <td class="value">
-                    v{{ info.current }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <div class="container-fluid">
+              <div class="row mb-3">
+                <div class="col-sm-4">
+                  {{ trans('admin.update.info.versions.latest') }}
+                </div>
+                <div class="col-sm-8">
+                  v{{ info.latest }}
+                </div>
+              </div>
+              <div class="row mt-3">
+                <div class="col-sm-4">
+                  {{ trans('admin.update.info.versions.current') }}
+                </div>
+                <div class="col-sm-8">
+                  v{{ info.current }}
+                </div>
+              </div>
+            </div>
           {% else %}
             {% if error %}
               <div class="callout callout-danger">
@@ -40,17 +42,16 @@
                 {{ trans('admin.update.info.up-to-date') }}
               </div>
             {% endif %}
-            <table class="table">
-              <tbody>
-                <tr>
-                  <td class="key">
-                    {{ trans('admin.update.info.versions.current') }}</td>
-                  <td class="value">
-                    v{{ info.current }}
-                  </td>
-                </tr>
-              </tbody>
-            </table>
+            <div class="container-fluid">
+              <div class="row">
+                <div class="col-sm-4">
+                  {{ trans('admin.update.info.versions.current') }}
+                </div>
+                <div class="col-sm-8">
+                  v{{ info.current }}
+                </div>
+              </div>
+            </div>
           {% endif %}
         </div>
         <div class="card-footer">
diff --git a/resources/views/forms/form.twig b/resources/views/forms/form.twig
index e9846b9e..428cea78 100644
--- a/resources/views/forms/form.twig
+++ b/resources/views/forms/form.twig
@@ -35,25 +35,23 @@
           {% endif %}
         {% endfor %}
       {% else %}
-        <table class="table">
-          <tbody>
-            {% for item in items %}
-              <tr>
-                {% if not renderInputTagsOnly %}
-                  <td class="key">
-                    {{ item.name }} {{ item.hint|raw }}
-                  </td>
+        <div class="container-fluid">
+          {% for item in items %}
+            <div class="row {{ loop.index == 1 ? 'mb-3' : (loop.index == loop.length ? 'mt-3' : 'my-3') }}">
+              {% if not renderInputTagsOnly %}
+                <div class="col-sm-4">
+                  {{ item.name }} {{ item.hint|raw }}
+                </div>
+              {% endif %}
+              <div class="col-sm-{{ renderInputTagsOnly ? '12' : '8' }}">
+                {{ item.render()|raw }}
+                {% if item.description %}
+                  <p class="description">{{ item.description|raw }}</p>
                 {% endif %}
-                <td class="value">
-                  {{ item.render()|raw }}
-                  {% if item.description %}
-                    <p class="description">{{ item.description|raw }}</p>
-                  {% endif %}
-                </td>
-              </tr>
-            {% endfor %}
-          </tbody>
-        </table>
+              </div>
+            </div>
+          {% endfor %}
+        </div>
       {% endif %}
     </div>
     <div class="card-footer">
diff --git a/tests/ServicesTest/OptionFormTest.php b/tests/ServicesTest/OptionFormTest.php
index bd919183..4c2c9f66 100644
--- a/tests/ServicesTest/OptionFormTest.php
+++ b/tests/ServicesTest/OptionFormTest.php
@@ -214,8 +214,7 @@ class OptionFormTest extends TestCase
         $returned = $form->renderInputTagsOnly();
         $this->assertSame($form, $returned);
         $crawler = new Crawler($form->render());
-        $this->assertCount(0, $crawler->filter('td.key'));
-        $this->assertCount(1, $crawler->filter('td.value'));
+        $this->assertCount(1, $crawler->filter('.col-sm-12'));
     }
 
     public function testRenderWithoutSubmitButton()