Tidy up the deck editor layout

This commit is contained in:
Correl Roush 2023-01-10 21:36:57 -05:00
parent fcbd583b95
commit 2f38c30ca1
2 changed files with 68 additions and 53 deletions

View file

@ -71,49 +71,35 @@ update msg model =
( { model | deck = Failed }, Cmd.none ) ( { model | deck = Failed }, Cmd.none )
viewDeck : Model -> E.Element Msg viewDeck : Deck.Deck -> E.Element Msg
viewDeck model = viewDeck deck =
case model.deck of let
Failed -> cardRow card =
E.none E.row
[ E.width E.fill
NotFound -> , E.spacing 10
E.none , E.padding 3
Loading ->
E.el [ E.height E.fill, E.centerX ] <|
E.html <|
Spinner.view UI.manaSpinner
model.spinner
Ready deck ->
let
cardRow card =
E.row
[ E.width E.fill
, E.spacing 10
, E.padding 3
]
[ E.column [ E.centerY, E.height E.fill, E.width E.fill, E.clipX ]
[ UI.title card.oracle.name
, UI.subtitle ("x" ++ String.fromInt card.quantity)
]
]
in
E.column [ E.height E.fill, E.width E.fill, E.centerX, E.spacing 5 ] <|
[ E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ UI.title deck.name ]
, E.column [ E.width E.fill, E.height E.fill, E.scrollbarY ] <|
List.map
(\dc ->
UI.cardRow
{ foil = False
, subtitle = "x" ++ String.fromInt dc.quantity
}
[]
dc.card
)
deck.cards
] ]
[ E.column [ E.centerY, E.height E.fill, E.width E.fill, E.clipX ]
[ UI.title card.oracle.name
, UI.subtitle ("x" ++ String.fromInt card.quantity)
]
]
in
E.column [ E.height E.fill, E.width E.fill, E.centerX, E.spacing 5 ] <|
[ E.paragraph [ Font.heavy, Font.size 24, Font.center ] [ UI.title deck.name ]
, E.column [ E.width E.fill, E.height E.fill, E.scrollbarY ] <|
List.map
(\dc ->
UI.cardRow
{ foil = False
, subtitle = "x" ++ String.fromInt dc.quantity
}
[]
dc.card
)
deck.cards
]
view : Model -> E.Element Msg view : Model -> E.Element Msg
@ -122,17 +108,32 @@ view model =
[ E.width E.fill [ E.width E.fill
, E.height E.fill , E.height E.fill
] ]
[ viewDeck model [ case model.deck of
, E.el Ready deck ->
[ E.height (E.px 50) viewDeck deck
, E.width E.fill
, E.padding 10 Failed ->
, Font.color UI.colors.text E.none
, Background.color UI.colors.navBar
, E.alignBottom NotFound ->
] E.none
<|
E.text "Foo" Loading ->
E.el [ E.height E.fill, E.centerX ] <|
E.html <|
Spinner.view UI.manaSpinner
model.spinner
, UI.footer <|
case model.deck of
Ready deck ->
UI.text <|
String.join " "
[ String.fromInt (List.sum <| List.map .quantity deck.cards)
, "cards"
]
_ ->
E.none
] ]

View file

@ -2,6 +2,7 @@ module UI exposing
( Dimensions ( Dimensions
, cardRow , cardRow
, colors , colors
, footer
, getViewport , getViewport
, isMobile , isMobile
, manaSpinner , manaSpinner
@ -270,3 +271,16 @@ cardRow options attributes card =
setBadge options.foil setBadge options.foil
:: List.map priceBadge prices :: List.map priceBadge prices
] ]
footer : E.Element msg -> E.Element msg
footer element =
E.el
[ E.height (E.px 50)
, E.width E.fill
, E.padding 10
, Font.color colors.text
, Background.color colors.navBar
, E.alignBottom
]
element