Create FileList component

src/lib/CardList.svelte

@@ -5,15 +5,17 @@
   let canvasRefs = [];
 </script>
 
-<div id="container" style="width: 100%; heigth: 100vh;">
-  {#each Array.from(files) as file, i}
-    <div class="canvas-container">
-      <canvas bind:this={canvasRefs[i]} class="canvas" />
-      <p>{file.name}</p>
-    </div>
-    {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
-  {/each}
-</div>
+{#if files.length !== 0}
+  <div id="container" style="width: 100%; heigth: 100vh;">
+    {#each Array.from(files) as file, i}
+      <div class="canvas-container">
+        <canvas bind:this={canvasRefs[i]} class="canvas" />
+        <p>{file.name}</p>
+      </div>
+      {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
+    {/each}
+  </div>
+{/if}
 
 <style>
   #container {

src/lib/FileList.svelte

@@ -0,0 +1,33 @@
+<script>
+  export let files = [];
+</script>
+
+{#if files.length !== 0}
+  <div id="selected-files-container">
+    <h2>Selected files:</h2>
+    {#each Array.from(files) as file}
+      <div id="selected-file-card">
+        <p>{file.name} ({file.size / 1000} kb)</p>
+      </div>
+    {/each}
+  </div>
+{/if}
+
+<style>
+  #selected-file-card {
+    border: 1px solid #000;
+    width: 500px;
+    padding-left: 15px;
+    margin-top: 10px;
+  }
+
+  @media only screen and (max-device-width: 812px) {
+    #selected-files-container {
+      width: 100%;
+    }
+
+    #selected-file-card {
+      width: 100%;
+    }
+  }
+</style>

src/lib/FileViewer.svelte

@@ -1,5 +1,6 @@
 <script>
   import CardList from "./CardList.svelte";
+  import FileList from "./FileList.svelte";
 
   let files;
   let filesRendered = false;
@@ -82,19 +83,10 @@
   <input type="submit" value="Render files" />
 </form>
 
-{#if files && files.length !== 0 && !filesRendered}
-  <div id="selected-files-container">
-    <h2>Selected files:</h2>
-    {#each Array.from(files) as file}
-      <div id="selected-file-card">
-        <p>{file.name} ({file.size / 1000} kb)</p>
-      </div>
-    {/each}
-  </div>
-{/if}
-
-{#if files && files.length !== 0 && filesRendered}
+{#if filesRendered}
   <CardList {files} />
+{:else}
+  <FileList {files} />
 {/if}
 
 <style>
@@ -116,13 +108,6 @@
     display: none;
   }
 
-  #selected-file-card {
-    border: 1px solid #000;
-    width: 500px;
-    padding-left: 15px;
-    margin-top: 10px;
-  }
-
   #dropzone:hover {
     cursor: pointer;
     border: 5px dotted #05345f;
@@ -137,13 +122,5 @@
     #dropzone {
       width: 100%;
     }
-
-    #selected-files-container {
-      width: 100%;
-    }
-
-    #selected-file-card {
-      width: 100%;
-    }
   }
 </style>