Bootstrap with GHCJS and reflex:

- setup login and logout,
- first draft of payment view.

14 files changed, 121 insertions, 90 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index afc601f..06c468e 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -7,6 +7,9 @@ import qualified Clay.Color as C
 white :: C.Color
 white = C.white
 
+black :: C.Color
+black = C.black
+
 chestnutRose :: C.Color
 chestnutRose = C.rgb 207 92 86
 
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e742978..47ea4a9 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -8,9 +8,7 @@ import Clay
 
 import Data.Text.Lazy (Text)
 
-import qualified Design.Header as Header
-import qualified Design.SignIn as SignIn
-import qualified Design.LoggedIn as LoggedIn
+import qualified Design.Views as Views
 import qualified Design.Form as Form
 import qualified Design.Errors as Errors
 import qualified Design.Dialog as Dialog
@@ -26,13 +24,10 @@ globalDesign = renderWith compact [] global
 
 global :: Css
 global = do
-
-  header ? Header.design
-  ".signIn" ? SignIn.design
-  ".loggedIn" ? LoggedIn.design
   ".errors" ? Errors.design
   ".dialog" ? Dialog.design
   ".tooltip" ? Tooltip.design
+  Views.design
   Form.design
 
   body ? do
@@ -49,6 +44,8 @@ global = do
 
   a ? cursor pointer
 
+  input ? fontSize inherit
+
   h1 ? do
     color Color.chestnutRose
     marginBottom (em 1)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 869616d..41528ed 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -3,8 +3,8 @@
 module Design.Helper
   ( clearFix
   , button
+  , waitable
   , input
-  , iconButton
   , centeredWithMargin
   , verticalCentering
   ) where
@@ -13,8 +13,6 @@ import Prelude hiding (span)
 
 import Clay hiding (button, input)
 
-import Data.Monoid ((<>))
-
 import Design.Constants
 import Design.Color as Color
 
@@ -27,6 +25,9 @@ clearFix =
 
 button :: Color -> Color -> Size a -> (Color -> Color) -> Css
 button backgroundCol textCol h focusOp = do
+  display flex
+  alignItems center
+  justifyContent center
   backgroundColor backgroundCol
   padding (px 0) (px 10) (px 0) (px 10)
   color textCol
@@ -38,19 +39,20 @@ button backgroundCol textCol h focusOp = do
   textAlign (alignSide sideCenter)
   hover & backgroundColor (focusOp backgroundCol)
   focus & backgroundColor (focusOp backgroundCol)
+  waitable
 
-iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
-iconButton backgroundCol textCol h focusOp = do
-  button backgroundCol textCol h focusOp
-  i <> span ? do
-    height h
-    lineHeight h
-  span ? do
-    display inlineBlock
-    marginLeft (px 20)
-  i ? do
-    marginLeft (px 15)
-    marginRight (px 20)
+waitable :: Css
+waitable = do
+  svg # ".loader" ? display none
+  ".waiting" & do
+    ".content" ? do
+      display flex
+      fontSize (px 0)
+      opacity 0
+    svg # ".loader" ? do
+      display block
+      rotateKeyframes
+      rotateAnimation
 
 input :: Double -> Css
 input h = do
@@ -72,3 +74,17 @@ verticalCentering = do
   position absolute
   top (pct 50)
   "transform" -: "translateY(-50%)"
+
+rotateAnimation :: Css
+rotateAnimation = do
+  animationName "rotate"
+  animationDuration (sec 1)
+  animationTimingFunction easeOut
+  animationIterationCount infinite
+
+rotateKeyframes :: Css
+rotateKeyframes = keyframes
+  "rotate"
+  [ (0, "transform" -: "rotate(0deg)")
+  , (100, "transform" -: "rotate(360deg)")
+  ]
diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs
deleted file mode 100644
index 7845434..0000000
--- a/src/server/Design/LoggedIn/Home.hs
+++ /dev/null
@@ -1,17 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Home
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.LoggedIn.Home.Header as Header
-import qualified Design.LoggedIn.Home.Table as Table
-import qualified Design.LoggedIn.Home.Pages as Pages
-
-design :: Css
-design = do
-  ".header" ? Header.design
-  ".table" ? Table.design
-  ".pages" ? Pages.design
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
deleted file mode 100644
index 75f2f98..0000000
--- a/src/server/Design/SignIn.hs
+++ /dev/null
@@ -1,40 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.SignIn
-  ( design
-  ) where
-
-import Clay
-
-import qualified Design.Color as Color
-import qualified Design.Helper as Helper
-import qualified Design.Constants as Constants
-
-design :: Css
-design = do
-
-  form ? do
-    let inputHeight = 50
-    width (px 500)
-    marginTop (px 100)
-    marginLeft auto
-    marginRight auto
-
-    input ? do
-      Helper.input inputHeight
-      display block
-      width (pct 100)
-      marginBottom (px 10)
-
-    button ? do
-      Helper.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
-      display block
-      width (pct 100)
-      fontSize (em 1.2)
-      ".waitingServer" & ("cursor" -: "not-allowed")
-
-  ".result" ? do
-    marginTop (px 40)
-    textAlign (alignSide sideCenter)
-    ".success" ? color Color.mossGreen
-    ".error" ? color Color.chestnutRose
diff --git a/src/server/Design/Header.hs b/src/server/Design/View/Header.hs
index 8feac64..20627e6 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/View/Header.hs
@@ -1,6 +1,6 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.Header
+module Design.View.Header
   ( design
   ) where
 
