Setting monthly payments and exceeding payers aside

2 files changed, 49 insertions, 31 deletions

diff --git a/src/client/View/LoggedIn.elm b/src/client/View/LoggedIn.elm
index 57a8eb0..e4577a2 100644
--- a/src/client/View/LoggedIn.elm
+++ b/src/client/View/LoggedIn.elm
@@ -18,10 +18,13 @@ import View.LoggedIn.Paging exposing (paymentsPaging)
 renderLoggedIn : Model -> LoggedInView -> Html
 renderLoggedIn model loggedInView =
   div
-    [ class "payments" ]
-    [ exceedingPayers model loggedInView
-    , addPayment model loggedInView
-    , monthlyPayments model loggedInView
+    [ class "loggedIn" ]
+    [ addPayment model loggedInView
+    , div
+        [ class "expandables" ]
+        [ monthlyPayments model loggedInView
+        , exceedingPayers model loggedInView
+        ]
     , paymentsTable model loggedInView
     , paymentsPaging loggedInView
     ]
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 8b8d5e7..7d2b7b6 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -26,6 +26,9 @@ radius = px 3
 blockPadding :: Size Abs
 blockPadding = px 15
 
+blockMarginBottom :: Size Abs
+blockMarginBottom = px 50
+
 global :: Css
 global = do
 
@@ -56,24 +59,12 @@ global = do
       fontSize iconFontSize
       hover & transform (scale 1.2 1.2)
 
-  ".payments" ? do
+  ".loggedIn" ? do
     let inputHeight = 40
 
-    ".exceedingPayers" ? do
-      centeredWithMargin
-      backgroundColor C.green
-      color C.white
-      fontSize (px 18)
-      borderRadius radius radius radius radius
-      paddingLeft blockPadding
-      paddingRight blockPadding
-
-      ".exceedingPayer" ? do
-        lineHeight (px inputHeight)
-        ".userName" ? marginRight (px 10)
-
     form ? do
       centeredWithMargin
+      marginBottom blockMarginBottom
       clearFix
 
       ".name" <> ".cost" ? do
@@ -142,26 +133,51 @@ global = do
         top (px (inputHeight + 10))
         left (px 0)
 
-    ".monthlyPayments" ? do
+    ".expandables" ? do
       centeredWithMargin
+      clearFix
 
-      button # ".count" ? do
-        width (pct 100)
+      ".monthlyPayments" ? do
+        marginBottom blockMarginBottom
+
+        largeScreen $ do
+          float floatLeft
+          width (pct 55)
+
+        button # ".count" ? do
+          width (pct 100)
+          fontSize (px 18)
+          defaultButton C.blue C.white inputHeight
+          borderRadius radius radius radius radius
+          textAlign (alignSide sideLeft)
+          position relative
+          paddingLeft blockPadding
+          paddingRight blockPadding
+
+          ".expand" ? do
+            float floatRight
+            marginTop (px (-2))
+
+        ".detail" &
+          button # ".count" ?
+            borderRadius radius radius 0 0
+
+      ".exceedingPayers" ? do
+        backgroundColor C.green
+        color C.white
         fontSize (px 18)
-        defaultButton C.blue C.white inputHeight
         borderRadius radius radius radius radius
-        textAlign (alignSide sideLeft)
-        position relative
+        marginBottom blockMarginBottom
         paddingLeft blockPadding
         paddingRight blockPadding
 
-        ".expand" ? do
+        largeScreen $ do
           float floatRight
-          marginTop (px (-2))
+          width (pct 40)
 
-      ".detail" &
-        button # ".count" ?
-          borderRadius radius radius 0 0
+        ".exceedingPayer" ? do
+          lineHeight (px inputHeight)
+          ".userName" ? marginRight (px 10)
 
     ".table" ? do
       display D.table
@@ -295,7 +311,6 @@ defaultInput inputHeight = do
 
 centeredWithMargin :: Css
 centeredWithMargin = do
-  width (pct 95)
+  width (pct 90)
   marginLeft auto
   marginRight auto
-  marginBottom (px 45)