From 698e4381c29e9f82ad0212612d7c4ed252c956c0 Mon Sep 17 00:00:00 2001
From: Sebastian Kippe <sebastian@kip.pe>
Date: Mon, 1 Feb 2021 18:53:48 +0100
Subject: [PATCH] Improve table styles

* Nicer table headers
* Hide invitation IDs on small screens
---
 app/assets/stylesheets/layout.scss   | 28 +++++++++++++++++++++++-----
 app/views/invitations/index.html.erb |  4 ++--
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index ac82e4b..cf4267b 100644
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -118,11 +118,6 @@ main {
     }
   }
 
-  th, td {
-    line-height: 1.5rem;
-    padding-right: 1rem;
-  }
-
   section {
     padding-bottom: 3rem;
     margin-bottom: 3rem;
@@ -132,6 +127,29 @@ main {
     }
   }
 
+  table {
+    width: 100%;
+
+    th, td {
+      line-height: 1.5rem;
+      padding-right: 1rem;
+
+      &.hide-small {
+        @include media-max(small) {
+          display: none;
+        }
+      }
+    }
+
+    th {
+      color: $text-color-discreet;
+      font-weight: normal;
+      text-transform: uppercase;
+      font-size: 0.85rem;
+      padding-bottom: 0.5rem;
+    }
+  }
+
   .actions {
     margin-top: 2rem;
   }
diff --git a/app/views/invitations/index.html.erb b/app/views/invitations/index.html.erb
index a35d313..1c5996f 100644
--- a/app/views/invitations/index.html.erb
+++ b/app/views/invitations/index.html.erb
@@ -29,7 +29,7 @@
     <table>
       <thead>
         <tr>
-          <th>URL</th>
+          <th class="hide-small">ID</th>
           <th>Accepted</th>
           <th>Invited user</th>
         </tr>
@@ -37,7 +37,7 @@
       <tbody>
         <% @invitations_used.each do |invitation| %>
           <tr>
-            <td class="overflow-ellipsis"><%= invitation_url(invitation.token) %></td>
+            <td class="hide-small"><%= invitation.token %></td>
             <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
             <td><%= User.find(invitation.invited_user_id).address %></td>
           </tr>