From fe50c4042848681833d15fab27466d1d2d4bda45 Mon Sep 17 00:00:00 2001 From: Joris Date: Tue, 5 Apr 2016 23:52:13 +0200 Subject: Ameliore design in income page and stat page --- src/server/Design/LoggedIn/Home/Add.hs | 87 +++++++++++++++++++++++ src/server/Design/LoggedIn/Home/Expandables.hs | 27 +++++++ src/server/Design/LoggedIn/Home/Pages.hs | 32 +++++++++ src/server/Design/LoggedIn/Home/Table.hs | 97 ++++++++++++++++++++++++++ 4 files changed, 243 insertions(+) create mode 100644 src/server/Design/LoggedIn/Home/Add.hs create mode 100644 src/server/Design/LoggedIn/Home/Expandables.hs create mode 100644 src/server/Design/LoggedIn/Home/Pages.hs create mode 100644 src/server/Design/LoggedIn/Home/Table.hs (limited to 'src/server/Design/LoggedIn/Home') diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs new file mode 100644 index 0000000..7613ba3 --- /dev/null +++ b/src/server/Design/LoggedIn/Home/Add.hs @@ -0,0 +1,87 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home.Add + ( design + ) where + +import Data.Monoid ((<>)) + +import Clay + +import Design.Color as C +import Design.Helper +import Design.Constants + +design :: Css +design = do + centeredWithMargin + marginBottom blockMarginBottom + 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 C.darkGrey + color C.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 C.grey + hover & do + input ? borderColor C.grey + label ? backgroundColor C.grey + + ".name" ? minWidth (px 150) + + button # ".frequency" ? do + fontSize (pct 90) + marginRight (pct blockPercentMargin) + + (".punctual" <> ".monthly") ? do + defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten + paddingLeft (px 15) + paddingRight (px 15) + ".selected" & do + backgroundColor C.blue + color C.white + + hover & (".punctual" <> ".monthly") ? + ".selected" & backgroundColor (focusLighten C.blue) + + focus & (".punctual" <> ".monthly") ? + ".selected" & backgroundColor (focusLighten C.blue) + + ".punctual" ? borderRadius radius radius 0 0 + ".monthly" ? borderRadius 0 0 radius radius + + button # ".add" ? do + defaultButton C.red C.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 C.redError + label ? backgroundColor C.redError + "input:focus + label" ? backgroundColor C.redError + + ".errorMessage" ? do + position absolute + color C.redError + top (px (inputHeight + 10)) + left (px 0) diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs new file mode 100644 index 0000000..5ba5711 --- /dev/null +++ b/src/server/Design/LoggedIn/Home/Expandables.hs @@ -0,0 +1,27 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home.Expandables + ( design + ) where + +import Clay + +import Design.Color as C +import Design.Helper +import Design.Constants + +design :: Css +design = do + + ".expand" ? do + position absolute + right blockPadding + bottom (px 2) + + ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight) + + ".account" ? do + expandBlock C.green C.white (px inputHeight) + ".userName" ? marginRight (px 10) + + ".detail" |> ".header" ? borderRadius radius radius 0 0 diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs new file mode 100644 index 0000000..932865c --- /dev/null +++ b/src/server/Design/LoggedIn/Home/Pages.hs @@ -0,0 +1,32 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home.Pages + ( design + ) where + +import Clay + +import Design.Color as C +import Design.Helper +import Design.Constants + +design :: Css +design = do + padding (px 30) (px 30) (px 30) (px 30) + textAlign (alignSide (sideCenter)) + clearFix + + ".page" ? do + defaultButton C.white C.darkGrey (px 50) focusDarken + display inlineBlock + border solid (px 2) C.darkGrey + marginRight (px 10) + paddingLeft (px 10) + paddingRight (px 10) + fontWeight bold + + ":not(.current)" & cursor pointer + + ".current" & do + borderColor C.red + color C.red diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs new file mode 100644 index 0000000..58ffb33 --- /dev/null +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -0,0 +1,97 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home.Table + ( design + ) where + +import Data.Monoid ((<>)) + +import Clay +import qualified Clay.Display as D + +import Design.Color as C +import Design.Media +import Design.Constants +import Design.Helper + +design :: Css +design = do + display D.table + width (pct 100) + textAlign (alignSide (sideCenter)) + "border-spacing" -: "10 px" + + ".header" <> ".row" ? display tableRow + let headerHeight = (px 70) + + ".header" ? do + fontWeight bold + backgroundColor C.blue + color C.white + fontSize iconFontSize + lineHeight headerHeight + + ".row" ? do + fontSize (px 18) + lineHeight (px rowHeightPx) + + hover & do + let (borderW, triangleW, triangleH) = (4, 6, 8) + ".cell:first-child::before" ? do + display block + content (stringContent "") + position absolute + top (px 0) + left (px 0) + + width (px borderW) + height (px rowHeightPx) + backgroundColor C.green + + ".cell:first-child::after" ? do + display block + content (stringContent "") + position absolute + top (px (rowHeightPx `Prelude.div` 2 - triangleH)) + left (px borderW) + + width (px 0) + height (px 0) + borderTop solid (px triangleH) transparent + borderBottom solid (px triangleH) transparent + borderLeft solid (px triangleW) C.green + + nthChild "odd" & do + backgroundColor C.lightGrey + ".edition" & do + backgroundColor C.paymentFocus + ".delete" |> button ? visibility visible + + ".cell" ? do + display tableCell + position relative + ".category" & width (pct 40) + ".cost" & do + width (pct 17) + ".refund" & color C.green + ".user" & width (pct 20) + ".date" & do + width (pct 20) + smallScreen $ do + ".shortDate" ? display inline + ".longDate" ? display none + largeScreen $ do + ".shortDate" ? display none + ".longDate" ? display inline + ".delete" & do + position relative + width (pct 3) + textAlign (alignSide sideCenter) + button ? do + defaultButton C.red C.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