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/Header.hs         | 78 +++++++++++++++++++++++++++++
 server/src/Design/View/Payment.hs        | 17 +++++++
 server/src/Design/View/Payment/Header.hs | 84 ++++++++++++++++++++++++++++++++
 server/src/Design/View/Payment/Pages.hs  | 54 ++++++++++++++++++++
 server/src/Design/View/Payment/Table.hs  | 42 ++++++++++++++++
 server/src/Design/View/SignIn.hs         | 42 ++++++++++++++++
 server/src/Design/View/Stat.hs           | 15 ++++++
 server/src/Design/View/Table.hs          | 84 ++++++++++++++++++++++++++++++++
 8 files changed, 416 insertions(+)
 create mode 100644 server/src/Design/View/Header.hs
 create mode 100644 server/src/Design/View/Payment.hs
 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
 create mode 100644 server/src/Design/View/SignIn.hs
 create mode 100644 server/src/Design/View/Stat.hs
 create mode 100644 server/src/Design/View/Table.hs

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
new file mode 100644
index 0000000..20627e6
--- /dev/null
+++ b/server/src/Design/View/Header.hs
@@ -0,0 +1,78 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Header
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  let headerPadding = "padding" -: "0 20px"
+  display flex
+  "flex-wrap" -: "wrap"
+  lineHeightMedia
+  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
+
+  ".title" ? do
+    height (pct 100)
+    textAlign (alignSide sideLeft)
+
+    Media.mobile $ fontSize (px 22)
+    Media.mobileTablet $ width (pct 100)
+    Media.tabletDesktop $ do
+      display inlineBlock
+      fontSize (px 35)
+
+  ".item" ? do
+    display inlineBlock
+    transition "background-color" (ms 50) easeIn (sec 0)
+    ".current" & backgroundColor (Color.chestnutRose -. 20)
+    Media.mobile $ fontSize (px 13)
+
+  (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10)
+  (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10)
+
+  ".nameSignOut" ? do
+    display flex
+    heightMedia
+    position absolute
+    top (px 0)
+    right (px 0)
+
+    ".name" ? do
+      Media.mobile $ display none
+      Media.tabletDesktop $ headerPadding
+
+    ".signOut" ? do
+      Helper.waitable
+      heightMedia
+      svg ? do
+        Media.tabletDesktop $ width (px 30)
+        Media.mobile $ width (px 20)
+        "path" ? ("fill" -: "white")
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+  Media.desktop $ lineHeight (px 80)
+  Media.tablet $ lineHeight (px 65)
+  Media.mobile $ lineHeight (px 50)
+
+heightMedia :: Css
+heightMedia = do
+  Media.desktop $ height (px 80)
+  Media.tablet $ height (px 65)
+  Media.mobile $ height (px 50)
diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
new file mode 100644
index 0000000..d3c7650
--- /dev/null
+++ b/server/src/Design/View/Payment.hs
@@ -0,0 +1,17 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Payment
+  ( design
+  ) where
+
+import Clay
+
+import qualified Design.View.Payment.Header as Header
+import qualified Design.View.Payment.Table as Table
+import qualified Design.View.Payment.Pages as Pages
+
+design :: Css
+design = do
+  ".header" ? Header.design
+  ".table" ? Table.design
+  ".pages" ? Pages.design
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)
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
new file mode 100644
index 0000000..214e663
--- /dev/null
+++ b/server/src/Design/View/SignIn.hs
@@ -0,0 +1,42 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.SignIn
+  ( design
+  ) where
+
+import Clay
+import Data.Monoid ((<>))
+
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+
+design :: Css
+design = do
+  let inputHeight = 50
+  width (px 500)
+  marginTop (px 100)
+  marginLeft auto
+  marginRight auto
+
+  input ? do
+    Helper.input inputHeight
+    display block
+    width (pct 100)
+    marginBottom (px 10)
+
+  button ? do
+    Helper.button Color.gothic Color.white (px inputHeight) Constants.focusLighten
+    display flex
+    alignItems center
+    justifyContent center
+    width (pct 100)
+    fontSize (em 1.2)
+    svg ? "path" ? ("fill" -: "white")
+
+  ".success" <> ".error" ? do
+    marginTop (px 40)
+    textAlign (alignSide sideCenter)
+
+  ".success" ? color Color.mossGreen
+  ".error" ? color Color.chestnutRose
diff --git a/server/src/Design/View/Stat.hs b/server/src/Design/View/Stat.hs
new file mode 100644
index 0000000..0a5b258
--- /dev/null
+++ b/server/src/Design/View/Stat.hs
@@ -0,0 +1,15 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Stat
+  ( design
+  ) where
+
+import Clay
+
+design :: Css
+design = do
+  h1 ? paddingBottom (px 0)
+
+  ".exceedingPayers" ? ".userName" ? marginRight (px 5)
+
+  ".mean" ? marginBottom (em 1.5)
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
new file mode 100644
index 0000000..95abf90
--- /dev/null
+++ b/server/src/Design/View/Table.hs
@@ -0,0 +1,84 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.View.Table
+  ( design
+  ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+
+import Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+  ".emptyTableMsg" ? do
+    margin (em 2) (em 2) (em 2) (em 2)
+    textAlign (alignSide sideCenter)
+
+  ".lines" ? do
+    Media.tabletDesktop $ display displayTable
+    width (pct 100)
+    textAlign (alignSide (sideCenter))
+
+    ".header" <> ".row" ? do
+      Media.tabletDesktop $ display tableRow
+
+    ".header" ? do
+      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
+      nthChild "even" & backgroundColor Color.wildSand
+
+      Media.desktop $ do
+        fontSize (px 18)
+        height (px 60)
+
+      Media.tablet $ do
+        height (px 50)
+
+      Media.mobile $ do
+        lineHeight (px 25)
+        paddingTop (px 10)
+        paddingBottom (px 10)
+
+    ".cell" ? do
+      Media.tabletDesktop $ display tableCell
+      position relative
+      verticalAlign middle
+
+      firstChild & do
+        Media.mobile $ do
+          fontSize (px 20)
+          lineHeight (px 30)
+          color Color.gothic
+
+      ".refund" & color Color.mossGreen
+
+      ".cell.button" & do
+        position relative
+        textAlign (alignSide sideCenter)
+        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
-- 
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')

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/Header.hs         |  8 ++++----
 server/src/Design/View/Payment.hs        |  6 +++---
 server/src/Design/View/Payment/Header.hs | 12 ++++++------
 server/src/Design/View/Payment/Pages.hs  |  8 ++++----
 server/src/Design/View/Payment/Table.hs  |  2 +-
 server/src/Design/View/SignIn.hs         |  8 ++++----
 server/src/Design/View/Stat.hs           |  2 +-
 server/src/Design/View/Table.hs          |  6 +++---
 8 files changed, 26 insertions(+), 26 deletions(-)

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 20627e6..d05f748 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -4,13 +4,13 @@ module Design.View.Header
   ( design
   ) where
 
-import Data.Monoid ((<>))
+import           Data.Monoid   ((<>))
 
-import Clay
+import           Clay
 
-import Design.Color as Color
+import           Design.Color  as Color
 import qualified Design.Helper as Helper
-import qualified Design.Media as Media
+import qualified Design.Media  as Media
 
 design :: Css
 design = do
diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index d3c7650..62f7061 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -4,11 +4,11 @@ module Design.View.Payment
   ( design
   ) where
 
-import Clay
+import           Clay
 
 import qualified Design.View.Payment.Header as Header
-import qualified Design.View.Payment.Table as Table
-import qualified Design.View.Payment.Pages as Pages
+import qualified Design.View.Payment.Pages  as Pages
+import qualified Design.View.Payment.Table  as Table
 
 design :: Css
 design = do
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
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index 214e663..2b1252f 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -4,12 +4,12 @@ module Design.View.SignIn
   ( design
   ) where
 
-import Clay
-import Data.Monoid ((<>))
+import           Clay
+import           Data.Monoid      ((<>))
 
-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.Helper    as Helper
 
 design :: Css
 design = do
diff --git a/server/src/Design/View/Stat.hs b/server/src/Design/View/Stat.hs
index 0a5b258..b10dd7b 100644
--- a/server/src/Design/View/Stat.hs
+++ b/server/src/Design/View/Stat.hs
@@ -4,7 +4,7 @@ module Design.View.Stat
   ( design
   ) where
 
-import Clay
+import           Clay
 
 design :: Css
 design = do
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index 95abf90..fd55656 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -4,11 +4,11 @@ module Design.View.Table
   ( design
   ) where
 
-import Data.Monoid ((<>))
+import           Data.Monoid  ((<>))
 
-import Clay
+import           Clay
 
-import Design.Color as Color
+import           Design.Color as Color
 import qualified Design.Media as Media
 
 design :: Css
-- 
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/Header.hs         | 2 --
 server/src/Design/View/Payment.hs        | 2 --
 server/src/Design/View/Payment/Header.hs | 2 --
 server/src/Design/View/Payment/Pages.hs  | 2 --
 server/src/Design/View/Payment/Table.hs  | 2 --
 server/src/Design/View/SignIn.hs         | 2 --
 server/src/Design/View/Stat.hs           | 2 --
 server/src/Design/View/Table.hs          | 2 --
 8 files changed, 16 deletions(-)

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index d05f748..792d482 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Header
   ( design
   ) where
diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 62f7061..0d59fa0 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Payment
   ( design
   ) where
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
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index 2b1252f..4d4be7b 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.SignIn
   ( design
   ) where
diff --git a/server/src/Design/View/Stat.hs b/server/src/Design/View/Stat.hs
index b10dd7b..4d7021e 100644
--- a/server/src/Design/View/Stat.hs
+++ b/server/src/Design/View/Stat.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Stat
   ( design
   ) where
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index fd55656..cd406fc 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -1,5 +1,3 @@
-{-# LANGUAGE OverloadedStrings #-}
-
 module Design.View.Table
   ( design
   ) where
-- 
cgit v1.2.3


From bab2c30addf8aaed85675e2b7f7b15c97c426f74 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 19 Nov 2017 15:00:07 +0100
Subject: Add exceeding payer block

---
 server/src/Design/View/Header.hs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 792d482..904a2f5 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -57,7 +57,7 @@ design = do
 
     ".signOut" ? do
       Helper.waitable
-      heightMedia
+      display flex
       svg ? do
         Media.tabletDesktop $ width (px 30)
         Media.mobile $ width (px 20)
-- 
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/Header.hs         |  8 +++-----
 server/src/Design/View/Payment/Header.hs | 34 +++++++++++++++++---------------
 2 files changed, 21 insertions(+), 21 deletions(-)

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 904a2f5..97f1802 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -2,13 +2,12 @@ module Design.View.Header
   ( design
   ) where
 
-import           Data.Monoid   ((<>))
+import           Data.Monoid  ((<>))
 
 import           Clay
 
-import           Design.Color  as Color
-import qualified Design.Helper as Helper
-import qualified Design.Media  as Media
+import           Design.Color as Color
+import qualified Design.Media as Media
 
 design :: Css
 design = do
@@ -56,7 +55,6 @@ design = do
       Media.tabletDesktop $ headerPadding
 
     ".signOut" ? do
-      Helper.waitable
       display flex
       svg ? do
         Media.tabletDesktop $ width (px 30)
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 a4acc2e84158fa822f88a1d0bdddb470708b5809 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 3 Jan 2018 17:31:20 +0100
Subject: Modify weelky report and payment search interface

- Add payment balance in weekly report
- Show a message and hide pages when the search results in no results
- Go to page 1 when the search is updated / erased
---
 server/src/Design/View/SignIn.hs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index 4d4be7b..7f5f503 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -23,7 +23,7 @@ design = do
     width (pct 100)
     marginBottom (px 10)
 
-  button ? do
+  button # ".validate" ? do
     Helper.button Color.gothic Color.white (px inputHeight) Constants.focusLighten
     display flex
     alignItems center
-- 
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.hs        |  2 ++
 server/src/Design/View/Payment/Add.hs    | 32 ++++++++++++++++++++++++++++++++
 server/src/Design/View/Payment/Header.hs |  9 ++-------
 3 files changed, 36 insertions(+), 7 deletions(-)
 create mode 100644 server/src/Design/View/Payment/Add.hs

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

diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 0d59fa0..2102ff8 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -4,6 +4,7 @@ module Design.View.Payment
 
 import           Clay
 
+import qualified Design.View.Payment.Add    as Add
 import qualified Design.View.Payment.Header as Header
 import qualified Design.View.Payment.Pages  as Pages
 import qualified Design.View.Payment.Table  as Table
@@ -11,5 +12,6 @@ import qualified Design.View.Payment.Table  as Table
 design :: Css
 design = do
   ".header" ? Header.design
+  ".add" ? Add.design
   ".table" ? Table.design
   ".pages" ? Pages.design
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.hs        |  2 --
 server/src/Design/View/Payment/Delete.hs | 32 ++++++++++++++++++++++++++++++++
 2 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 server/src/Design/View/Payment/Delete.hs

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

diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 2102ff8..0d59fa0 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -4,7 +4,6 @@ module Design.View.Payment
 
 import           Clay
 
-import qualified Design.View.Payment.Add    as Add
 import qualified Design.View.Payment.Header as Header
 import qualified Design.View.Payment.Pages  as Pages
 import qualified Design.View.Payment.Table  as Table
@@ -12,6 +11,5 @@ import qualified Design.View.Payment.Table  as Table
 design :: Css
 design = do
   ".header" ? Header.design
-  ".add" ? Add.design
   ".table" ? Table.design
   ".pages" ? Pages.design
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 86957359ecf54c205aee1c09e151172c327e987a Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 31 Oct 2018 19:03:19 +0100
Subject: Various fixes

---
 server/src/Design/View/SignIn.hs | 6 ------
 1 file changed, 6 deletions(-)

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

diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index 7f5f503..2138676 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -17,12 +17,6 @@ design = do
   marginLeft auto
   marginRight auto
 
-  input ? do
-    Helper.input inputHeight
-    display block
-    width (pct 100)
-    marginBottom (px 10)
-
   button # ".validate" ? do
     Helper.button Color.gothic Color.white (px inputHeight) Constants.focusLighten
     display flex
-- 
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/Header.hs         | 2 ++
 server/src/Design/View/Payment/Add.hs    | 7 +++++--
 server/src/Design/View/Payment/Delete.hs | 3 +++
 3 files changed, 10 insertions(+), 2 deletions(-)

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 97f1802..2422686 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -56,6 +56,8 @@ design = do
 
     ".signOut" ? do
       display flex
+      justifyContent center
+      alignItems center
       svg ? do
         Media.tabletDesktop $ width (px 30)
         Media.mobile $ width (px 20)
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')

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')

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 52331eeadce8d250564851c25fc965172640bc55 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 12 Oct 2019 11:23:10 +0200
Subject: Implement client routing

---
 server/src/Design/View/Header.hs   |  7 +++++--
 server/src/Design/View/NotFound.hs | 21 +++++++++++++++++++++
 2 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 server/src/Design/View/NotFound.hs

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 2422686..59e0e51 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -40,8 +40,11 @@ design = do
     ".current" & backgroundColor (Color.chestnutRose -. 20)
     Media.mobile $ fontSize (px 13)
 
-  (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.chestnutRose +. 10)
-  (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.chestnutRose -. 10)
+  (".item" # hover) <> (".item" # focus) ?
+    backgroundColor (Color.chestnutRose +. 10)
+
+  (".item.current" # hover) <> (".item.current" # focus) ?
+    backgroundColor (Color.chestnutRose -. 10)
 
   ".nameSignOut" ? do
     display flex
diff --git a/server/src/Design/View/NotFound.hs b/server/src/Design/View/NotFound.hs
new file mode 100644
index 0000000..150c6fc
--- /dev/null
+++ b/server/src/Design/View/NotFound.hs
@@ -0,0 +1,21 @@
+module Design.View.NotFound
+  ( design
+  ) where
+
+import           Clay
+import           Prelude      hiding (rem)
+
+import qualified Design.Color as Color
+
+design :: Css
+design = do
+
+  marginLeft (rem 3)
+
+  ".link" ? do
+    display block
+    marginTop (rem 1)
+    color Color.chestnutRose
+    textDecoration underline
+    hover &
+      color (Color.chestnutRose +. 15)
-- 
cgit v1.2.3


From 6dfc1c166db387a60630eff980e330518601df5b Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 13 Oct 2019 20:58:45 +0200
Subject: Fix sign in responsiveness

---
 server/src/Design/View/SignIn.hs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

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

diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index 2138676..a39276e 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -4,6 +4,7 @@ module Design.View.SignIn
 
 import           Clay
 import           Data.Monoid      ((<>))
+import           Prelude          hiding (rem)
 
 import qualified Design.Color     as Color
 import qualified Design.Constants as Constants
@@ -12,7 +13,8 @@ import qualified Design.Helper    as Helper
 design :: Css
 design = do
   let inputHeight = 50
-  width (px 500)
+  maxWidth (px 550)
+  sym2 padding (rem 0) (rem 2)
   marginTop (px 100)
   marginLeft auto
   marginRight auto
-- 
cgit v1.2.3


From 0b40b6b5583b5c437f83e61bf8913f2b4c447b24 Mon Sep 17 00:00:00 2001
From: Joris
Date: Sat, 19 Oct 2019 09:36:03 +0200
Subject: Include pages into table component

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

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

diff --git a/server/src/Design/View/Pages.hs b/server/src/Design/View/Pages.hs
new file mode 100644
index 0000000..1482ef4
--- /dev/null
+++ b/server/src/Design/View/Pages.hs
@@ -0,0 +1,55 @@
+module Design.View.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 =
+  ".pages" ? 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
-- 
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 -----
 server/src/Design/View/Table.hs         | 3 +++
 2 files changed, 3 insertions(+), 5 deletions(-)

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

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)
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index cd406fc..1c4e806 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -72,6 +72,9 @@ design = do
         textAlign (alignSide sideCenter)
         button ? do
           padding (px 10) (px 10) (px 10) (px 10)
+          svg ? do
+            "path" ? ("fill" -: Color.toString Color.chestnutRose)
+            width (px 18)
           hover & "svg path" ? do
             "fill" -: "rgb(237, 122, 116)"
 
-- 
cgit v1.2.3


From f968c8ce63e1aec119b1e6f414cf27e2c0294bcb Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 23 Oct 2019 21:09:54 +0200
Subject: Delete income

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

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

diff --git a/server/src/Design/View/ConfirmDialog.hs b/server/src/Design/View/ConfirmDialog.hs
new file mode 100644
index 0000000..410d4d8
--- /dev/null
+++ b/server/src/Design/View/ConfirmDialog.hs
@@ -0,0 +1,36 @@
+module Design.View.ConfirmDialog
+  ( 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
+  ".confirm" ? do
+    ".confirmHeader" ? 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)
+
+    ".confirmContent" ? 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)
-- 
cgit v1.2.3


From f4f24158a46d8c0975f1b8813bbdbbeebad8c108 Mon Sep 17 00:00:00 2001
From: Joris
Date: Wed, 6 Nov 2019 19:44:15 +0100
Subject: Show the payment table with server side paging

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

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

diff --git a/server/src/Design/View/Header.hs b/server/src/Design/View/Header.hs
index 59e0e51..609d8fc 100644
--- a/server/src/Design/View/Header.hs
+++ b/server/src/Design/View/Header.hs
@@ -25,7 +25,6 @@ design = do
   ".title" <> ".item" ? headerPadding
 
   ".title" ? do
-    height (pct 100)
     textAlign (alignSide sideLeft)
 
     Media.mobile $ fontSize (px 22)
diff --git a/server/src/Design/View/SignIn.hs b/server/src/Design/View/SignIn.hs
index a39276e..42c9621 100644
--- a/server/src/Design/View/SignIn.hs
+++ b/server/src/Design/View/SignIn.hs
@@ -13,7 +13,7 @@ import qualified Design.Helper    as Helper
 design :: Css
 design = do
   let inputHeight = 50
-  maxWidth (px 550)
+  width (px 350)
   sym2 padding (rem 0) (rem 2)
   marginTop (px 100)
   marginLeft auto
diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index 1c4e806..c77cb7c 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -67,6 +67,17 @@ design = do
 
       ".refund" & color Color.mossGreen
 
+      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)
+
       ".cell.button" & do
         position relative
         textAlign (alignSide sideCenter)
-- 
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.hs        |  6 +---
 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 ---------------------
 5 files changed, 19 insertions(+), 156 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')

diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 0d59fa0..27b4ef3 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -5,11 +5,7 @@ module Design.View.Payment
 import           Clay
 
 import qualified Design.View.Payment.Header as Header
-import qualified Design.View.Payment.Pages  as Pages
-import qualified Design.View.Payment.Table  as Table
 
 design :: Css
 design = do
-  ".header" ? Header.design
-  ".table" ? Table.design
-  ".pages" ? Pages.design
+  ".g-HeaderInfos" ? Header.design
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.hs             |  6 ++-
 server/src/Design/View/Payment/Header.hs      | 68 ---------------------------
 server/src/Design/View/Payment/HeaderForm.hs  | 40 ++++++++++++++++
 server/src/Design/View/Payment/HeaderInfos.hs | 50 ++++++++++++++++++++
 4 files changed, 94 insertions(+), 70 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')

diff --git a/server/src/Design/View/Payment.hs b/server/src/Design/View/Payment.hs
index 27b4ef3..d563f5d 100644
--- a/server/src/Design/View/Payment.hs
+++ b/server/src/Design/View/Payment.hs
@@ -4,8 +4,10 @@ module Design.View.Payment
 
 import           Clay
 
-import qualified Design.View.Payment.Header as Header
+import qualified Design.View.Payment.HeaderForm  as HeaderForm
+import qualified Design.View.Payment.HeaderInfos as HeaderInfos
 
 design :: Css
 design = do
-  ".g-HeaderInfos" ? Header.design
+  HeaderForm.design
+  HeaderInfos.design
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


From 54628c70cb33de5e4309c35b9f6b57bbe9f7a07b Mon Sep 17 00:00:00 2001
From: Joris
Date: Sun, 24 Nov 2019 16:19:53 +0100
Subject: Compute cumulative income with a DB query

---
 server/src/Design/View/Table.hs | 3 +++
 1 file changed, 3 insertions(+)

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

diff --git a/server/src/Design/View/Table.hs b/server/src/Design/View/Table.hs
index c77cb7c..56bd389 100644
--- a/server/src/Design/View/Table.hs
+++ b/server/src/Design/View/Table.hs
@@ -15,6 +15,9 @@ design = do
     margin (em 2) (em 2) (em 2) (em 2)
     textAlign (alignSide sideCenter)
 
+  ".table" ? do
+    minHeight (px 540)
+
   ".lines" ? do
     Media.tabletDesktop $ display displayTable
     width (pct 100)
-- 
cgit v1.2.3


From 47c2a4d6b68c54eed5f7b45671b1ccaf8c0db200 Mon Sep 17 00:00:00 2001
From: Joris
Date: Mon, 20 Jan 2020 19:47:23 +0100
Subject: Show payment stats

---
 server/src/Design/View/Stat.hs | 4 ++++
 1 file changed, 4 insertions(+)

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

diff --git a/server/src/Design/View/Stat.hs b/server/src/Design/View/Stat.hs
index 4d7021e..2e4ecad 100644
--- a/server/src/Design/View/Stat.hs
+++ b/server/src/Design/View/Stat.hs
@@ -11,3 +11,7 @@ design = do
   ".exceedingPayers" ? ".userName" ? marginRight (px 5)
 
   ".mean" ? marginBottom (em 1.5)
+
+  ".g-Chart" ? do
+    width (pct 75)
+    sym2 margin (px 0) auto
-- 
cgit v1.2.3