chore(front/file-uploader): remove unnecessary css, container, update col-grow class names
This commit is contained in:
parent
1b5e088d74
commit
c025aa2539
@ -71,23 +71,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
:global(button) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
:global(button .icon) {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
:global(button .tip) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.new-files {
|
||||
h3 {
|
||||
text-align: center;
|
||||
@ -116,130 +99,128 @@
|
||||
<BaseTemplate title="{$locals.app.name} - Upload file" description="File upload web interface." noH1>
|
||||
<h1>Upload files</h1>
|
||||
|
||||
<div class="container">
|
||||
<section class="panel">
|
||||
<h2>
|
||||
<Icon name="upload"/>
|
||||
Upload files
|
||||
</h2>
|
||||
<p>You are responsible for the files that you upload.</p>
|
||||
<section class="panel">
|
||||
<h2>
|
||||
<Icon name="upload"/>
|
||||
Upload files
|
||||
</h2>
|
||||
<p>You are responsible for the files that you upload.</p>
|
||||
|
||||
|
||||
<div class="upload-form-container" class:disabled={uploading}>
|
||||
<Form action={route('post-file-frontend')} withFiles
|
||||
submitText="Upload" submitIcon="upload"
|
||||
onSubmit={uploadFiles}>
|
||||
<Field type="file" name="upload" placeholder="Choose wisely" icon="file"
|
||||
hint="The maximum upload size is {$locals.max_upload_size} MiB"
|
||||
multiple required
|
||||
bind:fileList={selectedFiles}/>
|
||||
<div class="upload-form-container" class:disabled={uploading}>
|
||||
<Form action={route('post-file-frontend')} withFiles
|
||||
submitText="Upload" submitIcon="upload"
|
||||
onSubmit={uploadFiles}>
|
||||
<Field type="file" name="upload" placeholder="Choose wisely" icon="file"
|
||||
hint="The maximum upload size is {$locals.max_upload_size} MiB"
|
||||
multiple required
|
||||
bind:fileList={selectedFiles}/>
|
||||
|
||||
<Field type="checkbox" name="never_expire" placeholder="Never delete this file"
|
||||
icon="infinity"
|
||||
bind:value={neverExpire}/>
|
||||
{#if !neverExpire}
|
||||
<Field type="number" name="expire_after_days" icon="clock"
|
||||
placeholder="How many days to delete this file after"
|
||||
initialValue={30} max="1825"/>
|
||||
<Field type="checkbox" name="never_expire" placeholder="Never delete this file"
|
||||
icon="infinity"
|
||||
bind:value={neverExpire}/>
|
||||
{#if !neverExpire}
|
||||
<Field type="number" name="expire_after_days" icon="clock"
|
||||
placeholder="How many days to delete this file after"
|
||||
initialValue={30} max="1825"/>
|
||||
{/if}
|
||||
|
||||
{#if !selectedFiles || selectedFiles.length <= 1}
|
||||
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
|
||||
icon="zap"
|
||||
bind:value={autogenUrl} initialValue={true}/>
|
||||
{#if !autogenUrl}
|
||||
<Field type="text" name="slug" placeholder="Custom url slug" icon="link"
|
||||
hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
|
||||
{/if}
|
||||
|
||||
{#if !selectedFiles || selectedFiles.length <= 1}
|
||||
<Field type="checkbox" name="autogen_url" placeholder="Generate url automatically"
|
||||
icon="zap"
|
||||
bind:value={autogenUrl} initialValue={true}/>
|
||||
{#if !autogenUrl}
|
||||
<Field type="text" name="slug" placeholder="Custom url slug" icon="link"
|
||||
hint="Example: beautiful_image.jpg sets url to https://{$locals.default_domain}/beautiful_image.jpg"/>
|
||||
{/if}
|
||||
{:else}
|
||||
<Message type="info" discreet sticky
|
||||
content="When upload multiple files, URLs will be generated automatically."/>
|
||||
{/if}
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
{#if uploading}
|
||||
<FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
|
||||
onEnd={onUploadEnd} autostart/>
|
||||
{/if}
|
||||
|
||||
{#if finishedFileUploads.length > 0}
|
||||
<section class="sub-panel new-files">
|
||||
<hr>
|
||||
<h3>
|
||||
<Icon name="file-check"/>
|
||||
Newly uploaded files
|
||||
</h3>
|
||||
|
||||
{#each finishedFileUploads as fileUpload}
|
||||
<CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if $locals.flash.url}
|
||||
<CopyableText title="URL" content={$locals.flash.url}/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
<section class="panel">
|
||||
<h2>
|
||||
<Icon name="folder"/>
|
||||
File list
|
||||
</h2>
|
||||
|
||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||
|
||||
<table class="data-table file-upload-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th class="table-col-grow">Name</th>
|
||||
<th>Size</th>
|
||||
<th>Expires in</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each $locals.files as file}
|
||||
<tr>
|
||||
<td>{file.id}</td>
|
||||
<td class="table-col-grow-cell"><a href="{file.url}">
|
||||
<pre>{file.real_name}</pre>
|
||||
</a></td>
|
||||
<td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
|
||||
<td>
|
||||
{#if file.expires_at}
|
||||
<time datetime="{file.expires_at}" title="{file.expires_at}">
|
||||
{Time.humanizeTimeTo(new Date(file.expires_at))}
|
||||
</time>
|
||||
{:else}
|
||||
Never
|
||||
{/if}
|
||||
</td>
|
||||
<td class="actions">
|
||||
{#if file.shouldBeDeleted}
|
||||
Pending deletion
|
||||
{:else}
|
||||
<CopyableText content="{file.url}" buttonMode/>
|
||||
|
||||
<Form action={route('delete-file-frontend', file.slug)} button
|
||||
submitIcon="trash" submitText="delete" submitClass="danger"
|
||||
confirm="Are you sure you want to delete file {file.real_name}?"/>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<Message type="info" discreet sticky
|
||||
content="When upload multiple files, URLs will be generated automatically."/>
|
||||
{/if}
|
||||
</Form>
|
||||
</div>
|
||||
|
||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||
</section>
|
||||
</div>
|
||||
{#if uploading}
|
||||
<FileUpload file={currentFile} form={uploadForm} fileFieldName="upload"
|
||||
onEnd={onUploadEnd} autostart/>
|
||||
{/if}
|
||||
|
||||
{#if finishedFileUploads.length > 0}
|
||||
<section class="sub-panel new-files">
|
||||
<hr>
|
||||
<h3>
|
||||
<Icon name="file-check"/>
|
||||
Newly uploaded files
|
||||
</h3>
|
||||
|
||||
{#each finishedFileUploads as fileUpload}
|
||||
<CopyableText title="{fileUpload.name}" content="{fileUpload.finalUrl}"/>
|
||||
{/each}
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
{#if $locals.flash.url}
|
||||
<CopyableText title="URL" content={$locals.flash.url}/>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
|
||||
<section class="panel">
|
||||
<h2>
|
||||
<Icon name="folder"/>
|
||||
File list
|
||||
</h2>
|
||||
|
||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||
|
||||
<table class="data-table file-upload-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>#</th>
|
||||
<th class="col-grow">Name</th>
|
||||
<th>Size</th>
|
||||
<th>Expires in</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{#each $locals.files as file}
|
||||
<tr>
|
||||
<td>{file.id}</td>
|
||||
<td class="col-grow-cell"><a href="{file.url}">
|
||||
<pre>{file.real_name}</pre>
|
||||
</a></td>
|
||||
<td>{(file.size / (1024 * 1024)).toFixed(2)}MB</td>
|
||||
<td>
|
||||
{#if file.expires_at}
|
||||
<time datetime="{file.expires_at}" title="{file.expires_at}">
|
||||
{Time.humanizeTimeTo(new Date(file.expires_at))}
|
||||
</time>
|
||||
{:else}
|
||||
Never
|
||||
{/if}
|
||||
</td>
|
||||
<td class="actions">
|
||||
{#if file.shouldBeDeleted}
|
||||
Pending deletion
|
||||
{:else}
|
||||
<CopyableText content="{file.url}" buttonMode/>
|
||||
|
||||
<Form action={route('delete-file-frontend', file.slug)} button
|
||||
submitIcon="trash" submitText="delete" submitClass="danger"
|
||||
confirm="Are you sure you want to delete file {file.real_name}?"/>
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{:else}
|
||||
<tr>
|
||||
<td colspan="5" class="center">You haven't uploaded any file yet.</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<Pagination pagination={$locals.pagination} routeName="file-uploader" contextSize={3}/>
|
||||
</section>
|
||||
</BaseTemplate>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user