Responsive header

10 files changed, 127 insertions, 101 deletions

diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 126a231..b59f738 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -20,11 +20,11 @@ blue = C.rgb 108 162 164
 paymentFocus :: C.Color
 paymentFocus = C.rgb 255 223 196
 
-darkGrey :: C.Color
-darkGrey = C.rgb 150 150 150
+mercury :: C.Color
+mercury = C.rgb 245 245 245
 
-grey :: C.Color
-grey = C.rgb 200 200 200
+pumice :: C.Color
+pumice = C.rgb 200 200 200
 
-lightGrey :: C.Color
-lightGrey = C.rgb 245 245 245
+mountainMist :: C.Color
+mountainMist = C.rgb 150 150 150
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e2e98a7..f27859b 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -29,8 +29,7 @@ global = do
   allKeyframes
 
   body ? do
-    position relative
-    minWidth (px 550)
+    minWidth (px 320)
     fontFamily ["Cantarell"] [sansSerif]
 
   a ? cursor pointer
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index d4546f8..94334c6 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,52 +8,66 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Color as C
 import Design.Constants
+import Design.Color as Color
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  let headerHeight = px 80
-  let headerPadding = px 20
-  let darkenedRed = C.red +. 10
-  lineHeight headerHeight
-  height headerHeight
+  let headerPadding = "padding" -: "0 20px"
+  display flex
+  "flex-wrap" -: "wrap"
+  lineHeightMedia
   marginBottom blockMarginBottom
   position relative
-  backgroundColor C.red
-  color C.white
+  backgroundColor Color.red
+  color Color.white
 
-  ".item" ? do
-    float floatLeft
-    paddingLeft headerPadding
-    paddingRight headerPadding
-    hover & backgroundColor darkenedRed
-    focus & backgroundColor darkenedRed
-    position relative
-    ".current" & after & do
-        display block
-        content (stringContent "")
-        height (px 5)
-        width (pct 100)
-        position absolute
-        bottom (px 0)
-        left (px 0)
-        backgroundColor C.white
+  ".title" <> ".item" ? headerPadding
 
   ".title" ? do
     height (pct 100)
-    fontSize (px 35)
     textAlign (alignSide sideLeft)
-    paddingLeft headerPadding
-    paddingRight headerPadding
 
-  (".name" <> ".signOut") ? float floatRight
+    Media.mobile $ fontSize (px 22)
+    Media.mobileTablet $ width (pct 100)
+    Media.tabletDesktop $ do
+      display inlineBlock
+      fontSize (px 35)
 
-  ".name" ? do
-    paddingLeft headerPadding
-    paddingRight headerPadding
+  ".item" ? do
+    display inlineBlock
+    transition "background-color" (ms 50) easeIn (sec 0)
+    ".current" & backgroundColor (Color.red -. 20)
+    Media.mobile $ fontSize (px 13)
 
-  ".signOut" ? do
-    height (pct 100)
-    fontSize iconFontSize
-    color C.white
+  (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.red +. 10)
+  (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.red -. 10)
+
+  ".nameSignOut" ? do
+    display flex
+    heightMedia
+    position absolute
+    top (px 0)
+    right (px 0)
+
+    ".name" ? do
+      Media.mobile $ display none
+      Media.tabletDesktop $ headerPadding
+
+    ".signOut" ? do
+      heightMedia
+      color Color.white
+
+      Media.mobile $ fontSize (px 20)
+      Media.tabletDesktop $ fontSize iconFontSize
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+  Media.mobile $ lineHeight (px 50)
+  Media.tabletDesktop $ lineHeight (px 80)
+
+heightMedia :: Css
+heightMedia = do
+  Media.mobile $ height (px 50)
+  Media.tabletDesktop $ height (px 80)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index f4c19fa..2f0aceb 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -17,7 +17,7 @@ import Clay
 import Data.Monoid ((<>))
 
 import Design.Constants
-import Design.Color as C
+import Design.Color as Color
 import qualified Clay.Display as D
 
 clearFix :: Css
@@ -58,8 +58,8 @@ defaultInput h = do
   height (px h)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius radius radius radius radius
