aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design/LoggedIn
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design/LoggedIn')
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs102
-rw-r--r--src/server/Design/LoggedIn/Income.hs26
-rw-r--r--src/server/Design/LoggedIn/Table.hs85
3 files changed, 114 insertions, 99 deletions
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 3358f5d..73ced3a 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -4,101 +4,31 @@ module Design.LoggedIn.Home.Table
( design
) where
-import Data.Monoid ((<>))
-
import Clay
-import qualified Clay.Display as D
-import Design.Color as Color
import qualified Design.Media as Media
design :: Css
design = do
- ".noPayment" ? do
- margin (em 2) (em 2) (em 2) (em 2)
- textAlign (alignSide sideCenter)
+ ".cell" ? do
+ ".category" & do
+ Media.tabletDesktop $ width (pct 36)
- ".lines" ? do
- Media.tabletDesktop $ display D.table
- width (pct 100)
- textAlign (alignSide (sideCenter))
+ ".cost" & do
+ Media.tabletDesktop $ width (pct 15)
- ".header" <> ".row" ? do
- Media.tabletDesktop $ display tableRow
+ ".user" & do
+ Media.tabletDesktop $ width (pct 20)
- ".header" ? do
+ ".date" & do
+ Media.tabletDesktop $ width (pct 20)
Media.desktop $ do
- fontSize (px 18)
- height (px 70)
-
- Media.tabletDesktop $ do
- backgroundColor Color.gothic
- color Color.white
-
+ ".shortDate" ? display none
+ ".longDate" ? display inline
Media.tablet $ do
- fontSize (px 16)
- height (px 60)
-
+ ".shortDate" ? display inline
+ ".longDate" ? display none
Media.mobile $ do
- display none
-
- ".row" ? do
- nthChild "even" & backgroundColor Color.wildSand
-
- Media.desktop $ do
- fontSize (px 18)
- height (px 60)
-
- Media.tablet $ do
- height (px 50)
-
- Media.mobile $ do
- lineHeight (px 25)
- paddingTop (px 10)
- paddingBottom (px 10)
-
- ".cell" ? do
- Media.tabletDesktop $ display tableCell
- position relative
- verticalAlign middle
-
- ".category" & do
- Media.tabletDesktop $ width (pct 36)
- Media.mobile $ do
- fontSize (px 20)
- lineHeight (px 30)
- color Color.gothic
-
- ".cost" & do
- Media.tabletDesktop $ width (pct 15)
- ".refund" & color Color.mossGreen
-
- ".user" & do
- Media.tabletDesktop $ width (pct 20)
-
- ".date" & 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.mobile $ do
- ".shortDate" ? display none
- ".longDate" ? display inline
- marginBottom (em 0.5)
-
- ".cell.button" & do
- position relative
- textAlign (alignSide sideCenter)
- 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
+ ".shortDate" ? display none
+ ".longDate" ? display inline
+ marginBottom (em 0.5)
diff --git a/src/server/Design/LoggedIn/Income.hs b/src/server/Design/LoggedIn/Income.hs
index 5773e04..c44c67b 100644
--- a/src/server/Design/LoggedIn/Income.hs
+++ b/src/server/Design/LoggedIn/Income.hs
@@ -9,21 +9,21 @@ 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 = do
+design =
+ ".monthlyNetIncomes" ? do
- h1 ? paddingBottom (px 0)
+ h1 ? do
+ Media.tabletDesktop $ float floatLeft
- form ? do
- display flex
- "alignItems" -: "center"
- "margin-bottom" -: "4vh"
- ".textInput" ? marginRight (px 30)
-
- button # ".add" ? do
+ ".addIncome" ? do
Helper.button Color.chestnutRose Color.white (px Constants.inputHeight) Constants.focusLighten
- marginTop (px 3)
-
- ul # ".incomes" ? button ?
- marginLeft (px 12)
+ 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
new file mode 100644
index 0000000..1af5e2b
--- /dev/null
+++ b/src/server/Design/LoggedIn/Table.hs
@@ -0,0 +1,85 @@
+{-# LANGUAGE OverloadedStrings #-}
+
+module Design.LoggedIn.Table
+ ( design
+ ) where
+
+import Data.Monoid ((<>))
+
+import Clay
+import qualified Clay.Display as D
+
+import Design.Color as Color
+import qualified Design.Media as Media
+
+design :: Css
+design = do
+ ".emptyTableMsg" ? do
+ margin (em 2) (em 2) (em 2) (em 2)
+ textAlign (alignSide sideCenter)
+
+ ".lines" ? do
+ Media.tabletDesktop $ display D.table
+ width (pct 100)
+ textAlign (alignSide (sideCenter))
+
+ ".header" <> ".row" ? do
+ Media.tabletDesktop $ display tableRow
+
+ ".header" ? do
+ 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
+ nthChild "even" & backgroundColor Color.wildSand
+
+ Media.desktop $ do
+ fontSize (px 18)
+ height (px 60)
+
+ Media.tablet $ do
+ height (px 50)
+
+ Media.mobile $ do
+ lineHeight (px 25)
+ paddingTop (px 10)
+ paddingBottom (px 10)
+
+ ".cell" ? do
+ Media.tabletDesktop $ display tableCell
+ position relative
+ verticalAlign middle
+
+ firstChild & do
+ Media.mobile $ do
+ fontSize (px 20)
+ lineHeight (px 30)
+ color Color.gothic
+
+ ".refund" & color Color.mossGreen
+
+ ".cell.button" & do
+ position relative
+ textAlign (alignSide sideCenter)
+ 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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 05:33:38 +0000