[!!!][FEATURE] Refactor/reintroduce table.t3-table 25/24425/3
authorFelix Kopp <felix-source@phorax.com>
Sun, 6 Oct 2013 13:40:54 +0000 (15:40 +0200)
committerAnja Leichsenring <aleichsenring@ab-softlab.de>
Sun, 6 Oct 2013 19:29:59 +0000 (21:29 +0200)
Bring a central/common table style "t3-table".
Refactor the pre-existing CSS code.

All backend tables that display tabular table data
should use the CSS class .t3-table.

HTML code:

<table class="t3-table">
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="t3-table-tree"><img src="Icon" /></td>
      <td>...</td>
    </tr>
  </tbody>
</table>

This patch makes .t3-row-header & .typo3_dblist unnecessary.

Change-Id: Ic7e66fd1d6e8b9cc541133f1216f26ae7d8d09cf
Resolves: #52558
Related: #49592
Releases: 6.2
Reviewed-on: https://review.typo3.org/24425
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Anja Leichsenring
Tested-by: Anja Leichsenring
typo3/sysext/t3skin/Resources/Public/Css/structure/element_table.css
typo3/sysext/t3skin/Resources/Public/Css/structure/element_tree.css
typo3/sysext/t3skin/Resources/Public/Css/structure/module_file_list.css
typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_list.css
typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_page.css
typo3/sysext/t3skin/Resources/Public/Css/visual/element_table.css
typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_list.css

index 84d748a..311401d 100644 (file)
@@ -2,40 +2,23 @@
 Table
 - - - - - - - - - - - - - - - - - - - - - */
 
-table {
-}
-
 th,
 td {
        vertical-align: top;
 }
 
