aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design/LoggedIn/Home
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design/LoggedIn/Home')
-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
3 files changed, 138 insertions, 50 deletions
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