correlr/tutor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Put a spinner behind loading card images

Browse source
This commit is contained in:
Correl Roush 2021-07-16 15:00:49 -04:00
parent 83f57ec032
commit b12d0c62ca
1 changed files with 38 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
www/src/App.elm
View file

@ -80,6 +80,36 @@ toLoading cardPage =
Loading Paginated.empty
manaSpinner : Spinner.Config
manaSpinner =
let
color index =
if index < 1.0 then
Color.red
else if index < 2.0 then
Color.green
else if index < 3.0 then
Color.purple
else if index < 4.0 then
Color.blue
else
Color.white
default =
Spinner.defaultConfig
in
{ default
| lines = 5.0
, length = 0.0
, width = 20
, color = color
}
searchQuery : Criteria -> List Url.Builder.QueryParameter
searchQuery criteria =
[ Url.Builder.string "q" criteria.query
@ -285,7 +315,13 @@ viewCardBrowser model =
viewCard cardModel =
E.el [ Border.rounded 10, E.clip, E.width <| E.px cardWidth, E.height <| E.px cardHeight ] <|
E.image [ E.width <| E.px cardWidth, E.height <| E.px cardHeight ]
E.image
[ E.width <| E.px cardWidth
, E.height <| E.px cardHeight
, E.behindContent <|
E.html <|
Spinner.view manaSpinner model.spinner
]
{ src =
Url.Builder.crossOrigin "https://api.scryfall.com"
[ "cards", cardModel.scryfallId ]
@ -309,34 +345,6 @@ viewCardBrowser model =
Nothing ->
E.el [ E.width (E.px navigationButtonWidth) ] E.none
spinnerConfig =
let
color index =
if index < 1.0 then
Color.red
else if index < 2.0 then
Color.green
else if index < 3.0 then
Color.purple
else if index < 4.0 then
Color.blue
else
Color.white
default =
Spinner.defaultConfig
in
{ default
| lines = 5.0
, length = 0.0
, width = 20
, color = color
}
in
case model.cardPage of
Failed ->
@ -357,7 +365,7 @@ viewCardBrowser model =
]
<|
E.html <|
Spinner.view spinnerConfig model.spinner
Spinner.view manaSpinner model.spinner
, navButton "→" cardPage.next
]