aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design')
-rw-r--r--src/server/Design/Constants.hs6
-rw-r--r--src/server/Design/Dialog.hs8
-rw-r--r--src/server/Design/Form.hs1
-rw-r--r--src/server/Design/Global.hs27
-rw-r--r--src/server/Design/Header.hs11
-rw-r--r--src/server/Design/Helper.hs16
-rw-r--r--src/server/Design/LoggedIn/Home/Header.hs60
-rw-r--r--src/server/Design/LoggedIn/Home/Pages.hs44
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs84
-rw-r--r--src/server/Design/LoggedIn/Income.hs2
-rw-r--r--src/server/Design/SignIn.hs10
11 files changed, 188 insertions, 81 deletions
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index 3395852..7d196cb 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -17,12 +17,6 @@ blockPercentWidth = 90
blockPercentMargin :: Double
blockPercentMargin = (100 - blockPercentWidth) / 2
-blockMarginBottom :: Size Abs
-blockMarginBottom = px 50
-
-rowHeightPx :: Integer
-rowHeightPx = 60
-
inputHeight :: Integer
inputHeight = 40
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
index f0b8009..2320c45 100644
--- a/src/server/Design/Dialog.hs
+++ b/src/server/Design/Dialog.hs
@@ -4,10 +4,18 @@ module Design.Dialog
( design
) where
+import Data.Monoid ((<>))
+
import Clay
design :: Css
design = do
+ ".content" ? do
+ minWidth (px 270)
+
".paymentDialog" ? do
".radioGroup" ? ".title" ? display none
+
+ ".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
+ h1 ? marginBottom (em 1.5)
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index caee8ff..3043125 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -25,6 +25,7 @@ design = do
marginTop (px (-10))
input ? do
+ width (pct 100)
position relative
zIndex inputZIndex
backgroundColor transparent
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index dfe19b0..26c1a42 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -15,9 +15,10 @@ import qualified Design.Form as Form
import qualified Design.Dialog as Dialog
import qualified Design.Tooltip as Tooltip
-import Design.Color as Color
-import Design.Helper as Helper
-import Design.Constants as 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
globalDesign :: Text
globalDesign = renderWith compact [] global
@@ -35,13 +36,25 @@ global = do
body ? do
minWidth (px 320)
fontFamily ["Cantarell"] [sansSerif]
+ Media.tablet $ do
+ fontSize (px 15)
+ button ? fontSize (px 15)
+ input ? fontSize (px 15)
+ Media.mobile $ do
+ fontSize (px 14)
+ button ? fontSize (px 14)
+ input ? fontSize (px 14)
a ? cursor pointer
h1 ? do
- fontSize (px 24)
color Color.chestnutRose
- "margin-bottom" -: "3vh"
+ marginBottom (em 1)
+ lineHeight (em 1.2)
+
+ Media.desktop $ fontSize (px 24)
+ Media.tablet $ fontSize (px 22)
+ Media.mobile $ fontSize (px 20)
ul ? do
"margin-bottom" -: "3vh"
@@ -57,7 +70,7 @@ global = do
"margin-top" -: "2vh"
".dialog" ? ".content" ? button ? do
- ".confirm" & Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
- ".undo" & Helper.defaultButton Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
+ ".confirm" & Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+ ".undo" & Helper.button Color.silver Color.white (px Constants.inputHeight) Constants.focusLighten
svg ? height (pct 100)
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index 4e31891..8feac64 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,7 +8,6 @@ import Data.Monoid ((<>))
import Clay
-import Design.Constants
import Design.Color as Color
import qualified Design.Media as Media
@@ -18,10 +17,12 @@ design = do
display flex
"flex-wrap" -: "wrap"
lineHeightMedia
- marginBottom blockMarginBottom
position relative
backgroundColor Color.chestnutRose
color Color.white
+ Media.desktop $ marginBottom (em 3)
+ Media.mobileTablet $ marginBottom (em 2)
+ Media.mobile $ marginBottom (em 1.5)
".title" <> ".item" ? headerPadding
@@ -62,10 +63,12 @@ design = do
lineHeightMedia :: Css
lineHeightMedia = do
+ Media.desktop $ lineHeight (px 80)
+ Media.tablet $ lineHeight (px 65)
Media.mobile $ lineHeight (px 50)
- Media.tabletDesktop $ lineHeight (px 80)
heightMedia :: Css
heightMedia = do
+ Media.desktop $ height (px 80)
+ Media.tablet $ height (px 65)
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 c8b3070..36cedb0 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -2,8 +2,8 @@
module Design.Helper
( clearFix
- , defaultButton
- , defaultInput
+ , button
+ , input
, iconButton
, centeredWithMargin
, verticalCentering
@@ -11,7 +11,7 @@ module Design.Helper
import Prelude hiding (span)
-import Clay
+import Clay hiding (button, input)
import Data.Monoid ((<>))
@@ -26,8 +26,8 @@ clearFix =
display D.table
clear both
-defaultButton :: Color -> Color -> Size a -> (Color -> Color) -> Css
-defaultButton backgroundCol textCol h focusOp = do
+button :: Color -> Color -> Size a -> (Color -> Color) -> Css
+button backgroundCol textCol h focusOp = do
backgroundColor backgroundCol
padding (px 0) (px 10) (px 0) (px 10)
color textCol
@@ -42,7 +42,7 @@ defaultButton backgroundCol textCol h focusOp = do
iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
iconButton backgroundCol textCol h focusOp = do
- defaultButton backgroundCol textCol h focusOp
+ button backgroundCol textCol h focusOp
i <> span ? do
height h
lineHeight h
@@ -53,8 +53,8 @@ iconButton backgroundCol textCol h focusOp = do
marginLeft (px 15)
marginRight (px 20)
-defaultInput :: Integer -> Css
-defaultInput h = do
+input :: Integer -> Css
+input h = do
height (px h)
padding (px 10) (px 10) (px 10) (px 10)
borderRadius radius radius radius radius
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
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index 84ae521..5773e04 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -22,7 +22,7 @@ design = do
".textInput" ? marginRight (px 30)
button # ".add" ? do
- Helper.defaultButton Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+ Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
marginTop (px 3)
ul # ".incomes" ? button ?
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index 2856016..75f2f98 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,9 +6,9 @@ module Design.SignIn
import Clay
-import Design.Color as Color
-import Design.Helper
-import Design.Constants (focusLighten)
+import qualified Design.Color as Color
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
design :: Css
design = do
@@ -21,13 +21,13 @@ design = do
marginRight auto
input ? do
- defaultInput inputHeight
+ Helper.input inputHeight
display block
width (pct 100)
marginBottom (px 10)
button ? do
- iconButton Color.gothic Color.white (px inputHeight) focusLighten
+ Helper.iconButton Color.gothic Color.white (px inputHeight) Constants.focusLighten
display block
width (pct 100)
fontSize (em 1.2)
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 20:42:12 +0000