Use a table to present results

2021-06-02 08:09:59 +02:00
parent a2cc77954f
commit f0c7a0c61f
1 changed files with 20 additions and 3 deletions
--- 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) => () => {