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 {
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;
}
}

37
templates/videos.html
View File

@@ -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>