From c025aa2539d44af79ce74b301f0d0135e94ef0b7 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sat, 5 Mar 2022 10:11:19 +0100
Subject: [PATCH] chore(front/file-uploader): remove unnecessary css,
 container, update col-grow class names

---
 src/assets/views/file-uploader.svelte | 255 ++++++++++++--------------
 1 file changed, 118 insertions(+), 137 deletions(-)

diff --git a/src/assets/views/file-uploader.svelte b/src/assets/views/file-uploader.svelte
index e94676e..ca1c34e 100644
--- a/src/assets/views/file-uploader.svelte
+++ b/src/assets/views/file-uploader.svelte
@@ -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>