Adjust junk drawer styles

This commit is contained in:
2024-10-01 18:18:39 -06:00
parent 9394e1cc5a
commit 9090a07aa5
4 changed files with 87 additions and 51 deletions

View File

@@ -40,6 +40,13 @@ export class JunkDrawerController {
@Render('junk-drawer/view')
async viewJunkDrawer(@Param('slug') slug: string): Promise<any> {
const metadata = await this.junkDrawerService.getJunkDrawerMetadata(slug);
if (!metadata) {
return { error: 'File not found or expired' };
}
metadata.items = metadata.items.map((item) => ({
...item,
isImage: item.mimetype.startsWith('image/'),
}));
return { ...metadata };
}

View File

@@ -1,15 +0,0 @@
<div>
<h1>Upload Result</h1>
<p>File uploaded successfully.</p>
<p>{{description}}</p>
<p>Right-click copy: <a href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
{{#if items}}
<p>Files:</p>
<ul>
{{#each items}}
<li><a target="_blank" href='/junk-drawer/{{../slug}}/{{filename}}'>{{filename}}</a></li>
{{/each}}
</ul>
{{/if}}
<p><a href='/junk-drawer'>Upload another file</a></p>
</div>

View File

@@ -1,22 +1,43 @@
<form method='post' action='/junk-drawer/upload' enctype='multipart/form-data'>
<html>
<head>
<meta charset='utf-8' />
<title>Junk Drawer</title>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body>
<form
method='post'
action='/junk-drawer/upload'
enctype='multipart/form-data'
>
<div>
<label for='files'>Choose files to upload</label>
<input type='file' id='files' name='files' multiple />
</div>
<div>
<label for='private-ish'>Private-ish</label>
<label
class='cursor-help'
title='Append a random-ish string to the ID to make it harder to find via enumeration'
for='private-ish'
>Private-ish</label>
<input type='checkbox' id='private-ish' name='private-ish' />
</div>
<div style='display:flex; flex-direction:column;'>
<label for='description'>Description</label>
<div class='flex flex-col'>
<label for='description'>Description:</label>
<textarea
type='text'
id='description'
name='description'
rows='4'
autofocus
class='border-2 rounded-md border-slate-800 border-solid p-1'
></textarea>
</div>
<div>
<button>Submit</button>
<button class='border-2 rounded-md border-slate-800 p-1'>Submit</button>
</div>
</form>
</form>
</body>
</html>

View File

@@ -1,16 +1,39 @@
<div>
<h1>Junk Drawer Item</h1>
<html>
</html>
<head>
<meta charset='utf-8' />
<title>Junk Drawer</title>
<script src='https://cdn.tailwindcss.com'></script>
</head>
<body>
<div>
<h1 class="text-xl">Junk Drawer Item</h1>
<p>The junk drawer item was uploaded {{lastModified}}</p>
<h2>Description</h2>
<p>{{description}}</p>
<p>Right-click copy: <a href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
<p class="bg-slate-100 px-2 py-4">{{description}}</p>
<p>Right-click copy: <a class="text-blue-500 underline" href='/junk-drawer/{{slug}}'>{{slug}}</a></p>
{{#if items}}
<p>Files:</p>
<ul>
<p class="text-lg">Files:</p>
<div class="list-disc list-inside ml-1">
{{#each items}}
<li><a href='/junk-drawer/{{../slug}}/{{filename}}'>{{filename}}</a></li>
{{/each}}
</ul>
<div>
<a target="_blank" class="text-emerald-600" href='/junk-drawer/{{../slug}}/{{filename}}'>
<p>
{{filename}}
</p>
{{#if isImage}}
<img height="150" width="150" src='/junk-drawer/{{../slug}}/{{filename}}' alt='{{filename}}' />
{{/if}}
<p><a href='/junk-drawer'>Upload another file</a></p>
</div>
</a>
</div>
{{/each}}
</div>
{{/if}}
<p><a class="text-blue-500 underline" href='/junk-drawer'>Upload another file</a></p>
</div>
</body>
</html>