aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Color.hs3
-rw-r--r--src/server/Design/Global.hs11
-rw-r--r--src/server/Design/Helper.hs46
-rw-r--r--src/server/Design/LoggedIn/Home.hs17
-rw-r--r--src/server/Design/SignIn.hs40
-rw-r--r--src/server/Design/View/Header.hs (renamed from src/server/Design/Header.hs)6
-rw-r--r--src/server/Design/View/Payment.hs17
-rw-r--r--src/server/Design/View/Payment/Header.hs (renamed from src/server/Design/LoggedIn/Home/Header.hs)2
-rw-r--r--src/server/Design/View/Payment/Pages.hs (renamed from src/server/Design/LoggedIn/Home/Pages.hs)2
-rw-r--r--src/server/Design/View/Payment/Table.hs (renamed from src/server/Design/LoggedIn/Home/Table.hs)7
-rw-r--r--src/server/Design/View/SignIn.hs42
-rw-r--r--src/server/Design/View/Stat.hs (renamed from src/server/Design/LoggedIn/Stat.hs)2
-rw-r--r--src/server/Design/View/Table.hs (renamed from src/server/Design/LoggedIn/Table.hs)2
-rw-r--r--src/server/Design/Views.hs (renamed from src/server/Design/LoggedIn.hs)14
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