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.hs7
-rw-r--r--src/server/Design/Form.hs36
-rw-r--r--src/server/Design/Helper.hs5
-rw-r--r--src/server/Design/LoggedIn.hs29
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs13
-rw-r--r--src/server/Design/LoggedIn/Income.hs29
-rw-r--r--src/server/Design/LoggedIn/Table.hs3
-rw-r--r--src/server/Design/Media.hs4
9 files changed, 80 insertions, 52 deletions
diff --git a/src/server/Design/Constants.hs b/src/server/Design/Constants.hs
index a532ac8..4e2b8cc 100644
--- a/src/server/Design/Constants.hs
+++ b/src/server/Design/Constants.hs
@@ -2,13 +2,13 @@ module Design.Constants where
import Clay
-iconFontSize :: Size Abs
+iconFontSize :: Size LengthUnit
iconFontSize = px 32
-radius :: Size Abs
+radius :: Size LengthUnit
radius = px 3
-blockPadding :: Size Abs
+blockPadding :: Size LengthUnit
blockPadding = px 15
blockPercentWidth :: Double
diff --git a/src/server/Design/Dialog.hs b/src/server/Design/Dialog.hs
index 2320c45..4678633 100644
--- a/src/server/Design/Dialog.hs
+++ b/src/server/Design/Dialog.hs
@@ -14,8 +14,11 @@ design = do
".content" ? do
minWidth (px 270)
- ".paymentDialog" ? do
- ".radioGroup" ? ".title" ? display none
+ ".paymentDialog" & do
+ ".radioGroup" ? ".title" ? display none
+ ".selectInput" ? do
+ select ? width (pct 100)
+ marginBottom (em 1)
".deletePaymentDialog" <> ".deleteIncomeDialog" ? do
h1 ? marginBottom (em 1.5)
diff --git a/src/server/Design/Form.hs b/src/server/Design/Form.hs
index 3043125..ebb8ac8 100644
--- a/src/server/Design/Form.hs
+++ b/src/server/Design/Form.hs
@@ -18,6 +18,10 @@ design = do
let inputPaddingBottom = 3
let inputZIndex = 1
+ label ? do
+ cursor pointer
+ color Color.silver
+
".textInput" ? do
position relative
marginBottom (em 1.5)
@@ -44,7 +48,6 @@ design = do
position absolute
top (px inputTop)
left (px 0)
- color Color.silver
transition "all" (sec 0.2) easeIn (sec 0)
button ? do
@@ -68,6 +71,15 @@ design = do
color Color.chestnutRose
fontSize (pct 80)
+ ".colorInput" ? do
+ display flex
+ alignItems center
+ marginBottom (em 1.5)
+
+ input ? do
+ borderColor transparent
+ backgroundColor transparent
+
".radioGroup" ? do
position relative
marginBottom (em 2)
@@ -90,11 +102,29 @@ design = do
width (px 30)
margin (px 0) (px (-15)) (px 0) (px (-15))
- label ? cursor pointer
-
"input:focus + label" ? do
textDecoration underline
"input:checked + label" ? do
color Color.chestnutRose
fontWeight bold
+
+ ".selectInput" ? do
+ label ? do
+ display block
+ marginBottom (px 10)
+ fontSize (pct 80)
+ select ? do
+ backgroundColor Color.white
+ border solid (px 1) Color.silver
+ sym borderRadius (px 3)
+ sym2 padding (px 5) (px 8)
+ option ? do
+ firstChild & display none
+ sym2 padding (px 5) (px 8)
+ ".error" & do
+ select ? borderColor Color.chestnutRose
+ ".errorMessage" ? do
+ color Color.chestnutRose
+ fontSize (pct 80)
+ marginTop (em 0.5)
diff --git a/src/server/Design/Helper.hs b/src/server/Design/Helper.hs
index f25cf05..869616d 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -17,13 +17,12 @@ import Data.Monoid ((<>))
import Design.Constants
import Design.Color as Color
-import qualified Clay.Display as D
clearFix :: Css
clearFix =
after & do
content (stringContent "")
- display D.table
+ display displayTable
clear both
button :: Color -> Color -> Size a -> (Color -> Color) -> Css
@@ -40,7 +39,7 @@ button backgroundCol textCol h focusOp = do
hover & backgroundColor (focusOp backgroundCol)
focus & backgroundColor (focusOp backgroundCol)
-iconButton :: Color -> Color -> Size Abs -> (Color -> Color) -> Css
+iconButton :: Color -> Color -> Size LengthUnit -> (Color -> Color) -> Css
iconButton backgroundCol textCol h focusOp = do
button backgroundCol textCol h focusOp
i <> span ? do
diff --git a/src/server/Design/LoggedIn.hs b/src/server/Design/LoggedIn.hs
index 2899fa4..4a21832 100644
--- a/src/server/Design/LoggedIn.hs
+++ b/src/server/Design/LoggedIn.hs
@@ -7,16 +7,39 @@ module Design.LoggedIn
import Clay
import qualified Design.LoggedIn.Home as Home
-import qualified Design.LoggedIn.Income as Income
import qualified Design.LoggedIn.Stat as Stat
import qualified Design.LoggedIn.Table as Table
+import qualified Design.Helper as Helper
+import qualified Design.Constants as Constants
+import qualified Design.Color as Color
+import qualified Design.Media as Media
+
design :: Css
design = do
".home" ? Home.design
- ".income" ? Income.design
".stat" ? Stat.design
Table.design
- ".textual" ? do
+ ".withMargin" ? do
"margin" -: "0 2vw"
+
+ ".titleButton" ? do
+ h1 ? do
+ Media.tabletDesktop $ float floatLeft
+
+ button ? do
+ Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
+ Media.tabletDesktop $ do
+ float floatRight
+ position relative
+ top (px (-8))
+ Media.mobile $ do
+ width (pct 100)
+ marginBottom (px 20)
+
+ ".tag" ? do
+ sym borderRadius (px 4)
+ sym2 padding (px 2) (px 5)
+ boxShadow (px 2) (px 2) (px 5) (rgba 0 0 0 0.3)
+ color Color.white
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 73ced3a..cb46ac9 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -11,17 +11,20 @@ import qualified Design.Media as Media
design :: Css
design = do
".cell" ? do
- ".category" & do
- Media.tabletDesktop $ width (pct 36)
+ ".name" & do
+ Media.tabletDesktop $ width (pct 30)
".cost" & do
- Media.tabletDesktop $ width (pct 15)
+ Media.tabletDesktop $ width (pct 10)
".user" & do
- Media.tabletDesktop $ width (pct 20)
+ Media.tabletDesktop $ width (pct 15)
+
+ ".category" & do
+ Media.tabletDesktop $ width (pct 10)
".date" & do
- Media.tabletDesktop $ width (pct 20)
+ Media.tabletDesktop $ width (pct 15)
Media.desktop $ do
".shortDate" ? display none
".longDate" ? display inline
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
deleted file mode 100644
index c44c67b..0000000
--- a/src/server/Design/LoggedIn/Income.hs
+++ /dev/null
@@ -1,29 +0,0 @@
-{-# LANGUAGE OverloadedStrings #-}
-
-module Design.LoggedIn.Income
- ( design
- ) where
-
-import Clay
-
-import qualified Design.Helper as Helper
-import qualified Design.Constants as Constants
-import qualified Design.Color as Color
-import qualified Design.Media as Media
-
-design :: Css
-design =
- ".monthlyNetIncomes" ? do
-
- h1 ? do
- Media.tabletDesktop $ float floatLeft
-
- ".addIncome" ? do
- Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
- Media.tabletDesktop $ do
- float floatRight
- position relative
- top (px (-8))
- Media.mobile $ do
- width (pct 100)
- marginBottom (px 20)
diff --git a/src/server/Design/LoggedIn/Table.hs b/src/server/Design/LoggedIn/Table.hs
index 1af5e2b..44b001a 100644
--- a/src/server/Design/LoggedIn/Table.hs
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -7,7 +7,6 @@ module Design.LoggedIn.Table
import Data.Monoid ((<>))
import Clay
-import qualified Clay.Display as D
import Design.Color as Color
import qualified Design.Media as Media
@@ -19,7 +18,7 @@ design = do
textAlign (alignSide sideCenter)
".lines" ? do
- Media.tabletDesktop $ display D.table
+ Media.tabletDesktop $ display displayTable
width (pct 100)
textAlign (alignSide (sideCenter))
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index d61a8e1..77220ee 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -29,8 +29,8 @@ desktop = query [Media.minWidth tabletDesktopLimit]
query :: [Feature] -> Css -> Css
query = Clay.query Media.screen
-mobileTabletLimit :: Size Abs
+mobileTabletLimit :: Size LengthUnit
mobileTabletLimit = (px 520)
-tabletDesktopLimit :: Size Abs
+tabletDesktopLimit :: Size LengthUnit
tabletDesktopLimit = (px 950)
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:40:34 +0000