Responsive home page

1 files changed, 44 insertions, 16 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)