From 27e11b20b06f2f2dbfb56c0998a63169b4b8abc4 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 8 Nov 2017 23:47:26 +0100
Subject: Use a better project structure

---
 server/src/Design/View/Payment/Header.hs | 84 ++++++++++++++++++++++++++++++++
 server/src/Design/View/Payment/Pages.hs  | 54 ++++++++++++++++++++
 server/src/Design/View/Payment/Table.hs  | 42 ++++++++++++++++
 3 files changed, 180 insertions(+)
 create mode 100644 server/src/Design/View/Payment/Header.hs
 create mode 100644 server/src/Design/View/Payment/Pages.hs
 create mode 100644 server/src/Design/View/Payment/Table.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
new file mode 100644
index 0000000..f02da8a
--- /dev/null
+++ b/server/src/Design/View/Payment/Header.hs
@@ -0,0 +1,84 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Header
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+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
+  Media.desktop $ marginBottom (em 3)
+  Media.mobileTablet $ marginBottom (em 2)
+  marginLeft (pct blockPercentMargin)
+  marginRight (pct blockPercentMargin)
+
+  ".payerAndAdd" ? do
+    Media.tabletDesktop $ display flex
+    marginBottom (em 1)
+
+    ".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)
+
+    ".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
+      Media.mobile $ textAlign (alignSide sideCenter)
+
+      ".textInput" ? do
+        display inlineBlock
+        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
+
+  ".infos" ? do
+    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
+      Media.desktop $ marginLeft (px 15)
diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
new file mode 100644
index 0000000..ade81a8
--- /dev/null
+++ b/server/src/Design/View/Payment/Pages.hs
@@ -0,0 +1,54 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Pages
+  ( design
+  ) where
+
+import Clay
+
+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
+  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
+    display inlineBlock
+    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
+      borderColor Color.chestnutRose
+      color Color.chestnutRose
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
new file mode 100644
index 0000000..a866b40
--- /dev/null
+++ b/server/src/Design/View/Payment/Table.hs
@@ -0,0 +1,42 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment.Table
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  ".cell" ? do
+    ".name" & do
+      Media.tabletDesktop $ width (pct 30)
+
+    ".cost" & do
+      Media.tabletDesktop $ width (pct 10)
+
+    ".user" & do
+      Media.tabletDesktop $ width (pct 15)
+
+    ".category" & do
+      Media.tabletDesktop $ width (pct 10)
+
+    ".date" & do
+      Media.tabletDesktop $ width (pct 15)
+      Media.desktop $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+      Media.tablet $ do
+        ".shortDate" ? display inline
+        ".longDate" ? display none
+      Media.mobile $ do
+        ".shortDate" ? display none
+        ".longDate" ? display inline
+        marginBottom (em 0.5)
+
+    ".button" & svg ? do
+      "path" ? ("fill" -: (plain . unValue . value $ Color.chestnutRose))
+      width (px 18)
-- 
cgit v1.2.3


From 213cf7ede058b781fc957de2cd9f6a5988c08004 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 12 Nov 2017 22:58:23 +0100
Subject: Add mocked pages

---
 server/src/Design/View/Payment/Pages.hs | 6 ++++--
 server/src/Design/View/Payment/Table.hs | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
index ade81a8..5fc13f0 100644
--- a/server/src/Design/View/Payment/Pages.hs
+++ b/server/src/Design/View/Payment/Pages.hs
@@ -13,8 +13,8 @@ import qualified Design.Media as Media
 
 design :: Css
 design = do
-  textAlign (alignSide sideCenter)
-  Helper.clearFix
+  display flex
+  justifyContent center
 
   Media.desktop $ do
     padding (px 40) (px 30) (px 30) (px 30)
@@ -26,6 +26,8 @@ design = do
     padding (px 20) (px 0) (px 20) (px 0)
     lineHeight (px 40)
 
+  svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
+
   ".page" ? do
     display inlineBlock
     fontWeight bold
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
index a866b40..f8326e4 100644
--- a/server/src/Design/View/Payment/Table.hs
+++ b/server/src/Design/View/Payment/Table.hs
@@ -38,5 +38,5 @@ design = do
         marginBottom (em 0.5)
 
     ".button" & svg ? do
-      "path" ? ("fill" -: (plain . unValue . value $ Color.chestnutRose))
+      "path" ? ("fill" -: Color.toString Color.chestnutRose)
       width (px 18)
