aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Color.hs12
-rw-r--r--src/server/Design/Global.hs3
-rw-r--r--src/server/Design/Header.hs84
-rw-r--r--src/server/Design/Helper.hs6
-rw-r--r--src/server/Design/LoggedIn/Home/Add.hs32
-rw-r--r--src/server/Design/LoggedIn/Home/Expandables.hs6
-rw-r--r--src/server/Design/LoggedIn/Home/Pages.hs10
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs24
-rw-r--r--src/server/Design/Media.hs43
-rw-r--r--src/server/Design/SignIn.hs8
10 files changed, 127 insertions, 101 deletions
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 126a231..b59f738 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -20,11 +20,11 @@ blue = C.rgb 108 162 164
paymentFocus :: C.Color
paymentFocus = C.rgb 255 223 196
-darkGrey :: C.Color
-darkGrey = C.rgb 150 150 150
+mercury :: C.Color
+mercury = C.rgb 245 245 245
-grey :: C.Color
-grey = C.rgb 200 200 200
+pumice :: C.Color
+pumice = C.rgb 200 200 200
-lightGrey :: C.Color
-lightGrey = C.rgb 245 245 245
+mountainMist :: C.Color
+mountainMist = C.rgb 150 150 150
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e2e98a7..f27859b 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -29,8 +29,7 @@ global = do
allKeyframes
body ? do
- position relative
- minWidth (px 550)
+ minWidth (px 320)
fontFamily ["Cantarell"] [sansSerif]
a ? cursor pointer
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index d4546f8..94334c6 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,52 +8,66 @@ import Data.Monoid ((<>))
import Clay
-import Design.Color as C
import Design.Constants
+import Design.Color as Color
+import qualified Design.Media as Media
design :: Css
design = do
- let headerHeight = px 80
- let headerPadding = px 20
- let darkenedRed = C.red +. 10
- lineHeight headerHeight
- height headerHeight
+ let headerPadding = "padding" -: "0 20px"
+ display flex
+ "flex-wrap" -: "wrap"
+ lineHeightMedia
marginBottom blockMarginBottom
position relative
- backgroundColor C.red
- color C.white
+ backgroundColor Color.red
+ color Color.white
- ".item" ? do
- float floatLeft
- paddingLeft headerPadding
- paddingRight headerPadding
- hover & backgroundColor darkenedRed
- focus & backgroundColor darkenedRed
- position relative
- ".current" & after & do
- display block
- content (stringContent "")
- height (px 5)
- width (pct 100)
- position absolute
- bottom (px 0)
- left (px 0)
- backgroundColor C.white
+ ".title" <> ".item" ? headerPadding
".title" ? do
height (pct 100)
- fontSize (px 35)
textAlign (alignSide sideLeft)
- paddingLeft headerPadding
- paddingRight headerPadding
- (".name" <> ".signOut") ? float floatRight
+ Media.mobile $ fontSize (px 22)
+ Media.mobileTablet $ width (pct 100)
+ Media.tabletDesktop $ do
+ display inlineBlock
+ fontSize (px 35)
- ".name" ? do
- paddingLeft headerPadding
- paddingRight headerPadding
+ ".item" ? do
+ display inlineBlock
+ transition "background-color" (ms 50) easeIn (sec 0)
+ ".current" & backgroundColor (Color.red -. 20)
+ Media.mobile $ fontSize (px 13)
- ".signOut" ? do
- height (pct 100)
- fontSize iconFontSize
- color C.white
+ (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.red +. 10)
+ (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.red -. 10)
+
+ ".nameSignOut" ? do
+ display flex
+ heightMedia
+ position absolute
+ top (px 0)
+ right (px 0)
+
+ ".name" ? do
+ Media.mobile $ display none
+ Media.tabletDesktop $ headerPadding
+
+ ".signOut" ? do
+ heightMedia
+ color Color.white
+
+ Media.mobile $ fontSize (px 20)
+ Media.tabletDesktop $ fontSize iconFontSize
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+ Media.mobile $ lineHeight (px 50)
+ Media.tabletDesktop $ lineHeight (px 80)
+
+heightMedia :: Css
+heightMedia = do
+ Media.mobile $ height (px 50)
+ Media.tabletDesktop $ height (px 80)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index f4c19fa..2f0aceb 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -17,7 +17,7 @@ import Clay
import Data.Monoid ((<>))
import Design.Constants
-import Design.Color as C
+import Design.Color as Color
import qualified Clay.Display as D
clearFix :: Css
@@ -58,8 +58,8 @@ defaultInput h = do
height (px h)
padding (px 10) (px 10) (px 10) (px 10)
borderRadius radius radius radius radius
- border solid (px 1) C.darkGrey
- focus & borderColor C.grey
+ border solid (px 1) Color.mountainMist
+ focus & borderColor Color.pumice
verticalAlign middle
centeredWithMargin :: Css
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
index 7613ba3..1a8b499 100644
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -8,7 +8,7 @@ import Data.Monoid ((<>))
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -28,8 +28,8 @@ design = do
display inlineBlock
width (px 50)
textAlign (alignSide sideCenter)
- backgroundColor C.darkGrey
- color C.white
+ backgroundColor Color.mountainMist
+ color Color.white
height (px inputHeight)
lineHeight (px inputHeight)
fontSize (px 22)
@@ -40,10 +40,10 @@ design = do
defaultInput inputHeight
borderRadius radius (px 0) (px 0) radius
"width" -: "calc(100% - 40px)"
- "input:focus + label" ? backgroundColor C.grey
+ "input:focus + label" ? backgroundColor Color.pumice
hover & do
- input ? borderColor C.grey
- label ? backgroundColor C.grey
+ input ? borderColor Color.pumice
+ label ? backgroundColor Color.pumice
".name" ? minWidth (px 150)
@@ -52,36 +52,36 @@ design = do
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
- defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+ defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
- backgroundColor C.blue
- color C.white
+ backgroundColor Color.blue
+ color Color.white
hover & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten C.blue)
+ ".selected" & backgroundColor (focusLighten Color.blue)
focus & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten C.blue)
+ ".selected" & backgroundColor (focusLighten Color.blue)
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
- defaultButton C.red C.white (px inputHeight) focusLighten
+ defaultButton Color.red Color.white (px inputHeight) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
i ? marginLeft (px 10)
".waitingServer" & ("cursor" -: "not-allowed")
".name.error" <> ".cost.error" ? do
- input ? borderColor C.redError
- label ? backgroundColor C.redError
- "input:focus + label" ? backgroundColor C.redError
+ input ? borderColor Color.redError
+ label ? backgroundColor Color.redError
+ "input:focus + label" ? backgroundColor Color.redError
".errorMessage" ? do
position absolute
- color C.redError
+ color Color.redError
top (px (inputHeight + 10))
left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
index 5ba5711..dc36392 100644
--- a/src/server/Design/LoggedIn/Home/Expandables.hs
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Expandables
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -18,10 +18,10 @@ design = do
right blockPadding
bottom (px 2)
- ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+ ".monthlyPayments" ? expandBlock Color.blue Color.white (px inputHeight)
".account" ? do
- expandBlock C.green C.white (px inputHeight)
+ expandBlock Color.green Color.white (px inputHeight)
".userName" ? marginRight (px 10)
".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 0572fbf..f95a925 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Pages
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -17,9 +17,9 @@ design = do
clearFix
".page" ? do
- defaultButton C.white C.darkGrey (px 50) focusDarken
+ defaultButton Color.white Color.mountainMist (px 50) focusDarken
display inlineBlock
- border solid (px 2) C.darkGrey
+ border solid (px 2) Color.mountainMist
marginRight (px 10)
paddingLeft (px 10)
paddingRight (px 10)
@@ -28,5 +28,5 @@ design = do
":not(.current)" & cursor pointer
".current" & do
- borderColor C.red
- color C.red
+ borderColor Color.red
+ color Color.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 58ffb33..e7a00d1 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -9,8 +9,8 @@ import Data.Monoid ((<>))
import Clay
import qualified Clay.Display as D
-import Design.Color as C
-import Design.Media
+import Design.Color as Color
+import qualified Design.Media as Media
import Design.Constants
import Design.Helper
@@ -26,8 +26,8 @@ design = do
".header" ? do
fontWeight bold
- backgroundColor C.blue
- color C.white
+ backgroundColor Color.blue
+ color Color.white
fontSize iconFontSize
lineHeight headerHeight
@@ -46,7 +46,7 @@ design = do
width (px borderW)
height (px rowHeightPx)
- backgroundColor C.green
+ backgroundColor Color.green
".cell:first-child::after" ? do
display block
@@ -59,12 +59,12 @@ design = do
height (px 0)
borderTop solid (px triangleH) transparent
borderBottom solid (px triangleH) transparent
- borderLeft solid (px triangleW) C.green
+ borderLeft solid (px triangleW) Color.green
nthChild "odd" & do
- backgroundColor C.lightGrey
+ backgroundColor Color.mercury
".edition" & do
- backgroundColor C.paymentFocus
+ backgroundColor Color.paymentFocus
".delete" |> button ? visibility visible
".cell" ? do
@@ -73,14 +73,14 @@ design = do
".category" & width (pct 40)
".cost" & do
width (pct 17)
- ".refund" & color C.green
+ ".refund" & color Color.green
".user" & width (pct 20)
".date" & do
width (pct 20)
- smallScreen $ do
+ Media.mobileTablet $ do
".shortDate" ? display inline
".longDate" ? display none
- largeScreen $ do
+ Media.desktop $ do
".shortDate" ? display none
".longDate" ? display inline
".delete" & do
@@ -88,7 +88,7 @@ design = do
width (pct 3)
textAlign (alignSide sideCenter)
button ? do
- defaultButton C.red C.white (px rowHeightPx) focusLighten
+ defaultButton Color.red Color.white (px rowHeightPx) focusLighten
borderRadius (px 0) (px 0) (px 0) (px 0)
position absolute
top (px 0)
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index df91505..d61a8e1 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -1,23 +1,36 @@
module Design.Media
- ( smallScreen
- , largeScreen
+ ( mobile
+ , mobileTablet
+ , tablet
+ , tabletDesktop
+ , desktop
) where
-import Clay
-import Clay.Stylesheet
-import qualified Clay.Media as M
+import Clay hiding (query)
+import qualified Clay
+import Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
-limit :: Integer
-limit = 950
+mobile :: Css -> Css
+mobile = query [Media.maxWidth mobileTabletLimit]
-smallFeature :: [Feature]
-smallFeature = [M.maxWidth (px limit)]
+mobileTablet :: Css -> Css
+mobileTablet = query [Media.maxWidth tabletDesktopLimit]
-largeFeature :: [Feature]
-largeFeature = [M.minWidth (px limit)]
+tablet :: Css -> Css
+tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
-smallScreen :: Css -> Css
-smallScreen = query M.screen smallFeature
+tabletDesktop :: Css -> Css
+tabletDesktop = query [Media.minWidth mobileTabletLimit]
-largeScreen :: Css -> Css
-largeScreen = query M.screen largeFeature
+desktop :: Css -> Css
+desktop = query [Media.minWidth tabletDesktopLimit]
+
+query :: [Feature] -> Css -> Css
+query = Clay.query Media.screen
+
+mobileTabletLimit :: Size Abs
+mobileTabletLimit = (px 520)
+
+tabletDesktopLimit :: Size Abs
+tabletDesktopLimit = (px 950)
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index c319d1e..479008a 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,7 +6,7 @@ module Design.SignIn
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants (focusLighten)
@@ -27,7 +27,7 @@ design = do
marginBottom (px 10)
button ? do
- iconButton C.blue C.white (px inputHeight) focusLighten
+ iconButton Color.blue Color.white (px inputHeight) focusLighten
display block
width (pct 100)
fontSize (em 1.2)
@@ -36,5 +36,5 @@ design = do
".result" ? do
marginTop (px 40)
textAlign (alignSide sideCenter)
- ".success" ? color C.green
- ".error" ? color C.redError
+ ".success" ? color Color.green
+ ".error" ? color Color.redError
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-03 20:29:34 +0000