Responsive home page

4 files changed, 139 insertions, 51 deletions

diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs
index 9008a95..5fd2d79 100644
--- a/src/server/Design/LoggedIn/Home/Header.hs
+++ b/src/server/Design/LoggedIn/Home/Header.hs
@@ -4,6 +4,8 @@ module Design.LoggedIn.Home.Header
   ( design
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 import Design.Constants
@@ -11,46 +13,72 @@ import Design.Constants
 import qualified Design.Helper as Helper
 import qualified Design.Color as Color
 import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  marginBottom blockMarginBottom
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
   marginLeft (pct blockPercentMargin)
   marginRight (pct blockPercentMargin)
 
-  ".exceedingPayers" ? do
-    backgroundColor Color.mossGreen
-    padding (px 10) (px 10) (px 10) (px 10)
-    borderRadius (px 5) (px 5) (px 5) (px 5)
-    color Color.white
+  ".payerAndAdd" ? do
+    Media.tabletDesktop $ display flex
     marginBottom (em 1)
 
-    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+    ".exceedingPayers" ? do
+      backgroundColor Color.mossGreen
+      borderRadius (px 5) (px 5) (px 5) (px 5)
+      color Color.white
+      lineHeight (px Constants.inputHeight)
+      paddingLeft (px 10)
+      paddingRight (px 10)
+
+      Media.tabletDesktop $ do
+        "flex-grow" -: "1"
+        marginRight (px 15)
+
+      Media.mobile $ do
+        marginBottom (em 1)
+        textAlign (alignSide sideCenter)
+
+      ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+      ".userName" ? marginRight (px 8)
 
-    ".userName" ? marginRight (px 5)
+    ".addPayment" ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ width (pct 100)
 
   ".searchLine" ? do
     marginBottom (em 1)
     form ? do
-      display inlineBlock
+      Media.mobile $ textAlign (alignSide sideCenter)
 
       ".textInput" ? do
         display inlineBlock
-        marginRight (px 30)
         marginBottom (px 0)
 
+        Media.tabletDesktop $ marginRight (px 30)
+        Media.mobile $ do
+          marginBottom (em 1)
+          width (pct 100)
+
       ".radioGroup" ? do
         display inlineBlock
         marginBottom (px 0)
         ".title" ? display none
 
-    ".addPayment" ? do
-      Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten
-      float floatRight
-
   ".infos" ? do
-    lineHeight (px Constants.inputHeight)
+    Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
+    Media.mobile $ lineHeight (px 25)
+
+    ".total" <> ".partition" ? do
+      Media.mobileTablet $ display block
+      Media.mobile $ do
+        fontSize (pct 90)
+        textAlign (alignSide sideCenter)
 
     ".partition" ? do
       color Color.dustyGray
-      marginLeft (px 15)
+      Media.desktop $ marginLeft (px 15)
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 1d5899f..71f3254 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,25 +6,47 @@ module Design.LoggedIn.Home.Pages
 
 import Clay
 
-import Design.Color as Color
-import Design.Helper
-import Design.Constants
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Media as Media
 
 design :: Css
 design = do
-  padding (px 40) (px 30) (px 30) (px 30)
-  textAlign (alignSide (sideCenter))
-  clearFix
+  textAlign (alignSide sideCenter)
+  Helper.clearFix
+
+  Media.desktop $ do
+    padding (px 40) (px 30) (px 30) (px 30)
+
+  Media.tablet $ do
+    padding (px 30) (px 30) (px 30) (px 30)
+
+  Media.mobile $ do
+    padding (px 20) (px 0) (px 20) (px 0)
+    lineHeight (px 40)
 
   ".page" ? do
-    defaultButton Color.white Color.dustyGray (px 50) focusDarken
     display inlineBlock
-    border solid (px 2) Color.dustyGray
-    marginRight (px 10)
-    paddingLeft (px 10)
-    paddingRight (px 10)
     fontWeight bold
 
+    Media.desktop $ do
+      Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken
+
+    Media.tabletDesktop $ do
+      border solid (px 2) Color.dustyGray
+      marginRight (px 10)
+
+    Media.tablet $ do
+      Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken
+      fontSize (px 15)
+
+    Media.mobile $ do
+      Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken
+      fontSize (px 12)
+      border solid (px 1) Color.dustyGray
+      marginRight (px 5)
+
     ":not(.current)" & cursor pointer
 
     ".current" & do
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 3f55207..3358f5d 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,7 +11,6 @@ import qualified Clay.Display as D
 
 import Design.Color as Color
 import qualified Design.Media as Media
-import Design.Constants as Constants
 
 design :: Css
 design = do
@@ -20,47 +19,86 @@ design = do
     textAlign (alignSide sideCenter)
 
   ".lines" ? do
-    display D.table
+    Media.tabletDesktop $ display D.table
     width (pct 100)
     textAlign (alignSide (sideCenter))
 
-    ".header" <> ".row" ? display tableRow
-    let headerHeight = (px 70)
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
 
     ".header" ? do
-      fontWeight bold
-      backgroundColor Color.gothic
-      color Color.white
-      fontSize (px 18)
-      height headerHeight
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 70)
+
+      Media.tabletDesktop $ do
+        backgroundColor Color.gothic
+        color Color.white
+
+      Media.tablet $ do
+        fontSize (px 16)
+        height (px 60)
+
+      Media.mobile $ do
+        display none
 
     ".row" ? do
-      fontSize (px 18)
-      height (px rowHeightPx)
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
 
-      nthChild "odd" & do
-        backgroundColor Color.wildSand
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
 
     ".cell" ? do
-      display tableCell
+      Media.tabletDesktop $ display tableCell
       position relative
       verticalAlign middle
-      ".category" & width (pct 36)
+
+      ".category" & do
+        Media.tabletDesktop $ width (pct 36)
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
       ".cost" & do
-        width (pct 15)
+        Media.tabletDesktop $ width (pct 15)
         ".refund" & color Color.mossGreen
-      ".user" & width (pct 20)
+
+      ".user" & do
+        Media.tabletDesktop $ width (pct 20)
+
       ".date" & do
-        width (pct 20)
-        Media.mobileTablet $ do
+        Media.tabletDesktop $ width (pct 20)
+        Media.desktop $ do
+          ".shortDate" ? display none
+          ".longDate" ? display inline
+        Media.tablet $ do
           ".shortDate" ? display inline
           ".longDate" ? display none
-        Media.desktop $ do
+        Media.mobile $ do
           ".shortDate" ? display none
           ".longDate" ? display inline
+          marginBottom (em 0.5)
+
       ".cell.button" & do
         position relative
-        width (pct 3)
         textAlign (alignSide sideCenter)
-        button # hover ? "svg path" ? do
-          "fill" -: "rgb(237, 122, 116)"
+        button ? do
+          padding (px 10) (px 10) (px 10) (px 10)
+          hover & "svg path" ? do
+            "fill" -: "rgb(237, 122, 116)"
+
+        Media.tabletDesktop $ width (pct 3)
+
+        Media.mobile $ do
+          display inlineBlock
+          button ? display flex
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index 84ae521..5773e04 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -22,7 +22,7 @@ design = do
     ".textInput" ? marginRight (px 30)
 
     button # ".add" ? do
-      Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       marginTop (px 3)
 
   ul # ".incomes" ? button ?