-- 
cgit v1.2.3


From 5a63f7be9375e3ab888e4232dd7ef72c2f1ffae1 Mon Sep 17 00:00:00 2001
From: Joris
Date: Mon, 13 Nov 2017 23:56:40 +0100
Subject: Setup stylish-haskell

---
 server/src/Design/View/Payment/Header.hs | 12 ++++++------
 server/src/Design/View/Payment/Pages.hs  |  8 ++++----
 server/src/Design/View/Payment/Table.hs  |  2 +-
 3 files changed, 11 insertions(+), 11 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index f02da8a..d87e95b 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -4,16 +4,16 @@ module Design.View.Payment.Header
   ( design
   ) where
 
-import Data.Monoid ((<>))
+import           Data.Monoid      ((<>))
 
-import Clay
+import           Clay
 
-import Design.Constants
+import           Design.Constants
 
-import qualified Design.Helper as Helper
-import qualified Design.Color as Color
+import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
-import qualified Design.Media as Media
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
 
 design :: Css
 design = do
diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
index 5fc13f0..f6660a1 100644
--- a/server/src/Design/View/Payment/Pages.hs
+++ b/server/src/Design/View/Payment/Pages.hs
@@ -4,12 +4,12 @@ module Design.View.Payment.Pages
   ( design
   ) where
 
-import Clay
+import           Clay
 
-import qualified Design.Color as Color
-import qualified Design.Helper as Helper
+import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
-import qualified Design.Media as Media
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
 
 design :: Css
 design = do
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
index f8326e4..243d7f4 100644
--- a/server/src/Design/View/Payment/Table.hs
+++ b/server/src/Design/View/Payment/Table.hs
@@ -4,7 +4,7 @@ module Design.View.Payment.Table
   ( design
   ) where
 
-import Clay
+import           Clay
 
 import qualified Design.Color as Color
 import qualified Design.Media as Media
-- 
cgit v1.2.3


From 7194cddb28656c721342c2ef604f9f9fb0692960 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 19 Nov 2017 00:20:25 +0100
Subject: Show payment count and partition

- Also fixes exceedingPayer in back by using only punctual payments
---
 server/src/Design/View/Payment/Header.hs | 2 --
 server/src/Design/View/Payment/Pages.hs  | 2 --
 server/src/Design/View/Payment/Table.hs  | 2 --
 3 files changed, 6 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index d87e95b..36bc8d9 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Payment.Header
   ( design
   ) where
diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
index f6660a1..2028c1b 100644
--- a/server/src/Design/View/Payment/Pages.hs
+++ b/server/src/Design/View/Payment/Pages.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Payment.Pages
   ( design
   ) where
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
index 243d7f4..26dc9ed 100644
--- a/server/src/Design/View/Payment/Table.hs
+++ b/server/src/Design/View/Payment/Table.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Payment.Table
   ( design
   ) where
-- 
cgit v1.2.3


From 49426740e8e0c59040f4f3721a658f225572582b Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 28 Nov 2017 09:11:19 +0100
Subject: Add search for payments

---
 server/src/Design/View/Payment/Header.hs | 34 +++++++++++++++++---------------
 1 file changed, 18 insertions(+), 16 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 36bc8d9..80c5436 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -50,22 +50,24 @@ design = do
 
   ".searchLine" ? do
     marginBottom (em 1)
-    form ? do
-      Media.mobile $ textAlign (alignSide sideCenter)
-
-      ".textInput" ? do
-        display inlineBlock
-        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
+    Media.mobile $ textAlign (alignSide sideCenter)
+
+    ".textInput" ? do
+      display inlineBlock
+      marginBottom (px 0)
+      button ? do
+        svg ? "path" ? ("fill" -: Color.toString Color.silver)
+        hover & svg ? "path" ? ("fill" -: Color.toString (Color.silver -. 25))
+
+      Media.tabletDesktop $ marginRight (px 30)
+      Media.mobile $ do
+        marginBottom (em 1)
+        width (pct 100)
+
+    ".radioGroup" ? do
+      display inlineBlock
+      marginBottom (px 0)
+      ".title" ? display none
 
   ".infos" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
-- 
cgit v1.2.3


From 33b85b7f12798f5762d940ed5c30f775cdd7b751 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 28 Jan 2018 12:13:09 +0100
Subject: WIP

