From a94813019b146d75f7556d10e8d0dfd50586f54d Mon Sep 17 00:00:00 2001 From: Joris Date: Sun, 13 Sep 2015 11:23:04 +0200 Subject: Splitting Global design file into a hierarchy of files --- src/server/Design/LoggedIn/Add.hs | 78 +++++++++++++++++++++++++++++++ src/server/Design/LoggedIn/Expandables.hs | 37 +++++++++++++++ src/server/Design/LoggedIn/Pages.hs | 39 ++++++++++++++++ src/server/Design/LoggedIn/Table.hs | 68 +++++++++++++++++++++++++++ 4 files changed, 222 insertions(+) create mode 100644 src/server/Design/LoggedIn/Add.hs create mode 100644 src/server/Design/LoggedIn/Expandables.hs create mode 100644 src/server/Design/LoggedIn/Pages.hs create 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 new file mode 100644 index 0000000..6d4de69 --- /dev/null +++ b/src/server/Design/LoggedIn/Add.hs @@ -0,0 +1,78 @@ +{-# 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 ? 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 40) + 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 + + ".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) + paddingLeft (px 15) + paddingRight (px 15) + ".selected" & do + backgroundColor C.blue + color C.white + + ".punctual" ? borderRadius radius radius 0 0 + ".monthly" ? borderRadius 0 0 radius radius + + button # ".add" ? do + defaultButton C.red C.white (px inputHeight) + paddingLeft (px 15) + paddingRight (px 15) + + ".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 new file mode 100644 index 0000000..3807da4 --- /dev/null +++ b/src/server/Design/LoggedIn/Expandables.hs @@ -0,0 +1,37 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn.Expandables + ( expandablesDesign + ) where + +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) + + ".header" |> ".exceedingPayer" ? do + lineHeight (px inputHeight) + ".userName" ? marginRight (px 10) + + ".income" ? do + backgroundColor C.lightGrey + lineHeight rowHeight + padding (px 0) (px 20) (px 0) (px 20) + + ".detail" |> ".header" ? borderRadius radius radius 0 0 diff --git a/src/server/Design/LoggedIn/Pages.hs b/src/server/Design/LoggedIn/Pages.hs new file mode 100644 index 0000000..c42e9f3 --- /dev/null +++ b/src/server/Design/LoggedIn/Pages.hs @@ -0,0 +1,39 @@ +{-# 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 + display inlineBlock + border solid (px 2) C.darkGrey + color C.darkGrey + borderRadius radius radius radius radius + marginRight (px 10) + let h = 50 + paddingLeft (px 10) + paddingRight (px 10) + height (px h) + lineHeight (px h) + textAlign (alignSide (sideCenter)) + fontWeight bold + + ":not(.current)" & cursor pointer + + ".current" & do + borderColor C.red + color C.red diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs new file mode 100644 index 0000000..2876fa1 --- /dev/null +++ b/src/server/Design/LoggedIn/Table.hs @@ -0,0 +1,68 @@ +{-# 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 + +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 20) + cursor pointer + lineHeight rowHeight + nthChild "odd" & backgroundColor C.lightGrey + ".edition" & do + backgroundColor C.paymentFocus + ".delete" ? visibility visible + + ".cell" ? do + display tableCell + ".category" & width (pct 40) + ".cost" & do + width (pct 17) + ".refund" & color C.greenSuccess + ".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 + width (pct 3) + height rowHeight + textAlign (alignSide sideCenter) + backgroundColor C.red + visibility hidden + button ? do + width (pct 100) + height (pct 100) + color C.white -- cgit v1.2.3