Show a curtain like a closing mall?

electinth · Mar 23, 2019 · b58d3b9 · b58d3b9
1 parent 8954854
commit b58d3b9
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/components/MainLayout.js b/src/components/MainLayout.js
@@ -13,6 +13,7 @@ import { useSummaryData } from "../models/LiveDataSubscription"
 import moment from "moment"
 import { DeveloperPanel, useLocalStorageFlag } from "../models/DeveloperOptions"
 import Placeholder from "./Placeholder"
+import { keyframes } from "@emotion/core"
 
 /**
  * @param {object} props
@@ -218,6 +219,7 @@ function CountdownCurtain({ location }) {
           alignItems: "center",
           justifyContent: "center",
           textAlign: "center",
+          animation: `3s ${curtainAnimation} linear`,
         }}
       >
         <div>
@@ -226,8 +228,6 @@ function CountdownCurtain({ location }) {
           }
           รอลุ้นผลการเลือกตั้งแบบเรียลไทม์ไปพร้อมกัน
           <br />
-          พรุ่งนี้นะๆ ^_^
-          <br />
           <Countdown />
           {(location.hostname === "localhost" ||
             location.hostname === "127.0.0.1") && (
@@ -247,6 +247,11 @@ function CountdownCurtain({ location }) {
   return null
 }
 
+const curtainAnimation = keyframes({
+  "0%": { transform: "translateY(-120%)" },
+  "100%": { transform: "translateY(0%)" },
+})
+
 function Logo() {
   return (
     <Link