works on design, completes AddLoot form

src/Page/Chest.elm

@@ -133,11 +133,11 @@ debugSandbox =
 
 viewHeaderBar : String -> Model -> Html Msg
 viewHeaderBar title model =
-    nav [ class "navbar container", class "is-info" ]
+    nav [ class "navbar", class "is-transparent" ]
         [ div [ class "navbar-brand" ]
             [ a [ class "navbar-item", href "/" ]
                 [ renderIcon { icon = "fab fa-d-and-d", size = "medium", ratio = "2x" }
-                , span [] [ text title ]
+                , span [ class "title is-4" ] [ text title ]
                 ]
             , a [ class "navbar-burger is-active" ]
                 [ span [ attribute "aria-hidden" "true" ] []
@@ -183,14 +183,19 @@ viewHeaderBar title model =
 
 viewPlayerBar : Api.Player -> List (Html Msg) -> Html Msg
 viewPlayerBar player actionControls =
-    section [ class "level container is-mobile box" ]
+    section [ class "hero is-dark is-bold" ]
+        [ div [ class "hero-body" ]
+            [ div [ class "level container is-mobile" ]
                 [ div [ class "level-left" ]
                     ([ div [ class "level-item" ]
+                        [ p [ class "title is-3" ] [ text player.name ] ]
+                     , div [ class "level-item" ]
                         [ span [ class "icon is-large" ]
                             [ i [ class "fas fa-2x fa-piggy-bank" ] [] ]
                         ]
                      ]
                         ++ viewWealth player.wealth
+                        ++ [ span [ class "icon has-text-danger" ] [ i [ class "fas fa-tools" ] [] ] ]
                         ++ (if player.debt > 0 then
                                 [ div [ class "level-item" ]
                                     [ p [ class "heading is-size-4 has-text-danger" ]
@@ -204,6 +209,8 @@ viewPlayerBar player actionControls =
                     )
                 , div [ class "level-right" ] actionControls
                 ]
+            ]
+        ]
 
 
 viewWealth : Wealth -> List (Html Msg)
@@ -219,7 +226,7 @@ showWealthField : String -> String -> Html Msg
 showWealthField name value =
     div [ class "level-item" ]
         [ p [ class "has-text-right" ]
-            [ strong [ class "heading is-marginless" ] [ text name ]
+            [ strong [ class "heading is-marginless has-text-white" ] [ text name ]
             , span [ class <| "is-size-4" ] [ text value ]
             ]
         ]
@@ -281,6 +288,7 @@ view model =
     , main_
         [ class "container" ]
         [ viewNotification model.state.notification
+
         -- TODO: viewAddLoot when in Add mode
         , case model.state.mode of
             Add ->
@@ -288,13 +296,14 @@ view model =
 
             _ ->
                 text ""
-
         , viewLoot header model.searchText rowRenderer canSelect isSelected <| shownItems model
         ]
     , hr [] []
     , section [ class "container" ] [ viewDebugSection model ]
     ]
 
+
+
 {-
 
    module ActionMode
@@ -320,7 +329,6 @@ confirmAction toMsg items mode =
 
 
 -}
-
 -- VIEW LOOT
 
 
@@ -354,9 +362,12 @@ viewSearchBar : String -> Html Msg
 viewSearchBar textValue =
     div [ class "field" ]
         [ p [ class "control has-icons-left" ]
-            [ input [ class "input"
+            [ input
+                [ class "input"
                 , onInput SearchTextChanged
-                    , value textValue ] []
+                , value textValue
+                ]
+                []
             , span [ class "icon is-left" ] [ i [ class "fas fa-search" ] [] ]
             ]
         ]
@@ -433,50 +444,92 @@ viewItemTableRow isSelected canSelect rowRenderer item =
             ]
         ]
 
+
+
 -- Adding new loot
 --
+
+
 viewAddLoot : Model -> Html Msg
 viewAddLoot model =
     let
-        showCompletionTips = True
+        showCompletionTips =
-        newItem = Item 0 "New one #1" 2000
+            False
+
+        newItem =
+            Item 0 "New one #1" 2000
+
+        itemIsValid =
+            False
     in
-    div [ class "box is-primary container" ]
+    div [ class "box is-primary" ]
         [ div [ class "field is-horizontal" ]
-              [ div [ class "field-label" ]
+            [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Source du loot" ] ]
-                    [ label [ class "label" ] [ text "Nouvel objet" ]]
             , div [ class "field-body" ]
                 [ div [ class "field" ]
                     [ div [ class "control is-expanded" ]
-                              [ input [ class "input", type_ "text" ] [] ]
+                        [ input
-                        , div [ class "dropdown"
+                            [ class "input"
-                              , classList [("is-active", showCompletionTips)] ]
+                            , type_ "text"
+                            ]
+                            []
+                        ]
+                    , p [ class "help" ] [ text "Personnage, lieu ou événement d'où provient ce loot." ]
+                    ]
+                ]
+            ]
+        , hr [] []
+        , div [ class "field is-horizontal" ]
+            [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "Nouvel objet" ] ]
+            , div [ class "field-body" ]
+                [ div [ class "field" ]
+                    [ div [ class "control" ]
+                        [ input
+                            [ class "input"
+                            , type_ "text"
+                            , value newItem.name
+                            ]
+                            []
+                        ]
+                    , div
+                        [ class "dropdown"
+                        , classList [ ( "is-active", showCompletionTips ) ]
+                        ]
                         [ div [ class "dropdown-menu" ]
                             [ div [ class "dropdown-content" ]
                                 [ a [ class "dropdown-item" ] [ text "item" ] ]
                             ]
                         ]
                     ]
-                  , div [ class "field is-expanded has-addons" ]
+                , div [ class "field is-narrow" ]
+                    [ div [ class "field has-addons" ]
                         [ p [ class "control" ] [ a [ class "button is-static" ] [ text "PO" ] ]
                         , p [ class "control" ]
-                            [ input [ type_ "text"
+                            [ input
+                                [ type_ "number"
                                 , class "input"
-                                    , classList [ ("is-danger", True) ]]
+                                , value <| String.fromInt newItem.base_price
+                                , classList [ ( "is-danger", True ) ]
+                                ]
                                 []
                             ]
                         ]
-                  , div [ class "field" ]
+                    , p [ class "help has-text-danger" ] [ text "Vous devez renseigner le prix !" ]
+                    ]
+                , div [ class "field is-narrow" ]
                     [ div [ class "control" ]
-                              [ button [ class "button is-primary"
+                        [ button
-                                       , disabled True
+                            [ class "button is-primary"
-                                       , onClick <| NewItemAdded newItem ]
+                            , disabled <| not itemIsValid
-                                       [ text "Ajouter au coffre" ] ]
+                            , onClick <| NewItemAdded newItem
+                            ]
+                            [ text "Ajouter au coffre" ]
+                        ]
                     ]
                 ]
             ]
         , div [ class "field is-horizontal" ]
-              [ div [ class "field-label" ] [ label [ class "label" ] [ text "ou" ] ]
+            [ div [ class "field-label is-medium" ] [ label [ class "label" ] [ text "ou" ] ]
             , div [ class "field-body" ]
                 [ div [ class "control" ]
                     [ button [ class "button" ] [ text "Depuis une liste" ] ]
@@ -485,6 +538,7 @@ viewAddLoot model =
         ]
 
 
+
 -- ACTION MODES
 --
 
@@ -555,9 +609,11 @@ update msg model =
     case msg of
         NewItemAdded item ->
             let
-                state = model.state
+                state =
+                    model.state
             in
             ( { model | state = { state | newLoot = item :: state.newLoot } }, Cmd.none )
+
         ApiMsg apiMsg ->
             case apiMsg of
                 Api.GotActionResult response ->

src/Utils.elm

@@ -11,7 +11,7 @@ renderIcon params =
 
 actionButton msg t icon color =
     button
-        [ class <| "button level-item is-" ++ color
+        [ class <| "button is-medium level-item is-" ++ color
         , onClick msg
         ]
         [ span [ class "icon" ] [ i [ Svg.Attributes.class <| "fas fa-" ++ icon ] [] ]