---
 server/src/Design/View/Payment/Add.hs    | 32 ++++++++++++++++++++++++++++++++
 server/src/Design/View/Payment/Header.hs |  9 ++-------
 2 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 server/src/Design/View/Payment/Add.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Add.hs b/server/src/Design/View/Payment/Add.hs
new file mode 100644
index 0000000..199ad36
--- /dev/null
+++ b/server/src/Design/View/Payment/Add.hs
@@ -0,0 +1,32 @@
+module Design.View.Payment.Add
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".addHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym padding (px 20)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".addContent" ? do
+    sym padding (px 20)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      ".undo" ?
+        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 80c5436..0cb5b5d 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -6,8 +6,6 @@ import           Data.Monoid      ((<>))
 
 import           Clay
 
-import           Design.Constants
-
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
 import qualified Design.Helper    as Helper
@@ -17,8 +15,8 @@ design :: Css
 design = do
   Media.desktop $ marginBottom (em 3)
   Media.mobileTablet $ marginBottom (em 2)
-  marginLeft (pct blockPercentMargin)
-  marginRight (pct blockPercentMargin)
+  marginLeft (pct Constants.blockPercentMargin)
+  marginRight (pct Constants.blockPercentMargin)
 
   ".payerAndAdd" ? do
     Media.tabletDesktop $ display flex
@@ -55,9 +53,6 @@ design = do
     ".textInput" ? do
       display inlineBlock
       marginBottom (px 0)
-      button ? do
-        svg ? "path" ? ("fill" -: Color.toString Color.silver)
-        hover & svg ? "path" ? ("fill" -: Color.toString (Color.silver -. 25))
 
       Media.tabletDesktop $ marginRight (px 30)
       Media.mobile $ do
-- 
cgit v1.2.3


From 40b4994797a797b1fa86cafda789a5c488730c6d Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 28 Oct 2018 17:57:58 +0100
Subject: Delete payment

---
 server/src/Design/View/Payment/Delete.hs | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 server/src/Design/View/Payment/Delete.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Delete.hs b/server/src/Design/View/Payment/Delete.hs
new file mode 100644
index 0000000..5597f5b
--- /dev/null
+++ b/server/src/Design/View/Payment/Delete.hs
@@ -0,0 +1,32 @@
+module Design.View.Payment.Delete
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".deleteHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym padding (px 20)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".deleteContent" ? do
+    sym padding (px 20)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      ".undo" ?
+        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
-- 
cgit v1.2.3


From 2741f47ef7b87255203bc2f7f7b2b9140c70b8f0 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 1 Nov 2018 13:14:25 +0100
Subject: Implementing client side validation

---
 server/src/Design/View/Payment/Add.hs    | 7 +++++--
 server/src/Design/View/Payment/Delete.hs | 3 +++
 2 files changed, 8 insertions(+), 2 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Add.hs b/server/src/Design/View/Payment/Add.hs
index 199ad36..5ecae7a 100644
--- a/server/src/Design/View/Payment/Add.hs
+++ b/server/src/Design/View/Payment/Add.hs
@@ -14,12 +14,12 @@ design = do
     backgroundColor Color.chestnutRose
     fontSize (px 18)
     color Color.white
-    sym padding (px 20)
+    sym2 padding (px 20) (px 30)
     textAlign (alignSide sideCenter)
     borderRadius (px 5) (px 5) (px 0) (px 0)
 
   ".addContent" ? do
-    sym padding (px 20)
+    sym2 padding (px 20) (px 30)
 
     ".buttons" ? do
       display flex
@@ -30,3 +30,6 @@ design = do
         Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       ".undo" ?
         Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
diff --git a/server/src/Design/View/Payment/Delete.hs b/server/src/Design/View/Payment/Delete.hs
index 5597f5b..f3d7e3f 100644
--- a/server/src/Design/View/Payment/Delete.hs
+++ b/server/src/Design/View/Payment/Delete.hs
@@ -30,3 +30,6 @@ design = do
         Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
       ".undo" ?
         Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
-- 
cgit v1.2.3


From 234b5b29361734656dc780148309962f932d9907 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 10 Aug 2019 15:07:11 +0200
Subject: Use select component in payment search line

---
 server/src/Design/View/Payment/Header.hs | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 0cb5b5d..9111374 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -59,10 +59,8 @@ design = do
         marginBottom (em 1)
         width (pct 100)
 
-    ".radioGroup" ? do
-      display inlineBlock
-      marginBottom (px 0)
-      ".title" ? display none
+    ".selectInput" ? do
+      Media.tabletDesktop $ display inlineBlock
 
   ".infos" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
