Only search on enter or button press

www/src/App.elm

@@ -2,8 +2,12 @@ module App exposing (main)
 
 import Browser
 import Element as E
-import Element.Input as EI
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Element.Input as Input
 import Html
+import Html.Events
 import Http
 import Json.Decode
 import Json.Decode.Pipeline as JDP
@@ -35,7 +39,7 @@ type Msg
     = UrlChanged Url.Url
     | LinkClicked Browser.UrlRequest
     | UpdateCriteria CriteriaMsg
-    | Search Criteria
+    | Search
     | FoundCards (Result Http.Error (List Card))
 
 
@@ -98,11 +102,12 @@ updateCriteria msg model =
 update msg model =
     case msg of
         UpdateCriteria criteriaMsg ->
-            let
-                newCriteria =
-                    updateCriteria criteriaMsg model.criteria
-            in
-            ( { model | criteria = newCriteria }, search newCriteria )
+            ( { model | criteria = updateCriteria criteriaMsg model.criteria }
+            , Cmd.none
+            )
+
+        Search ->
+            ( model, search model.criteria )
 
         FoundCards (Ok cards) ->
             ( { model | cards = cards }, Cmd.none )
@@ -111,21 +116,26 @@ update msg model =
             ( model, Cmd.none )
 
 
+colors =
+    let
+        blue =
+            E.rgb255 100 100 255
+
+        darkGrey =
+            E.rgb255 20 20 20
+
+        white =
+            E.rgb255 255 255 255
+    in
+    { primary = blue
+    , background = darkGrey
+    , text = white
+    }
+
+
 viewCard model =
     E.column []
-        [ --  E.row [ E.spacing 5 ]
-          --     [ E.text model.name
-          --     , E.image [ E.width <| E.px 20, E.height <| E.px 20 ]
-          --         { src =
-          --             if String.length model.setCode == 3 then
-          --                 String.concat [ "images/sets/", String.toLower model.setCode, ".svg" ]
-          --             else
-          --                 "images/sets/default.svg"
-          --         , description = model.setCode
-          --         }
-          --     ]
-          -- ,
-          E.image [ E.height <| E.px 300 ]
+        [ E.image [ E.height <| E.px 300 ]
             { src =
                 Url.Builder.crossOrigin "https://api.scryfall.com"
                     [ "cards", model.scryfallId ]
@@ -137,26 +147,56 @@ viewCard model =
         ]
 
 
+onEnter : msg -> E.Attribute msg
+onEnter msg =
+    E.htmlAttribute
+        (Html.Events.on "keyup"
+            (Json.Decode.field "key" Json.Decode.string
+                |> Json.Decode.andThen
+                    (\key ->
+                        if key == "Enter" then
+                            Json.Decode.succeed msg
+
+                        else
+                            Json.Decode.fail "Not the enter key"
+                    )
+            )
+        )
+
+
 view model =
     { title = "Tutor"
     , body =
-        [ E.layout [] <|
+        [ E.layout [ Background.color colors.background ] <|
             E.column []
-                [ E.row []
-                    [ EI.text []
+                [ E.row [ E.spacing 10 ]
+                    [ Input.text
+                        [ onEnter Search
+                        , Background.color colors.background
+                        , Font.color colors.text
+                        ]
                         { onChange = UpdateCriteria << UpdateName
                         , text = model.criteria.name
                         , placeholder = Nothing
-                        , label = EI.labelHidden "Search Input"
+                        , label = Input.labelHidden "Search Input"
                         }
-                    , EI.checkbox []
+                    , Input.button
+                        [ Background.color colors.primary
+                        , Font.color colors.text
+                        , Border.rounded 10
+                        , E.padding 10
+                        ]
+                        { onPress = Just Search
+                        , label = E.text "Search"
+                        }
+                    , Input.checkbox []
                         { onChange = UpdateCriteria << UpdateOwnedOnly
-                        , icon = EI.defaultCheckbox
+                        , icon = Input.defaultCheckbox
                         , checked = model.criteria.ownedOnly
-                        , label = EI.labelRight [] (E.text "Owned only?")
+                        , label = Input.labelRight [ Font.color colors.text ] (E.text "Owned only?")
                         }
                     ]
-                , E.wrappedRow [ E.spacing 5 ] <| List.map viewCard model.cards
+                , E.wrappedRow [ E.spacing 5, E.padding 30 ] <| List.map viewCard model.cards
                 ]
         ]
     }