From 0b40b6b5583b5c437f83e61bf8913f2b4c447b24 Mon Sep 17 00:00:00 2001 From: Joris Date: Sat, 19 Oct 2019 09:36:03 +0200 Subject: Include pages into table component --- server/src/Design/View/Pages.hs | 55 +++++++++++++++++++++++++++++++++++++++++ server/src/Design/Views.hs | 2 ++ 2 files changed, 57 insertions(+) create mode 100644 server/src/Design/View/Pages.hs (limited to 'server/src') diff --git a/server/src/Design/View/Pages.hs b/server/src/Design/View/Pages.hs new file mode 100644 index 0000000..1482ef4 --- /dev/null +++ b/server/src/Design/View/Pages.hs @@ -0,0 +1,55 @@ +module Design.View.Pages + ( design + ) where + +import Clay + +import qualified Design.Color as Color +import qualified Design.Constants as Constants +import qualified Design.Helper as Helper +import qualified Design.Media as Media + +design :: Css +design = + ".pages" ? do + display flex + justifyContent center + + 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) + + svg ? "path" ? ("fill" -: Color.toString Color.dustyGray) + + ".page" ? do + display inlineBlock + 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 + borderColor Color.chestnutRose + color Color.chestnutRose diff --git a/server/src/Design/Views.hs b/server/src/Design/Views.hs index bf39cff..73b7240 100644 --- a/server/src/Design/Views.hs +++ b/server/src/Design/Views.hs @@ -10,6 +10,7 @@ import qualified Design.Helper as Helper import qualified Design.Media as Media import qualified Design.View.Header as Header import qualified Design.View.NotFound as NotFound +import qualified Design.View.Pages as Pages import qualified Design.View.Payment as Payment import qualified Design.View.SignIn as SignIn import qualified Design.View.Stat as Stat @@ -23,6 +24,7 @@ design = do ".stat" ? Stat.design ".notfound" ? NotFound.design Table.design + Pages.design ".withMargin" ? do "margin" -: "0 2vw" -- cgit v1.2.3