-.t3-col-header {
-       padding: 0 10px 0 3px;
-}
-
-.t3-row-header {
-       padding: 1px 4px;
+/** @deprecated styles */
+.t3-col-header,
+.t3-row-header,
+.tableheader td,
+table.t3-table-info td {
+       padding: 6px;
 }
 
 .t3-row-header span.t3-icon {
        margin-right: 3px;
 }
 
-.tableheader td {
-       padding-left: 2px;
-       padding-right: 2px;
-}
-
-.lrPadding td {
-       padding-left: 2px;
-       padding-right: 2px;
-}
-
-table.t3-table-info td {
-       padding: 2px 4px;
-}
-
 /** used in the admin tools => DB check **/
 .t3-overview-list dt {
        padding: 0px 0px 2px 20px;
@@ -50,3 +33,60 @@ table.t3-table-info td {
        margin: 2px 0 15px 20px;
        padding-left: 22px;
 }
+
+/**
+ * Common style for tables
+ *
+ * <table class="t3-table>
+ *   <thead>
+ *     <tr>
+ *       <th>...</th>
+ *       <th>...</th>
+ *     </tr>
+ *   </thead>
+ *   <tbody>
+ *     <tr>
+ *       <td class="t3-table-tree">Icon</td>
+ *       <td>...</td>
+ *     </tr>
+ *   </tbody>
+ * </table>
+ */
+table.t3-table {
+       width: 100%;
+       border: none;
+       margin-bottom: 1.5em;
+}
+
+table.t3-table th,
+table.t3-table td {
+       padding: 6px;
+       /** Height of sprite icon */
+       min-height: 16px;
+}
+
+/**
+ * This is the special annotation for tree icon columns
+ */
+table.t3-table td.t3-table-tree {
+       padding-top: 0;
+       padding-bottom: 0;
+
+       /* white space by next column */
+       padding-right: 0;
+       vertical-align: middle;
+       line-height: 28px;
+
+       /* width is expanded by content */
+       width: 16px;
+       white-space: nowrap;
+}
+
+table.t3-table tr th:first-child,
+table.t3-table tr td:first-child {
+       padding-left: 12px;
+}
+table.t3-table tr th:last-child,
+table.t3-table tr td:last-child {
+       padding-right: 12px;
+}
\ No newline at end of file
index d332574..f127e13 100644 (file)
@@ -83,7 +83,7 @@ ul.tree ul li {
 
 ul.tree div.treeLinkItem {
        display: block;
-       height: 16px;
+       min-height: 16px;
        padding-right: 2px;
 }
 
index 535c473..58fd775 100644 (file)
@@ -1,6 +1,5 @@
 /* - - - - - - - - - - - - - - - - - - - - -
 File > List
-
 - - - - - - - - - - - - - - - - - - - - - */
 
 table#typo3-filelist {
index 7753364..7527c59 100644 (file)
@@ -1,10 +1,10 @@
 /* - - - - - - - - - - - - - - - - - - - - -
 Web > List
-
 - - - - - - - - - - - - - - - - - - - - - */
 
+/** @deprecated styles */
 table.typo3-dblist {
-       margin-bottom: 12px;
+       margin-bottom: 1.5em;
        width: 100%;
 }
 
@@ -13,7 +13,7 @@ table.typo3-dblist img {
 }
 
 table.typo3-dblist tr td {
-       padding: 3px 1px 3px 6px;
+       padding: 6px;
 }
 
 table.typo3-dblist tr.db_list_normal td {
@@ -36,7 +36,7 @@ table.typo3-dblist tr td div.typo3-DBctrl {
 }
 
 tr.t3-row-header td {
-       padding: 3px 7px;
+       padding: 6px;
 }
 
 * html table.typo3-dblist tr td div.typo3-DBctrl {
index 0828892..5573310 100644 (file)
@@ -2,6 +2,10 @@
 Web > Page
 - - - - - - - - - - - - - - - - - - - - - */
 
+.t3-page-ce-wrapper .t3-row-header {
+       height: 16px;
+}
+
 .t3-lang-gridContainer {
        margin: 0 -12px;
 }
index 785afa7..7a56f05 100644 (file)
@@ -2,77 +2,64 @@
 Table
 - - - - - - - - - - - - - - - - - - - - - */
 
-th {
-       font-weight: bold;
-}
-
+/** @deprecated styles */
 .t3-row-header {
        background-color: #666;
        color: #fff;
-       font-size: 10px;
-       line-height: 19px;
-       height: 20px;
-}
-
-tr.t3-row-header td {
-       color: #fff;
-       font-size: 10px;
-       font-weight: bold;
-       line-height: 16px;
 }
 
 .t3-row-header a {
        color: #fff;
-       float: left;
 }
 
 .t3-col-header {
        background-color: #585858;
        color: #fff;
-       font-size: 10px;
-       line-height: 19px;
-       height: 20px;
-       font-weight: bold;
 }
 
-table.t3-table {
-       background: #fff;
-       border: 1px solid #a2aab8;
-}
-
-table.t3-table .t3-row-odd td,
-table.t3-table .t3-row-odd th {
-       background-color: #f7f7f7;
+/** used for any table where a table is used for displaying information (and thus, there is air to breathe) **/
+table.t3-table-info {
+       background: #ffffff;
+       border: 1px solid #cccccc;
 }
 
-table.t3-table .t3-row-even td,
-table.t3-table .t3-row-even th {
-       background-color: #ffffff;
+/**
+ * Common style for tables
+ */
+table.t3-table {
+       backgorund-color: #fff;
+       border: none;
+       border: 1px solid #d7d7d7;
 }
 
-table.t3-table .t3-row-odd:hover td,
-table.t3-table .t3-row-odd:hover th,
-table.t3-table .t3-row-even:hover td,
-table.t3-table .t3-row-even:hover th {
-       background-color: #dedede;
+/** Allow <thead><td> only for edge cases - please use <thead><th> */
+table.t3-table thead th,
+table.t3-table thead td {
+       background-color: #666;
+       color: #fff;
 }
-
-table.t3-table tr.t3-row-header td {
+table.t3-table thead th a,
+table.t3-table thead td a {
        color: #fff;
-       font-size: 10px;
-       font-weight: bold;
-       line-height: 16px;
+       text-decoration: underline;
 }
 
-
-
-/** used for any table where a table is used for displaying information (and thus, there is air to breathe) **/
-table.t3-table-info {
-       background: #ffffff;
-       border: 1px solid #cccccc;
-       border-collapse: collapse;
+table.t3-table tbody tr:nth-child(odd) td {
+       background-color: #f7f7f7;
+}
+table.t3-table tbody tr:nth-child(even) td {
+       background-color: #fff;
 }
 
-.tableheader td {
-       font-weight: bold;
+table.t3-table tbody tr:hover td {
+       background-color: #efefef;
+       -webkit-transition: background-color 100ms linear;
+       -moz-transition: background-color 100ms linear;
+       -o-transition: background-color 100ms linear;
+       -ms-transition: background-color 100ms linear;
+       transition: background-color 100ms linear;
 }
+
+table.t3-table tbody td a {
+       text-decoration: underline;
+}
\ No newline at end of file
index 6ba96a3..6866ec6 100644 (file)
@@ -2,9 +2,11 @@
 Web > List
 - - - - - - - - - - - - - - - - - - - - - */
 
+/** @deprecated styles */
 table.typo3-dblist {
-       background: #fff;
-       border: 1px solid #a2aab8;
+       backgorund-color: #fff;
+       border: none;
+       border: 1px solid #d7d7d7;
 }
 
 table.typo3-dblist tr td.db_list_alt {
@@ -21,7 +23,8 @@ table#typo3-dblist-top table.bgColor4 {
 
 table.typo3-dblist tr td.c-headLine,
 table.typo3-dblist tr.c-headLine td {
-       border-bottom: 1px solid #cdcdcd;
+       border-bottom: 1px solid #d7d7d7;
+}
 }
 
 table.typo3-dblist tr.c-headLine td.col-title a {