Add UI responsiveness

www/src/App.elm

@@ -42,6 +42,7 @@ type alias Criteria =
 type alias Model =
     { navigationKey : Browser.Navigation.Key
     , viewport : Dimensions
+    , device : E.Device
     , spinner : Spinner.Model
     , criteria : Criteria
     , cardPage : CardPage
@@ -192,9 +193,13 @@ init _ url key =
     let
         criteria =
             criteriaFromUrl url
+
+        viewport =
+            { width = 1280, height = 720 }
     in
     ( { navigationKey = key
-      , viewport = { width = 1280, height = 720 }
+      , viewport = viewport
+      , device = E.classifyDevice viewport
       , spinner = Spinner.init
       , criteria = criteria
       , cardPage = Loading Paginated.empty
@@ -241,7 +246,12 @@ update msg model =
             ( model, Cmd.none )
 
         ViewportChanged viewport ->
-            ( { model | viewport = viewport }, Cmd.none )
+            ( { model
+                | viewport = viewport
+                , device = E.classifyDevice viewport
+              }
+            , Cmd.none
+            )
 
         SpinnerMsg msg_ ->
             ( { model | spinner = Spinner.update msg_ model.spinner }, Cmd.none )
@@ -341,32 +351,43 @@ colors =
 
 searchBar : Model -> E.Element Msg
 searchBar model =
-    E.row
+    let
+        alignment =
+            case model.device.class of
+                E.Phone ->
+                    E.column
+
+                _ ->
+                    E.row
+    in
+    alignment
         [ E.padding 10
         , E.spacing 10
-        , E.width (E.fill |> E.minimum 800)
+        , E.width E.fill
         , Background.color colors.navBar
         ]
-        [ Input.text
+        [ E.row [ E.spacing 10 ]
-            [ onEnter Search
+            [ Input.text
-            , Background.color colors.background
+                [ onEnter Search
-            , Font.color colors.text
+                , Background.color colors.background
-            , E.width E.fill
+                , Font.color colors.text
+                , E.width (E.fill |> E.minimum 150)
+                ]
+                { onChange = UpdateCriteria << UpdateName
+                , text = model.criteria.query
+                , placeholder = Nothing
+                , label = Input.labelHidden "Search Input"
+                }
+            , Input.button
+                [ Background.color colors.primary
+                , Font.color colors.text
+                , Border.rounded 10
+                , E.padding 10
+                ]
+                { onPress = Just Search
+                , label = E.text "Search"
+                }
             ]
-            { onChange = UpdateCriteria << UpdateName
-            , text = model.criteria.query
-            , placeholder = Nothing
-            , label = Input.labelHidden "Search Input"
-            }
-        , Input.button
-            [ Background.color colors.primary
-            , Font.color colors.text
-            , Border.rounded 10
-            , E.padding 10
-            ]
-            { onPress = Just Search
-            , label = E.text "Search"
-            }
         , Input.radio [ E.padding 10 ]
             { onChange = UpdateCriteria << UpdateSortBy
             , selected = Just model.criteria.sortBy
@@ -460,9 +481,6 @@ viewCardBrowser model =
                     , E.el [ E.width <| E.fillPortion 2, Font.alignRight ] <| E.text amount
                     ]
 
-        cardInfoWidth =
-            E.px 300
-
         prices card =
             Maybe.Extra.values
                 [ Maybe.map (\usd -> { currency = "usd", amount = usd }) <|
@@ -525,18 +543,39 @@ viewCardBrowser model =
                 ]
 
         details =
-            E.el
+            case model.device.class of
-                [ E.alignTop
+                E.Phone ->
-                , E.width cardInfoWidth
+                    E.column
-                , E.height E.fill
+                        [ E.spacing 10
-                , Background.color colors.sidebar
+                        , E.padding 10
-                ]
+                        , E.height <| E.fillPortion 1
-                (Maybe.map
+                        , E.width E.fill
-                    cardDetails
+                        , Background.color colors.sidebar
-                    model.activeCard
+                        , E.scrollbarY
-                    |> Maybe.withDefault
+                        ]
-                        E.none
+                    <|
-                )
+                        case model.activeCard of
+                            Just card ->
+                                E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ E.text card.name ]
+                                    :: List.map (\text -> E.paragraph [ Font.size 16 ] [ E.text text ])
+                                        (String.lines card.oracleText)
+
+                            _ ->
+                                [ E.none ]
+
+                _ ->
+                    E.el
+                        [ E.alignTop
+                        , E.width <| E.fillPortion 1
+                        , E.height E.fill
+                        , Background.color colors.sidebar
+                        ]
+                        (Maybe.map
+                            cardDetails
+                            model.activeCard
+                            |> Maybe.withDefault
+                                E.none
+                        )
 
         navButton text maybeUrl =
             case maybeUrl of
@@ -555,10 +594,20 @@ viewCardBrowser model =
                     E.el [ E.width E.fill ] E.none
 
         cards cardPage =
-            E.column
+            let
-                [ E.width E.fill
+                attrs =
-                , E.height E.fill
+                    case model.device.class of
-                ]
+                        E.Phone ->
+                            [ E.width E.fill
+                            , E.height <| E.fillPortion 3
+                            ]
+
+                        _ ->
+                            [ E.width <| E.fillPortion 2
+                            , E.height E.fill
+                            ]
+            in
+            E.column attrs
                 [ E.row
                     [ E.spacing 5
                     , E.padding 5
@@ -590,13 +639,24 @@ viewCardBrowser model =
                     Spinner.view manaSpinner model.spinner
 
         Ready cardPage ->
-            E.row
+            case model.device.class of
-                [ E.width E.fill
+                E.Phone ->
-                , E.height E.fill
+                    E.column
-                , Font.color colors.text
+                        [ E.width E.fill
-                , E.scrollbarY
+                        , E.height E.fill
-                ]
+                        , Font.color colors.text
-                [ details, cards cardPage ]
+                        , E.scrollbarY
+                        ]
+                        [ details, cards cardPage ]
+
+                _ ->
+                    E.row
+                        [ E.width E.fill
+                        , E.height E.fill
+                        , Font.color colors.text
+                        , E.scrollbarY
+                        ]
+                        [ details, cards cardPage ]
 
 
 onEnter : msg -> E.Attribute msg
@@ -638,7 +698,7 @@ view model =
                     , E.alignBottom
                     ]
                   <|
-                    E.text "footer"
+                    E.none
                 ]
         ]
     }