From 70720548c9af024dbb6080638ac8e5470c2213eb Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 25 Jun 2016 15:10:03 +0200 Subject: Use the search to view either punctual or monthly payments --- src/server/Design/LoggedIn/Home.hs | 8 +- src/server/Design/LoggedIn/Home/Add.hs | 87 -------------------- src/server/Design/LoggedIn/Home/Header.hs | 56 +++++++++++++ src/server/Design/LoggedIn/Home/Monthly.hs | 23 ------ src/server/Design/LoggedIn/Home/Search.hs | 31 -------- src/server/Design/LoggedIn/Home/Table.hs | 123 +++++++++++++++-------------- 6 files changed, 122 insertions(+), 206 deletions(-) delete mode 100644 src/server/Design/LoggedIn/Home/Add.hs create mode 100644 src/server/Design/LoggedIn/Home/Header.hs delete mode 100644 src/server/Design/LoggedIn/Home/Monthly.hs delete mode 100644 src/server/Design/LoggedIn/Home/Search.hs (limited to 'src/server/Design/LoggedIn') diff --git a/src/server/Design/LoggedIn/Home.hs b/src/server/Design/LoggedIn/Home.hs index 47bfc84..7845434 100644 --- a/src/server/Design/LoggedIn/Home.hs +++ b/src/server/Design/LoggedIn/Home.hs @@ -6,16 +6,12 @@ module Design.LoggedIn.Home import Clay -import qualified Design.LoggedIn.Home.Add as Add -import qualified Design.LoggedIn.Home.Monthly as Monthly -import qualified Design.LoggedIn.Home.Search as Search +import qualified Design.LoggedIn.Home.Header as Header import qualified Design.LoggedIn.Home.Table as Table import qualified Design.LoggedIn.Home.Pages as Pages design :: Css design = do - form # ".addPayment" ? Add.design - ".monthly" ? Monthly.design - ".search" ? Search.design + ".header" ? Header.design ".table" ? Table.design ".pages" ? Pages.design diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs deleted file mode 100644 index ce64077..0000000 --- a/src/server/Design/LoggedIn/Home/Add.hs +++ /dev/null @@ -1,87 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Home.Add - ( design - ) where - -import Data.Monoid ((<>)) - -import Clay - -import Design.Color as Color -import Design.Helper -import Design.Constants - -design :: Css -design = do - centeredWithMargin - display flex - "justify-content" -: "center" - - ".name" <> ".cost" ? do - position relative - display flex - marginRight (pct blockPercentMargin) - label ? do - fontWeight bold - display inlineBlock - width (px 50) - textAlign (alignSide sideCenter) - backgroundColor Color.dustyGray - color Color.white - height (px inputHeight) - lineHeight (px inputHeight) - fontSize (px 22) - verticalAlign middle - cursor cursorText - borderRadius (px 0) radius radius (px 0) - input ? do - defaultInput inputHeight - borderRadius radius (px 0) (px 0) radius - "width" -: "calc(100% - 40px)" - input # focus |+ label ? - backgroundColor Color.silver - hover & do - input ? borderColor Color.silver - label ? backgroundColor Color.silver - - ".name" ? minWidth (px 150) - - button # ".frequency" ? do - fontSize (pct 90) - marginRight (pct blockPercentMargin) - - (".punctual" <> ".monthly") ? do - defaultButton Color.wildSand Color.dustyGray (px $ inputHeight `Prelude.div` 2) focusLighten - paddingLeft (px 15) - paddingRight (px 15) - ".selected" & do - backgroundColor Color.gothic - color Color.white - - hover & (".punctual" <> ".monthly") ? - ".selected" & backgroundColor (focusLighten Color.gothic) - - focus & (".punctual" <> ".monthly") ? - ".selected" & backgroundColor (focusLighten Color.gothic) - - ".punctual" ? borderRadius radius radius 0 0 - ".monthly" ? borderRadius 0 0 radius radius - - button # ".add" ? do - defaultButton Color.chestnutRose Color.white (px inputHeight) focusLighten - paddingLeft (px 15) - paddingRight (px 15) - i ? marginLeft (px 10) - ".waitingServer" & ("cursor" -: "not-allowed") - - ".name.error" <> ".cost.error" ? do - input ? borderColor Color.chestnutRose - label ? backgroundColor Color.chestnutRose - "input:focus + label" ? backgroundColor Color.chestnutRose - - ".errorMessage" ? do - position absolute - color Color.chestnutRose - top (px (inputHeight + 10)) - left (px 0) diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs new file mode 100644 index 0000000..9008a95 --- /dev/null +++ b/src/server/Design/LoggedIn/Home/Header.hs @@ -0,0 +1,56 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home.Header + ( design + ) where + +import Clay + +import Design.Constants + +import qualified Design.Helper as Helper +import qualified Design.Color as Color +import qualified Design.Constants as Constants + +design :: Css +design = do + marginBottom blockMarginBottom + marginLeft (pct blockPercentMargin) + marginRight (pct blockPercentMargin) + + ".exceedingPayers" ? do + backgroundColor Color.mossGreen + padding (px 10) (px 10) (px 10) (px 10) + borderRadius (px 5) (px 5) (px 5) (px 5) + color Color.white + marginBottom (em 1) + + ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ") + + ".userName" ? marginRight (px 5) + + ".searchLine" ? do + marginBottom (em 1) + form ? do + display inlineBlock + + ".textInput" ? do + display inlineBlock + marginRight (px 30) + marginBottom (px 0) + + ".radioGroup" ? do + display inlineBlock + marginBottom (px 0) + ".title" ? display none + + ".addPayment" ? do + Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten + float floatRight + + ".infos" ? do + lineHeight (px Constants.inputHeight) + + ".partition" ? do + color Color.dustyGray + marginLeft (px 15) diff --git a/src/server/Design/LoggedIn/Home/Monthly.hs b/src/server/Design/LoggedIn/Home/Monthly.hs deleted file mode 100644 index 5e976ef..0000000 --- a/src/server/Design/LoggedIn/Home/Monthly.hs +++ /dev/null @@ -1,23 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Home.Monthly - ( design - ) where - -import Clay - -import Design.Color as Color -import Design.Helper -import Design.Constants - -design :: Css -design = do - - expandBlock Color.gothic Color.white (px inputHeight) - - ".expand" ? do - position absolute - right blockPadding - bottom (px 0) - - ".detail" |> ".header" ? borderRadius radius radius 0 0 diff --git a/src/server/Design/LoggedIn/Home/Search.hs b/src/server/Design/LoggedIn/Home/Search.hs deleted file mode 100644 index 726b4cf..0000000 --- a/src/server/Design/LoggedIn/Home/Search.hs +++ /dev/null @@ -1,31 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Home.Search - ( design - ) where - -import Clay - -import Design.Constants - -import qualified Design.Helper as Helper -import qualified Design.Color as Color -import qualified Design.Constants as Constants - -design :: Css -design = do - marginBottom blockMarginBottom - marginLeft (pct blockPercentMargin) - marginRight (pct blockPercentMargin) - - ".textInput" ? do - display inlineBlock - marginRight (px 30) - marginBottom (px 0) - - ".stat" ? do - lineHeight (pct 100) - - ".addPayment" ? do - Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten - float floatRight diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs index 538bc6d..a229132 100644 --- a/src/server/Design/LoggedIn/Home/Table.hs +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -16,70 +16,75 @@ import Design.Helper design :: Css design = do - display D.table - width (pct 100) - textAlign (alignSide (sideCenter)) + ".noPayment" ? do + margin (em 2) (em 2) (em 2) (em 2) + textAlign (alignSide sideCenter) - ".header" <> ".row" ? display tableRow - let headerHeight = (px 70) + ".lines" ? do + display D.table + width (pct 100) + textAlign (alignSide (sideCenter)) - ".header" ? do - fontWeight bold - backgroundColor Color.gothic - color Color.white - fontSize iconFontSize - height headerHeight + ".header" <> ".row" ? display tableRow + let headerHeight = (px 70) - ".row" ? do - fontSize (px 18) - height (px rowHeightPx) - ".cell:first-child::before" ? do - display block - content (stringContent "") - position absolute - top (px 0) - left (px 0) - width (px 0) + ".header" ? do + fontWeight bold + backgroundColor Color.gothic + color Color.white + fontSize (px 18) + height headerHeight + + ".row" ? do + fontSize (px 18) height (px rowHeightPx) - backgroundColor Color.mossGreen - transition "width" (sec 0.3) ease (sec 0) - opacity (0.8) + ".cell:first-child::before" ? do + display block + content (stringContent "") + position absolute + top (px 0) + left (px 0) + width (px 0) + height (px rowHeightPx) + backgroundColor Color.mossGreen + transition "width" (sec 0.3) ease (sec 0) + opacity (0.8) - hover & do - ".cell:first-child::before" ? width (px 5) + hover & do + ".cell:first-child::before" ? width (px 5) - nthChild "odd" & do - backgroundColor Color.wildSand - ".edition" & do - backgroundColor Color.negroni - ".delete" |> button ? visibility visible + nthChild "odd" & do + backgroundColor Color.wildSand + ".edition" & do + backgroundColor Color.negroni + ".delete" |> button ? visibility visible - ".cell" ? do - display tableCell - position relative - verticalAlign middle - ".category" & width (pct 40) - ".cost" & do - width (pct 17) - ".refund" & color Color.mossGreen - ".user" & width (pct 20) - ".date" & do - width (pct 20) - Media.mobileTablet $ do - ".shortDate" ? display inline - ".longDate" ? display none - Media.desktop $ do - ".shortDate" ? display none - ".longDate" ? display inline - ".delete" & do + ".cell" ? do + display tableCell position relative - width (pct 3) - textAlign (alignSide sideCenter) - button ? do - defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten - borderRadius (px 0) (px 0) (px 0) (px 0) - position absolute - top (px 0) - right (px 0) - width (pct 100) - visibility hidden + verticalAlign middle + ".category" & width (pct 40) + ".cost" & do + width (pct 17) + ".refund" & color Color.mossGreen + ".user" & width (pct 20) + ".date" & do + width (pct 20) + Media.mobileTablet $ do + ".shortDate" ? display inline + ".longDate" ? display none + Media.desktop $ do + ".shortDate" ? display none + ".longDate" ? display inline + ".delete" & do + position relative + width (pct 3) + textAlign (alignSide sideCenter) + button ? do + defaultButton Color.chestnutRose Color.white (px rowHeightPx) focusLighten + borderRadius (px 0) (px 0) (px 0) (px 0) + position absolute + top (px 0) + right (px 0) + width (pct 100) + visibility hidden -- cgit v1.2.3