aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/client/elm/View/Header.elm73
-rw-r--r--src/server/Design/Color.hs12
-rw-r--r--src/server/Design/Global.hs3
-rw-r--r--src/server/Design/Header.hs84
-rw-r--r--src/server/Design/Helper.hs6
-rw-r--r--src/server/Design/LoggedIn/Home/Add.hs32
-rw-r--r--src/server/Design/LoggedIn/Home/Expandables.hs6
-rw-r--r--src/server/Design/LoggedIn/Home/Pages.hs10
-rw-r--r--src/server/Design/LoggedIn/Home/Table.hs24
-rw-r--r--src/server/Design/Media.hs43
-rw-r--r--src/server/Design/SignIn.hs8
-rw-r--r--src/server/Model/Message/Key.hs1
-rw-r--r--src/server/Model/Message/Translations.hs5
13 files changed, 170 insertions, 137 deletions
diff --git a/src/client/elm/View/Header.elm b/src/client/elm/View/Header.elm
index 2edde27..74fc2cc 100644
--- a/src/client/elm/View/Header.elm
+++ b/src/client/elm/View/Header.elm
@@ -23,39 +23,40 @@ import View.Click exposing (clickTo)
renderHeader : Address Action -> Model -> Html
renderHeader address model =
- let item = specialItem True ""
- specialItem showCurrent additionalClasses route name =
- a
- ( [ classList
- [ ("item", True)
- , (additionalClasses, True)
- , ("current", showCurrent && TransitRouter.getRoute model == route)
- ]
- ] ++ clickTo route
- )
- [ text (getMessage name model.translations)
- ]
- in
- header
- []
- ( case model.view of
- LoggedInView { me, users } ->
- [ specialItem True "title" Home "SharedCost"
- , item Income "Income"
- , item Stat "Statistics"
- , button
- [ class "signOut item"
- , onClick address SignOut
- ]
- [ renderIcon "power-off" ]
- , div
- [ class "name" ]
- [ Dict.get me users
- |> Maybe.map .name
- |> Maybe.withDefault ""
- |> text
- ]
- ]
- _ ->
- [specialItem False "title" Home "SharedCost"]
- )
+ header
+ []
+ ( [ div [ class "title" ] [ text (getMessage "SharedCost" model.translations) ] ]
+ ++ let item route name =
+ a
+ ( [ classList
+ [ ("item", True)
+ , ("current", TransitRouter.getRoute model == route)
+ ]
+ ] ++ clickTo route
+ )
+ [ text (getMessage name model.translations)
+ ]
+ in case model.view of
+ LoggedInView { me, users } ->
+ [ item Home "PaymentsTitle"
+ , item Income "Income"
+ , item Stat "Statistics"
+ , div
+ [ class "nameSignOut" ]
+ [ div
+ [ class "name" ]
+ [ Dict.get me users
+ |> Maybe.map .name
+ |> Maybe.withDefault ""
+ |> text
+ ]
+ , button
+ [ class "signOut item"
+ , onClick address SignOut
+ ]
+ [ renderIcon "power-off" ]
+ ]
+ ]
+ _ ->
+ []
+ )
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 126a231..b59f738 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -20,11 +20,11 @@ blue = C.rgb 108 162 164
paymentFocus :: C.Color
paymentFocus = C.rgb 255 223 196
-darkGrey :: C.Color
-darkGrey = C.rgb 150 150 150
+mercury :: C.Color
+mercury = C.rgb 245 245 245
-grey :: C.Color
-grey = C.rgb 200 200 200
+pumice :: C.Color
+pumice = C.rgb 200 200 200
-lightGrey :: C.Color
-lightGrey = C.rgb 245 245 245
+mountainMist :: C.Color
+mountainMist = C.rgb 150 150 150
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index e2e98a7..f27859b 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -29,8 +29,7 @@ global = do
allKeyframes
body ? do
- position relative
- minWidth (px 550)
+ minWidth (px 320)
fontFamily ["Cantarell"] [sansSerif]
a ? cursor pointer
diff --git a/src/server/Design/Header.hs b/src/server/Design/Header.hs
index d4546f8..94334c6 100644
--- a/src/server/Design/Header.hs
+++ b/src/server/Design/Header.hs
@@ -8,52 +8,66 @@ import Data.Monoid ((<>))
import Clay
-import Design.Color as C
import Design.Constants
+import Design.Color as Color
+import qualified Design.Media as Media
design :: Css
design = do
- let headerHeight = px 80
- let headerPadding = px 20
- let darkenedRed = C.red +. 10
- lineHeight headerHeight
- height headerHeight
+ let headerPadding = "padding" -: "0 20px"
+ display flex
+ "flex-wrap" -: "wrap"
+ lineHeightMedia
marginBottom blockMarginBottom
position relative
- backgroundColor C.red
- color C.white
+ backgroundColor Color.red
+ color Color.white
- ".item" ? do
- float floatLeft
- paddingLeft headerPadding
- paddingRight headerPadding
- hover & backgroundColor darkenedRed
- focus & backgroundColor darkenedRed
- position relative
- ".current" & after & do
- display block
- content (stringContent "")
- height (px 5)
- width (pct 100)
- position absolute
- bottom (px 0)
- left (px 0)
- backgroundColor C.white
+ ".title" <> ".item" ? headerPadding
".title" ? do
height (pct 100)
- fontSize (px 35)
textAlign (alignSide sideLeft)
- paddingLeft headerPadding
- paddingRight headerPadding
- (".name" <> ".signOut") ? float floatRight
+ Media.mobile $ fontSize (px 22)
+ Media.mobileTablet $ width (pct 100)
+ Media.tabletDesktop $ do
+ display inlineBlock
+ fontSize (px 35)
- ".name" ? do
- paddingLeft headerPadding
- paddingRight headerPadding
+ ".item" ? do
+ display inlineBlock
+ transition "background-color" (ms 50) easeIn (sec 0)
+ ".current" & backgroundColor (Color.red -. 20)
+ Media.mobile $ fontSize (px 13)
- ".signOut" ? do
- height (pct 100)
- fontSize iconFontSize
- color C.white
+ (".item" # hover) <> (".item" # focus) ? backgroundColor (Color.red +. 10)
+ (".item.current" # hover) <> (".item.current" # focus) ? backgroundColor (Color.red -. 10)
+
+ ".nameSignOut" ? do
+ display flex
+ heightMedia
+ position absolute
+ top (px 0)
+ right (px 0)
+
+ ".name" ? do
+ Media.mobile $ display none
+ Media.tabletDesktop $ headerPadding
+
+ ".signOut" ? do
+ heightMedia
+ color Color.white
+
+ Media.mobile $ fontSize (px 20)
+ Media.tabletDesktop $ fontSize iconFontSize
+
+lineHeightMedia :: Css
+lineHeightMedia = do
+ Media.mobile $ lineHeight (px 50)
+ Media.tabletDesktop $ lineHeight (px 80)
+
+heightMedia :: Css
+heightMedia = do
+ 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 f4c19fa..2f0aceb 100644
--- a/src/server/Design/Helper.hs
+++ b/src/server/Design/Helper.hs
@@ -17,7 +17,7 @@ import Clay
import Data.Monoid ((<>))
import Design.Constants
-import Design.Color as C
+import Design.Color as Color
import qualified Clay.Display as D
clearFix :: Css
@@ -58,8 +58,8 @@ defaultInput h = do
height (px h)
padding (px 10) (px 10) (px 10) (px 10)
borderRadius radius radius radius radius
- border solid (px 1) C.darkGrey
- focus & borderColor C.grey
+ border solid (px 1) Color.mountainMist
+ focus & borderColor Color.pumice
verticalAlign middle
centeredWithMargin :: Css
diff --git a/src/server/Design/LoggedIn/Home/Add.hs b/src/server/Design/LoggedIn/Home/Add.hs
index 7613ba3..1a8b499 100644
--- a/src/server/Design/LoggedIn/Home/Add.hs
+++ b/src/server/Design/LoggedIn/Home/Add.hs
@@ -8,7 +8,7 @@ import Data.Monoid ((<>))
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -28,8 +28,8 @@ design = do
display inlineBlock
width (px 50)
textAlign (alignSide sideCenter)
- backgroundColor C.darkGrey
- color C.white
+ backgroundColor Color.mountainMist
+ color Color.white
height (px inputHeight)
lineHeight (px inputHeight)
fontSize (px 22)
@@ -40,10 +40,10 @@ design = do
defaultInput inputHeight
borderRadius radius (px 0) (px 0) radius
"width" -: "calc(100% - 40px)"
- "input:focus + label" ? backgroundColor C.grey
+ "input:focus + label" ? backgroundColor Color.pumice
hover & do
- input ? borderColor C.grey
- label ? backgroundColor C.grey
+ input ? borderColor Color.pumice
+ label ? backgroundColor Color.pumice
".name" ? minWidth (px 150)
@@ -52,36 +52,36 @@ design = do
marginRight (pct blockPercentMargin)
(".punctual" <> ".monthly") ? do
- defaultButton C.lightGrey C.darkGrey (px $ inputHeight `Prelude.div` 2) focusLighten
+ defaultButton Color.mercury Color.mountainMist (px $ inputHeight `Prelude.div` 2) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
".selected" & do
- backgroundColor C.blue
- color C.white
+ backgroundColor Color.blue
+ color Color.white
hover & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten C.blue)
+ ".selected" & backgroundColor (focusLighten Color.blue)
focus & (".punctual" <> ".monthly") ?
- ".selected" & backgroundColor (focusLighten C.blue)
+ ".selected" & backgroundColor (focusLighten Color.blue)
".punctual" ? borderRadius radius radius 0 0
".monthly" ? borderRadius 0 0 radius radius
button # ".add" ? do
- defaultButton C.red C.white (px inputHeight) focusLighten
+ defaultButton Color.red Color.white (px inputHeight) focusLighten
paddingLeft (px 15)
paddingRight (px 15)
i ? marginLeft (px 10)
".waitingServer" & ("cursor" -: "not-allowed")
".name.error" <> ".cost.error" ? do
- input ? borderColor C.redError
- label ? backgroundColor C.redError
- "input:focus + label" ? backgroundColor C.redError
+ input ? borderColor Color.redError
+ label ? backgroundColor Color.redError
+ "input:focus + label" ? backgroundColor Color.redError
".errorMessage" ? do
position absolute
- color C.redError
+ color Color.redError
top (px (inputHeight + 10))
left (px 0)
diff --git a/src/server/Design/LoggedIn/Home/Expandables.hs b/src/server/Design/LoggedIn/Home/Expandables.hs
index 5ba5711..dc36392 100644
--- a/src/server/Design/LoggedIn/Home/Expandables.hs
+++ b/src/server/Design/LoggedIn/Home/Expandables.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Expandables
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -18,10 +18,10 @@ design = do
right blockPadding
bottom (px 2)
- ".monthlyPayments" ? expandBlock C.blue C.white (px inputHeight)
+ ".monthlyPayments" ? expandBlock Color.blue Color.white (px inputHeight)
".account" ? do
- expandBlock C.green C.white (px inputHeight)
+ expandBlock Color.green Color.white (px inputHeight)
".userName" ? marginRight (px 10)
".detail" |> ".header" ? borderRadius radius radius 0 0
diff --git a/src/server/Design/LoggedIn/Home/Pages.hs b/src/server/Design/LoggedIn/Home/Pages.hs
index 0572fbf..f95a925 100644
--- a/src/server/Design/LoggedIn/Home/Pages.hs
+++ b/src/server/Design/LoggedIn/Home/Pages.hs
@@ -6,7 +6,7 @@ module Design.LoggedIn.Home.Pages
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants
@@ -17,9 +17,9 @@ design = do
clearFix
".page" ? do
- defaultButton C.white C.darkGrey (px 50) focusDarken
+ defaultButton Color.white Color.mountainMist (px 50) focusDarken
display inlineBlock
- border solid (px 2) C.darkGrey
+ border solid (px 2) Color.mountainMist
marginRight (px 10)
paddingLeft (px 10)
paddingRight (px 10)
@@ -28,5 +28,5 @@ design = do
":not(.current)" & cursor pointer
".current" & do
- borderColor C.red
- color C.red
+ borderColor Color.red
+ color Color.red
diff --git a/src/server/Design/LoggedIn/Home/Table.hs b/src/server/Design/LoggedIn/Home/Table.hs
index 58ffb33..e7a00d1 100644
--- a/src/server/Design/LoggedIn/Home/Table.hs
+++ b/src/server/Design/LoggedIn/Home/Table.hs
@@ -9,8 +9,8 @@ import Data.Monoid ((<>))
import Clay
import qualified Clay.Display as D
-import Design.Color as C
-import Design.Media
+import Design.Color as Color
+import qualified Design.Media as Media
import Design.Constants
import Design.Helper
@@ -26,8 +26,8 @@ design = do
".header" ? do
fontWeight bold
- backgroundColor C.blue
- color C.white
+ backgroundColor Color.blue
+ color Color.white
fontSize iconFontSize
lineHeight headerHeight
@@ -46,7 +46,7 @@ design = do
width (px borderW)
height (px rowHeightPx)
- backgroundColor C.green
+ backgroundColor Color.green
".cell:first-child::after" ? do
display block
@@ -59,12 +59,12 @@ design = do
height (px 0)
borderTop solid (px triangleH) transparent
borderBottom solid (px triangleH) transparent
- borderLeft solid (px triangleW) C.green
+ borderLeft solid (px triangleW) Color.green
nthChild "odd" & do
- backgroundColor C.lightGrey
+ backgroundColor Color.mercury
".edition" & do
- backgroundColor C.paymentFocus
+ backgroundColor Color.paymentFocus
".delete" |> button ? visibility visible
".cell" ? do
@@ -73,14 +73,14 @@ design = do
".category" & width (pct 40)
".cost" & do
width (pct 17)
- ".refund" & color C.green
+ ".refund" & color Color.green
".user" & width (pct 20)
".date" & do
width (pct 20)
- smallScreen $ do
+ Media.mobileTablet $ do
".shortDate" ? display inline
".longDate" ? display none
- largeScreen $ do
+ Media.desktop $ do
".shortDate" ? display none
".longDate" ? display inline
".delete" & do
@@ -88,7 +88,7 @@ design = do
width (pct 3)
textAlign (alignSide sideCenter)
button ? do
- defaultButton C.red C.white (px rowHeightPx) focusLighten
+ defaultButton Color.red Color.white (px rowHeightPx) focusLighten
borderRadius (px 0) (px 0) (px 0) (px 0)
position absolute
top (px 0)
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
index df91505..d61a8e1 100644
--- a/src/server/Design/Media.hs
+++ b/src/server/Design/Media.hs
@@ -1,23 +1,36 @@
module Design.Media
- ( smallScreen
- , largeScreen
+ ( mobile
+ , mobileTablet
+ , tablet
+ , tabletDesktop
+ , desktop
) where
-import Clay
-import Clay.Stylesheet
-import qualified Clay.Media as M
+import Clay hiding (query)
+import qualified Clay
+import Clay.Stylesheet (Feature)
+import qualified Clay.Media as Media
-limit :: Integer
-limit = 950
+mobile :: Css -> Css
+mobile = query [Media.maxWidth mobileTabletLimit]
-smallFeature :: [Feature]
-smallFeature = [M.maxWidth (px limit)]
+mobileTablet :: Css -> Css
+mobileTablet = query [Media.maxWidth tabletDesktopLimit]
-largeFeature :: [Feature]
-largeFeature = [M.minWidth (px limit)]
+tablet :: Css -> Css
+tablet = query [Media.minWidth mobileTabletLimit, Media.maxWidth tabletDesktopLimit]
-smallScreen :: Css -> Css
-smallScreen = query M.screen smallFeature
+tabletDesktop :: Css -> Css
+tabletDesktop = query [Media.minWidth mobileTabletLimit]
-largeScreen :: Css -> Css
-largeScreen = query M.screen largeFeature
+desktop :: Css -> Css
+desktop = query [Media.minWidth tabletDesktopLimit]
+
+query :: [Feature] -> Css -> Css
+query = Clay.query Media.screen
+
+mobileTabletLimit :: Size Abs
+mobileTabletLimit = (px 520)
+
+tabletDesktopLimit :: Size Abs
+tabletDesktopLimit = (px 950)
diff --git a/src/server/Design/SignIn.hs b/src/server/Design/SignIn.hs
index c319d1e..479008a 100644
--- a/src/server/Design/SignIn.hs
+++ b/src/server/Design/SignIn.hs
@@ -6,7 +6,7 @@ module Design.SignIn
import Clay
-import Design.Color as C
+import Design.Color as Color
import Design.Helper
import Design.Constants (focusLighten)
@@ -27,7 +27,7 @@ design = do
marginBottom (px 10)
button ? do
- iconButton C.blue C.white (px inputHeight) focusLighten
+ iconButton Color.blue Color.white (px inputHeight) focusLighten
display block
width (pct 100)
fontSize (em 1.2)
@@ -36,5 +36,5 @@ design = do
".result" ? do
marginTop (px 40)
textAlign (alignSide sideCenter)
- ".success" ? color C.green
- ".error" ? color C.redError
+ ".success" ? color Color.green
+ ".error" ? color Color.redError
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index 6d48682..32c7856 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -61,6 +61,7 @@ data Key =
| Monthly
| SingularMonthlyCount
| PluralMonthlyCount
+ | PaymentsTitle
| Payment
| Payments
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index e31d2df..973b756 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -235,6 +235,11 @@ m l PluralMonthlyCount =
English -> "{1} monthly payments totalling {2}"
French -> "{1} paiements mensuels comptabilisant {2}"
+m l PaymentsTitle =
+ case l of
+ English -> "Payments"
+ French -> "Paiements"
+
m l Payment =
case l of
English -> "payment"
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-06 10:20:09 +0000