Refactor CanvasCard to CardList

src/app.css

@@ -29,4 +29,22 @@ body {
   width: 100%;
   background-color: #F2F6F5;
   z-index: 10;
+}
+
+input[type="submit"] {
+  width: 100%;
+  font-size: 20px;
+  margin-top: 20px;
+  background-color: #05345f;
+  font-weight: 700;
+  color: white;
+  padding: 10px;
+  -webkit-appearance: none;
+  border-radius: 0;
+}
+
+input[type="submit"]:hover {
+  cursor: pointer;
+  background-color: black;
+  color: white;
 }

src/lib/CardList.svelte

@@ -5,16 +5,26 @@
   let canvasRefs = [];
 </script>
 
-{#each Array.from(files) as file, i}
+<div id="container" style="width: 100%; heigth: 100vh;">
-  <div class="container">
+  {#each Array.from(files) as file, i}
-    <canvas bind:this={canvasRefs[i]} class="canvas" />
+    <div class="canvas-container">
-    <p>{file.name}</p>
+      <canvas bind:this={canvasRefs[i]} class="canvas" />
-  </div>
+      <p>{file.name}</p>
-  {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
+    </div>
-{/each}
+    {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
+  {/each}
+</div>
 
 <style>
-  .container {
+  #container {
+    display: flex;
+    width: 100%;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+    margin-top: 50px;
+  }
+
+  .canvas-container {
     display: flex;
     flex-direction: column;
     justify-content: center;
@@ -33,9 +43,13 @@
   }
 
   @media only screen and (max-device-width: 812px) {
-    .container {
+    .canvas-container {
       width: 100%;
       height: 400px;
     }
+
+    #container {
+      width: 100%;
+    }
   }
 </style>

src/lib/FileViewer.svelte

@@ -1,5 +1,5 @@
 <script>
-  import CanvasCard from "./CanvasCard.svelte";
+  import CardList from "./CardList.svelte";
 
   let files;
   let filesRendered = false;
@@ -94,30 +94,10 @@
 {/if}
 
 {#if files && files.length !== 0 && filesRendered}
-  <div id="canvas-container" style="width: 100%; heigth: 100vh;">
+  <CardList {files} />
-    <CanvasCard {files} />
-  </div>
 {/if}
 
 <style>
-  input[type="submit"] {
-    width: 100%;
-    font-size: 20px;
-    margin-top: 20px;
-    background-color: #05345f;
-    font-weight: 700;
-    color: white;
-    padding: 10px;
-    -webkit-appearance: none;
-    border-radius: 0;
-  }
-
-  input[type="submit"]:hover {
-    cursor: pointer;
-    background-color: black;
-    color: white;
-  }
-
   #dropzone {
     display: flex;
     height: 100px;
@@ -143,14 +123,6 @@
     margin-top: 10px;
   }
 
-  #canvas-container {
-    display: flex;
-    width: 100%;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-    margin-top: 50px;
-  }
-
   #dropzone:hover {
     cursor: pointer;
     border: 5px dotted #05345f;
@@ -173,9 +145,5 @@
     #selected-file-card {
       width: 100%;
     }
-
-    #canvas-container {
-      width: 100%;
-    }
   }
 </style>