style updates

Author: dshomoye

public/global.css

@@ -1,63 +0,0 @@
-html, body {
-	position: relative;
-	width: 100%;
-	height: 100%;
-}
-
-body {
-	color: #333;
-	margin: 0;
-	padding: 8px;
-	box-sizing: border-box;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-}
-
-a {
-	color: rgb(0,100,200);
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-}
-
-a:visited {
-	color: rgb(0,80,160);
-}
-
-label {
-	display: block;
-}
-
-input, button, select, textarea {
-	font-family: inherit;
-	font-size: inherit;
-	-webkit-padding: 0.4em 0;
-	padding: 0.4em;
-	margin: 0 0 0.5em 0;
-	box-sizing: border-box;
-	border: 1px solid #ccc;
-	border-radius: 2px;
-}
-
-input:disabled {
-	color: #ccc;
-}
-
-button {
-	color: #333;
-	background-color: #f4f4f4;
-	outline: none;
-}
-
-button:disabled {
-	color: #999;
-}
-
-button:not(:disabled):active {
-	background-color: #ddd;
-}
-
-button:focus {
-	border-color: #666;
-}

src/App.svelte

@@ -4,50 +4,76 @@
   import vCard from "vcf";
   import cntl from "cntl";
   import UploadIcon from "./UploadIcon.svelte";
+  import DownloadIcon from "./DownloadIcon.svelte";
+  import {fly} from "svelte/transition"
 
   const fReader = new FileReader();
   /**@type {vCard[]} */
   let contacts = [];
 
+  /**
+   * @typedef UpdatePayload
+   * @property {Number} index
+   * @property {string} blob
+   */
+
+  /**
+   * @type {Object<string,UpdatePayload>}
+   */
+  let contactsToUpdate = {};
+
   const uploadBtnStyle = cntl`
 	flex flex-col items-center p-4 bg-white 
 	text-blue rounded-lg shadow-sm tracking-wide 
 	uppercase border border-blue cursor-pointer 
 	hover:bg-blue-400 hover:text-white hover:shadow-lg
 	transform hover:scale-105 transition duration-200
-	`;
+  `;
+
+  const addToUpdate = (index, blob) => {
+    contactsToUpdate[index] = {
+      index,
+      blob,
+    };
+  };
+
+  const removeFromUpdate = (index) => {
+    contactsToUpdate[index] = null;
+    delete contactsToUpdate[index];
+  };
 
   fReader.onload = (e) => {
     if (e.target.readyState != 2) return;
-    if (e.target.error) {
-      alert("Error Reading file.");
-      return;
-    }
     try {
-      contacts = vCard.parse(e.target.result);
+      contacts = vCard.parse(e.target.result).filter((vc) => {
+        return !(vc.data.photo && vc.data.photo.valueOf());
+      });
     } catch (error) {
-      alert("Error reading contact(s).");
+      alert("Error reading contact(s) from file.");
     }
   };
 </script>
 
-<main class="container text-center mx-auto px-24">
-  <h1 class="uppercase text-red-500 font-bold text-5xl mt-12 mb-4 underline">
+<main class="container text-center mx-auto lg:p-24 p-5 min-h-screen">
+  <h1 class="uppercase text-red-500 font-bold text-5xl mb-4 underline">
     🖼 Image 💪🏾 Contact 📇
   </h1>
   {#if contacts && contacts.length > 0}
     <div>
       <p class="text-sm">Start Over?</p>
       <button
         on:click={() => (contacts = [])}
-        class="px-3 py-2 rounded shadow-sm m-1 mb-5 transition duration-200 hover:bg-red-400 transform hover:scale-105">Clear
-        ❌
+        class={cntl`px-3 py-2 rounded 
+          shadow-sm m-1 mb-5 transition 
+          duration-200 hover:bg-red-400 
+          transform hover:scale-105 border-red-900 border`}>
+          Clear ❌
       </button>
     </div>
   {:else}
-    <div>
-      <p class="text-md py-4 lowercase">Click Below to continue</p>
-      <div class="flex items-center justify-center bg-grey-lighter mb-12">
+    <div class="mb-12">
+      <p class="text-md py-4">Click Below to continue</p>
+      <div class="flex items-center justify-center bg-grey-lighter">
         <label class={uploadBtnStyle}>
           <UploadIcon />
           <span class="mt-2 text-sm leading-normal">Select vcard file</span>
@@ -58,13 +84,42 @@
             accept=".vcf" />
         </label>
       </div>
+      <p class="block text-sm py-4">
+        Only contacts without photos will be loaded.
+      </p>
     </div>
   {/if}
-  <div class="grid grid-cols-2 lg:grid-cols-3 gap-12">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12 lg:gap-16 px-8">
     {#each contacts as contact, i}
       {#if contact.data.fn.valueOf() && true}
-        <ContactCard name={contact.data.fn.valueOf()} />
+        <ContactCard
+          name={contact.data.fn.valueOf()}
+          on:applyphoto={(e) => addToUpdate(`${i}`, e.detail.data)}
+          on:unapplyphoto={() => removeFromUpdate(`${i}`)} />
       {/if}
     {/each}
   </div>
+  {#if contacts && contacts.length > 0}
+      <button 
+        transition:fly={{y: 100, duration: 1000}}
+        class={cntl`rounded-full bg-blue-500 p-5 
+        text-white shadow-xl transform transition 
+        hover:scale-110 hover:shadow-2xl fixed 
+        fab focus:outline-none`}
+        >
+        <DownloadIcon />
+      </button>
+  {/if}
 </main>
+
+<style>
+  .fab {
+    right: 2rem;
+    bottom: 2rem;
+  }
+  @media(min-width: 768px) {
+    .fab {
+      right: 8rem;
+    }
+  }
+</style>

src/ContactCard.svelte

@@ -2,18 +2,19 @@
   import "a-avataaar";
   import { blur } from "svelte/transition";
   import cntl from "cntl";
-  import { onMount } from "svelte";
+  import { onMount, createEventDispatcher } from "svelte";
   import { updateSVgWithStyle } from "./utils";
   import Canvg from "canvg";
   import DownloadIcon from "./DownloadIcon.svelte";
 
-  export const name = "John Smith";
-  export const contactIndex = null;
+  const dispatch = createEventDispatcher()
+
+  export let name = "John Smith";
+
   let svgFile = "";
   let canvasRef;
   let svgString;
   let svgCtx;
-  let pngBlob;
   let applyImage = false;
 
   onMount(() => {
@@ -33,17 +34,18 @@
       shadow bg-transparent hover:bg-blue-400
       hover:text-white focus:shadow-outline 
       focus:outline-none px-4 py-2 rounded 
-      text-sm cursor-pointer no-underline 
+      text-sm cursor-pointer no-underline
+      border border-gray-700 hover:border-gray-300
       hover:no-underline ${applyImage ? `bg-white` : `bg-transparent`}
       `;
   }
 
