aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/View/Date.elm35
-rw-r--r--src/client/View/Payments/Add.elm8
-rw-r--r--src/client/View/Payments/Table.elm18
-rw-r--r--src/server/Design/Color.hs3
-rw-r--r--src/server/Design/Global.hs43
-rw-r--r--src/server/Design/Media.hs23
-rw-r--r--src/server/Model/Message/Key.hs3
-rw-r--r--src/server/Model/Message/Translations.hs7
8 files changed, 113 insertions, 27 deletions
diff --git a/src/client/View/Date.elm b/src/client/View/Date.elm
index c96e99e..c239713 100644
--- a/src/client/View/Date.elm
+++ b/src/client/View/Date.elm
@@ -1,19 +1,46 @@
module View.Date
- ( renderDate
+ ( renderShortDate
+ , renderLongDate
) where
import Date exposing (..)
+import String
import Model.Translations exposing (..)
-renderDate : Date -> Translations -> String
-renderDate date translations =
+renderShortDate : Date -> Translations -> String
+renderShortDate date translations =
+ let params =
+ [ String.pad 2 '0' (toString (Date.day date))
+ , String.pad 2 '0' (toString (getMonthNumber (Date.month date)))
+ , toString (Date.year date)
+ ]
+ in getVarMessage params "ShortDate" translations
+
+renderLongDate : Date -> Translations -> String
+renderLongDate date translations =
let params =
[ toString (Date.day date)
, (getMessage (getMonthKey (Date.month date)) translations)
, toString (Date.year date)
]
- in getVarMessage params "Date" translations
+ in getVarMessage params "LongDate" translations
+
+getMonthNumber : Month -> Int
+getMonthNumber month =
+ case month of
+ Jan -> 1
+ Feb -> 2
+ Mar -> 3
+ Apr -> 4
+ May -> 5
+ Jun -> 6
+ Jul -> 7
+ Aug -> 8
+ Sep -> 9
+ Oct -> 10
+ Nov -> 11
+ Dec -> 12
getMonthKey : Month -> String
getMonthKey month =
diff --git a/src/client/View/Payments/Add.elm b/src/client/View/Payments/Add.elm
index c022d01..941f6b8 100644
--- a/src/client/View/Payments/Add.elm
+++ b/src/client/View/Payments/Add.elm
@@ -40,6 +40,7 @@ addPayment model addPayment =
[ id "nameInput"
, value addPayment.name
, on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateName)
+ , maxlength 20
]
[]
, label
@@ -57,6 +58,7 @@ addPayment model addPayment =
[ id "costInput"
, value addPayment.cost
, on "input" targetValue (Signal.message actions.address << UpdatePayment << UpdateAdd << UpdateCost)
+ , maxlength 7
]
[]
, label
@@ -67,8 +69,8 @@ addPayment model addPayment =
div [ class "errorMessage" ] [ text error ]
Nothing ->
text ""
- , button
- [ type' "submit" ]
- [ text (getMessage "Add" model.translations)]
]
+ , button
+ [ type' "submit" ]
+ [ text (getMessage "Add" model.translations)]
]
diff --git a/src/client/View/Payments/Table.elm b/src/client/View/Payments/Table.elm
index a180315..12b1a46 100644
--- a/src/client/View/Payments/Table.elm
+++ b/src/client/View/Payments/Table.elm
@@ -23,7 +23,7 @@ import Update exposing (..)
import Update.Payment exposing (..)
import View.Icon exposing (renderIcon)
-import View.Date exposing (renderDate)
+import View.Date exposing (..)
paymentsTable : Model -> PaymentView -> Html
paymentsTable model paymentView =
@@ -53,10 +53,18 @@ paymentLine model paymentView (id, payment) =
[ class ("row " ++ (if paymentView.edition == Just id then "edition" else ""))
, onClick actions.address (UpdatePayment (ToggleEdit id))
]
- [ div [ class "cell" ] [ text payment.name ]
- , div [ class "cell" ] [ text ((toString payment.cost) ++ " " ++ (getMessage "MoneySymbol" model.translations)) ]
- , div [ class "cell" ] [ text payment.userName ]
- , div [ class "cell" ] [ text (renderDate payment.creation model.translations) ]
+ [ div [ class "cell category" ] [ text payment.name ]
+ , div [ class "cell cost" ] [ text ((toString payment.cost) ++ " " ++ (getMessage "MoneySymbol" model.translations)) ]
+ , div [ class "cell user" ] [ text payment.userName ]
+ , div
+ [ class "cell date" ]
+ [ span
+ [ class "shortDate" ]
+ [ text (renderShortDate payment.creation model.translations) ]
+ , span
+ [ class "longDate" ]
+ [ text (renderLongDate payment.creation model.translations) ]
+ ]
, if paymentView.userName == payment.userName
then
div
diff --git a/src/server/Design/Color.hs b/src/server/Design/Color.hs
index 0a84c9e..c1c4057 100644
--- a/src/server/Design/Color.hs
+++ b/src/server/Design/Color.hs
@@ -5,6 +5,9 @@ import qualified Clay.Color as C
white :: C.Color
white = C.white
+greenSuccess :: C.Color
+greenSuccess = C.green
+
redError :: C.Color
redError = C.red
diff --git a/src/server/Design/Global.hs b/src/server/Design/Global.hs
index f884db9..4933300 100644
--- a/src/server/Design/Global.hs
+++ b/src/server/Design/Global.hs
@@ -12,6 +12,7 @@ import qualified Clay.Display as D
import Data.Text.Lazy (Text)
import Design.Color as C
+import Design.Media
globalDesign :: Text
globalDesign = renderWith compact [] global
@@ -22,6 +23,10 @@ iconFontSize = 32
global :: Css
global = do
+ body ? do
+ position relative
+ minWidth (px 550)
+
header ? do
let headerHeight = 150
@@ -35,10 +40,8 @@ global = do
let iconHeight = 50
let sideMargin = ((headerHeight - iconHeight) `Prelude.div` 2)
position absolute
- top (px 0)
- right (px 10)
- marginTop (px sideMargin)
- marginRight (px sideMargin)
+ top (px sideMargin)
+ right (pct 2)
height (px iconHeight)
lineHeight (px iconHeight)
backgroundColor C.white
@@ -90,16 +93,23 @@ global = do
".name" ? do
float floatLeft
+ width (pct 50)
input ? width (pct 75)
+ label ? width (pct 20)
+ paddingRight (pct 5)
".cost" ? do
- float floatRight
- input ? do width (pct 50)
- label ? marginRight (pct 5)
- button ? do
- defaultButton
- width (pct 20)
- height (px inputHeight)
+ float floatLeft
+ width (pct 35)
+ input ? width (pct 65)
+ label ? width (pct 30)
+ paddingRight (pct 5)
+
+ button ? do
+ defaultButton
+ float floatLeft
+ width (pct 15)
+ height (px inputHeight)
".name.error" <> ".cost.error" ? do
input ? borderColor C.redError
@@ -141,7 +151,14 @@ global = do
".category" & width (pct 40)
".cost" & width (pct 20)
".user" & width (pct 20)
- ".date" & width (pct 20)
+ ".date" & do
+ width (pct 20)
+ smallScreen $ do
+ ".shortDate" ? display inline
+ ".longDate" ? display none
+ largeScreen $ do
+ ".shortDate" ? display none
+ ".longDate" ? display inline
".remove" & do
width (px 10)
height (px 10)
@@ -174,7 +191,7 @@ global = do
".result" ? do
marginTop (px 40)
textAlign (alignSide sideCenter)
- ".success" ? color C.green
+ ".success" ? color C.greenSuccess
".error" ? color C.redError
clearFix :: Css
diff --git a/src/server/Design/Media.hs b/src/server/Design/Media.hs
new file mode 100644
index 0000000..925e2f9
--- /dev/null
+++ b/src/server/Design/Media.hs
@@ -0,0 +1,23 @@
+module Design.Media
+ ( smallScreen
+ , largeScreen
+ ) where
+
+import Clay
+import Clay.Stylesheet
+import qualified Clay.Media as M
+
+limit :: Integer
+limit = 950
+
+smallFeature :: [Feature]
+smallFeature = [M.maxWidth (px (limit - 1))]
+
+largeFeature :: [Feature]
+largeFeature = [M.minWidth (px limit)]
+
+smallScreen :: Css -> Css
+smallScreen = query M.screen smallFeature
+
+largeScreen :: Css -> Css
+largeScreen = query M.screen largeFeature
diff --git a/src/server/Model/Message/Key.hs b/src/server/Model/Message/Key.hs
index d4d31f3..ce03d34 100644
--- a/src/server/Model/Message/Key.hs
+++ b/src/server/Model/Message/Key.hs
@@ -38,7 +38,8 @@ data Key =
| November
| December
- | Date
+ | ShortDate
+ | LongDate
-- Validation
diff --git a/src/server/Model/Message/Translations.hs b/src/server/Model/Message/Translations.hs
index 93d264f..9b9aafd 100644
--- a/src/server/Model/Message/Translations.hs
+++ b/src/server/Model/Message/Translations.hs
@@ -156,7 +156,12 @@ m l December =
English -> "December"
French -> "Décembre"
-m l Date =
+m l ShortDate =
+ case l of
+ English -> "{3}-{2}-{1}"
+ French -> "{1}/{2}/{3}"
+
+m l LongDate =
case l of
English -> "{2} {1}, {3}"
French -> "{1} {2} {3}"
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-22 21:16:30 +0000