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/LoggedIn/Home/Table.hs | 102 +++++-------------------------- src/server/Design/LoggedIn/Income.hs | 26 ++++---- src/server/Design/LoggedIn/Table.hs | 85 ++++++++++++++++++++++++++ 3 files changed, 114 insertions(+), 99 deletions(-) create mode 100644 src/server/Design/LoggedIn/Table.hs (limited to 'src/server/Design/LoggedIn') 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