Merge pull request #7895 from piwik/redesign-tables

New design for simple table layouts w/ non-API CSS class simple-table. To be eventually replaced w/ styling table elements directly.

plugins/Installation/stylesheets/installation.css

@@ -65,16 +65,9 @@ p.next-step:first-child {
     margin-top: 0;
 }
 
-table {
-    margin: 20px 0;
-    width: 100%;
-}
-th, td {
-    border-top: 1px solid #cccccc;
-    padding: 8px;
-}
-tr:nth-of-type(odd) {
-    background-color: #FAFAFA;
+/* This rule is duplicated here from systemCheckPage.less */
+.system-check td:first-child {
+    width: 40%;
 }
 
 /* Form classes that we can't change */

plugins/Installation/stylesheets/systemCheckPage.less

-#systemCheckOptional,
-#systemCheckRequired {
-    width: 100%;
-    max-width: 900px;
-}
-
-#systemCheckOptional {
-    margin-bottom: 2em;
-}
-
-#systemCheckOptional td,
-#systemCheckRequired td {
-    padding: 1em .5em 1em 2em;
-    vertical-align: middle;
-    margin: 0;
-    min-width: 200px;
-}
-
-#systemCheckOptional tr,
-#systemCheckRequired tr {
-    background-color: #f2f2f2;
+.system-check td:first-child {
+    width: 40%;
 }
 
 .error {

plugins/Installation/templates/_systemCheckSection.twig

 {% import _self as local %}
 
-<table class="infosServer" id="systemCheckRequired">
+<table class="simple-table system-check" id="systemCheckRequired">
     {{ local.diagnosticTable(diagnosticReport.getMandatoryDiagnosticResults()) }}
 </table>
 
 <h3>{{ 'Installation_Optional'|translate }}</h3>
 
-<table class="infos" id="systemCheckOptional">
+<table class="simple-table system-check" id="systemCheckOptional">
     {{ local.diagnosticTable(diagnosticReport.getOptionalDiagnosticResults()) }}
 </table>
 
@@ -21,7 +21,7 @@
 
     {% for result in results %}
         <tr>
-            <td class="label">{{ result.label }}</td>
+            <td>{{ result.label }}</td>
             <td>
                 {% for item in result.items %}
 

plugins/Morpheus/stylesheets/base.less

@@ -35,6 +35,7 @@
 @import "../../CoreHome/stylesheets/_donate.less";
 
 @import "ui/_code";
+@import "ui/_tables";
 @import "ui/_alerts";
 @import "ui/_list-group";
 @import "ui/_progress-bars";

plugins/Morpheus/stylesheets/ui/_tables.less

+// We have to use a class (and not <table> directly) because HTML tables
+// are used for layouts (e.g. forms in the admin section use tables)
+// TODO refactor that: https://github.com/piwik/piwik/issues/8023
+.simple-table {
+    margin: 20px 0;
+    width: 100%;
+    border-top: 1px solid @theme-color-border;
+
+    th, td {
+        border-bottom: 1px solid @theme-color-border;
+        padding: 14px;
+    }
+    th {
+        text-align: left;
+    }
+}

plugins/Morpheus/templates/demo.twig

@@ -298,6 +298,9 @@
                 </tbody>
             </table>
         </div>
+        <div class="demo-code">
+            <pre>&lt;table&gt;...&lt;/table&gt;</pre>
+        </div>
 
     </div>
 

plugins/Morpheus/templates/genericForm.twig

@@ -11,7 +11,7 @@
 
 <form {{ form_data.attributes|raw }}>
 	<div class="centrer">
-		<table class="centrer">
+		<table class="centrer simple-table">
             {% for fieldname in element_list %}
 				{% if form_data[fieldname].type == 'checkbox' %}
 					<tr>