-- 
cgit v1.2.3


From 2d79ab0e0a11f55255fc21a5dfab1598d3beeba3 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 11 Aug 2019 22:40:09 +0200
Subject: Add payment clone

---
 server/src/Design/View/Payment/Form.hs | 35 ++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 server/src/Design/View/Payment/Form.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Form.hs b/server/src/Design/View/Payment/Form.hs
new file mode 100644
index 0000000..aada12b
--- /dev/null
+++ b/server/src/Design/View/Payment/Form.hs
@@ -0,0 +1,35 @@
+module Design.View.Payment.Form
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+
+design :: Css
+design = do
+  ".formHeader" ? do
+    backgroundColor Color.chestnutRose
+    fontSize (px 18)
+    color Color.white
+    sym2 padding (px 20) (px 30)
+    textAlign (alignSide sideCenter)
+    borderRadius (px 5) (px 5) (px 0) (px 0)
+
+  ".formContent" ? do
+    sym2 padding (px 20) (px 30)
+
+    ".buttons" ? do
+      display flex
+      justifyContent spaceAround
+      marginTop (em 1.5)
+
+      ".confirm" ?
+        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      ".undo" ?
+        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+
+      (".confirm" <> ".undo") ?
+        width (px 90)
-- 
cgit v1.2.3


From 61ff1443c42def5a09f624e3df2e2520e97610d0 Mon Sep 17 00:00:00 2001
From: Joris
Date: Tue, 22 Oct 2019 23:25:05 +0200
Subject: Clone incomes

---
 server/src/Design/View/Payment/Table.hs | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
index 26dc9ed..67828c9 100644
--- a/server/src/Design/View/Payment/Table.hs
+++ b/server/src/Design/View/Payment/Table.hs
@@ -4,7 +4,6 @@ module Design.View.Payment.Table
 
 import           Clay
 
-import qualified Design.Color as Color
 import qualified Design.Media as Media
 
 design :: Css
@@ -34,7 +33,3 @@ design = do
         ".shortDate" ? display none
         ".longDate" ? display inline
         marginBottom (em 0.5)
-
-    ".button" & svg ? do
-      "path" ? ("fill" -: Color.toString Color.chestnutRose)
-      width (px 18)
-- 
cgit v1.2.3


From 4dc84dbda7ba3ea60d13e6f81eeec556974b7c72 Mon Sep 17 00:00:00 2001
From: Joris
Date: Thu, 7 Nov 2019 07:59:41 +0100
Subject: Show payment header infos

---
 server/src/Design/View/Payment/Delete.hs | 35 ---------------------
 server/src/Design/View/Payment/Header.hs | 45 +++++++++++---------------
 server/src/Design/View/Payment/Pages.hs  | 54 --------------------------------
 server/src/Design/View/Payment/Table.hs  | 35 ---------------------
 4 files changed, 18 insertions(+), 151 deletions(-)
 delete mode 100644 server/src/Design/View/Payment/Delete.hs
 delete mode 100644 server/src/Design/View/Payment/Pages.hs
 delete mode 100644 server/src/Design/View/Payment/Table.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Delete.hs b/server/src/Design/View/Payment/Delete.hs
deleted file mode 100644
index f3d7e3f..0000000
--- a/server/src/Design/View/Payment/Delete.hs
+++ /dev/null
@@ -1,35 +0,0 @@
-module Design.View.Payment.Delete
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Color     as Color
-import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
-
-design :: Css
-design = do
-  ".deleteHeader" ? do
-    backgroundColor Color.chestnutRose
-    fontSize (px 18)
-    color Color.white
-    sym padding (px 20)
-    textAlign (alignSide sideCenter)
-    borderRadius (px 5) (px 5) (px 0) (px 0)
-
-  ".deleteContent" ? do
-    sym padding (px 20)
-
-    ".buttons" ? do
-      display flex
-      justifyContent spaceAround
-      marginTop (em 1.5)
-
-      ".confirm" ?
-        Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      ".undo" ?
-        Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
-
-      (".confirm" <> ".undo") ?
-        width (px 90)
diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
index 9111374..49c1a09 100644
--- a/server/src/Design/View/Payment/Header.hs
+++ b/server/src/Design/View/Payment/Header.hs
@@ -8,45 +8,36 @@ import           Clay
 
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
 import qualified Design.Media     as Media
 
 design :: Css
 design = do
