prettier tables

templates/default-layout.lucius

@@ -81,7 +81,6 @@ body {
     --color-link: var(--color-lightblack);
     --color-link-hover: var(--color-darker);
   }
-
 }
 
 /* END THEMES */
@@ -129,45 +128,7 @@ h4 {
   font-size: 16px;
   margin: 0;
 }
-table {
-  margin: 21px 0;
-}
 
-.scrolltable {
-  width: 100%;
-  overflow: auto;
-}
-
-.table-striped {
-
-  tbody {
-    tr:not(.no-stripe):nth-child(even) {
-      background-color: #e8e8e8;
-    }
-  }
-}
-
-.table-hover {
-
-  tbody {
-    tr:not(.no-hover):hover {
-      background-color: #d8d8d8;
-    }
-  }
-}
-
-th, td {
-  text-align: left;
-  padding: 7px;
-  vertical-align: baseline;
-}
-th:first-child,
-td:first-child {
-  border-left: 0;
-}
-th {
-  border-left: 2px solid var(--color-grey);
-}
 /* LAYOUT */
 .main {
   display: flex;
@@ -179,6 +140,7 @@ th {
   position: relative;
   background-color: white;
   padding: 0 40px;
+  padding-bottom: 60px;
   flex: 1;
   z-index: 0;
   overflow: hidden;

templates/table/colonnade.hamlet

@@ -1,12 +1,18 @@
-<table id="#{dbtIdent}">
+$newline never
+<table id="#{dbtIdent}" .table.table--striped.table--hover>
   $maybe sortableP <- pSortable
     $with toSortable <- toSortable sortableP
       <thead>
-        $forall OneColonnade{..} <- getColonnade dbtColonnade
+        <tr .table__row.table__row--head>
-          ^{widgetFromCell th $ withSortLinks $ toSortable oneColonnadeHead}
+          $forall OneColonnade{..} <- getColonnade dbtColonnade
+            <!-- TODO: give ths a class 'table__th' -->
+            <!-- TODO: wrap content of th in 'div.table__th-content' -->
+            ^{widgetFromCell th $ withSortLinks $ toSortable oneColonnadeHead}
   $nothing
   <tbody>
     $forall row <- rows
-      <tr>
+      <tr .table__row>
         $forall OneColonnade{..} <- getColonnade dbtColonnade
+          <!-- TODO: give tds a class 'table__td' -->
+          <!-- TODO: wrap content of td in 'div.table__td-content' -->
           ^{widgetFromCell td $ oneColonnadeEncode row}

templates/table/colonnade.lucius

@@ -1,16 +1,76 @@
-table th {
-  position: relative;
-  padding-right: 20px;
 
-  &.sortable {
+.table {
-    cursor: pointer;
+  margin: 21px 0;
-  }
+  width: 100%;
+}
 
-  a {
+.table--striped {
-    font-weight: 800;
+
+  .table__row:not(.no-stripe):nth-child(even) {
+    background-color: rgba(0, 0, 0, 0.07);
   }
 }
 
+.table--hover {
+
+  .table__row:not(.no-hover):not(.table__row--head):hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* TABLE DESIGN */
+.table__row {
+
+  /* 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;
+    vertical-align: top;
+    max-width: 300px;
+  }
+
+  /* .table__td { */
+  td {
+    font-size: 16px;
+    color: #808080;
+    line-height: 1.4;
+  }
+
+  &.table__row--head {
+    background-color: var(--color-dark);
+  }
+
+  /* .table__th { */
+  th {
+    position: relative;
+    font-size: 16px;
+    color: #fff;
+    line-height: 1.4;
+    padding-top: 15px;
+    padding-bottom: 10px;
+    font-weight: bold;
+    text-align: left;
+  }
+}
+
+.table__td-content {
+  max-height: 100px;
+  overflow-y: auto;
+}
+
+.table__th-link {
+  color: white;
+  font-weight: bold;
+
+  &:hover {
+    background-color: var(--color-light);
+  }
+}
+
+/* SORTABLE */
 table th.sorted-asc,
 table th.sorted-desc {
   color: var(--color-light);

templates/table/layout.lucius

@@ -1,3 +1,4 @@
+/* PAGINATION */
 .pagination {
   margin-top: 20px;
   text-align: center;
@@ -36,3 +37,8 @@
     }
   }
 }
+
+/* SCROLLTABLE */
+.scrolltable {
+  overflow: auto;
+}

templates/table/sortable-header.hamlet

@@ -1,10 +1,10 @@
 $maybe flag <- sortableKey
   $case directions
     $of [SortAsc]
-      <a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-desc")}>
+      <a .table__th-link href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-desc")}>
         ^{cellContents}
     $of _
-      <a href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-asc")}>
+      <a .table__th-link href=#{tblLink $ setParam (wIdent "sorting") (Just $ flag <> "-asc")}>
         ^{cellContents}
 $nothing
   ^{cellContents}