Deck Preview Design

[Deardrops]

show all cards in the deck in one page (compact layout)

[Deardrops]

[Deardrops]

• 卡片上带有数量框（如果>1张）

• 固定一行5列（或者4列）不变

• 在Deck页上实现Preview，点击菜单栏中按钮切换Cell视图和Preview视图

• 考虑裁剪成正方形（保持卡片宽度），更符合materail风格？

[Deardrops]

[webxoss]

• 正方形是出于大小考虑，正方形能容纳更多的卡片，可以考虑裁剪卡图部分，这里重功能，就不用考虑 materail 了吧

• 如何切换 preview/list

  是不是可以把 卡组选择 放到 app header 里，给这些 按钮/卡组状态 腾出空间？

[Deardrops]

现有deck header保持不变，把视图切换放到 卡组选择 的左边，一个icon表示就好

[webxoss]

那卡片数量，比如 主卡组: 35/40 放哪呢？

视图切换放到 app bar 右边代替 三个点 如何？（好像不符合 MD ）

[Deardrops]

为 主卡组 和 分身卡组 设置分隔栏，将数量提示放到这里，类似于：

-------- 主卡组 35/40 ---------

-------- 分身卡组 5/10 ---------

视图切换不能放到appbar上，那里太显眼，这个不是用户经常点击的功能。 放在LB提示的右边也可以，icon表示。

[Deardrops]

Deck标题，数量提示，切换视图icon：

[webxoss]

可以

列表视图LRIG卡组那里也这样分割？ 由于列表有分割线，MainDeck那里会两条分割线之间会很窄很难看， 要不 AppHeader + 卡组选择那一栏 + MainDeck/LrigDeck 一起 fixed?

[Deardrops]

LRIG卡组也这样分割， 不fixed deckHeader，那样可视范围缩小得太多。 原有的分割线保留，新添加的subHeader（即MainDeck 40/40）前后不添加新的分割线。 或者删除cell视图上的分割线，给subHeader前面添加一个分割线

[webxoss]

先起名字，统一 AppHeader DeckHeader SubHeader

1. 删除 Cell 的分割线， SubHeader 有分割线
2. Cell 分割线非整行，从缩略图之后开始，SubHeader 整行 (https://material.io/guidelines/components/dividers.html)
3. SubHeader 不要分割线
4. 去掉 SubHeader，并入 DeckHeader， Fixed，根据滚动高度变成 LRIG/MAIN
5. Fixed AppHeader，sticky SubHeader （DeckHeader 不变)

这几个方案画一画或者直接用代码实现一下，对比对比？

[Deardrops]

case 1：

case 2: （已修改）

case 3:

case 4: （已修改）

case 5:

[webxoss]

case2 是说分割线在缩略图之后

[Deardrops]

@webxoss All done 个人倾向于第⑤种

[webxoss]

感觉case 2和case 4比较靠谱，4的话把卡组选择放 AppHeader ？

[Deardrops]

感觉case4 同时显示 卡组切换 当前Deck Deck数量 信息太多了 要选的话 case2比较好

[webxoss]

信息不多吧，卡组切换放到 AppHeader 。 卡片数量和LB数量是同一个级别的，放在同一栏里合理。 两者都是卡组构成的重要参考，fixed起来更方便编辑（随滚动变成main/lrig）。 也蛮好看的

[Deardrops]

实现效果：

[webxoss]

solved in #46