From 3f4452b8a8e0dbf5c84719a0e86421a22b135efd Mon Sep 17 00:00:00 2001
From: kjj6198 <kjj6198@gmail.com>
Date: Sun, 22 Nov 2020 02:39:29 +0900
Subject: [PATCH] Added footer and loading

---
 public/global.css  |  4 ++++
 src/API.svelte     | 10 +++++++--
 src/App.svelte     |  3 +++
 src/Footer.svelte  | 37 +++++++++++++++++++++++++++++++
 src/Loading.svelte | 55 ++++++++++++++++++++++++++++++++++++++++++++++
 src/Section.svelte |  1 +
 6 files changed, 108 insertions(+), 2 deletions(-)
 create mode 100644 src/Footer.svelte
 create mode 100644 src/Loading.svelte

diff --git a/public/global.css b/public/global.css
index 65cf746..2401480 100644
--- a/public/global.css
+++ b/public/global.css
@@ -16,6 +16,10 @@ html {
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 }
 
+p {
+  line-height: 1.67;
+}
+
 *,
 *:before,
 *:after {
diff --git a/src/API.svelte b/src/API.svelte
index 2587627..47afaf4 100644
--- a/src/API.svelte
+++ b/src/API.svelte
@@ -1,5 +1,7 @@
 <script>
   import { onMount, createEventDispatcher } from "svelte";
+  import { fade } from "svelte/transition";
+  import Loading from "./Loading.svelte";
   const dispatch = createEventDispatcher();
   let loaded = false;
   let data;
@@ -24,5 +26,9 @@
 </script>
 
 {#if loaded}
-  <slot />
-{:else}<span>loading</span>{/if}
+  <div in:fade>
+    <slot />
+  </div>
+{:else}
+  <Loading height={400} />
+{/if}
diff --git a/src/App.svelte b/src/App.svelte
index d7c80ea..b615aaa 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,6 +1,7 @@
 <script>
   import BackgroundImage from "./BackgroundImage.svelte";
   import ByPlaceChart from "./ByPlaceChart.svelte";
+  import Footer from "./Footer.svelte";
   import GenderChart from "./GenderChart.svelte";
   import RelationshipChart from "./RelationshipChart.svelte";
   import Section from "./Section.svelte";
@@ -71,3 +72,5 @@
     <SexualCaseMap />
   </Section>
 </main>
+
+<Footer />
diff --git a/src/Footer.svelte b/src/Footer.svelte
new file mode 100644
index 0000000..5226679
--- /dev/null
+++ b/src/Footer.svelte
@@ -0,0 +1,37 @@
+<style>
+  footer {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 200px;
+    margin: 3rem 0;
+  }
+
+  .container {
+    width: 600px;
+    margin: auto;
+  }
+
+  ul {
+    text-align: center;
+    list-style: none;
+    padding: 0;
+  }
+
+  li {
+    margin-bottom: 10px;
+  }
+</style>
+
+<footer>
+  <div class="container">
+    <ul>
+      <li>資料整理、設計：@kalan</li>
+      <li>程式：@kalan</li>
+      <li>
+        資料來源：<a
+          href="https://dep.mohw.gov.tw/dops/lp-1303-105-xCat-cat02.html">衛生福利部</a>
+      </li>
+    </ul>
+  </div>
+</footer>
diff --git a/src/Loading.svelte b/src/Loading.svelte
new file mode 100644
index 0000000..19e8817
--- /dev/null
+++ b/src/Loading.svelte
@@ -0,0 +1,55 @@
+<script>
+  export let height;
+</script>
+
+<style>
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 80px;
+  }
+  .lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    margin: 8px;
+    border: 8px solid var(--sub);
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: var(--sub) transparent transparent transparent;
+  }
+  .lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+  }
+  .lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+  }
+  .lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+  }
+  @keyframes lds-ring {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>
+
+<div class="wrapper" style={height ? `height: ${height}px` : null}>
+  <div class="lds-ring">
+    <div />
+    <div />
+    <div />
+    <div />
+  </div>
+</div>
diff --git a/src/Section.svelte b/src/Section.svelte
index 0ab43c5..80ed877 100644
--- a/src/Section.svelte
+++ b/src/Section.svelte
@@ -28,6 +28,7 @@
 
   .issue {
     position: absolute;
+    z-index: 0;
     right: 20px;
     top: 20px;
     font-size: 4rem;