From 6a0c5087f716ed6c876a666db6573491bfd3e094 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 12 Jun 2016 23:54:17 +0200
Subject: Design income form

---
 src/server/Design/Color.hs             |  3 ++
 src/server/Design/Form.hs              | 62 ++++++++++++++++++++++++++++++++++
 src/server/Design/Global.hs            |  2 ++
 src/server/Design/Helper.hs            |  1 +
 src/server/Design/LoggedIn/Home/Add.hs |  3 +-
 src/server/Design/LoggedIn/Income.hs   | 18 +++++++++-
 6 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 src/server/Design/Form.hs

(limited to 'src/server/Design')

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 7520e4e..afc601f 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -10,6 +10,9 @@ white = C.white
 chestnutRose :: C.Color
 chestnutRose = C.rgb 207 92 86
 
+unknown :: C.Color
+unknown = C.rgb 86 92 207
+
 mossGreen :: C.Color
 mossGreen = C.rgb 159 210 165
 
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
new file mode 100644
index 0000000..bb7d7db
--- /dev/null
+++ b/src/server/Design/Form.hs
@@ -0,0 +1,62 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.Form
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+-- import Design.Constants
+import Design.Color as Color
+-- import qualified Design.Media as Media
+
+
+design :: Css
+design = do
+
+  let inputHeight = 30
+  let inputTop = 22
+  let inputPaddingBottom = 3
+
+  ".textInput" ? do
+    position relative
+    marginBottom (em 1)
+    paddingTop (px inputTop)
+    marginTop (px (-10))
+
+    input ? do
+      position relative
+      zIndex 1
+      backgroundColor transparent
+      paddingBottom (px inputPaddingBottom)
+      borderStyle none
+      borderBottom solid (px 1) Color.dustyGray
+      marginBottom (px 5)
+      height (px inputHeight)
+      lineHeight (px inputHeight)
+      focus & do
+        borderWidth (px 2)
+        paddingBottom (px $ inputPaddingBottom - 1)
+
+    label ? do
+      lineHeight (px inputHeight)
+      position absolute
+      top (px inputTop)
+      left (px 0)
+      color Color.silver
+      transition "all" (sec 0.2) easeIn (sec 0)
+
+    (input # ".filled" |+ label) <> (input # focus |+ label) ? do
+      top (px 0)
+      fontSize (pct 80)
+
+    ".error" & do
+      input ? do
+        borderBottomColor Color.chestnutRose
+
+      ".errorMessage" ? do
+        position absolute
+        color Color.chestnutRose
+        fontSize (pct 80)
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 900994a..864add0 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -11,6 +11,7 @@ import Data.Text.Lazy (Text)
 import qualified Design.Header as HeaderDesign
 import qualified Design.SignIn as SignInDesign
 import qualified Design.LoggedIn as LoggedInDesign
+import qualified Design.Form as Form
 
 import Design.Animation.Keyframes
 
@@ -25,6 +26,7 @@ global = do
   header ? HeaderDesign.design
   ".signIn" ? SignInDesign.design
   ".loggedIn" ? LoggedInDesign.design
+  form ? Form.design
 
   allKeyframes
 
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index 766fbdb..deb0aab 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -30,6 +30,7 @@ clearFix =
 defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
 defaultButton backgroundCol textCol h focusOp = do
   backgroundColor backgroundCol
+  padding (px 0) (px 10) (px 0) (px 10)
   color textCol
   borderRadius radius radius radius radius
   verticalAlign middle
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
index f4e001f..6856af9 100644
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -40,7 +40,8 @@ design = do
       defaultInput inputHeight
       borderRadius radius (px 0) (px 0) radius
       "width" -: "calc(100% - 40px)"
-    "input:focus + label" ? backgroundColor Color.silver
+    input # focus |+ label ?
+      backgroundColor Color.silver
     hover & do
       input ? borderColor Color.silver
       label ? backgroundColor Color.silver
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index 99626ba..bebd136 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -6,8 +6,24 @@ module Design.LoggedIn.Income
 
 import Clay
 
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Color as Color
+
 design :: Css
 design = do
+
   h1 ? paddingBottom (px 0)
+
   form ? do
-    "margin-bottom" -: "3vh"
+    display flex
+    "alignItems" -: "center"
+    "margin-bottom" -: "4vh"
+    ".textInput" ? marginRight (px 30)
+
+    button ? do
+      Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      marginTop (px 3)
+
+  ul # ".incomes" ? button ?
+    marginLeft (px 12)
-- 
cgit v1.2.3