Add UI responsiveness
This commit is contained in:
parent
327c57a677
commit
e269dc0070
1 changed files with 109 additions and 49 deletions
158
www/src/App.elm
158
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
|
||||
[ onEnter Search
|
||||
, Background.color colors.background
|
||||
, Font.color colors.text
|
||||
, E.width E.fill
|
||||
[ E.row [ E.spacing 10 ]
|
||||
[ Input.text
|
||||
[ onEnter Search
|
||||
, Background.color colors.background
|
||||
, 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
|
||||
[ E.alignTop
|
||||
, E.width cardInfoWidth
|
||||
, E.height E.fill
|
||||
, Background.color colors.sidebar
|
||||
]
|
||||
(Maybe.map
|
||||
cardDetails
|
||||
model.activeCard
|
||||
|> Maybe.withDefault
|
||||
E.none
|
||||
)
|
||||
case model.device.class of
|
||||
E.Phone ->
|
||||
E.column
|
||||
[ E.spacing 10
|
||||
, E.padding 10
|
||||
, E.height <| E.fillPortion 1
|
||||
, E.width E.fill
|
||||
, Background.color colors.sidebar
|
||||
, E.scrollbarY
|
||||
]
|
||||
<|
|
||||
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
|
||||
[ E.width E.fill
|
||||
, E.height E.fill
|
||||
]
|
||||
let
|
||||
attrs =
|
||||
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
|
||||
[ E.width E.fill
|
||||
, E.height E.fill
|
||||
, Font.color colors.text
|
||||
, E.scrollbarY
|
||||
]
|
||||
[ details, cards cardPage ]
|
||||
case model.device.class of
|
||||
E.Phone ->
|
||||
E.column
|
||||
[ E.width E.fill
|
||||
, E.height E.fill
|
||||
, Font.color colors.text
|
||||
, 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
|
||||
|
|
|
|||
Loading…
Reference in a new issue