From fc5b0d2bd65add6e8dcdf23d946a0abcd583746e Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 30 Jun 2018 20:21:00 +0200
Subject: [PATCH] custom classes for table tds and ths

---
 templates/default-layout.lucius    | 55 +++++++++-----------
 templates/table/cell/body.hamlet   |  5 +-
 templates/table/cell/header.hamlet |  2 +-
 templates/table/colonnade.lucius   | 82 ++++++++++++++----------------
 4 files changed, 67 insertions(+), 77 deletions(-)

diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index 994f2258e..ab5f2178f 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -281,38 +281,31 @@ a.btn.btn-info:hover,
 }
 
 /* TABLE DESIGN */
-.table__row {
+.table__td, .table__th {
+  padding-top: 14px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+  padding-right: 10px;
+  max-width: 300px;
+}
 
-  /* TODO: move outside of table__row as soon as tds and ths get their own class */
-  /* .table__td, .table__th { */
-  td, th {
-    padding-top: 14px;
-    padding-bottom: 10px;
-    padding-left: 10px;
-    padding-right: 10px;
-    max-width: 300px;
-  }
+.table__td {
+  font-size: 16px;
+  color: #808080;
+  line-height: 1.4;
+  vertical-align: top;
+}
 
-  /* .table__td { */
-  td {
-    font-size: 16px;
-    color: #808080;
-    line-height: 1.4;
-    vertical-align: top;
-  }
-
-  /* .table__th { */
-  th {
-    background-color: var(--color-dark);
-    position: relative;
-    font-size: 16px;
-    color: #fff;
-    line-height: 1.4;
-    padding-top: 10px;
-    padding-bottom: 10px;
-    font-weight: bold;
-    text-align: left;
-  }
+.table__th {
+  background-color: var(--color-dark);
+  position: relative;
+  font-size: 16px;
+  color: #fff;
+  line-height: 1.4;
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-weight: bold;
+  text-align: left;
 }
 
 @media (max-width: 1200px) {
@@ -323,7 +316,7 @@ a.btn.btn-info:hover,
 }
 
 .table__td-content {
-  max-height: 100px;
+  max-height: 200px;
   overflow-y: auto;
 }
 
diff --git a/templates/table/cell/body.hamlet b/templates/table/cell/body.hamlet
index 6c36d333f..f2892c2a2 100644
--- a/templates/table/cell/body.hamlet
+++ b/templates/table/cell/body.hamlet
@@ -1,2 +1,3 @@
-<td *{attrs}>
-  ^{widget}
+<td .table__td *{attrs}>
+  <div .table__td-content>
+    ^{widget}
diff --git a/templates/table/cell/header.hamlet b/templates/table/cell/header.hamlet
index 0a87cda2c..66ac4087e 100644
--- a/templates/table/cell/header.hamlet
+++ b/templates/table/cell/header.hamlet
@@ -1,4 +1,4 @@
-<th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
+<th .table__th *{attrs} :isSortable:.sortable :isSorted SortAsc:.sorted-asc :isSorted SortDesc:.sorted-desc>
   $maybe flag <- sortableKey
     $case directions
       $of [SortAsc]
diff --git a/templates/table/colonnade.lucius b/templates/table/colonnade.lucius
index 158877b7f..918770d3e 100644
--- a/templates/table/colonnade.lucius
+++ b/templates/table/colonnade.lucius
@@ -1,44 +1,40 @@
-/* SORTABLE TABLE */
-.table {
-
-  /* TODO: move outside of table as soon as tds and ths get their own class */
-  th.sortable {
-    position: relative;
-    padding-right: 24px;
-    cursor: pointer;
-  }
-
-  th.sortable::after,
-  th.sortable::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 4px;
-    width: 0;
-    height: 0;
-    border-left: 8px solid transparent;
-    border-right: 8px solid transparent;
-    border-bottom: 8px solid rgba(255, 255, 255, 0.4);
-  }
-
-  th.sortable::before {
-    /* magic numbers to move arrow back in the right position after flipping it.
-    this allows us to use the same border for the up and the down arrow */
-    transform: translateY(150%) scale(1, -1);
-    transform-origin: top;
-  }
-
-  th.sortable::after {
-    transform: translateY(-150%);
-  }
-
-  th.sortable:hover::before,
-  th.sortable:hover::after {
-    border-bottom-color: rgba(255, 255, 255, 0.7);
-  }
-
-  th.sorted-asc::before,
-  th.sorted-desc::after {
-    border-bottom-color: white !important;
-  }
+/* SORTABLE TABLE-HEADERS*/
+.table__th.sortable {
+  position: relative;
+  padding-right: 24px;
+  cursor: pointer;
+}
+
+.table__th.sortable::after,
+.table__th.sortable::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  right: 4px;
+  width: 0;
+  height: 0;
+  border-left: 8px solid transparent;
+  border-right: 8px solid transparent;
+  border-bottom: 8px solid rgba(255, 255, 255, 0.4);
+}
+
+.table__th.sortable::before {
+  /* magic numbers to move arrow back in the right position after flipping it.
+  this allows us to use the same border for the up and the down arrow */
+  transform: translateY(150%) scale(1, -1);
+  transform-origin: top;
+}
+
+.table__th.sortable::after {
+  transform: translateY(-150%);
+}
+
+.table__th.sortable:hover::before,
+.table__th.sortable:hover::after {
+  border-bottom-color: rgba(255, 255, 255, 0.7);
+}
+
+.table__th.sorted-asc::before,
+.table__th.sorted-desc::after {
+  border-bottom-color: white !important;
 }