-  border solid (px 1) C.darkGrey
-  focus & borderColor C.grey
+  border solid (px 1) Color.mountainMist
+  focus & borderColor Color.pumice
   verticalAlign middle
 
 centeredWithMargin :: Css
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
index 7613ba3..1a8b499 100644
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -8,7 +8,7 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -28,8 +28,8 @@ design = do
       display inlineBlock
       width (px 50)
       textAlign (alignSide sideCenter)
-      backgroundColor C.darkGrey
-      color C.white
+      backgroundColor Color.mountainMist
+      color Color.white
       height (px inputHeight)
       lineHeight (px inputHeight)
       fontSize (px 22)
@@ -40,10 +40,10 @@ design = do
       defaultInput inputHeight
       borderRadius radius (px 0) (px 0) radius
       "width" -: "calc(100% - 40px)"
-    "input:focus + label" ? backgroundColor C.grey
+    "input:focus + label" ? backgroundColor Color.pumice
     hover & do
-      input ? borderColor C.grey
-      label ? backgroundColor C.grey
+      input ? borderColor Color.pumice
+      label ? backgroundColor Color.pumice
 
   ".name" ? minWidth (px 150)
 
@@ -52,36 +52,36 @@ design = do
     marginRight (pct blockPercentMargin)
 
     (".punctual" <> ".monthly") ? do
-      defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+      defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
       paddingLeft (px 15)
       paddingRight (px 15)
       ".selected" & do
-        backgroundColor C.blue
-        color C.white
+        backgroundColor Color.blue
+        color Color.white
 
     hover & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten C.blue)
+      ".selected" & backgroundColor (focusLighten Color.blue)
 
     focus & (".punctual" <> ".monthly") ?
-      ".selected" & backgroundColor (focusLighten C.blue)
+      ".selected" & backgroundColor (focusLighten Color.blue)
 
     ".punctual" ? borderRadius radius radius 0 0
     ".monthly" ? borderRadius 0 0 radius radius
 
   button # ".add" ? do
-    defaultButton C.red C.white (px inputHeight) focusLighten
+    defaultButton Color.red Color.white (px inputHeight) focusLighten
     paddingLeft (px 15)
     paddingRight (px 15)
     i ? marginLeft (px 10)
     ".waitingServer" & ("cursor" -: "not-allowed")
 
   ".name.error" <> ".cost.error" ? do
-    input ? borderColor C.redError
-    label ? backgroundColor C.redError
-    "input:focus + label" ? backgroundColor C.redError
+    input ? borderColor Color.redError
+    label ? backgroundColor Color.redError
+    "input:focus + label" ? backgroundColor Color.redError
 
   ".errorMessage" ? do
     position absolute
-    color C.redError
+    color Color.redError
     top (px (inputHeight + 10))
     left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
index 5ba5711..dc36392 100644
--- a/src/server/Design/LoggedIn/Home/Expandables.hs
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Expandables
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -18,10 +18,10 @@ design = do
     right blockPadding
     bottom (px 2)
 
-  ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+  ".monthlyPayments" ? expandBlock Color.blue Color.white (px inputHeight)
 
   ".account" ? do
-    expandBlock C.green C.white (px inputHeight)
+    expandBlock Color.green Color.white (px inputHeight)
     ".userName" ? marginRight (px 10)
 
   ".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 0572fbf..f95a925 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Pages
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants
 
@@ -17,9 +17,9 @@ design = do
   clearFix
 
   ".page" ? do
-    defaultButton C.white C.darkGrey (px 50) focusDarken
+    defaultButton Color.white Color.mountainMist (px 50) focusDarken
     display inlineBlock
-    border solid (px 2) C.darkGrey
+    border solid (px 2) Color.mountainMist
     marginRight (px 10)
     paddingLeft (px 10)
     paddingRight (px 10)
@@ -28,5 +28,5 @@ design = do
     ":not(.current)" & cursor pointer
 
     ".current" & do
-      borderColor C.red
-      color C.red
+      borderColor Color.red
+      color Color.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 58ffb33..e7a00d1 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -9,8 +9,8 @@ import Data.Monoid ((<>))
 import Clay
 import qualified Clay.Display as D
 
-import Design.Color as C
-import Design.Media
+import Design.Color as Color
+import qualified Design.Media as Media
 import Design.Constants
 import Design.Helper
 
@@ -26,8 +26,8 @@ design = do
 
   ".header" ? do
     fontWeight bold
