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 +++++-------------------------- 1 file changed, 16 insertions(+), 86 deletions(-) (limited to 'src/server/Design/LoggedIn/Home') 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) -- cgit v1.2.3