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