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/Add.hs | 89 ----------------------- src/server/Design/LoggedIn/Expandables.hs | 31 -------- src/server/Design/LoggedIn/Home.hs | 19 +++++ 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 +++++++++++++++++++++++++ src/server/Design/LoggedIn/Income.hs | 10 +++ src/server/Design/LoggedIn/Pages.hs | 34 --------- src/server/Design/LoggedIn/Stat.hs | 10 +++ src/server/Design/LoggedIn/Table.hs | 99 -------------------------- 11 files changed, 282 insertions(+), 253 deletions(-) delete mode 100644 src/server/Design/LoggedIn/Add.hs delete mode 100644 src/server/Design/LoggedIn/Expandables.hs create mode 100644 src/server/Design/LoggedIn/Home.hs 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 create mode 100644 src/server/Design/LoggedIn/Income.hs delete mode 100644 src/server/Design/LoggedIn/Pages.hs create mode 100644 src/server/Design/LoggedIn/Stat.hs delete mode 100644 src/server/Design/LoggedIn/Table.hs (limited to 'src/server/Design/LoggedIn') diff --git a/src/server/Design/LoggedIn/Add.hs b/src/server/Design/LoggedIn/Add.hs deleted file mode 100644 index ef0603c..0000000 --- a/src/server/Design/LoggedIn/Add.hs +++ /dev/null @@ -1,89 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Add - ( addDesign - ) where - -import Data.Monoid ((<>)) - -import Clay - -import Design.Color as C -import Design.Helper -import Design.Constants - -addDesign :: Css -addDesign = - - form # ".addPayment" ? 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/Expandables.hs b/src/server/Design/LoggedIn/Expandables.hs deleted file mode 100644 index 90ea32d..0000000 --- a/src/server/Design/LoggedIn/Expandables.hs +++ /dev/null @@ -1,31 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Expandables - ( expandablesDesign - ) where - --- import Data.Monoid ((<>)) --- -import Clay - -import Design.Color as C -import Design.Helper -import Design.Constants - -expandablesDesign :: Css -expandablesDesign = - - ".expandables" ? 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.hs b/src/server/Design/LoggedIn/Home.hs new file mode 100644 index 0000000..be99a2c --- /dev/null +++ b/src/server/Design/LoggedIn/Home.hs @@ -0,0 +1,19 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Home + ( design + ) where + +import Clay + +import qualified Design.LoggedIn.Home.Add as AddDesign +import qualified Design.LoggedIn.Home.Expandables as ExpandablesDesign +import qualified Design.LoggedIn.Home.Table as TableDesign +import qualified Design.LoggedIn.Home.Pages as PagesDesign + +design :: Css +design = do + form # ".addPayment" ? AddDesign.design + ".expandables" ? ExpandablesDesign.design + ".table" ? TableDesign.design + ".pages" ? PagesDesign.design 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 diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs new file mode 100644 index 0000000..b7efb9e --- /dev/null +++ b/src/server/Design/LoggedIn/Income.hs @@ -0,0 +1,10 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Income + ( design + ) where + +import Clay + +design :: Css +design = h1 ? paddingBottom (px 0) diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs deleted file mode 100644 index f7946b8..0000000 --- a/src/server/Design/LoggedIn/Pages.hs +++ /dev/null @@ -1,34 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Pages - ( pagesDesign - ) where - -import Clay - -import Design.Color as C -import Design.Helper -import Design.Constants - -pagesDesign :: Css -pagesDesign = - - ".pages" ? 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/Stat.hs b/src/server/Design/LoggedIn/Stat.hs new file mode 100644 index 0000000..42bcb71 --- /dev/null +++ b/src/server/Design/LoggedIn/Stat.hs @@ -0,0 +1,10 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Stat + ( design + ) where + +import Clay + +design :: Css +design = h1 ? paddingBottom (px 0) diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs deleted file mode 100644 index e5ed4bf..0000000 --- a/src/server/Design/LoggedIn/Table.hs +++ /dev/null @@ -1,99 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Table - ( tableDesign - ) 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 - -tableDesign :: Css -tableDesign = - - ".table" ? 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