Improve responsiveness

This commit is contained in:
Correl Roush 2022-02-11 00:48:57 -05:00
parent e269dc0070
commit ccc3ad8c88

View file

@ -349,16 +349,25 @@ colors =
} }
isMobile : E.Device -> Bool
isMobile device =
case device.orientation of
E.Landscape ->
False
E.Portrait ->
True
searchBar : Model -> E.Element Msg searchBar : Model -> E.Element Msg
searchBar model = searchBar model =
let let
alignment = alignment =
case model.device.class of if isMobile model.device then
E.Phone -> E.column
E.column
_ -> else
E.row E.row
in in
alignment alignment
[ E.padding 10 [ E.padding 10
@ -543,39 +552,38 @@ viewCardBrowser model =
] ]
details = details =
case model.device.class of if isMobile model.device then
E.Phone -> E.column
E.column [ E.spacing 10
[ E.spacing 10 , E.padding 10
, E.padding 10 , E.height <| E.fillPortion 1
, E.height <| E.fillPortion 1 , E.width E.fill
, E.width E.fill , Background.color colors.sidebar
, Background.color colors.sidebar , E.scrollbarY
, E.scrollbarY ]
] <|
<| case model.activeCard of
case model.activeCard of Just card ->
Just card -> E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ E.text card.name ]
E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ E.text card.name ] :: List.map (\text -> E.paragraph [ Font.size 16 ] [ E.text text ])
:: List.map (\text -> E.paragraph [ Font.size 16 ] [ E.text text ]) (String.lines card.oracleText)
(String.lines card.oracleText)
_ -> _ ->
[ E.none ] [ E.none ]
_ -> else
E.el E.el
[ E.alignTop [ E.alignTop
, E.width <| E.fillPortion 1 , E.width <| E.fillPortion 1
, E.height E.fill , E.height E.fill
, Background.color colors.sidebar , Background.color colors.sidebar
] ]
(Maybe.map (Maybe.map
cardDetails cardDetails
model.activeCard model.activeCard
|> Maybe.withDefault |> Maybe.withDefault
E.none E.none
) )
navButton text maybeUrl = navButton text maybeUrl =
case maybeUrl of case maybeUrl of
@ -596,16 +604,15 @@ viewCardBrowser model =
cards cardPage = cards cardPage =
let let
attrs = attrs =
case model.device.class of if isMobile model.device then
E.Phone -> [ E.width E.fill
[ E.width E.fill , E.height <| E.fillPortion 3
, E.height <| E.fillPortion 3 ]
]
_ -> else
[ E.width <| E.fillPortion 2 [ E.width <| E.fillPortion 2
, E.height E.fill , E.height E.fill
] ]
in in
E.column attrs E.column attrs
[ E.row [ E.row
@ -639,24 +646,23 @@ viewCardBrowser model =
Spinner.view manaSpinner model.spinner Spinner.view manaSpinner model.spinner
Ready cardPage -> Ready cardPage ->
case model.device.class of if isMobile model.device then
E.Phone -> E.column
E.column [ E.width E.fill
[ E.width E.fill , E.height E.fill
, E.height E.fill , Font.color colors.text
, Font.color colors.text , E.scrollbarY
, E.scrollbarY ]
] [ details, cards cardPage ]
[ details, cards cardPage ]
_ -> else
E.row E.row
[ E.width E.fill [ E.width E.fill
, E.height E.fill , E.height E.fill
, Font.color colors.text , Font.color colors.text
, E.scrollbarY , E.scrollbarY
] ]
[ details, cards cardPage ] [ details, cards cardPage ]
onEnter : msg -> E.Attribute msg onEnter : msg -> E.Attribute msg