Show montly payments with an expandable mechanism

1 files changed, 16 insertions, 4 deletions

diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 0af071e..098269b 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -54,6 +54,7 @@ global = do
       hover & transform (scale 1.2 1.2)
 
   ".payments" ? do
+    let inputHeight = 40
 
     ".exceedingPayers" ? do
       width (pct 95)
@@ -67,7 +68,6 @@ global = do
       ".exceedingPayer" Clay.** ".userName" ? marginRight (px 10)
 
     form # ".add" ? do
-      let inputHeight = 40
       width (pct 95)
       marginLeft auto
       marginRight auto
@@ -143,9 +143,21 @@ global = do
     ".monthlyPayments" ? do
       width (pct 95)
       margin (px 0) auto (px 45) auto
-      padding (px 10) (px 10) (px 10) (px 10)
-      backgroundColor C.lightGrey
-      borderRadius radius radius radius radius
+
+      button # ".count" ? do
+        width (pct 100)
+        defaultButton C.blue C.white inputHeight
+        borderRadius radius radius radius radius
+        textAlign (alignSide sideLeft)
+        position relative
+
+        ".expand" ? do
+          float floatRight
+          marginTop (px (-2))
+
+      ".detail" &
+        button # ".count" ?
+          borderRadius radius radius 0 0
 
     ".table" ? do
       display D.table