From ebd304d97b612d0ac4ea276b1c29ba8ecc0b7998 Mon Sep 17 00:00:00 2001 From: Joris Date: Thu, 3 Sep 2015 21:56:17 +0200 Subject: Adapting design to smaller screens --- src/server/Design/Color.hs | 3 +++ src/server/Design/Global.hs | 43 ++++++++++++++++++++++++++++++------------- src/server/Design/Media.hs | 23 +++++++++++++++++++++++ 3 files changed, 56 insertions(+), 13 deletions(-) create mode 100644 src/server/Design/Media.hs (limited to 'src/server/Design') diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs index 0a84c9e..c1c4057 100644 --- a/src/server/Design/Color.hs +++ b/src/server/Design/Color.hs @@ -5,6 +5,9 @@ import qualified Clay.Color as C white :: C.Color white = C.white +greenSuccess :: C.Color +greenSuccess = C.green + redError :: C.Color redError = C.red diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs index f884db9..4933300 100644 --- a/src/server/Design/Global.hs +++ b/src/server/Design/Global.hs @@ -12,6 +12,7 @@ import qualified Clay.Display as D import Data.Text.Lazy (Text) import Design.Color as C +import Design.Media globalDesign :: Text globalDesign = renderWith compact [] global @@ -22,6 +23,10 @@ iconFontSize = 32 global :: Css global = do + body ? do + position relative + minWidth (px 550) + header ? do let headerHeight = 150 @@ -35,10 +40,8 @@ global = do let iconHeight = 50 let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2) position absolute - top (px 0) - right (px 10) - marginTop (px sideMargin) - marginRight (px sideMargin) + top (px sideMargin) + right (pct 2) height (px iconHeight) lineHeight (px iconHeight) backgroundColor C.white @@ -90,16 +93,23 @@ global = do ".name" ? do float floatLeft + width (pct 50) input ? width (pct 75) + label ? width (pct 20) + paddingRight (pct 5) ".cost" ? do - float floatRight - input ? do width (pct 50) - label ? marginRight (pct 5) - button ? do - defaultButton - width (pct 20) - height (px inputHeight) + float floatLeft + width (pct 35) + input ? width (pct 65) + label ? width (pct 30) + paddingRight (pct 5) + + button ? do + defaultButton + float floatLeft + width (pct 15) + height (px inputHeight) ".name.error" <> ".cost.error" ? do input ? borderColor C.redError @@ -141,7 +151,14 @@ global = do ".category" & width (pct 40) ".cost" & width (pct 20) ".user" & width (pct 20) - ".date" & width (pct 20) + ".date" & do + width (pct 20) + smallScreen $ do + ".shortDate" ? display inline + ".longDate" ? display none + largeScreen $ do + ".shortDate" ? display none + ".longDate" ? display inline ".remove" & do width (px 10) height (px 10) @@ -174,7 +191,7 @@ global = do ".result" ? do marginTop (px 40) textAlign (alignSide sideCenter) - ".success" ? color C.green + ".success" ? color C.greenSuccess ".error" ? color C.redError clearFix :: Css diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs new file mode 100644 index 0000000..925e2f9 --- /dev/null +++ b/src/server/Design/Media.hs @@ -0,0 +1,23 @@ +module Design.Media + ( smallScreen + , largeScreen + ) where + +import Clay +import Clay.Stylesheet +import qualified Clay.Media as M + +limit :: Integer +limit = 950 + +smallFeature :: [Feature] +smallFeature = [M.maxWidth (px (limit - 1))] + +largeFeature :: [Feature] +largeFeature = [M.minWidth (px limit)] + +smallScreen :: Css -> Css +smallScreen = query M.screen smallFeature + +largeScreen :: Css -> Css +largeScreen = query M.screen largeFeature -- cgit v1.2.3