@@ -9,6 +9,7 @@ import Data.Monoid ((<>))
 import Clay
 
 import Design.Color as Color
+import qualified Design.Helper as Helper
 import qualified Design.Media as Media
 
 design :: Css
@@ -57,9 +58,12 @@ design = do
       Media.tabletDesktop $ headerPadding
 
     ".signOut" ? do
+      Helper.waitable
       heightMedia
       svg ? do
+        Media.tabletDesktop $ width (px 30)
         Media.mobile $ width (px 20)
+        "path" ? ("fill" -: "white")
 
 lineHeightMedia :: Css
 lineHeightMedia = do
diff --git a/src/server/Design/View/Payment.hs b/src/server/Design/View/Payment.hs
new file mode 100644
index 0000000..d3c7650
--- /dev/null
+++ b/src/server/Design/View/Payment.hs
@@ -0,0 +1,17 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.View.Payment.Header as Header
+import qualified Design.View.Payment.Table as Table
+import qualified Design.View.Payment.Pages as Pages
+
+design :: Css
+design = do
+  ".header" ? Header.design
+  ".table" ? Table.design
+  ".pages" ? Pages.design
diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/View/Payment/Header.hs
index 5fd2d79..f02da8a 100644
--- a/src/server/Design/LoggedIn/Home/Header.hs
+++ b/src/server/Design/View/Payment/Header.hs
@@ -1,6 +1,6 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn.Home.Header
+module Design.View.Payment.Header
   ( design
   ) where
 
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/View/Payment/Pages.hs
index 71f3254..ade81a8 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/View/Payment/Pages.hs
@@ -1,6 +1,6 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn.Home.Pages
+module Design.View.Payment.Pages
   ( design
   ) where
 
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/View/Payment/Table.hs
index cb46ac9..a866b40 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/View/Payment/Table.hs
@@ -1,11 +1,12 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn.Home.Table
+module Design.View.Payment.Table
   ( design
   ) where
 
 import Clay
 
+import qualified Design.Color as Color
 import qualified Design.Media as Media
 
 design :: Css
@@ -35,3 +36,7 @@ design = do
         ".shortDate" ? display none
         ".longDate" ? display inline
         marginBottom (em 0.5)
+
+    ".button" & svg ? do
+      "path" ? ("fill" -: (plain . unValue . value $ Color.chestnutRose))
+      width (px 18)
diff --git a/src/server/Design/View/SignIn.hs b/src/server/Design/View/SignIn.hs
new file mode 100644
index 0000000..214e663
--- /dev/null
+++ b/src/server/Design/View/SignIn.hs
@@ -0,0 +1,42 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.SignIn
+  ( design
+  ) where
+
+import Clay
+import Data.Monoid ((<>))
+
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+
+design :: Css
+design = do
+  let inputHeight = 50
+  width (px 500)
+  marginTop (px 100)
+  marginLeft auto
+  marginRight auto
+
+  input ? do
+    Helper.input inputHeight
+    display block
+    width (pct 100)
+    marginBottom (px 10)
+
+  button ? do
+    Helper.button Color.gothic Color.white (px inputHeight) Constants.focusLighten
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    fontSize (em 1.2)
+    svg ? "path" ? ("fill" -: "white")
+
+  ".success" <> ".error" ? do
+    marginTop (px 40)
+    textAlign (alignSide sideCenter)
+
+  ".success" ? color Color.mossGreen
+  ".error" ? color Color.chestnutRose
diff --git a/src/server/Design/LoggedIn/Stat.hs b/src/server/Design/View/Stat.hs
index 62028cb..0a5b258 100644
--- a/src/server/Design/LoggedIn/Stat.hs
+++ b/src/server/Design/View/Stat.hs
@@ -1,6 +1,6 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn.Stat
+module Design.View.Stat
   ( design
   ) where
 
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/View/Table.hs
index 44b001a..95abf90 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/View/Table.hs
@@ -1,6 +1,6 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn.Table
+module Design.View.Table
   ( design
   ) where
 
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/Views.hs
index 4a21832..bc6ac83 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/Views.hs
@@ -1,14 +1,16 @@
 {-# LANGUAGE OverloadedStrings #-}
 
-module Design.LoggedIn
+module Design.Views
   ( design
   ) where
 
 import Clay
 
-import qualified Design.LoggedIn.Home as Home
-import qualified Design.LoggedIn.Stat as Stat
-import qualified Design.LoggedIn.Table as Table
+import qualified Design.View.Header as Header
+import qualified Design.View.Payment as Payment
+import qualified Design.View.SignIn as SignIn
+import qualified Design.View.Stat as Stat
+import qualified Design.View.Table as Table
 
 import qualified Design.Helper as Helper
 import qualified Design.Constants as Constants
@@ -17,7 +19,9 @@ import qualified Design.Media as Media
 
 design :: Css
 design = do
-  ".home" ? Home.design
+  header ? Header.design
+  ".payment" ? Payment.design
+  ".signIn" ? SignIn.design
   ".stat" ? Stat.design
   Table.design