From 70edf6f11e890521e95c80f04a67e97cc7b4d9e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Leonardo=20Mur=C3=A7a?= <leo@leomurca.xyz>
Date: Fri, 18 Nov 2022 11:56:45 -0300
Subject: [PATCH] Refactor CanvasCard to CardList

---
 src/app.css                                   | 18 ++++++++++
 .../{CanvasCard.svelte => CardList.svelte}    | 32 ++++++++++++-----
 src/lib/FileViewer.svelte                     | 36 ++-----------------
 3 files changed, 43 insertions(+), 43 deletions(-)
 rename src/lib/{CanvasCard.svelte => CardList.svelte} (50%)

diff --git a/src/app.css b/src/app.css
index ab1414c..227035f 100644
--- a/src/app.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/lib/CanvasCard.svelte b/src/lib/CardList.svelte
similarity index 50%
rename from src/lib/CanvasCard.svelte
rename to src/lib/CardList.svelte
index 5154225..cc47925 100644
--- a/src/lib/CanvasCard.svelte
+++ b/src/lib/CardList.svelte
@@ -5,16 +5,26 @@
   let canvasRefs = [];
 </script>
 
-{#each Array.from(files) as file, i}
-  <div class="container">
-    <canvas bind:this={canvasRefs[i]} class="canvas" />
-    <p>{file.name}</p>
-  </div>
-  {canvasRefs[i] && startFileRead(file, canvasRefs[i])}
-{/each}
+<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>
 
 <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>
diff --git a/src/lib/FileViewer.svelte b/src/lib/FileViewer.svelte
index 2b5d9ea..45e1574 100644
--- a/src/lib/FileViewer.svelte
+++ b/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;">
-    <CanvasCard {files} />
-  </div>
+  <CardList {files} />
 {/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>