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/Constants.hs | 27 +++ src/server/Design/Global.hs | 291 +----------------------------- src/server/Design/Header.hs | 39 ++++ src/server/Design/Helper.hs | 62 +++++++ src/server/Design/LoggedIn.hs | 29 +++ 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 +++++++ src/server/Design/SignIn.hs | 39 ++++ 10 files changed, 424 insertions(+), 285 deletions(-) create mode 100644 src/server/Design/Constants.hs create mode 100644 src/server/Design/Header.hs create mode 100644 src/server/Design/Helper.hs create mode 100644 src/server/Design/LoggedIn.hs 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 create mode 100644 src/server/Design/SignIn.hs (limited to 'src') diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs new file mode 100644 index 0000000..6c4ab90 --- /dev/null +++ b/src/server/Design/Constants.hs @@ -0,0 +1,27 @@ +module Design.Constants where + +import Clay + +iconFontSize :: Size Abs +iconFontSize = px 32 + +radius :: Size Abs +radius = px 3 + +blockPadding :: Size Abs +blockPadding = px 15 + +blockPercentWidth :: Double +blockPercentWidth = 90 + +blockPercentMargin :: Double +blockPercentMargin = (100 - blockPercentWidth) / 2 + +blockMarginBottom :: Size Abs +blockMarginBottom = px 50 + +rowHeight :: Size Abs +rowHeight = px 60 + +inputHeight :: Integer +inputHeight = 40 diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs index 951bb09..092e66e 100644 --- a/src/server/Design/Global.hs +++ b/src/server/Design/Global.hs @@ -4,40 +4,17 @@ module Design.Global ( globalDesign ) where -import Data.Monoid ((<>)) - import Clay -import qualified Clay.Display as D import Data.Text.Lazy (Text) -import Design.Color as C -import Design.Media +import Design.Header +import Design.SignIn +import Design.LoggedIn globalDesign :: Text globalDesign = renderWith compact [] global -iconFontSize :: Size Abs -iconFontSize = px 32 - -radius :: Size Abs -radius = px 3 - -blockPadding :: Size Abs -blockPadding = px 15 - -blockPercentWidth :: Double -blockPercentWidth = 90 - -blockPercentMargin :: Double -blockPercentMargin = (100 - blockPercentWidth) / 2 - -blockMarginBottom :: Size Abs -blockMarginBottom = px 50 - -rowHeight :: Size Abs -rowHeight = px 60 - global :: Css global = do @@ -46,264 +23,8 @@ global = do minWidth (px 550) fontFamily ["Cantarell"] [sansSerif] - header ? do - let headerHeight = 80 - let sidePercent = (pct blockPercentMargin) - - h1 ? do - fontSize (px 45) - textAlign (alignSide sideLeft) - backgroundColor C.red - color C.white - lineHeight (px headerHeight) - marginBottom blockMarginBottom - paddingLeft sidePercent - button # ".signOut" ? do - let iconHeight = 50 - let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2) - position absolute - top (px sideMargin) - right sidePercent - height (px iconHeight) - lineHeight (px iconHeight) - backgroundColor C.red - color C.white - fontSize iconFontSize - hover & transform (scale 1.2 1.2) - - ".loggedIn" ? do - let inputHeight = 40 - - 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) - - ".expandables" ? do - - ".expand" ? do - position absolute - right blockPadding - bottom (px 2) - - ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight) + signInDesign - ".account" ? do - expandBlock C.green C.white (px inputHeight) + headerDesign - ".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 - - ".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 - - ".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 - - ".signIn" ? do - - form ? do - let inputHeight = 50 - width (px 500) - marginTop (px 100) - marginLeft auto - marginRight auto - - input ? do - defaultInput inputHeight - display block - width (pct 100) - marginBottom (px 10) - - button ? do - defaultButton C.red C.white (px inputHeight) - display block - width (pct 100) - - ".result" ? do - marginTop (px 40) - textAlign (alignSide sideCenter) - ".success" ? color C.greenSuccess - ".error" ? color C.redError - -clearFix :: Css -clearFix = - after & do - content (stringContent "") - display D.table - clear both - -defaultButton :: Color -> Color -> Size Abs -> Css -defaultButton backgroundCol textCol height = do - backgroundColor backgroundCol - color textCol - borderRadius radius radius radius radius - verticalAlign middle - cursor pointer - lineHeight height - textAlign (alignSide sideCenter) - -defaultInput :: Integer -> Css -defaultInput inputHeight = do - height (px inputHeight) - padding (px 10) (px 10) (px 10) (px 10) - borderRadius radius radius radius radius - border solid (px 1) C.darkGrey - focus & borderColor C.grey - verticalAlign middle - -centeredWithMargin :: Css -centeredWithMargin = do - width (pct blockPercentWidth) - marginLeft auto - marginRight auto - -expandBlock :: Color -> Color -> Size Abs -> Css -expandBlock headerBackground headerColor headerHeight = do - marginBottom blockMarginBottom - marginLeft (pct blockPercentMargin) - marginRight (pct blockPercentMargin) - ".header" ? do - defaultButton headerBackground headerColor headerHeight - width (pct 100) - fontSize (px 18) - borderRadius radius radius radius radius - textAlign (alignSide sideLeft) - position relative - paddingLeft blockPadding - paddingRight (px 55) + loggedInDesign diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs new file mode 100644 index 0000000..7b82577 --- /dev/null +++ b/src/server/Design/Header.hs @@ -0,0 +1,39 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.Header + ( headerDesign + ) where + +import Clay + +import Design.Color as C +import Design.Constants + +headerDesign :: Css +headerDesign = + + header ? do + let headerHeight = 80 + let sidePercent = (pct blockPercentMargin) + + h1 ? do + fontSize (px 45) + textAlign (alignSide sideLeft) + backgroundColor C.red + color C.white + lineHeight (px headerHeight) + marginBottom blockMarginBottom + paddingLeft sidePercent + + button # ".signOut" ? do + let iconHeight = 50 + let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2) + position absolute + top (px sideMargin) + right sidePercent + height (px iconHeight) + lineHeight (px iconHeight) + backgroundColor C.red + color C.white + fontSize iconFontSize + hover & transform (scale 1.2 1.2) diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs new file mode 100644 index 0000000..53839c1 --- /dev/null +++ b/src/server/Design/Helper.hs @@ -0,0 +1,62 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.Helper + ( clearFix + , defaultButton + , defaultInput + , centeredWithMargin + , expandBlock + ) where + +import Clay + +import Design.Constants +import Design.Color as C +import qualified Clay.Display as D + +clearFix :: Css +clearFix = + after & do + content (stringContent "") + display D.table + clear both + +defaultButton :: Color -> Color -> Size Abs -> Css +defaultButton backgroundCol textCol height = do + backgroundColor backgroundCol + color textCol + borderRadius radius radius radius radius + verticalAlign middle + cursor pointer + lineHeight height + textAlign (alignSide sideCenter) + +defaultInput :: Integer -> Css +defaultInput inputHeight = do + height (px inputHeight) + padding (px 10) (px 10) (px 10) (px 10) + borderRadius radius radius radius radius + border solid (px 1) C.darkGrey + focus & borderColor C.grey + verticalAlign middle + +centeredWithMargin :: Css +centeredWithMargin = do + width (pct blockPercentWidth) + marginLeft auto + marginRight auto + +expandBlock :: Color -> Color -> Size Abs -> Css +expandBlock headerBackground headerColor headerHeight = do + marginBottom blockMarginBottom + marginLeft (pct blockPercentMargin) + marginRight (pct blockPercentMargin) + ".header" ? do + defaultButton headerBackground headerColor headerHeight + width (pct 100) + fontSize (px 18) + borderRadius radius radius radius radius + textAlign (alignSide sideLeft) + position relative + paddingLeft blockPadding + paddingRight (px 55) diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs new file mode 100644 index 0000000..6bfa034 --- /dev/null +++ b/src/server/Design/LoggedIn.hs @@ -0,0 +1,29 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.LoggedIn + ( loggedInDesign + ) where + +import Clay + +import Design.Color as C +import Design.Helper +import Design.Constants + +import Design.LoggedIn.Add +import Design.LoggedIn.Expandables +import Design.LoggedIn.Table +import Design.LoggedIn.Pages + +loggedInDesign :: Css +loggedInDesign = + + ".loggedIn" ? do + + addDesign + + expandablesDesign + + tableDesign + + pagesDesign 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 diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs new file mode 100644 index 0000000..2350c54 --- /dev/null +++ b/src/server/Design/SignIn.hs @@ -0,0 +1,39 @@ +{-# LANGUAGE OverloadedStrings #-} + +module Design.SignIn + ( signInDesign + ) where + +import Clay + +import Design.Color as C +import Design.Helper + +signInDesign :: Css +signInDesign = + + ".signIn" ? do + + form ? do + let inputHeight = 50 + width (px 500) + marginTop (px 100) + marginLeft auto + marginRight auto + + input ? do + defaultInput inputHeight + display block + width (pct 100) + marginBottom (px 10) + + button ? do + defaultButton C.red C.white (px inputHeight) + display block + width (pct 100) + + ".result" ? do + marginTop (px 40) + textAlign (alignSide sideCenter) + ".success" ? color C.greenSuccess + ".error" ? color C.redError -- cgit v1.2.3