-  Media.desktop $ marginBottom (em 3)
-  Media.mobileTablet $ marginBottom (em 2)
+  Media.desktop $ marginBottom (em 2)
+  Media.mobileTablet $ marginBottom (em 1)
   marginLeft (pct Constants.blockPercentMargin)
   marginRight (pct Constants.blockPercentMargin)
 
-  ".payerAndAdd" ? do
-    Media.tabletDesktop $ display flex
+  ".g-HeaderInfos__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)
     marginBottom (em 1)
 
-    ".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.mobile $ do
+      textAlign (alignSide sideCenter)
 
-      Media.tabletDesktop $ do
-        "flex-grow" -: "1"
-        marginRight (px 15)
+    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
 
-      Media.mobile $ do
-        marginBottom (em 1)
-        textAlign (alignSide sideCenter)
-
-      ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
-
-      ".userName" ? marginRight (px 8)
+    ".userName" ? marginRight (px 8)
 
-    ".addPayment" ? do
-      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-      Media.mobile $ width (pct 100)
+  -- ".addPayment" ? do
+  --   Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+  --   Media.mobile $ width (pct 100)
 
-  ".searchLine" ? do
+  ".g-HeaderForm" ? do
     marginBottom (em 1)
     Media.mobile $ textAlign (alignSide sideCenter)
 
@@ -62,7 +53,7 @@ design = do
     ".selectInput" ? do
       Media.tabletDesktop $ display inlineBlock
 
-  ".infos" ? do
+  ".g-HeaderInfos__Repartition" ? do
     Media.tabletDesktop $ lineHeight (px Constants.inputHeight)
     Media.mobile $ lineHeight (px 25)
 
diff --git a/server/src/Design/View/Payment/Pages.hs b/server/src/Design/View/Payment/Pages.hs
deleted file mode 100644
index 2028c1b..0000000
--- a/server/src/Design/View/Payment/Pages.hs
+++ /dev/null
@@ -1,54 +0,0 @@
-module Design.View.Payment.Pages
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Color     as Color
-import qualified Design.Constants as Constants
-import qualified Design.Helper    as Helper
-import qualified Design.Media     as Media
-
-design :: Css
-design = do
-  display flex
-  justifyContent center
-
-  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)
-
-  svg ? "path" ? ("fill" -: Color.toString Color.dustyGray)
-
-  ".page" ? do
-    display inlineBlock
-    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
-      borderColor Color.chestnutRose
-      color Color.chestnutRose
diff --git a/server/src/Design/View/Payment/Table.hs b/server/src/Design/View/Payment/Table.hs
deleted file mode 100644
index 67828c9..0000000
--- a/server/src/Design/View/Payment/Table.hs
+++ /dev/null
@@ -1,35 +0,0 @@
-module Design.View.Payment.Table
-  ( design
-  ) where
-
-import           Clay
-
-import qualified Design.Media as Media
-
-design :: Css
-design = do
-  ".cell" ? do
-    ".name" & do
-      Media.tabletDesktop $ width (pct 30)
-
-    ".cost" & do
-      Media.tabletDesktop $ width (pct 10)
-
-    ".user" & do
-      Media.tabletDesktop $ width (pct 15)
-
-    ".category" & do
-      Media.tabletDesktop $ width (pct 10)
-
-    ".date" & do
-      Media.tabletDesktop $ width (pct 15)
-      Media.desktop $ do
-        ".shortDate" ? display none
-        ".longDate" ? display inline
-      Media.tablet $ do
-        ".shortDate" ? display inline
-        ".longDate" ? display none
-      Media.mobile $ do
-        ".shortDate" ? display none
-        ".longDate" ? display inline
-        marginBottom (em 0.5)
-- 
cgit v1.2.3


From c0ea63f8c1a8c7123b78798cec99726b113fb1f3 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 17 Nov 2019 18:08:28 +0100
Subject: Optimize and refactor payments

---
 server/src/Design/View/Payment/Header.hs      | 68 ---------------------------
 server/src/Design/View/Payment/HeaderForm.hs  | 40 ++++++++++++++++
 server/src/Design/View/Payment/HeaderInfos.hs | 50 ++++++++++++++++++++
 3 files changed, 90 insertions(+), 68 deletions(-)
 delete mode 100644 server/src/Design/View/Payment/Header.hs
 create mode 100644 server/src/Design/View/Payment/HeaderForm.hs
 create mode 100644 server/src/Design/View/Payment/HeaderInfos.hs

