From ba33dfef23d070bfff92d6322808507c1b7d2814 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 29 Jun 2016 23:33:40 +0200
Subject: Responsive home page

---
 src/server/Design/Constants.hs            |  6 ---
 src/server/Design/Dialog.hs               |  8 +++
 src/server/Design/Form.hs                 |  1 +
 src/server/Design/Global.hs               | 27 +++++++---
 src/server/Design/Header.hs               | 11 ++--
 src/server/Design/Helper.hs               | 16 +++---
 src/server/Design/LoggedIn/Home/Header.hs | 60 ++++++++++++++++------
 src/server/Design/LoggedIn/Home/Pages.hs  | 44 ++++++++++++----
 src/server/Design/LoggedIn/Home/Table.hs  | 84 ++++++++++++++++++++++---------
 src/server/Design/LoggedIn/Income.hs      |  2 +-
 src/server/Design/SignIn.hs               | 10 ++--
 11 files changed, 188 insertions(+), 81 deletions(-)

(limited to 'src/server/Design')

diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 3395852..7d196cb 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -17,12 +17,6 @@ blockPercentWidth = 90
 blockPercentMargin :: Double
 blockPercentMargin = (100 - blockPercentWidth) / 2
 
-blockMarginBottom :: Size Abs
-blockMarginBottom = px 50
-
-rowHeightPx :: Integer
-rowHeightPx = 60
-
 inputHeight :: Integer
 inputHeight = 40
 
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
index f0b8009..2320c45 100644
--- a/src/server/Design/Dialog.hs
+++ b/src/server/Design/Dialog.hs
@@ -4,10 +4,18 @@ module Design.Dialog
   ( design
   ) where
 
+import Data.Monoid ((<>))
+
 import Clay
 
 design :: Css
 design = do
 
+  ".content" ? do
+    minWidth (px 270)
+
   ".paymentDialog" ? do
     ".radioGroup" ? ".title" ? display none
+
+  ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
+    h1 ? marginBottom (em 1.5)
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index caee8ff..3043125 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -25,6 +25,7 @@ design = do
     marginTop (px (-10))
 
     input ? do
+      width (pct 100)
       position relative
       zIndex inputZIndex
       backgroundColor transparent
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index dfe19b0..26c1a42 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -15,9 +15,10 @@ import qualified Design.Form as Form
 import qualified Design.Dialog as Dialog
 import qualified Design.Tooltip as Tooltip
 
-import Design.Color as Color
-import Design.Helper as Helper
-import Design.Constants as 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
 
 globalDesign :: Text
 globalDesign = renderWith compact [] global
@@ -35,13 +36,25 @@ global = do
   body ? do
     minWidth (px 320)
     fontFamily ["Cantarell"] [sansSerif]
+    Media.tablet $ do
+      fontSize (px 15)
+      button ? fontSize (px 15)
+      input ? fontSize (px 15)
+    Media.mobile $ do
+      fontSize (px 14)
+      button ? fontSize (px 14)
+      input ? fontSize (px 14)
 
   a ? cursor pointer
 
   h1 ? do
-    fontSize (px 24)
     color Color.chestnutRose
-    "margin-bottom" -: "3vh"
+    marginBottom (em 1)
+    lineHeight (em 1.2)
+
+    Media.desktop $ fontSize (px 24)
+    Media.tablet $ fontSize (px 22)
+    Media.mobile $ fontSize (px 20)
 
   ul ? do
     "margin-bottom" -: "3vh"
@@ -57,7 +70,7 @@ global = do
         "margin-top" -: "2vh"
 
   ".dialog" ? ".content" ? button ? do
-    ".confirm" & Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-    ".undo" & Helper.defaultButton Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+    ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
 
   svg ? height (pct 100)
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 4e31891..8feac64 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,7 +8,6 @@ import Data.Monoid ((<>))
 
 import Clay
 
-import Design.Constants
 import Design.Color as Color
 import qualified Design.Media as Media
 
@@ -18,10 +17,12 @@ design = do
   display flex
   "flex-wrap" -: "wrap"
   lineHeightMedia
-  marginBottom blockMarginBottom
   position relative
   backgroundColor Color.chestnutRose
   color Color.white
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
+  Media.mobile $ marginBottom (em 1.5)
 
   ".title" <> ".item" ? headerPadding
 
@@ -62,10 +63,12 @@ design = do
 
 lineHeightMedia :: Css
 lineHeightMedia = do
+  Media.desktop $ lineHeight (px 80)
+  Media.tablet $ lineHeight (px 65)
   Media.mobile $ lineHeight (px 50)
-  Media.tabletDesktop $ lineHeight (px 80)
 
 heightMedia :: Css
 heightMedia = do
+  Media.desktop $ height (px 80)
+  Media.tablet $ height (px 65)
   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 c8b3070..36cedb0 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -2,8 +2,8 @@
 
 module Design.Helper
   ( clearFix
-  , defaultButton
-  , defaultInput
+  , button
+  , input
   , iconButton
   , centeredWithMargin
   , verticalCentering
@@ -11,7 +11,7 @@ module Design.Helper
 
 import Prelude hiding (span)
 
-import Clay
+import Clay hiding (button, input)
 
 import Data.Monoid ((<>))
 
@@ -26,8 +26,8 @@ clearFix =
     display D.table
     clear both
 
-defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
-defaultButton backgroundCol textCol h focusOp = do
+button :: Color -> Color -> Size a -> (Color -> Color) -> Css
+button backgroundCol textCol h focusOp = do
   backgroundColor backgroundCol
   padding (px 0) (px 10) (px 0) (px 10)
   color textCol
@@ -42,7 +42,7 @@ defaultButton backgroundCol textCol h focusOp = do
 
 iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
 iconButton backgroundCol textCol h focusOp = do
-  defaultButton backgroundCol textCol h focusOp
+  button backgroundCol textCol h focusOp
   i <> span ? do
     height h
     lineHeight h
@@ -53,8 +53,8 @@ iconButton backgroundCol textCol h focusOp = do
     marginLeft (px 15)
     marginRight (px 20)
 
-defaultInput :: Integer -> Css
-defaultInput h = do
+input :: Integer -> Css
+input h = do
   height (px h)
   padding (px 10) (px 10) (px 10) (px 10)
   borderRadius radius radius radius radius
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 ?
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index 2856016..75f2f98 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,9 +6,9 @@ module Design.SignIn
 
 import Clay
 
-import Design.Color as Color
-import Design.Helper
-import Design.Constants (focusLighten)
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
 
 design :: Css
 design = do
@@ -21,13 +21,13 @@ design = do
     marginRight auto
 
     input ? do
-      defaultInput inputHeight
+      Helper.input inputHeight
       display block
       width (pct 100)
       marginBottom (px 10)
 
     button ? do
-      iconButton Color.gothic Color.white (px inputHeight) focusLighten
+      Helper.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
       display block
       width (pct 100)
       fontSize (em 1.2)
-- 
cgit v1.2.3