From ba33dfef23d070bfff92d6322808507c1b7d2814 Mon Sep 17 00:00:00 2001 From: Joris Date: Wed, 29 Jun 2016 23:33:40 +0200 Subject: Responsive home page --- src/server/Design/LoggedIn/Home/Header.hs | 60 ++++++++++++++++------ src/server/Design/LoggedIn/Home/Pages.hs | 44 ++++++++++++---- src/server/Design/LoggedIn/Home/Table.hs | 84 ++++++++++++++++++++++--------- 3 files changed, 138 insertions(+), 50 deletions(-) (limited to 'src/server/Design/LoggedIn/Home') diff --git a/src/server/Design/LoggedIn/Home/Header.hs b/src/server/Design/LoggedIn/Home/Header.hs index 9008a95..5fd2d79 100644 --- a/src/server/Design/LoggedIn/Home/Header.hs +++ b/src/server/Design/LoggedIn/Home/Header.hs @@ -4,6 +4,8 @@ module Design.LoggedIn.Home.Header ( design ) where +import Data.Monoid ((<>)) + import Clay import Design.Constants @@ -11,46 +13,72 @@ import Design.Constants import qualified Design.Helper as Helper import qualified Design.Color as Color import qualified Design.Constants as Constants +import qualified Design.Media as Media design :: Css design = do - marginBottom blockMarginBottom + Media.desktop $ marginBottom (em 3) + Media.mobileTablet $ marginBottom (em 2) marginLeft (pct blockPercentMargin) marginRight (pct blockPercentMargin) - ".exceedingPayers" ? do - backgroundColor Color.mossGreen - padding (px 10) (px 10) (px 10) (px 10) - borderRadius (px 5) (px 5) (px 5) (px 5) - color Color.white + ".payerAndAdd" ? do + Media.tabletDesktop $ display flex marginBottom (em 1) - ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ") + ".exceedingPayers" ? do + backgroundColor Color.mossGreen + borderRadius (px 5) (px 5) (px 5) (px 5) + color Color.white + lineHeight (px Constants.inputHeight) + paddingLeft (px 10) + paddingRight (px 10) + + Media.tabletDesktop $ do + "flex-grow" -: "1" + marginRight (px 15) + + Media.mobile $ do + marginBottom (em 1) + textAlign (alignSide sideCenter) + + ".exceedingPayer:not(:last-child)::after" ? content (stringContent ", ") + + ".userName" ? marginRight (px 8) - ".userName" ? marginRight (px 5) + ".addPayment" ? do + Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten + Media.mobile $ width (pct 100) ".searchLine" ? do marginBottom (em 1) form ? do - display inlineBlock + Media.mobile $ textAlign (alignSide sideCenter) ".textInput" ? do display inlineBlock - marginRight (px 30) marginBottom (px 0) + Media.tabletDesktop $ marginRight (px 30) + Media.mobile $ do + marginBottom (em 1) + width (pct 100) + ".radioGroup" ? do display inlineBlock marginBottom (px 0) ".title" ? display none - ".addPayment" ? do - Helper.defaultButton Color.chestnutRose Color.white (px 47) Constants.focusLighten - float floatRight - ".infos" ? do - lineHeight (px Constants.inputHeight) + Media.tabletDesktop $ lineHeight (px Constants.inputHeight) + Media.mobile $ lineHeight (px 25) + + ".total" <> ".partition" ? do + Media.mobileTablet $ display block + Media.mobile $ do + fontSize (pct 90) + textAlign (alignSide sideCenter) ".partition" ? do color Color.dustyGray - marginLeft (px 15) + Media.desktop $ marginLeft (px 15) diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs index 1d5899f..71f3254 100644 --- a/src/server/Design/LoggedIn/Home/Pages.hs +++ b/src/server/Design/LoggedIn/Home/Pages.hs @@ -6,25 +6,47 @@ module Design.LoggedIn.Home.Pages import Clay -import Design.Color as Color -import Design.Helper -import Design.Constants +import qualified Design.Color as Color +import qualified Design.Helper as Helper +import qualified Design.Constants as Constants +import qualified Design.Media as Media design :: Css design = do - padding (px 40) (px 30) (px 30) (px 30) - textAlign (alignSide (sideCenter)) - clearFix + textAlign (alignSide sideCenter) + Helper.clearFix + + Media.desktop $ do + padding (px 40) (px 30) (px 30) (px 30) + + Media.tablet $ do + padding (px 30) (px 30) (px 30) (px 30) + + Media.mobile $ do + padding (px 20) (px 0) (px 20) (px 0) + lineHeight (px 40) ".page" ? do - defaultButton Color.white Color.dustyGray (px 50) focusDarken display inlineBlock - border solid (px 2) Color.dustyGray - marginRight (px 10) - paddingLeft (px 10) - paddingRight (px 10) fontWeight bold + Media.desktop $ do + Helper.button Color.white Color.dustyGray (px 50) Constants.focusDarken + + Media.tabletDesktop $ do + border solid (px 2) Color.dustyGray + marginRight (px 10) + + Media.tablet $ do + Helper.button Color.white Color.dustyGray (px 40) Constants.focusDarken + fontSize (px 15) + + Media.mobile $ do + Helper.button Color.white Color.dustyGray (px 30) Constants.focusDarken + fontSize (px 12) + border solid (px 1) Color.dustyGray + marginRight (px 5) + ":not(.current)" & cursor pointer ".current" & do diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs index 3f55207..3358f5d 100644 --- a/src/server/Design/LoggedIn/Home/Table.hs +++ b/src/server/Design/LoggedIn/Home/Table.hs @@ -11,7 +11,6 @@ import qualified Clay.Display as D import Design.Color as Color import qualified Design.Media as Media -import Design.Constants as Constants design :: Css design = do @@ -20,47 +19,86 @@ design = do textAlign (alignSide sideCenter) ".lines" ? do - display D.table + Media.tabletDesktop $ display D.table width (pct 100) textAlign (alignSide (sideCenter)) - ".header" <> ".row" ? display tableRow - let headerHeight = (px 70) + ".header" <> ".row" ? do + Media.tabletDesktop $ display tableRow ".header" ? do - fontWeight bold - backgroundColor Color.gothic - color Color.white - fontSize (px 18) - height headerHeight + Media.desktop $ do + fontSize (px 18) + height (px 70) + + Media.tabletDesktop $ do + backgroundColor Color.gothic + color Color.white + + Media.tablet $ do + fontSize (px 16) + height (px 60) + + Media.mobile $ do + display none ".row" ? do - fontSize (px 18) - height (px rowHeightPx) + nthChild "even" & backgroundColor Color.wildSand + + Media.desktop $ do + fontSize (px 18) + height (px 60) - nthChild "odd" & do - backgroundColor Color.wildSand + Media.tablet $ do + height (px 50) + + Media.mobile $ do + lineHeight (px 25) + paddingTop (px 10) + paddingBottom (px 10) ".cell" ? do - display tableCell + Media.tabletDesktop $ display tableCell position relative verticalAlign middle - ".category" & width (pct 36) + + ".category" & do + Media.tabletDesktop $ width (pct 36) + Media.mobile $ do + fontSize (px 20) + lineHeight (px 30) + color Color.gothic + ".cost" & do - width (pct 15) + Media.tabletDesktop $ width (pct 15) ".refund" & color Color.mossGreen - ".user" & width (pct 20) + + ".user" & do + Media.tabletDesktop $ width (pct 20) + ".date" & do - width (pct 20) - Media.mobileTablet $ do + Media.tabletDesktop $ width (pct 20) + Media.desktop $ do + ".shortDate" ? display none + ".longDate" ? display inline + Media.tablet $ do ".shortDate" ? display inline ".longDate" ? display none - Media.desktop $ do + Media.mobile $ do ".shortDate" ? display none ".longDate" ? display inline + marginBottom (em 0.5) + ".cell.button" & do position relative - width (pct 3) textAlign (alignSide sideCenter) - button # hover ? "svg path" ? do - "fill" -: "rgb(237, 122, 116)" + button ? do + padding (px 10) (px 10) (px 10) (px 10) + hover & "svg path" ? do + "fill" -: "rgb(237, 122, 116)" + + Media.tabletDesktop $ width (pct 3) + + Media.mobile $ do + display inlineBlock + button ? display flex -- cgit v1.2.3