From f0c7a0c61fcf985d2e99947c810e4240df09cd10 Mon Sep 17 00:00:00 2001
From: Benjamin Sigonneau <benjamin@dromaludaire.info>
Date: Wed, 2 Jun 2021 08:09:59 +0200
Subject: [PATCH] Use a table to present results

---
 views/search_results.tpl | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)
diff --git a/views/search_results.tpl b/views/search_results.tpl
index f1f2c75..e7f40ea 100644
--- a/views/search_results.tpl
+++ b/views/search_results.tpl
@@ -1,6 +1,19 @@
 <html>
 <head>
   <title>Radio Balises</title>
+  <style>
+    #results {
+        border-colapse: collapse;
+    }
+    #results td, #results th {
+        padding-top: 3px;
+        padding-bottom: 3px;
+        padding-right:15px;
+    }
+    #results tr:hover {
+        background-color: #eaeaea;
+    }
+  </style>
 </head>
 <body>
     <form action="/" method="post" id="datetime_form">
@@ -14,11 +27,15 @@
   <h1>Chansons du {{date.strftime('%A %d %B %Y')}} entre {{start_time}} et {{end_time}}</h1>
   <a href="#" id="go_sooner">[Plus tôt]</a>
   <a href="#" id="go_later">[Plus tard]</a>
-  <ul>
+  <table id="results">
     % for x in results:
-      <li>[{{str(x.date)}}] {{x.song.artist}} - {{x.song.title}}
+    <tr>
+      <th>{{str(x.date.time())}}</th>
+      <td>{{x.song.artist}}</td>
+      <td>{{x.song.title}}</td>
+    </tr>
     % end
-  </ul>
+  </table>
 
   <script>
     move_in_time = (delta) => () => {
