Video page styling

static/style/video.css

@@ -1,4 +1,4 @@
-.video-container {
+/* .video-container {
     max-width: 600px;
     margin: 0 auto;
 }
@@ -18,4 +18,62 @@ video {
     video {
         max-width: 100%;
     }
+} */
+
+
+/* new stuff */
+
+.media-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    margin-bottom: 1rem;
+}
+
+.media-card {
+    background-color: white;
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.media-card h3 {
+    padding: 15px;
+    margin: 0;
+    font-size: 18px;
+    background-color: #f8f8f8;
+}
+
+.audio-container audio {
+    width: 100%;
+}
+
+.video-container video {
+    width: 100%;
+    max-width: 600px;
+    display: block;
+    margin: 0 auto;
+}
+
+.media-download {
+    padding: 15px;
+    text-align: center;
+}
+
+.media-download a {
+    display: inline-block;
+    padding: 10px 15px;
+    background-color: #007bff;
+    color: white;
+    text-decoration: none;
+    border-radius: 4px;
+}
+
+/* narrower than 600px */
+@media (max-width: 600px) {
+    .media-grid {
+        grid-template-columns: 1fr;
+    }
 }

templates/video.html

@@ -5,6 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{.original.Title}}</title>
+    <link rel="stylesheet" href="/static/style/common.css">
     <link rel="stylesheet" href="/static/style/video.css">
     {{template "footer-css" .}}
 </head>
@@ -13,31 +14,39 @@
 
     <h1>{{.original.Title}}</h1>
 
-    {{range .videos}}
+    <div class="media-grid">
-    <h2>{{.Source}} {{.Width}} x {{.Height}} @ {{.FPS}}</h2>
+        {{range .videos}}
-    <div class="video-container">
+        <div class="media-card">
-        <video controls playsinline preload="none">
+            <h3>{{.Source}} {{.Width}} x {{.Height}} @ {{.FPS}}</h3>
-            <source src="/temp/{{.Token}}" type="video/mp4">
+            <div class="video-container">
-            Your browser does not support the video tag.
+                <video controls playsinline preload="none">
-        </video>
+                    <source src="/temp/{{.Token}}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <div class="media-download">
+                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
+            </div>
+        </div>
+        {{end}}
     </div>
-    <div class="video-download">
+    <div class="media-grid">
-        <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
+        {{range .audios}}
+        <div class="media-card">
+            <h3>{{.Kbps}}</h3>
+            <div class="audio-container">
+                <audio controls playsinline preload="none">
+                    <source src="/temp/{{.Token}}">
+                    Your browser does not support the audio tag.
+                </audio>
+            </div>
+            <div class="media-download">
+                <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
+            </div>
+        </div>
+        {{end}}
     </div>
-    {{end}}
 
-    {{range .audios}}
-    <h2>{{.Kbps}}</h2>
-    <div class="audio-container">
-        <audio controls playsinline preload="none">
-            <source src="/temp/{{.Token}}">
-            Your browser does not support the audio tag.
-        </audio>
-    </div>
-    <div class="audio-download">
-        <a href="/data/{{.Filename}}" download="{{.DownloadFilename}}">Download ({{.Size}}, {{.StreamRate}})</a>
-    </div>
-    {{end}}
 
     <script src="/static/script/save-media-progress.js"></script>