cwpearson/ytdlp-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better video list formatting

Browse Source
This commit is contained in:
Carl Pearson
2024-09-20 06:04:41 -06:00
parent 0eb077a85b
commit 3684753e9b
2 changed files with 59 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
static/style/videos.css
View File

@@ -1,15 +1,49 @@
table { .video-list {
width: 100%; display: grid;
border-collapse: collapse; /* each col is at least 300px, but can grow to 100% wide */
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
} }
th, .video-card {
td {
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 8px; border-radius: 8px;
text-align: left; padding: 15px;
background-color: #f9f9f9;
} }
th { .video-title {
background-color: #f2f2f2; 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;
}
} }

37
templates/videos.html
View File

@@ -9,38 +9,33 @@
<link rel="stylesheet" href="/static/style/videos.css"> <link rel="stylesheet" href="/static/style/videos.css">
</head> </head>
<body> <body>
<h1>Downloaded Videos</h1> <h1>Downloaded Videos</h1>
<table>
<tr> <div class="video-list">
<th>Title</th>
<th>Author</th>
<th>URL</th>
<th>Type</th>
<th>Status</th>
<th>Actions</th>
</tr>
{{range .videos}} {{range .videos}}
<tr> <div class="video-card">
<td> <div class="video-title">
{{if eq .Status "completed"}} {{if eq .Status "completed"}}
<a href="/video/{{.ID}}">{{.Title}}</a> <a href="/video/{{.ID}}">{{.Title}}</a>
{{else}} {{else}}
{{.Title}} {{.Title}}
{{end}} {{end}}
</td> </div>
<td>{{.Artist}}</td> <div class="video-info">{{.Artist}}</div>
<td><a href="{{.URL}}">{{.URL}}</a></td> <div class="video-info"><a href="#">{{.URL}}</a></div>
<td> <div class="video-info">{{.Status}}</div>
<div class="video-info">
{{if .Audio}} {{if .Audio}}
Audio Audio
{{end}} {{end}}
{{if .Video}} {{if .Video}}
Video Video
{{end}} {{end}}
</td> </div>
<td>{{.Status}}</td> <div class="video-options">
<td>
{{if eq .Status "completed"}} {{if eq .Status "completed"}}
<form action="/video/{{.ID}}/process" method="post" style="display:inline;"> <form action="/video/{{.ID}}/process" method="post" style="display:inline;">
<button type="submit">Redo Processing</button> <button type="submit">Redo Processing</button>
@@ -54,10 +49,10 @@
<form action="/video/{{.ID}}/delete" method="post" style="display:inline;"> <form action="/video/{{.ID}}/delete" method="post" style="display:inline;">
<button type="submit">Delete</button> <button type="submit">Delete</button>
</form> </form>
</td> </div>
</tr> </div>
{{end}} {{end}}
</table> </div>
<p><a href="/download">Download New Video</a></p> <p><a href="/download">Download New Video</a></p>
<p><a href="/logout">Logout</a></p> <p><a href="/logout">Logout</a></p>