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 )
viewDeck : Model -> E.Element Msg
viewDeck model =
case model.deck of
Failed ->
E.none
NotFound ->
E.none
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
viewDeck : Deck.Deck -> E.Element Msg
viewDeck 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
]
view : Model -> E.Element Msg
@ -122,17 +108,32 @@ view model =
[ E.width E.fill
, E.height E.fill
]
[ viewDeck model
, E.el
[ E.height (E.px 50)
, E.width E.fill
, E.padding 10
, Font.color UI.colors.text
, Background.color UI.colors.navBar
, E.alignBottom
]
<|
E.text "Foo"
[ case model.deck of
Ready deck ->
viewDeck deck
Failed ->
E.none
NotFound ->
E.none
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
, cardRow
, colors
, footer
, getViewport
, isMobile
, manaSpinner
@ -270,3 +271,16 @@ cardRow options attributes card =
setBadge options.foil
:: 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