aboutsummaryrefslogtreecommitdiff
path: root/src/server/Design/Global.hs
diff options
context:
space:
mode:
Diffstat (limited to 'src/server/Design/Global.hs')
-rw-r--r--src/server/Design/Global.hs291
1 files changed, 6 insertions, 285 deletions
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index 951bb09..092e66e 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -4,40 +4,17 @@ module Design.Global
( globalDesign
) where
-import Data.Monoid ((<>))
-
import Clay
-import qualified Clay.Display as D
import Data.Text.Lazy (Text)
-import Design.Color as C
-import Design.Media
+import Design.Header
+import Design.SignIn
+import Design.LoggedIn
globalDesign :: Text
globalDesign = renderWith compact [] global
-iconFontSize :: Size Abs
-iconFontSize = px 32
-
-radius :: Size Abs
-radius = px 3
-
-blockPadding :: Size Abs
-blockPadding = px 15
-
-blockPercentWidth :: Double
-blockPercentWidth = 90
-
-blockPercentMargin :: Double
-blockPercentMargin = (100 - blockPercentWidth) / 2
-
-blockMarginBottom :: Size Abs
-blockMarginBottom = px 50
-
-rowHeight :: Size Abs
-rowHeight = px 60
-
global :: Css
global = do
@@ -46,264 +23,8 @@ global = do
minWidth (px 550)
fontFamily ["Cantarell"] [sansSerif]
- header ? do
- let headerHeight = 80
- let sidePercent = (pct blockPercentMargin)
-
- h1 ? do
- fontSize (px 45)
- textAlign (alignSide sideLeft)
- backgroundColor C.red
- color C.white
- lineHeight (px headerHeight)
- marginBottom blockMarginBottom
- paddingLeft sidePercent
- button # ".signOut" ? do
- let iconHeight = 50
- let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
- position absolute
- top (px sideMargin)
- right sidePercent
- height (px iconHeight)
- lineHeight (px iconHeight)
- backgroundColor C.red
- color C.white
- fontSize iconFontSize
- hover & transform (scale 1.2 1.2)
-
- ".loggedIn" ? do
- let inputHeight = 40
-
- form ? do
- centeredWithMargin
- marginBottom blockMarginBottom
- display flex
- "justify-content" -: "center"
-
- ".name" <> ".cost" ? do
- position relative
- display flex
- marginRight (pct blockPercentMargin)
- label ? do
- fontWeight bold
- display inlineBlock
- width (px 40)
- textAlign (alignSide sideCenter)
- backgroundColor C.darkGrey
- color C.white
- height (px inputHeight)
- lineHeight (px inputHeight)
- fontSize (px 22)
- verticalAlign middle
- cursor cursorText
- borderRadius (px 0) radius radius (px 0)
- input ? do
- defaultInput inputHeight
- borderRadius radius (px 0) (px 0) radius
- "width" -: "calc(100% - 40px)"
- "input:focus + label" ? backgroundColor C.grey
-
- ".name" ? minWidth (px 150)
-
- button # ".frequency" ? do
- fontSize (pct 90)
- marginRight (pct blockPercentMargin)
-
- (".punctual" <> ".monthly") ? do
- defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2)
- paddingLeft (px 15)
- paddingRight (px 15)
- ".selected" & do
- backgroundColor C.blue
- color C.white
-
- ".punctual" ? borderRadius radius radius 0 0
- ".monthly" ? borderRadius 0 0 radius radius
-
- button # ".add" ? do
- defaultButton C.red C.white (px inputHeight)
- paddingLeft (px 15)
- paddingRight (px 15)
-
- ".name.error" <> ".cost.error" ? do
- input ? borderColor C.redError
- label ? backgroundColor C.redError
- "input:focus + label" ? backgroundColor C.redError
-
- ".errorMessage" ? do
- position absolute
- color C.redError
- top (px (inputHeight + 10))
- left (px 0)
-
- ".expandables" ? do
-
- ".expand" ? do
- position absolute
- right blockPadding
- bottom (px 2)
-
- ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+ signInDesign
- ".account" ? do
- expandBlock C.green C.white (px inputHeight)
+ headerDesign
- ".header" |> ".exceedingPayer" ? do
- lineHeight (px inputHeight)
- ".userName" ? marginRight (px 10)
-
- ".income" ? do
- backgroundColor C.lightGrey
- lineHeight rowHeight
- padding (px 0) (px 20) (px 0) (px 20)
-
- ".detail" |> ".header" ? borderRadius radius radius 0 0
-
- ".table" ? do
- display D.table
- width (pct 100)
- textAlign (alignSide (sideCenter))
- "border-spacing" -: "10 px"
-
- ".header" <> ".row" ? display tableRow
- let headerHeight = (px 70)
-
- ".header" ? do
- fontWeight bold
- backgroundColor C.blue
- color C.white
- fontSize iconFontSize
- lineHeight headerHeight
-
- ".row" ? do
- fontSize (px 20)
- cursor pointer
- lineHeight rowHeight
- nthChild "odd" & backgroundColor C.lightGrey
- ".edition" & do
- backgroundColor C.paymentFocus
- ".delete" ? visibility visible
-
- ".cell" ? do
- display tableCell
- ".category" & width (pct 40)
- ".cost" & do
- width (pct 17)
- ".refund" & color C.greenSuccess
- ".user" & width (pct 20)
- ".date" & do
- width (pct 20)
- smallScreen $ do
- ".shortDate" ? display inline
- ".longDate" ? display none
- largeScreen $ do
- ".shortDate" ? display none
- ".longDate" ? display inline
- ".delete" & do
- width (pct 3)
- height rowHeight
- textAlign (alignSide sideCenter)
- backgroundColor C.red
- visibility hidden
- button ? do
- width (pct 100)
- height (pct 100)
- color C.white
-
- ".pages" ? do
- padding (px 30) (px 30) (px 30) (px 30)
- textAlign (alignSide (sideCenter))
- clearFix
-
- ".page" ? do
- display inlineBlock
- border solid (px 2) C.darkGrey
- color C.darkGrey
- borderRadius radius radius radius radius
- marginRight (px 10)
- let h = 50
- paddingLeft (px 10)
- paddingRight (px 10)
- height (px h)
- lineHeight (px h)
- textAlign (alignSide (sideCenter))
- fontWeight bold
-
- ":not(.current)" & cursor pointer
-
- ".current" & do
- borderColor C.red
- color C.red
-
- ".signIn" ? do
-
- form ? do
- let inputHeight = 50
- width (px 500)
- marginTop (px 100)
- marginLeft auto
- marginRight auto
-
- input ? do
- defaultInput inputHeight
- display block
- width (pct 100)
- marginBottom (px 10)
-
- button ? do
- defaultButton C.red C.white (px inputHeight)
- display block
- width (pct 100)
-
- ".result" ? do
- marginTop (px 40)
- textAlign (alignSide sideCenter)
- ".success" ? color C.greenSuccess
- ".error" ? color C.redError
-
-clearFix :: Css
-clearFix =
- after & do
- content (stringContent "")
- display D.table
- clear both
-
-defaultButton :: Color -> Color -> Size Abs -> Css
-defaultButton backgroundCol textCol height = do
- backgroundColor backgroundCol
- color textCol
- borderRadius radius radius radius radius
- verticalAlign middle
- cursor pointer
- lineHeight height
- textAlign (alignSide sideCenter)
-
-defaultInput :: Integer -> Css
-defaultInput inputHeight = do
- height (px inputHeight)
- padding (px 10) (px 10) (px 10) (px 10)
- borderRadius radius radius radius radius
- border solid (px 1) C.darkGrey
- focus & borderColor C.grey
- verticalAlign middle
-
-centeredWithMargin :: Css
-centeredWithMargin = do
- width (pct blockPercentWidth)
- marginLeft auto
- marginRight auto
-
-expandBlock :: Color -> Color -> Size Abs -> Css
-expandBlock headerBackground headerColor headerHeight = do
- marginBottom blockMarginBottom
- marginLeft (pct blockPercentMargin)
- marginRight (pct blockPercentMargin)
- ".header" ? do
- defaultButton headerBackground headerColor headerHeight
- width (pct 100)
- fontSize (px 18)
- borderRadius radius radius radius radius
- textAlign (alignSide sideLeft)
- position relative
- paddingLeft blockPadding
- paddingRight (px 55)
+ loggedInDesign
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-01 19:38:24 +0000