(limited to 'server/src/Design/View/Payment')

diff --git a/server/src/Design/View/Payment/Header.hs b/server/src/Design/View/Payment/Header.hs
deleted file mode 100644
index 49c1a09..0000000
--- a/server/src/Design/View/Payment/Header.hs
+++ /dev/null
@@ -1,68 +0,0 @@
-module Design.View.Payment.Header
-  ( design
-  ) where
-
-import           Data.Monoid      ((<>))
-
-import           Clay
-
-import qualified Design.Color     as Color
-import qualified Design.Constants as Constants
-import qualified Design.Media     as Media
-
-design :: Css
-design = do
-  Media.desktop $ marginBottom (em 2)
-  Media.mobileTablet $ marginBottom (em 1)
-  marginLeft (pct Constants.blockPercentMargin)
-  marginRight (pct Constants.blockPercentMargin)
-
-  ".g-HeaderInfos__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)
-    marginBottom (em 1)
-
-    Media.mobile $ do
-      textAlign (alignSide sideCenter)
-
-    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
-
-    ".userName" ? marginRight (px 8)
-
-  -- ".addPayment" ? do
-  --   Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
-  --   Media.mobile $ width (pct 100)
-
-  ".g-HeaderForm" ? do
-    marginBottom (em 1)
-    Media.mobile $ textAlign (alignSide sideCenter)
-
-    ".textInput" ? do
-      display inlineBlock
-      marginBottom (px 0)
-
-      Media.tabletDesktop $ marginRight (px 30)
-      Media.mobile $ do
-        marginBottom (em 1)
-        width (pct 100)
-
-    ".selectInput" ? do
-      Media.tabletDesktop $ display inlineBlock
-
-  ".g-HeaderInfos__Repartition" ? do
-    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
-      Media.desktop $ marginLeft (px 15)
diff --git a/server/src/Design/View/Payment/HeaderForm.hs b/server/src/Design/View/Payment/HeaderForm.hs
new file mode 100644
index 0000000..6081443
--- /dev/null
+++ b/server/src/Design/View/Payment/HeaderForm.hs
@@ -0,0 +1,40 @@
+module Design.View.Payment.HeaderForm
+  ( design
+  ) where
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Helper    as Helper
+import qualified Design.Media     as Media
+
+design :: Css
+design = do
+
+  ".g-PaymentHeaderForm" ? do
+    marginBottom (em 2)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+    display flex
+    justifyContent spaceBetween
+    alignItems center
+    Media.mobile $ flexDirection column
+
+    ".textInput" ? do
+      display inlineBlock
+      marginBottom (px 0)
+
+      Media.tabletDesktop $ marginRight (px 30)
+      Media.mobile $ do
+        marginBottom (em 1)
+        width (pct 100)
+
+    ".selectInput" ? do
+      Media.tabletDesktop $ display inlineBlock
+      Media.mobile $ marginBottom (em 2)
+
+    ".addPayment" ? do
+      Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+      Media.mobile $ width (pct 100)
+      flexShrink 0
diff --git a/server/src/Design/View/Payment/HeaderInfos.hs b/server/src/Design/View/Payment/HeaderInfos.hs
new file mode 100644
index 0000000..acb393b
--- /dev/null
+++ b/server/src/Design/View/Payment/HeaderInfos.hs
@@ -0,0 +1,50 @@
+module Design.View.Payment.HeaderInfos
+  ( design
+  ) where
+
+import           Data.Monoid      ((<>))
+
+import           Clay
+
+import qualified Design.Color     as Color
+import qualified Design.Constants as Constants
+import qualified Design.Media     as Media
+
+design :: Css
+design = do
+
+  ".g-PaymentHeaderInfos" ? do
+    Media.desktop $ marginBottom (em 2)
+    Media.mobileTablet $ marginBottom (em 1)
+    marginLeft (pct Constants.blockPercentMargin)
+    marginRight (pct Constants.blockPercentMargin)
+
+  ".g-PaymentHeaderInfos__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)
+    marginBottom (em 1)
+
+    Media.mobile $ do
+      textAlign (alignSide sideCenter)
+
+    ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ")
+
+    ".userName" ? marginRight (px 8)
+
+  ".g-PaymentHeaderInfos__Repartition" ? do
+    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
+      Media.desktop $ marginLeft (px 15)
-- 
cgit v1.2.3