Implementing client side validation

1 files changed, 50 insertions, 9 deletions

diff --git a/server/src/Design/Global.hs b/server/src/Design/Global.hs
index ba4ccb7..66e9f47 100644
--- a/server/src/Design/Global.hs
+++ b/server/src/Design/Global.hs
@@ -3,6 +3,7 @@ module Design.Global
   ) where
 
 import           Clay
+import           Clay.Color       as C
 import           Data.Text.Lazy   (Text)
 
 import qualified Design.Color     as Color
@@ -26,8 +27,16 @@ global = do
   Views.design
   Form.design
 
+  spinKeyframes
+  appearKeyframe
+
+  html ? do
+    height (pct 100)
+
   body ? do
+    position relative
     minWidth (px 320)
+    height (pct 100)
     fontFamily ["Cantarell"] [sansSerif]
     ".modal" &
       overflowY hidden
@@ -40,6 +49,28 @@ global = do
       button ? fontSize (px 14)
       input ? fontSize (px 14)
 
+  ".app" ? do
+    appearAnimation
+
+  ".spinner" ? do
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    height (pct 100)
+    paddingBottom (pct 10)
+
+    before & do
+      display block
+      content (stringContent "")
+      width (px 50)
+      height (px 50)
+      border solid (px 3) (C.setA 0.3 Color.chestnutRose)
+      sym borderRadius (pct 50)
+      borderTopColor Color.chestnutRose
+      spinKeyframes
+      spinAnimation
+
   a ? cursor pointer
 
   input ? fontSize inherit
@@ -87,21 +118,31 @@ global = do
         opacity 0
       svg # ".loader" ? do
         opacity 1
-        rotateKeyframes
-        rotateAnimation
+        spinAnimation
 
   select ? cursor pointer
 
-rotateAnimation :: Css
-rotateAnimation = do
+spinAnimation :: Css
+spinAnimation = do
   animationName "rotate"
   animationDuration (sec 1)
-  animationTimingFunction easeOut
+  animationTimingFunction easeInOut
   animationIterationCount infinite
 
-rotateKeyframes :: Css
-rotateKeyframes = keyframes
+spinKeyframes :: Css
+spinKeyframes = keyframes
   "rotate"
-  [ (0, "transform" -: "rotate(0deg)")
-  , (100, "transform" -: "rotate(360deg)")
+  [ (100, "transform" -: "rotate(360deg)")
+  ]
+
+appearAnimation :: Css
+appearAnimation = do
+  animationName "appear"
+  animationDuration (sec 0.2)
+  animationTimingFunction easeIn
+
+appearKeyframe :: Css
+appearKeyframe = keyframes
+  "appear"
+  [ (0, "opacity" -: "0")
   ]