From 178dc634e98d484912579ee5e6a5a16c672b6c00 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 28 Nov 2017 12:35:49 +0000
Subject: [PATCH] Move table styling into a component

---
 assets/less/components/table.less          | 18 ++++++++++++++++++
 assets/less/main.less                      |  1 +
 source/_includes/talks-table-row.html.twig | 10 +++++-----
 source/_includes/talks-table.html.twig     | 10 +++++-----
 4 files changed, 29 insertions(+), 10 deletions(-)
 create mode 100644 assets/less/components/table.less

diff --git a/assets/less/components/table.less b/assets/less/components/table.less
new file mode 100644
index 00000000..b50d8fd0
--- /dev/null
+++ b/assets/less/components/table.less
@@ -0,0 +1,18 @@
+.table {
+    @apply .w-full;
+    @apply .table-collapse;
+    @apply .border;
+    @apply .border-grey-light;
+}
+
+.table tr:nth-child(odd) {
+    @apply .bg-grey-lightest;
+}
+
+.table tr th {
+    @apply .text-left .p-2 .bg-white;
+}
+
+.table td {
+    @apply .p-2 .border-t;
+}
diff --git a/assets/less/main.less b/assets/less/main.less
index 0e7f0116..7827d74b 100644
--- a/assets/less/main.less
+++ b/assets/less/main.less
@@ -64,6 +64,7 @@ svg {
 
 @import "components/listing";
 @import "components/post";
+@import "components/table";
 @import "components/talk/slides";
 @import "components/talk/video";
 @import "components/testimonial";
diff --git a/source/_includes/talks-table-row.html.twig b/source/_includes/talks-table-row.html.twig
index ffbc4746..5a8a550d 100644
--- a/source/_includes/talks-table-row.html.twig
+++ b/source/_includes/talks-table-row.html.twig
@@ -1,5 +1,5 @@
-<tr class="{{ loop.index is odd ? 'bg-grey-lightest' }}">
-    <td class="p-2 border-t">
+<tr>
+    <td>
         {{ row.event.date|date(row.event.fuzzy_date ? 'F Y' : 'j F Y') }}
 
         {% if row.event.time is defined %}
@@ -10,7 +10,7 @@
     </td>
 
     {% if not talk_page %}
-        <td class="p-2 border-t">
+        <td>
             {% if row.talk.url is not empty %}
                 <a href="{{ row.talk.url }}">
                     {{ row.talk.title }}
@@ -29,7 +29,7 @@
         </td>
     {% endif %}
 
-    <td class="p-2 border-t">
+    <td>
         {% if row.event.website is not empty %}
             <a href="{{ row.event.website }}">
                 {{ row.event.name }}
@@ -46,7 +46,7 @@
     </td>
 
     {% if not upcoming %}
-        <td class="p-2 border-t">
+        <td>
             {% if row.event.feedback and row.event.date <= today %}
                 <a href="{{ row.event.feedback }}"
                    class="button"
diff --git a/source/_includes/talks-table.html.twig b/source/_includes/talks-table.html.twig
index e4b2587b..c76926da 100644
--- a/source/_includes/talks-table.html.twig
+++ b/source/_includes/talks-table.html.twig
@@ -1,17 +1,17 @@
 <div class="overflow-auto">
-    <table class="w-full table-collapse border border-grey-light">
+    <table class="table">
         <thead>
             <tr>
-                <th class="w-1/4 p-2 text-left bg-white">Date</th>
+                <th class="w-1/4">Date</th>
 
                 {% if not talk_page %}
-                    <th class="w-1/3 p-2 text-left bg-white">Talk</th>
+                    <th class="w-1/3">Talk</th>
                 {% endif %}
 
-                <th class="p-2 text-left bg-white">Event</th>
+                <th>Event</th>
 
                 {% if not upcoming %}
-                    <th class="p-2 text-left bg-white">Feedback</th>
+                    <th>Feedback</th>
                 {% endif %}
             </tr>
         </thead>