-  const setImageBlob = (event) => {
-    applyImage = event.target.checked;
+  const handleCheck = () => {
     if (applyImage) {
       Canvg.fromString(svgCtx, svgString).render();
-      pngBlob = canvasRef.toDataURL("image/png");
-      console.log("set image blob");
+      dispatch("applyphoto", {data: canvasRef.toDataURL("image/png").split(';base64,')[1]})
+    } else {
+      dispatch("unapplyphoto")
     }
   };
 
@@ -60,17 +62,26 @@
   .card {
     min-width: 160px;
   }
+  .avatar {
+    --avataaar-width: 80px;
+  }
+
+  @media(min-width: 768px) {
+    .card {
+      min-width: 120px;
+    }
+  }
 </style>
 
 <div
   class="transform hover:scale-105 transition duration-200 ease-in"
   transition:blur>
   <div class="rounded-full">
-    <a-avataaar identifier={name} on:svgchange={handleSvgChange} />
+    <a-avataaar identifier={name} on:svgchange={handleSvgChange} class="avatar" />
   </div>
   <div class={cardStyle}>
     <p>{name}</p>
-    <hr class="border-gray-500" />
+    <hr class="border-gray-500 my-2" />
     <div class="flex mt-5 items-center">
       <div class="m-auto">
         <a
@@ -91,7 +102,8 @@
             class="mr-1 leading-tight"
             type="checkbox"
             download={`${name}-avatar.svg`}
-            on:change={setImageBlob} />
+            bind:checked={applyImage}
+            on:change={handleCheck} />
           <span>{applyImage ? 'Remove' : 'Update'}</span>
         </label>
       </div>