From 3684753e9bcc989ef55e1673bab3489320d35a0e Mon Sep 17 00:00:00 2001
From: Carl Pearson <srht@carlpearson.net>
Date: Fri, 20 Sep 2024 06:04:41 -0600
Subject: [PATCH] Better video list formatting

---
 static/style/videos.css | 52 ++++++++++++++++++++++++++++++++++-------
 templates/videos.html   | 37 +++++++++++++----------------
 2 files changed, 59 insertions(+), 30 deletions(-)
diff --git a/static/style/videos.css b/static/style/videos.css
index 6d1b2e8..75932ce 100644
--- a/static/style/videos.css
+++ b/static/style/videos.css
@@ -1,15 +1,49 @@
-table {
-    width: 100%;
-    border-collapse: collapse;
+.video-list {
+    display: grid;
+    /* each col is at least 300px, but can grow to 100% wide */
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
 }
 
-th,
-td {
+.video-card {
     border: 1px solid #ddd;
-    padding: 8px;
-    text-align: left;
+    border-radius: 8px;
+    padding: 15px;
+    background-color: #f9f9f9;
 }
 
-th {
-    background-color: #f2f2f2;
+.video-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+}
+
+.video-info {
+    font-size: 14px;
+    margin-bottom: 5px;
+}
+
+.video-options {
+    margin-top: 10px;
+}
+
+.video-options button {
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 5px 10px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 14px;
+    margin-right: 5px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+/* narrower than 600px */
+@media (max-width: 600px) {
+    .video-list {
+        grid-template-columns: 1fr;
+    }
 }
\ No newline at end of file
diff --git a/templates/videos.html b/templates/videos.html
index 45d97d3..b5b29d3 100644
--- a/templates/videos.html
+++ b/templates/videos.html
@@ -9,38 +9,33 @@
     <link rel="stylesheet" href="/static/style/videos.css">
 </head>
 
+
+
 <body>
     <h1>Downloaded Videos</h1>
-    <table>
-        <tr>
-            <th>Title</th>
-            <th>Author</th>
-            <th>URL</th>
-            <th>Type</th>
-            <th>Status</th>
-            <th>Actions</th>
-        </tr>
+
+    <div class="video-list">
         {{range .videos}}
-        <tr>
-            <td>
+        <div class="video-card">
+            <div class="video-title">
                 {{if eq .Status "completed"}}
                 <a href="/video/{{.ID}}">{{.Title}}</a>
                 {{else}}
                 {{.Title}}
                 {{end}}
-            </td>
-            <td>{{.Artist}}</td>
-            <td><a href="{{.URL}}">{{.URL}}</a></td>
-            <td>
+            </div>
+            <div class="video-info">{{.Artist}}</div>
+            <div class="video-info"><a href="#">{{.URL}}</a></div>
+            <div class="video-info">{{.Status}}</div>
+            <div class="video-info">
                 {{if .Audio}}
                 Audio
                 {{end}}
                 {{if .Video}}
                 Video
                 {{end}}
-            </td>
-            <td>{{.Status}}</td>
-            <td>
+            </div>
+            <div class="video-options">
                 {{if eq .Status "completed"}}
                 <form action="/video/{{.ID}}/process" method="post" style="display:inline;">
                     <button type="submit">Redo Processing</button>
@@ -54,10 +49,10 @@
                 <form action="/video/{{.ID}}/delete" method="post" style="display:inline;">
                     <button type="submit">Delete</button>
                 </form>
-            </td>
-        </tr>
+            </div>
+        </div>
         {{end}}
-    </table>
+    </div>
     <p><a href="/download">Download New Video</a></p>
     <p><a href="/logout">Logout</a></p>
 
