From cfca18262c1ff48dcb683ddab7d03cf8e55573ff Mon Sep 17 00:00:00 2001 From: Joris Date: Fri, 24 Mar 2017 09:21:04 +0000 Subject: Features/categories --- src/server/Design/Constants.hs | 6 +++--- src/server/Design/Dialog.hs | 7 +++++-- src/server/Design/Form.hs | 36 +++++++++++++++++++++++++++++--- src/server/Design/Helper.hs | 5 ++--- src/server/Design/LoggedIn.hs | 29 ++++++++++++++++++++++--- src/server/Design/LoggedIn/Home/Table.hs | 13 +++++++----- src/server/Design/LoggedIn/Income.hs | 29 ------------------------- src/server/Design/LoggedIn/Table.hs | 3 +-- src/server/Design/Media.hs | 4 ++-- 9 files changed, 80 insertions(+), 52 deletions(-) delete mode 100644 src/server/Design/LoggedIn/Income.hs (limited to 'src/server/Design') diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs index a532ac8..4e2b8cc 100644 --- a/src/server/Design/Constants.hs +++ b/src/server/Design/Constants.hs @@ -2,13 +2,13 @@ module Design.Constants where import Clay -iconFontSize :: Size Abs +iconFontSize :: Size LengthUnit iconFontSize = px 32 -radius :: Size Abs +radius :: Size LengthUnit radius = px 3 -blockPadding :: Size Abs +blockPadding :: Size LengthUnit blockPadding = px 15 blockPercentWidth :: Double diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs index 2320c45..4678633 100644 --- a/src/server/Design/Dialog.hs +++ b/src/server/Design/Dialog.hs @@ -14,8 +14,11 @@ design = do ".content" ? do minWidth (px 270) - ".paymentDialog" ? do - ".radioGroup" ? ".title" ? display none + ".paymentDialog" & do + ".radioGroup" ? ".title" ? display none + ".selectInput" ? do + select ? width (pct 100) + marginBottom (em 1) ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do h1 ? marginBottom (em 1.5) diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs index 3043125..ebb8ac8 100644 --- a/src/server/Design/Form.hs +++ b/src/server/Design/Form.hs @@ -18,6 +18,10 @@ design = do let inputPaddingBottom = 3 let inputZIndex = 1 + label ? do + cursor pointer + color Color.silver + ".textInput" ? do position relative marginBottom (em 1.5) @@ -44,7 +48,6 @@ design = do position absolute top (px inputTop) left (px 0) - color Color.silver transition "all" (sec 0.2) easeIn (sec 0) button ? do @@ -68,6 +71,15 @@ design = do color Color.chestnutRose fontSize (pct 80) + ".colorInput" ? do + display flex + alignItems center + marginBottom (em 1.5) + + input ? do + borderColor transparent + backgroundColor transparent + ".radioGroup" ? do position relative marginBottom (em 2) @@ -90,11 +102,29 @@ design = do width (px 30) margin (px 0) (px (-15)) (px 0) (px (-15)) - label ? cursor pointer - "input:focus + label" ? do textDecoration underline "input:checked + label" ? do color Color.chestnutRose fontWeight bold + + ".selectInput" ? do + label ? do + display block + marginBottom (px 10) + fontSize (pct 80) + select ? do + backgroundColor Color.white + border solid (px 1) Color.silver + sym borderRadius (px 3) + sym2 padding (px 5) (px 8) + option ? do + firstChild & display none + sym2 padding (px 5) (px 8) + ".error" & do + select ? borderColor Color.chestnutRose + ".errorMessage" ? do + color Color.chestnutRose + fontSize (pct 80) + marginTop (em 0.5) diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs index f25cf05..869616d 100644 --- a/src/server/Design/Helper.hs +++ b/src/server/Design/Helper.hs @@ -17,13 +17,12 @@ import Data.Monoid ((<>)) import Design.Constants import Design.Color as Color -import qualified Clay.Display as D clearFix :: Css clearFix = after & do content (stringContent "") - display D.table + display displayTable clear both button :: Color -> Color -> Size a -> (Color -> Color) -> Css @@ -40,7 +39,7 @@ button backgroundCol textCol h focusOp = do hover & backgroundColor (focusOp backgroundCol) focus & backgroundColor (focusOp backgroundCol) -iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css +iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css iconButton backgroundCol textCol h focusOp = do button backgroundCol textCol h focusOp i <> span ? do diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs index 2899fa4..4a21832 100644 --- a/src/server/Design/LoggedIn.hs +++ b/src/server/Design/LoggedIn.hs @@ -7,16 +7,39 @@ module Design.LoggedIn import Clay import qualified Design.LoggedIn.Home as Home -import qualified Design.LoggedIn.Income as Income import qualified Design.LoggedIn.Stat as Stat import qualified Design.LoggedIn.Table as Table +import qualified Design.Helper as Helper +import qualified Design.Constants as Constants +import qualified Design.Color as Color +import qualified Design.Media as Media + design :: Css design = do ".home" ? Home.design - ".income" ? Income.design ".stat" ? Stat.design Table.design - ".textual" ? do + ".withMargin" ? do "margin" -: "0 2vw" + + ".titleButton" ? do + h1 ? do + Media.tabletDesktop $ float floatLeft + + button ? do + Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten + Media.tabletDesktop $ do + float floatRight + position relative + top (px (-8)) + Media.mobile $ do + width (pct 100) + marginBottom (px 20) + + ".tag" ? do + sym borderRadius (px 4) + sym2 padding (px 2) (px 5) + boxShadow (px 2) (px 2) (px 5) (rgba 0 0 0 0.3) + color Color.white diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs index 73ced3a..cb46ac9 100644 --- a/src/server/Design/LoggedIn/Home/Table.hs +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -11,17 +11,20 @@ import qualified Design.Media as Media design :: Css design = do ".cell" ? do - ".category" & do - Media.tabletDesktop $ width (pct 36) + ".name" & do + Media.tabletDesktop $ width (pct 30) ".cost" & do - Media.tabletDesktop $ width (pct 15) + Media.tabletDesktop $ width (pct 10) ".user" & do - Media.tabletDesktop $ width (pct 20) + Media.tabletDesktop $ width (pct 15) + + ".category" & do + Media.tabletDesktop $ width (pct 10) ".date" & do - Media.tabletDesktop $ width (pct 20) + Media.tabletDesktop $ width (pct 15) Media.desktop $ do ".shortDate" ? display none ".longDate" ? display inline diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs deleted file mode 100644 index c44c67b..0000000 --- a/src/server/Design/LoggedIn/Income.hs +++ /dev/null @@ -1,29 +0,0 @@ -{-# LANGUAGE OverloadedStrings #-} - -module Design.LoggedIn.Income - ( design - ) where - -import Clay - -import qualified Design.Helper as Helper -import qualified Design.Constants as Constants -import qualified Design.Color as Color -import qualified Design.Media as Media - -design :: Css -design = - ".monthlyNetIncomes" ? do - - h1 ? do - Media.tabletDesktop $ float floatLeft - - ".addIncome" ? do - Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten - Media.tabletDesktop $ do - float floatRight - position relative - top (px (-8)) - Media.mobile $ do - width (pct 100) - marginBottom (px 20) diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs index 1af5e2b..44b001a 100644 --- a/src/server/Design/LoggedIn/Table.hs +++ b/src/server/Design/LoggedIn/Table.hs @@ -7,7 +7,6 @@ module Design.LoggedIn.Table import Data.Monoid ((<>)) import Clay -import qualified Clay.Display as D import Design.Color as Color import qualified Design.Media as Media @@ -19,7 +18,7 @@ design = do textAlign (alignSide sideCenter) ".lines" ? do - Media.tabletDesktop $ display D.table + Media.tabletDesktop $ display displayTable width (pct 100) textAlign (alignSide (sideCenter)) diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs index d61a8e1..77220ee 100644 --- a/src/server/Design/Media.hs +++ b/src/server/Design/Media.hs @@ -29,8 +29,8 @@ desktop = query [Media.minWidth tabletDesktopLimit] query :: [Feature] -> Css -> Css query = Clay.query Media.screen -mobileTabletLimit :: Size Abs +mobileTabletLimit :: Size LengthUnit mobileTabletLimit = (px 520) -tabletDesktopLimit :: Size Abs +tabletDesktopLimit :: Size LengthUnit tabletDesktopLimit = (px 950) -- cgit v1.2.3