-    backgroundColor C.blue
-    color C.white
+    backgroundColor Color.blue
+    color Color.white
     fontSize iconFontSize
     lineHeight headerHeight
 
@@ -46,7 +46,7 @@ design = do
 
         width (px borderW)
         height (px rowHeightPx)
-        backgroundColor C.green
+        backgroundColor Color.green
 
       ".cell:first-child::after" ? do
         display block
@@ -59,12 +59,12 @@ design = do
         height (px 0)
         borderTop solid (px triangleH) transparent
         borderBottom solid (px triangleH) transparent
-        borderLeft solid (px triangleW) C.green
+        borderLeft solid (px triangleW) Color.green
 
     nthChild "odd" & do
-      backgroundColor C.lightGrey
+      backgroundColor Color.mercury
     ".edition" & do
-      backgroundColor C.paymentFocus
+      backgroundColor Color.paymentFocus
       ".delete" |> button ? visibility visible
 
   ".cell" ? do
@@ -73,14 +73,14 @@ design = do
     ".category" & width (pct 40)
     ".cost" & do
       width (pct 17)
-      ".refund" & color C.green
+      ".refund" & color Color.green
     ".user" & width (pct 20)
     ".date" & do
       width (pct 20)
-      smallScreen $ do
+      Media.mobileTablet $ do
         ".shortDate" ? display inline
         ".longDate" ? display none
-      largeScreen $ do
+      Media.desktop $ do
         ".shortDate" ? display none
         ".longDate" ? display inline
     ".delete" & do
@@ -88,7 +88,7 @@ design = do
       width (pct 3)
       textAlign (alignSide sideCenter)
       button ? do
-        defaultButton C.red C.white (px rowHeightPx) focusLighten
+        defaultButton Color.red Color.white (px rowHeightPx) focusLighten
         borderRadius (px 0) (px 0) (px 0) (px 0)
         position absolute
         top (px 0)
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index df91505..d61a8e1 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -1,23 +1,36 @@
 module Design.Media
-  ( smallScreen
-  , largeScreen
+  ( mobile
+  , mobileTablet
+  , tablet
+  , tabletDesktop
+  , desktop
   ) where
 
-import Clay
-import Clay.Stylesheet
-import qualified Clay.Media as M
+import Clay hiding (query)
+import qualified Clay
+import Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
 
-limit :: Integer
-limit = 950
+mobile :: Css -> Css
+mobile = query [Media.maxWidth mobileTabletLimit]
 
-smallFeature :: [Feature]
-smallFeature = [M.maxWidth (px limit)]
+mobileTablet :: Css -> Css
+mobileTablet = query [Media.maxWidth tabletDesktopLimit]
 
-largeFeature :: [Feature]
-largeFeature = [M.minWidth (px limit)]
+tablet :: Css -> Css
+tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
 
-smallScreen :: Css -> Css
-smallScreen = query M.screen smallFeature
+tabletDesktop :: Css -> Css
+tabletDesktop = query [Media.minWidth mobileTabletLimit]
 
-largeScreen :: Css -> Css
-largeScreen = query M.screen largeFeature
+desktop :: Css -> Css
+desktop = query [Media.minWidth tabletDesktopLimit]
+
+query :: [Feature] -> Css -> Css
+query = Clay.query Media.screen
+
+mobileTabletLimit :: Size Abs
+mobileTabletLimit = (px 520)
+
+tabletDesktopLimit :: Size Abs
+tabletDesktopLimit = (px 950)
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index c319d1e..479008a 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,7 +6,7 @@ module Design.SignIn
 
 import Clay
 
-import Design.Color as C
+import Design.Color as Color
 import Design.Helper
 import Design.Constants (focusLighten)
 
@@ -27,7 +27,7 @@ design = do
       marginBottom (px 10)
 
     button ? do
-      iconButton C.blue C.white (px inputHeight) focusLighten
+      iconButton Color.blue Color.white (px inputHeight) focusLighten
       display block
       width (pct 100)
       fontSize (em 1.2)
@@ -36,5 +36,5 @@ design = do
   ".result" ? do
     marginTop (px 40)
     textAlign (alignSide sideCenter)
-    ".success" ? color C.green
-    ".error" ? color C.redError
+    ".success" ? color Color.green
+    ".error" ? color Color.redError