From 8816cf758119a6a2073e561c8df297a833630986 Mon Sep 17 00:00:00 2001 From: Joris Date: Mon, 8 Aug 2016 20:58:17 +0200 Subject: Show incomes in a table and update like payments are updated --- src/server/Design/Constants.hs | 2 +- src/server/Design/Helper.hs | 2 +- src/server/Design/LoggedIn.hs | 6 +- src/server/Design/LoggedIn/Home/Table.hs | 102 +++++-------------------------- src/server/Design/LoggedIn/Income.hs | 26 ++++---- src/server/Design/LoggedIn/Table.hs | 85 ++++++++++++++++++++++++++ 6 files changed, 119 insertions(+), 104 deletions(-) create mode 100644 src/server/Design/LoggedIn/Table.hs (limited to 'src/server/Design') diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs index 7d196cb..a532ac8 100644 --- a/src/server/Design/Constants.hs +++ b/src/server/Design/Constants.hs @@ -17,7 +17,7 @@ blockPercentWidth = 90 blockPercentMargin :: Double blockPercentMargin = (100 - blockPercentWidth) / 2 -inputHeight :: Integer +inputHeight :: Double inputHeight = 40 focusLighten :: Color -> Color diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs index 36cedb0..f25cf05 100644 --- a/src/server/Design/Helper.hs +++ b/src/server/Design/Helper.hs @@ -53,7 +53,7 @@ iconButton backgroundCol textCol h focusOp = do marginLeft (px 15) marginRight (px 20) -input :: Integer -> Css +input :: Double -> Css input h = do height (px h) padding (px 10) (px 10) (px 10) (px 10) diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs index 5a3297a..2899fa4 100644 --- a/src/server/Design/LoggedIn.hs +++ b/src/server/Design/LoggedIn.hs @@ -4,19 +4,19 @@ module Design.LoggedIn ( design ) where -import Data.Monoid ((<>)) - import Clay import qualified Design.LoggedIn.Home as Home import qualified Design.LoggedIn.Income as Income import qualified Design.LoggedIn.Stat as Stat +import qualified Design.LoggedIn.Table as Table design :: Css design = do ".home" ? Home.design ".income" ? Income.design ".stat" ? Stat.design + Table.design - (".income" <> ".stat") ? do + ".textual" ? do "margin" -: "0 2vw" diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs index 3358f5d..73ced3a 100644 --- a/src/server/Design/LoggedIn/Home/Table.hs +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -4,101 +4,31 @@ module Design.LoggedIn.Home.Table ( design ) where -import Data.Monoid ((<>)) - import Clay -import qualified Clay.Display as D -import Design.Color as Color import qualified Design.Media as Media design :: Css design = do - ".noPayment" ? do - margin (em 2) (em 2) (em 2) (em 2) - textAlign (alignSide sideCenter) + ".cell" ? do + ".category" & do + Media.tabletDesktop $ width (pct 36) - ".lines" ? do - Media.tabletDesktop $ display D.table - width (pct 100) - textAlign (alignSide (sideCenter)) + ".cost" & do + Media.tabletDesktop $ width (pct 15) - ".header" <> ".row" ? do - Media.tabletDesktop $ display tableRow + ".user" & do + Media.tabletDesktop $ width (pct 20) - ".header" ? do + ".date" & do + Media.tabletDesktop $ width (pct 20) Media.desktop $ do - fontSize (px 18) - height (px 70) - - Media.tabletDesktop $ do - backgroundColor Color.gothic - color Color.white - + ".shortDate" ? display none + ".longDate" ? display inline Media.tablet $ do - fontSize (px 16) - height (px 60) - + ".shortDate" ? display inline + ".longDate" ? display none 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 - - ".category" & do - Media.tabletDesktop $ width (pct 36) - Media.mobile $ do - fontSize (px 20) - lineHeight (px 30) - color Color.gothic - - ".cost" & do - Media.tabletDesktop $ width (pct 15) - ".refund" & color Color.mossGreen - - ".user" & do - Media.tabletDesktop $ width (pct 20) - - ".date" & do - Media.tabletDesktop $ width (pct 20) - 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) - 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 + ".shortDate" ? display none + ".longDate" ? display inline + marginBottom (em 0.5) diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs index 5773e04..c44c67b 100644 --- a/src/server/Design/LoggedIn/Income.hs +++ b/src/server/Design/LoggedIn/Income.hs @@ -9,21 +9,21 @@ import Clay import qualified Design.Helper as Helper import qualified Design.Constants as Constants import qualified Design.Color as Color +import qualified Design.Media as Media design :: Css -design = do +design = + ".monthlyNetIncomes" ? do - h1 ? paddingBottom (px 0) + h1 ? do + Media.tabletDesktop $ float floatLeft - form ? do - display flex - "alignItems" -: "center" - "margin-bottom" -: "4vh" - ".textInput" ? marginRight (px 30) - - button # ".add" ? do + ".addIncome" ? do Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten - marginTop (px 3) - - ul # ".incomes" ? button ? - marginLeft (px 12) + Media.tabletDesktop $ do + float floatRight + position relative + top (px (-8)) + Media.mobile $ do + width (pct 100) + marginBottom (px 20) diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs new file mode 100644 index 0000000..1af5e2b --- /dev/null +++ b/src/server/Design/LoggedIn/Table.hs @@ -0,0 +1,85 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Table + ( design + ) where + +import Data.Monoid ((<>)) + +import Clay +import qualified Clay.Display as D + +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 D.table + 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