From 9d326619ea93e8c9f99d50214052d5f9e0838bc3 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Tue, 4 Jul 2017 17:32:18 +0800
Subject: [PATCH 01/12] rebuild `block` component, add DeckEditor page

---
 dev.js                   |   2 +-
 src/components/Block.vue |  34 +++++----
 src/pages/Deck.vue       |  13 +++-
 src/pages/DeckEditor.vue | 157 +++++++++++++++++++++++++++++++++++++++
 src/pages/Search.vue     |   1 -
 src/pages/introduce.md   |   1 +
 src/router.js            |   4 +
 src/store.js             |   7 +-
 8 files changed, 200 insertions(+), 19 deletions(-)
 create mode 100644 src/pages/DeckEditor.vue

diff --git a/dev.js b/dev.js
index 113a9bc..e6a25ba 100644
--- a/dev.js
+++ b/dev.js
@@ -28,7 +28,7 @@ app.use('/background', express.static('./background'))
 app.use('/', express.static('./src'))
 app.use('/dist', express.static('./dist'))
 
-app.use('/lang', proxy('hongkong.webxoss.com:8080', {
+app.use('/lang', proxy('webxoss.com', {
   proxyReqPathResolver: req => '/lang' + url.parse(req.url).path,
   https: true,
 }))
diff --git a/src/components/Block.vue b/src/components/Block.vue
index 6aa99d3..2dff04a 100644
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@@ -11,40 +11,46 @@ export default {
       type: Object,
       require: true,
     },
+    showCount: {
+      type: Boolean,
+      require: false,
+    },
   },
   computed: {
     ...mapGetters([
       'deckPids',
     ]),
-    detailRoute() {
-      return {
-        path: '/detail',
-        query: {
-          pid: this.card.pid,
-        },
-      }
-    },
     count() {
       return this.deckPids.filter(pid => pid === this.card.pid).length
     },
   },
+  methods: {
+    handleClick() {
+      this.$emit('click', this.card.pid)
+    },
+    hover() {
+      // 节流
+      this.$store.commit('setShownPid', this.card.pid)
+    },
+  },
 }
 </script>
 
 <template>
-  <router-link :to="detailRoute" :class="$style.block">
-    <card-image :pid="card.pid" :class="$style.image"/>
-    <div :class="$style.dimmer">×{{ count }}</div>
-  </router-link>
+  <a
+    :class="$style.block"
+    @click="handleClick"
+    @mouseover="hover">
+    <card-image :pid="card.pid" :class="$style.image" />
+    <div v-if="showCount" :class="$style.dimmer">×{{ count }}</div>
+  </a>
 </template>
 
-<style src="css/colors.css" module="$color"></style>
 <style module>
 .block {
   position: relative;
   display: inline-block;
   box-sizing: border-box;
-  padding: .2em;
 }
 .image {
   width: 100%;
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index 75f2d02..4191179 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -152,6 +152,14 @@ export default {
         },
       })
     },
+    goDetail(pid) {
+      this.$router.push({
+        path: '/detail',
+        query: {
+          pid,
+        },
+      })
+    },
   },
   mounted() {
     this.updateDeckHeader()
@@ -190,10 +198,10 @@ export default {
     <!-- Block view -->
     <div :class="$style.blocks" v-if="previewing">
       <div>
-        <block v-for="card in shownMainDeck" :class="$style.block" :card="card"/>
+        <block v-for="card in shownMainDeck" :class="$style.block" :card="card" :showCount="true" @click="goDetail"/>
       </div>
       <div>
-        <block v-for="card in shownLrigDeck" :class="$style.block" :card="card"/>
+        <block v-for="card in shownLrigDeck" :class="$style.block" :card="card" :showCount="true" @click="goDetail"/>
       </div>
     </div>
 
@@ -218,5 +226,6 @@ export default {
 }
 .block {
   width: 20%;
+  padding: .2em;
 }
 </style>
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
new file mode 100644
index 0000000..63226ac
--- /dev/null
+++ b/src/pages/DeckEditor.vue
@@ -0,0 +1,157 @@
+<script>
+import { mapState, mapGetters } from 'vuex'
+import Block from 'components/Block'
+import Searcher from 'js/Searcher.js'
+import { defaultSort } from 'js/util'
+import CardImage from 'components/CardImage'
+
+export default {
+  components: {
+    Block,
+    CardImage,
+  },
+  data: () => ({
+    queryString: '',
+    timer: -1,
+    blocking: false,
+    request: -1,
+  }),
+  computed: {
+    ...mapState([
+      'shownPid',
+    ]),
+    ...mapGetters([
+      'deckPids',
+      'mainDeck',
+      'lrigDeck',
+    ]),
+    query: {
+      get() {
+        return this.queryString
+      },
+      set(query) {
+        if (this.blocking) {
+          clearTimeout(this.timer)
+          this.timer = setTimeout(() => {
+            this.queryString = query
+            this.blocking = false
+          }, 500)
+          return
+        }
+
+        this.queryString = query
+        this.blocking = true
+        this.timer = setTimeout(() => {
+          this.blocking = false
+        }, 500)
+      },
+    },
+    sortedMainDeck() {
+      return defaultSort(this.mainDeck)
+    },
+    sortedLrigDeck() {
+      return defaultSort(this.lrigDeck)
+    },
+    matchedCards() {
+      return Searcher.search(this.query)
+    },
+  },
+  methods: {
+    delCard(pid) {
+      this.$store.commit('delCard', pid)
+    },
+    addCard(pid) {
+      this.$store.dispatch('addCard', pid).then((successed) => {
+        if (!successed) {
+          console.log('already full') // show toast here
+        }
+      })
+    },
+  },
+  mounted() {
+    this.query = ''
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <div :class="$style.detail">
+      <card-image :pid="shownPid" :class="$style.image" />
+    </div>
+    <div :class="$style.blocks">
+      <div>
+        <block
+          v-for="card in sortedMainDeck"
+          :class="$style.block"
+          :card="card"
+          @click="delCard"/>
+      </div>
+      <div>
+        <block
+          v-for="card in sortedLrigDeck"
+          :class="$style.block"
+          :card="card"
+          @click="delCard"/>
+      </div>
+    </div>
+    <div :class="$style.searcher">
+      <input
+        :class="$style.search"
+        placeholder="Search..."
+        spellcheck="false"
+        autocomplete="off"
+        autocapitalize="none"
+        maxlength="30"
+        ref="input"
+        v-model="query">
+      <section :class="$style.result">
+        <block v-for="card in matchedCards.slice(0,20)" :card="card" @click="addCard"/>
+      </section>
+    </div>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.container {
+  display: flex;
+}
+.detail {
+  width: 20%;
+}
+.image {
+  display: block;
+  margin: 0 auto;
+}
+.blocks {
+  width: 60%;
+}
+.block {
+  width: 10%;
+}
+.searcher {
+  width: 20%;
+  height: 100vh;
+  overflow: auto;
+}
+.search {
+  position: absolute;
+  z-index: 1;
+  height: 2em;
+  margin: .5em;
+  background-color: #fff;
+  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+.search::placeholder {
+  color: #000a;
+}
+.search::selection {
+  color: #333;
+}
+.result {
+  width: 200px;
+  padding-top: 3em;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 109673e..6d01507 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -15,7 +15,6 @@ export default {
     // block the search for a short time after input.
     timer: -1,
     blocking: false,
-    request: -1,
 
     searchTips: require('./searchTips.md'), // test
     emptyTips: require('./emptyTips.md'), // test
diff --git a/src/pages/introduce.md b/src/pages/introduce.md
index a0965eb..490bcbc 100644
--- a/src/pages/introduce.md
+++ b/src/pages/introduce.md
@@ -7,3 +7,4 @@
 * GitHub: [webxoss-deckeditor2](https://github.com/Deardrops/webxoss-deckeditor2)
 
 ## [👉 Try our new DeckEditor](#/deck)
+## [DeckEditor | desktop view | WIP](#/deckeditor)
diff --git a/src/router.js b/src/router.js
index 59329e3..23b7b1e 100644
--- a/src/router.js
+++ b/src/router.js
@@ -26,5 +26,9 @@ export default new Router({
       path: '/gallery',
       component: require('pages/Gallery'),
     },
+    {
+      path: '/deckeditor',
+      component: require('pages/DeckEditor'),
+    },
   ],
 })
diff --git a/src/store.js b/src/store.js
index 9e8319a..ed0c741 100644
--- a/src/store.js
+++ b/src/store.js
@@ -29,7 +29,7 @@ const state = {
 
   // current selected deck name
   deckName: '',
-
+  shownPid: 1,
   localization: {
     lang: 'en',
   },
@@ -167,6 +167,11 @@ const mutations = {
   changeWindowWidth(state, width) {
     state.windowWidth = width
   },
+  setShownPid(state, pid) {
+    if (0 < pid && pid < Object.keys(CardInfo).length) {
+      state.pid = pid
+    }
+  },
 }
 
 const actions = {

From 9f3311dc9b43366aa7a330b65db282fddac734f5 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Wed, 5 Jul 2017 15:09:58 +0800
Subject: [PATCH 02/12] rebuild  component

---
 src/components/CardInfoTable.vue              |   0
 .../{CellContainer.vue => ListContainer.vue}  |  56 +++-----
 src/pages/Deck.vue                            |  21 ++-
 src/pages/DeckEditor.vue                      | 132 ++++++++++--------
 src/pages/Search.vue                          |  12 +-
 src/store.js                                  |   2 +-
 6 files changed, 120 insertions(+), 103 deletions(-)
 create mode 100644 src/components/CardInfoTable.vue
 rename src/components/{CellContainer.vue => ListContainer.vue} (61%)

diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/CellContainer.vue b/src/components/ListContainer.vue
similarity index 61%
rename from src/components/CellContainer.vue
rename to src/components/ListContainer.vue
index d613397..027016f 100644
--- a/src/components/CellContainer.vue
+++ b/src/components/ListContainer.vue
@@ -1,23 +1,16 @@
 <script>
 import { mapState } from 'vuex'
-import Cell from 'components/Cell'
-
-// 8rem
-let cellHeight = 8
 
 export default {
-  components: {
-    Cell,
-  },
   props: {
     cards: {
       type: Array,
       required: true,
     },
-    protectionEnabled: {
+    longListOpimizationEnabled: {
       require: false,
     },
-    longListOpimizationEnabled: {
+    columnNumber: {
       require: false,
     },
   },
@@ -36,18 +29,17 @@ export default {
         See `updateIndex` for details.
     */
     index: 0,
+    itemHeight: 1,
   }),
   computed: {
     ...mapState([
       'windowWidth',
     ]),
-    isTwoColunm() {
-      return this.windowWidth >= 1024
+    _colNum() {
+      return this.columnNumber ? this.columnNumber : 1
     },
     allColunmsCount() {
-      return this.isTwoColunm
-        ? Math.ceil(this.cards.length / 2)
-        : this.cards.length
+      return Math.ceil(this.cards.length / this._colNum)
     },
     start() {
       // 5 colunms before index
@@ -58,14 +50,10 @@ export default {
       return Math.min(this.allColunmsCount, this.index + 10)
     },
     shownCards() {
-      return this.isTwoColunm
-        ? this.cards.slice(2 * this.start, 2 * this.end)
-        : this.cards.slice(this.start, this.end)
+      return this.cards.slice(this._colNum * this.start, this._colNum * this.end)
     },
     shownColunmsCount() {
-      return this.isTwoColunm
-        ? Math.ceil(this.shownCards.length / 2)
-        : this.shownCards.length
+      return Math.ceil(this.shownCards.length / this._colNum)
     },
     padding() {
       // Paddings before / after shown cells.
@@ -73,11 +61,11 @@ export default {
       let beforeCount = this.start
       let afterCount = this.allColunmsCount - this.shownColunmsCount - beforeCount
       return {
-        'padding-top': `${cellHeight * beforeCount}rem`,
-        'padding-bottom': `${cellHeight * afterCount}rem`,
+        'padding-top': `${this.itemHeight * beforeCount}px`,
+        'padding-bottom': `${this.itemHeight * afterCount}px`,
       }
     },
-    cardIterator() {
+    iterator() {
       return this.longListOpimizationEnabled
         ? this.shownCards
         : this.cards
@@ -85,10 +73,15 @@ export default {
   },
   methods: {
     updateIndex() {
-      // Find the top cell in viewport according to `window.scrollY`.
-      let fontSize = +window.getComputedStyle(window.document.body)
-        .fontSize.slice(0, -2)
-      this.index = Math.round(window.scrollY / (cellHeight * fontSize))
+      // Find the top cell in viewport according to`window.scrollY`.
+      if (this.$children.length) {
+        this.itemHeight = this.$children[0].$el.getBoundingClientRect().height
+      }
+      let scrollPostion = document.body.clientHeight === window.innerHeight ?
+        this.$el.parentElement.scrollTop :
+        window.scrollY
+      this.index = Math.round(scrollPostion / this.itemHeight)
+
       this.request = requestIdleCallback(this.updateIndex)
     },
   },
@@ -105,9 +98,7 @@ export default {
 
 <template>
   <div :class="$style.row" :style="padding">
-    <div v-for="card in cardIterator" :class="$style.col">
-      <cell :card="card" :protectionEnabled="protectionEnabled"/>
-    </div>
+    <slot v-for="item in iterator" :card="item"/>
   </div>
 </template>
 
@@ -116,10 +107,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
 }
-.col {
+.row>* {
   width: 100%;
-  @media (width >= 1024px) {
-    width: 50%;
-  }
 }
 </style>
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index 4191179..eb5ed2a 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -3,7 +3,8 @@ import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import DeckFloatButton from 'components/DeckFloatButton'
-import CellContainer from 'components/CellContainer'
+import ListContainer from 'components/ListContainer'
+import Cell from 'components/Cell'
 import Block from 'components/Block'
 import DeckHead from 'components/DeckHead'
 import Icon from 'components/Icon'
@@ -18,10 +19,11 @@ export default {
     HeaderMenu,
     DeckModals,
     DeckFloatButton,
-    CellContainer,
+    ListContainer,
     Block,
     DeckHead,
     Icon,
+    Cell,
   },
   data: () => ({
     request: -1,
@@ -139,9 +141,6 @@ export default {
     goListView() {
       this.$router.push({
         path: '/deck',
-        // query: {
-        //   mode: 'list',
-        // },
       })
     },
     goBlockView() {
@@ -191,8 +190,16 @@ export default {
 
     <!-- List view -->
     <template v-if="!previewing">
-      <cell-container :cards="shownMainDeck" :protectionEnabled="true"/>
-      <cell-container ref="lrigDeck" :cards="shownLrigDeck" :protectionEnabled="true"/>
+      <list-container :cards="shownMainDeck">
+        <template scope="props">
+          <cell :card="props.card" :protectionEnabled="true"></cell>
+        </template>
+      </list-container>
+      <list-container ref="lrigDeck" :cards="shownLrigDeck">
+        <template scope="props">
+          <cell :card="props.card" :protectionEnabled="true"></cell>
+        </template>
+      </list-container>
     </template>
 
     <!-- Block view -->
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 63226ac..a6c3e9d 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -1,20 +1,24 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
+import { AppHeader, HeaderIcon } from 'components/AppHeader'
+import ListContainer from 'components/ListContainer'
 import Block from 'components/Block'
+import CardImage from 'components/CardImage'
 import Searcher from 'js/Searcher.js'
 import { defaultSort } from 'js/util'
-import CardImage from 'components/CardImage'
 
 export default {
   components: {
+    AppHeader,
+    HeaderIcon,
+    ListContainer,
     Block,
     CardImage,
   },
   data: () => ({
-    queryString: '',
+    queryString: 's',
     timer: -1,
     blocking: false,
-    request: -1,
   }),
   computed: {
     ...mapState([
@@ -35,11 +39,13 @@ export default {
           this.timer = setTimeout(() => {
             this.queryString = query
             this.blocking = false
+            this.scrollToTop()
           }, 500)
           return
         }
 
         this.queryString = query
+        this.scrollToTop()
         this.blocking = true
         this.timer = setTimeout(() => {
           this.blocking = false
@@ -67,6 +73,11 @@ export default {
         }
       })
     },
+    scrollToTop() {
+      if (this.$refs.scrollDiv) {
+        this.$refs.scrollDiv.scrollTop = 0
+      }
+    },
   },
   mounted() {
     this.query = ''
@@ -75,27 +86,8 @@ export default {
 </script>
 
 <template>
-  <div :class="$style.container">
-    <div :class="$style.detail">
-      <card-image :pid="shownPid" :class="$style.image" />
-    </div>
-    <div :class="$style.blocks">
-      <div>
-        <block
-          v-for="card in sortedMainDeck"
-          :class="$style.block"
-          :card="card"
-          @click="delCard"/>
-      </div>
-      <div>
-        <block
-          v-for="card in sortedLrigDeck"
-          :class="$style.block"
-          :card="card"
-          @click="delCard"/>
-      </div>
-    </div>
-    <div :class="$style.searcher">
+  <div>
+    <app-header>
       <input
         :class="$style.search"
         placeholder="Search..."
@@ -103,11 +95,42 @@ export default {
         autocomplete="off"
         autocapitalize="none"
         maxlength="30"
-        ref="input"
-        v-model="query">
-      <section :class="$style.result">
-        <block v-for="card in matchedCards.slice(0,20)" :card="card" @click="addCard"/>
-      </section>
+        v-model="query"/>
+    </app-header>
+    <div :class="$style.container">
+      <div :class="$style.searchZone" ref="scrollDiv">
+        <list-container
+          :columnNumber="5"
+          :cards="matchedCards"
+          :longListOpimizationEnabled="true">
+          <template scope="props">
+            <block
+              :class="$style.searchBlock"
+              :card="props.card"
+              @click="addCard"/>
+          </template>
+        </list-container>
+      </div>
+      <div :class="$style.deckZone">
+        <div :class="$style.blocks">
+          <div>MainDeck</div>
+          <div>
+            <block
+              v-for="card in sortedMainDeck"
+              :class="$style.deckBlock"
+              :card="card"
+              @click="delCard"/>
+          </div>
+          <div>LrigDeck</div>
+          <div>
+            <block
+              v-for="card in sortedLrigDeck"
+              :class="$style.deckBlock"
+              :card="card"
+              @click="delCard"/>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -117,41 +140,34 @@ export default {
 .container {
   display: flex;
 }
-.detail {
-  width: 20%;
-}
-.image {
-  display: block;
-  margin: 0 auto;
-}
-.blocks {
-  width: 60%;
-}
-.block {
-  width: 10%;
-}
-.searcher {
-  width: 20%;
-  height: 100vh;
-  overflow: auto;
-}
 .search {
-  position: absolute;
-  z-index: 1;
-  height: 2em;
-  margin: .5em;
-  background-color: #fff;
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  flex: .4;
+  color: #fff;
+  padding: .3em .5em;
+  background-color: color(var(--main-color) l(+10%));
+  border-radius: 3px;
 }
 .search::placeholder {
-  color: #000a;
+  color: #fffa;
 }
 .search::selection {
   color: #333;
+  background-color: #ffff00;
 }
-.result {
-  width: 200px;
-  padding-top: 3em;
-  margin: 0 auto;
+.deckZone {
+  width: 50%;
+  padding: .5em;
+}
+.deckBlock {
+  width: 10%;
+}
+.searchZone {
+  width: 50%;
+  height: calc(100vh - var(--header-height));
+  overflow: scroll;
+}
+.searchBlock {
+  padding: .3em;
+  width: 20%;
 }
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 6d01507..63995ee 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -1,14 +1,16 @@
 <script>
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
-import CellContainer from 'components/CellContainer'
+import ListContainer from 'components/ListContainer'
 import Searcher from 'js/Searcher.js'
 import marked from 'marked'
+import Cell from 'components/Cell'
 
 export default {
   components: {
     AppHeader,
     HeaderIcon,
-    CellContainer,
+    ListContainer,
+    Cell,
   },
   data: () => ({
     // To improve performance when user typing,
@@ -89,7 +91,11 @@ export default {
       <header-icon name="more"/>
     </app-header>
     <section v-if="query && matchedCards.length">
-      <cell-container :cards="matchedCards" :longListOpimizationEnabled="true"/>
+      <list-container :cards="matchedCards" :longListOpimizationEnabled="true">
+        <template scope="props">
+          <cell :card="props.card"></cell>
+        </template>
+      </list-container>
     </section>
     <section :class="$style.tips" v-if="!query">
       <div v-html="marked(searchTips)"></div>
diff --git a/src/store.js b/src/store.js
index ed0c741..4f4e164 100644
--- a/src/store.js
+++ b/src/store.js
@@ -169,7 +169,7 @@ const mutations = {
   },
   setShownPid(state, pid) {
     if (0 < pid && pid < Object.keys(CardInfo).length) {
-      state.pid = pid
+      state.shownPid = pid
     }
   },
 }

From 946571e0d623b560ef3f304bea053e0a2267c835 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Sat, 22 Jul 2017 15:16:33 +0800
Subject: [PATCH 03/12] layout

---
 src/css/common.css       |   2 +-
 src/pages/Deck.vue       |   2 +-
 src/pages/DeckEditor.vue | 204 +++++++++++++++++++++++++++------------
 3 files changed, 146 insertions(+), 62 deletions(-)

diff --git a/src/css/common.css b/src/css/common.css
index 4ba26e3..8106cc4 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -28,7 +28,7 @@
     font-size: 24px;
   }
 
-  @media (width >= 1280px){
+  @media (width >= 1280px) {
     font-size: 24px;
   }
 }
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index eb5ed2a..b6b8e91 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -20,10 +20,10 @@ export default {
     DeckModals,
     DeckFloatButton,
     ListContainer,
+    Cell,
     Block,
     DeckHead,
     Icon,
-    Cell,
   },
   data: () => ({
     request: -1,
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index a6c3e9d..9262294 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -6,6 +6,7 @@ import Block from 'components/Block'
 import CardImage from 'components/CardImage'
 import Searcher from 'js/Searcher.js'
 import { defaultSort } from 'js/util'
+import Icon from 'components/Icon'
 
 export default {
   components: {
@@ -14,6 +15,7 @@ export default {
     ListContainer,
     Block,
     CardImage,
+    Icon,
   },
   data: () => ({
     queryString: 's',
@@ -22,6 +24,7 @@ export default {
   }),
   computed: {
     ...mapState([
+      'deckName',
       'shownPid',
     ]),
     ...mapGetters([
@@ -86,88 +89,169 @@ export default {
 </script>
 
 <template>
-  <div>
-    <app-header>
-      <input
-        :class="$style.search"
-        placeholder="Search..."
-        spellcheck="false"
-        autocomplete="off"
-        autocapitalize="none"
-        maxlength="30"
-        v-model="query"/>
-    </app-header>
-    <div :class="$style.container">
-      <div :class="$style.searchZone" ref="scrollDiv">
-        <list-container
-          :columnNumber="5"
-          :cards="matchedCards"
-          :longListOpimizationEnabled="true">
-          <template scope="props">
-            <block
-              :class="$style.searchBlock"
-              :card="props.card"
-              @click="addCard"/>
-          </template>
-        </list-container>
+  <div :class="$style.page">
+<!--     <div :class="$style.nav">
+      <div>WHITE HOPE</div>
+      <div>RED AMBITION</div>
+      <div>BLUE APPLI</div>
+      <div>GREEN WANNA</div>
+      <div>BLACDESIRE</div>
+      <div>BLUE REQUEST</div>
+    </div> -->
+    <div>
+      <div :class="$style.panel">
       </div>
-      <div :class="$style.deckZone">
-        <div :class="$style.blocks">
-          <div>MainDeck</div>
-          <div>
-            <block
-              v-for="card in sortedMainDeck"
-              :class="$style.deckBlock"
-              :card="card"
-              @click="delCard"/>
+      <div :class="$style.container">
+        <div :class="$style.content">
+          <div :class="$style.header">
+            <div :class="$style.deckName">{{ deckName }}</div>
+            <div :class="$style.empty"></div>
+            <input
+              :class="$style.searchBar"
+              placeholder="Search..."
+              spellcheck="false"
+              autocomplete="off"
+              autocapitalize="none"
+              maxlength="30"
+              v-model="query"/>
           </div>
-          <div>LrigDeck</div>
-          <div>
-            <block
-              v-for="card in sortedLrigDeck"
-              :class="$style.deckBlock"
-              :card="card"
-              @click="delCard"/>
+          <div :class="$style.flex">
+            <div :class="$style.blocks">
+              <!-- <div>MainDeck</div> -->
+              <div>
+                <block
+                  v-for="card in sortedMainDeck"
+                  :class="$style.deckBlock"
+                  :card="card"
+                  @click="delCard"/>
+              </div>
+              <div>LrigDeck</div>
+              <div>
+                <block
+                  v-for="card in sortedLrigDeck"
+                  :class="$style.deckBlock"
+                  :card="card"
+                  @click="delCard"/>
+              </div>
+            </div>
+            <div :class="$style.searchZone" ref="scrollDiv">
+              <list-container
+                :cards="matchedCards"
+                :longListOpimizationEnabled="true">
+                <template scope="props">
+                  <block
+                    :class="$style.searchBlock"
+                    :card="props.card"
+                    @click="addCard"/>
+                </template>
+              </list-container>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div :class="$style.sidebar">
+    </div>
   </div>
 </template>
 
 <style module>
 @import 'css/vars.css';
-.container {
+.page {
+  /*padding-left: 256px;*/
+  background-color: #fafafa;
+}
+.flex {
   display: flex;
 }
-.search {
-  flex: .4;
-  color: #fff;
-  padding: .3em .5em;
-  background-color: color(var(--main-color) l(+10%));
-  border-radius: 3px;
+.nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 256px;
+  height: 100vh;
+  font-size: 1.2em;
+  border-right: 2px solid var(--cell-border-color);
+  padding-top: 20rem;
+  &>div {
+    width: 10em;
+    padding: .2em 1em;
+  }
 }
-.search::placeholder {
-  color: #fffa;
+.panel {
+  height: 20rem;
+  background-color: var(--main-color);
 }
-.search::selection {
-  color: #333;
-  background-color: #ffff00;
+.header {
+  display: flex;
+  /*height: 10rem;*/
+  padding: 1em 0;
+  color: #000;
+  font-size: 1.5em;
+}
+.deckName {
+  padding-left: 3rem;
+}
+.container {
+  /*padding-right: calc(256px + 3rem);*/
 }
-.deckZone {
-  width: 50%;
-  padding: .5em;
+.content {
+  position: relative;
+  top: -10rem;
+  width: 60%;
+  margin: 0 auto;
+  background-color: #fafafa;
+  @apply --shadow-8dp;
+}
+.blocks {
+  padding: 2em;
+  flex: 1;
 }
 .deckBlock {
   width: 10%;
 }
+.sidebar {
+  position: fixed;
+  top: 10rem;
+  right: 3rem;
+  width: 256px;
+  /*border-left: 2px solid var(--cell-border-color);*/
+  background-color: #fafafa;
+  z-index: 1;
+}
+.empty {
+  flex: 1;
+}
+.searchBar {
+  color: #fff;
+  /*background-color: #fafafa;*/
+  border-radius: 3px;
+  /*margin: .5em;*/
+  height: 2rem;
+  margin-right: 1rem;
+  width: calc(6rem);
+  padding-left: .5em;
+  background-color: #eee;
+  /*background-color: color(var(--main-color) l(+10%));*/
+  /*@apply --shadow-4dp;*/
+}
+.searchBar::placeholder {
+  color: #000;
+}
+.searchBar::selection {
+  color: #333;
+  background-color: #ffff00;
+}
 .searchZone {
-  width: 50%;
-  height: calc(100vh - var(--header-height));
-  overflow: scroll;
+  padding: 2rem 1rem;
+  width: 6rem;
+  height: calc(100vh - 3em);
+  overflow-y: auto;
+  /*margin: 0 .5em;*/
+  /*@apply --shadow-8dp;*/
 }
 .searchBlock {
-  padding: .3em;
-  width: 20%;
+  /*padding: .2rem 1rem;*/
+  width: 100%;
 }
 </style>

From 57db0bfac915eaa13c4778be4a127f87d5297977 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Sat, 22 Jul 2017 18:32:20 +0800
Subject: [PATCH 04/12] abstract out  component & redesign layout

---
 src/components/Block.vue         |   8 +-
 src/components/CardInfoTable.vue | 130 ++++++++++++++++++++++
 src/components/ListContainer.vue |   2 +-
 src/css/vars.css                 |   8 +-
 src/pages/DeckEditor.vue         | 185 ++++++++++++++-----------------
 src/pages/Detail.vue             | 115 ++-----------------
 6 files changed, 234 insertions(+), 214 deletions(-)

diff --git a/src/components/Block.vue b/src/components/Block.vue
index 2dff04a..5372cd0 100644
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@@ -28,9 +28,9 @@ export default {
     handleClick() {
       this.$emit('click', this.card.pid)
     },
-    hover() {
+    handleHover() {
       // 节流
-      this.$store.commit('setShownPid', this.card.pid)
+      this.$emit('hover', this.card.pid)
     },
   },
 }
@@ -39,8 +39,8 @@ export default {
 <template>
   <a
     :class="$style.block"
-    @click="handleClick"
-    @mouseover="hover">
+    @click.stop="handleClick"
+    @mouseover="handleHover">
     <card-image :pid="card.pid" :class="$style.image" />
     <div v-if="showCount" :class="$style.dimmer">×{{ count }}</div>
   </a>
diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue
index e69de29..b00d9e0 100644
--- a/src/components/CardInfoTable.vue
+++ b/src/components/CardInfoTable.vue
@@ -0,0 +1,130 @@
+<script>
+import Localize from 'js/Localize'
+
+export default {
+  props: {
+    card: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    name() {
+      return Localize.cardName(this.card)
+    },
+    limiting() {
+      return Localize.limiting(this.card)
+    },
+    cardEffect() {
+      return Localize.effectTexts(this.card)
+    },
+    lifeBurst() {
+      return Localize.burstEffectTexts(this.card)
+    },
+    rows() {
+      let card = this.card
+      let type = {
+        key: Localize('cardType'),
+        value: Localize(card.cardType),
+      }
+      let color = {
+        key: Localize('color'),
+        value: Localize(card.color),
+      }
+      let level = {
+        key: Localize('level'),
+        value: card.level,
+      }
+      let power = {
+        key: Localize('power'),
+        value: card.power,
+      }
+      let limit = {
+        key: Localize('limit'),
+        value: (card.limit < 1024) ? card.limit : '∞',
+      }
+      let cost = {
+        key: Localize('cost'),
+        value: Localize.cost(card),
+      }
+      let timing = {
+        key: Localize('timings'),
+        value: Localize.timings(card),
+      }
+      let classes = {
+        key: Localize('classes'),
+        value: Localize.classes(card),
+      }
+      let guard = {
+        key: Localize('guard'),
+        value: Localize.guard(card),
+      }
+      return {
+        'RESONA': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SIGNI': [
+          [type, color],
+          [level, classes],
+          [power, guard],
+        ],
+        'SPELL': [
+          [type, color],
+          [cost],
+        ],
+        'LRIG': [
+          [type, color],
+          [level, classes],
+          [limit, cost],
+        ],
+        'ARTS': [
+          [type, color],
+          [cost],
+          [timing],
+        ],
+      }[card.cardType] || []
+    },
+  },
+}
+
+</script>
+
+<template>
+  <div>
+    <table :class="$style.table">
+      <tbody>
+        <tr v-for="row in rows" :class="$style.rows">
+          <template v-for="meta in row">
+            <td :class="$style.key">{{ meta.key }}</td>
+            <td :colspan="row.length === 1 ? 3 : 1">{{ meta.value }}</td>
+          </template>
+        </tr>
+        <tr>
+          <td colspan="4">{{ cardEffect }}</td>
+        </tr>
+        <tr>
+          <td colspan="4">{{ lifeBurst }}</td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<style module>
+.table {
+  width: 100%;
+  line-height: 1.5;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+td {
+  border: 1px solid #cbcbcb;
+  padding: .5em .2em;
+}
+.key {
+  width: 20%;
+  text-align: center;
+}
+</style>
diff --git a/src/components/ListContainer.vue b/src/components/ListContainer.vue
index 027016f..9f37acd 100644
--- a/src/components/ListContainer.vue
+++ b/src/components/ListContainer.vue
@@ -87,7 +87,7 @@ export default {
   },
   mounted() {
     if (this.longListOpimizationEnabled) {
-      this.updateIndex()
+      // this.updateIndex()
     }
   },
   destroyed() {
diff --git a/src/css/vars.css b/src/css/vars.css
index 7fda267..4c52207 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -5,9 +5,11 @@
   --cell-border-color: #d6d6d6;
 
   /* z-indexes */
-  --z-header: 1;
-  --z-header-menu: 2;
-  --z-modal: 3;
+  --z-sidebar: 1;
+  --z-header: 2;
+  --z-header-menu: 3;
+  --z-modal: 4;
+  --z-nav: 5;
 
   /* shadows */
   --shadow-2dp: {
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 9262294..73cb0e5 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -7,6 +7,8 @@ import CardImage from 'components/CardImage'
 import Searcher from 'js/Searcher.js'
 import { defaultSort } from 'js/util'
 import Icon from 'components/Icon'
+import CardInfoTable from 'components/CardInfoTable'
+import Localize from 'js/Localize'
 
 export default {
   components: {
@@ -16,11 +18,13 @@ export default {
     Block,
     CardImage,
     Icon,
+    CardInfoTable,
   },
   data: () => ({
     queryString: 's',
     timer: -1,
     blocking: false,
+    sidebarVisible: false,
   }),
   computed: {
     ...mapState([
@@ -64,6 +68,15 @@ export default {
     matchedCards() {
       return Searcher.search(this.query)
     },
+    shownCard() {
+      return CardInfo[this.shownPid]
+    },
+    shownCardName() {
+      return Localize.cardName(this.shownCard)
+    },
+    shownCardLimiting() {
+      return Localize.limiting(this.shownCard)
+    },
   },
   methods: {
     delCard(pid) {
@@ -76,6 +89,16 @@ export default {
         }
       })
     },
+    setAsShownCard(pid) {
+      this.openSidebar()
+      this.$store.commit('setShownPid', pid)
+    },
+    openSidebar() {
+      this.sidebarVisible = true
+    },
+    closeSidebar() {
+      this.sidebarVisible = false
+    },
     scrollToTop() {
       if (this.$refs.scrollDiv) {
         this.$refs.scrollDiv.scrollTop = 0
@@ -89,41 +112,41 @@ export default {
 </script>
 
 <template>
-  <div :class="$style.page">
-<!--     <div :class="$style.nav">
+  <div>
+    <div :class="$style.nav">
       <div>WHITE HOPE</div>
       <div>RED AMBITION</div>
       <div>BLUE APPLI</div>
       <div>GREEN WANNA</div>
       <div>BLACDESIRE</div>
       <div>BLUE REQUEST</div>
-    </div> -->
+    </div>
     <div>
-      <div :class="$style.panel">
-      </div>
-      <div :class="$style.container">
+      <app-header>
+        <input
+          :class="$style.searchBar"
+          placeholder="Search..."
+          spellcheck="false"
+          autocomplete="off"
+          autocapitalize="none"
+          maxlength="30"
+          v-model="query"/>
+        <header-icon name="more"/>
+      </app-header>
+      <div :class="$style.container" @click="closeSidebar">
         <div :class="$style.content">
-          <div :class="$style.header">
-            <div :class="$style.deckName">{{ deckName }}</div>
-            <div :class="$style.empty"></div>
-            <input
-              :class="$style.searchBar"
-              placeholder="Search..."
-              spellcheck="false"
-              autocomplete="off"
-              autocapitalize="none"
-              maxlength="30"
-              v-model="query"/>
+          <div>
+            <div>{{ deckName }}</div>
           </div>
-          <div :class="$style.flex">
+          <div style="display: flex;">
             <div :class="$style.blocks">
-              <!-- <div>MainDeck</div> -->
+              <div>MainDeck</div>
               <div>
                 <block
                   v-for="card in sortedMainDeck"
                   :class="$style.deckBlock"
                   :card="card"
-                  @click="delCard"/>
+                  @click="setAsShownCard"/>
               </div>
               <div>LrigDeck</div>
               <div>
@@ -131,77 +154,67 @@ export default {
                   v-for="card in sortedLrigDeck"
                   :class="$style.deckBlock"
                   :card="card"
-                  @click="delCard"/>
+                  @click="setAsShownCard"/>
               </div>
             </div>
-            <div :class="$style.searchZone" ref="scrollDiv">
-              <list-container
-                :cards="matchedCards"
-                :longListOpimizationEnabled="true">
-                <template scope="props">
-                  <block
-                    :class="$style.searchBlock"
-                    :card="props.card"
-                    @click="addCard"/>
-                </template>
-              </list-container>
-            </div>
           </div>
         </div>
       </div>
     </div>
-    <div :class="$style.sidebar">
-    </div>
+    <transition name="slide">
+      <div v-show="sidebarVisible" :class="$style.sidebar">
+        <card-image :class="$style.image" :pid="shownPid"/>
+        <div style="display: flex;">
+          <span>{{ shownCard.wxid }}</span>
+          <span style="margin-left: auto;">{{ shownCardLimiting }}</span>
+        </div>
+        <div style="font-size: 1.5em;">{{ shownCardName }}</div>
+        <card-info-table :card="shownCard"/>
+      </div>
+    </transition>
   </div>
 </template>
 
 <style module>
 @import 'css/vars.css';
-.page {
-  /*padding-left: 256px;*/
-  background-color: #fafafa;
-}
-.flex {
-  display: flex;
-}
 .nav {
   position: fixed;
+  z-index: var(--z-nav);
   top: 0;
   left: 0;
-  width: 256px;
+  width: 15%;
   height: 100vh;
   font-size: 1.2em;
-  border-right: 2px solid var(--cell-border-color);
-  padding-top: 20rem;
+  padding-top: 4rem;
+  box-shadow: 0 0 4px rgba(0,0,0,.14), 2px 4px 8px rgba(0,0,0,.28);
+  background-color: #fff;
   &>div {
     width: 10em;
     padding: .2em 1em;
   }
 }
-.panel {
-  height: 20rem;
-  background-color: var(--main-color);
+.searchBar {
+  flex: 1;
+  color: #fff;
+  padding: .3em .5em;
+  background-color: color(var(--main-color) l(+10%));
+  border-radius: 3px;
 }
-.header {
-  display: flex;
-  /*height: 10rem;*/
-  padding: 1em 0;
-  color: #000;
-  font-size: 1.5em;
+.searchBar::placeholder {
+  color: #fffa;
 }
-.deckName {
-  padding-left: 3rem;
+.searchBar::selection {
+  color: #333;
+  background-color: #ffff00;
 }
 .container {
-  /*padding-right: calc(256px + 3rem);*/
+  margin-left: 15%;
+  margin-right: 10%;
 }
 .content {
-  position: relative;
-  top: -10rem;
-  width: 60%;
+  width: 90%;
   margin: 0 auto;
   background-color: #fafafa;
-  @apply --shadow-8dp;
 }
 .blocks {
   padding: 2em;
@@ -212,46 +225,20 @@ export default {
 }
 .sidebar {
   position: fixed;
-  top: 10rem;
-  right: 3rem;
-  width: 256px;
-  /*border-left: 2px solid var(--cell-border-color);*/
+  z-index: var(--z-sidebar);
+  top: 4rem;
+  right: 0;
+  width: 20%;
+  height: calc(100% - 4rem);
   background-color: #fafafa;
-  z-index: 1;
-}
-.empty {
-  flex: 1;
-}
-.searchBar {
-  color: #fff;
-  /*background-color: #fafafa;*/
-  border-radius: 3px;
-  /*margin: .5em;*/
-  height: 2rem;
-  margin-right: 1rem;
-  width: calc(6rem);
-  padding-left: .5em;
-  background-color: #eee;
-  /*background-color: color(var(--main-color) l(+10%));*/
-  /*@apply --shadow-4dp;*/
-}
-.searchBar::placeholder {
-  color: #000;
-}
-.searchBar::selection {
-  color: #333;
-  background-color: #ffff00;
-}
-.searchZone {
-  padding: 2rem 1rem;
-  width: 6rem;
-  height: calc(100vh - 3em);
   overflow-y: auto;
-  /*margin: 0 .5em;*/
-  /*@apply --shadow-8dp;*/
+  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
+  transition: transform 0.3s, right 0.3s;
+  padding: .5em;
 }
-.searchBlock {
-  /*padding: .2rem 1rem;*/
-  width: 100%;
+.image {
+  width: 80%;
+  display: block;
+  margin: 0 auto;
 }
 </style>
diff --git a/src/pages/Detail.vue b/src/pages/Detail.vue
index 2641c5c..9386bf4 100644
--- a/src/pages/Detail.vue
+++ b/src/pages/Detail.vue
@@ -1,12 +1,14 @@
 <script>
 import AppHeader from 'components/AppHeader'
 import Thumbnail from 'components/Thumbnail'
+import CardInfoTable from 'components/CardInfoTable'
 import Localize from 'js/Localize'
 
 export default {
   components: {
     AppHeader,
     Thumbnail,
+    CardInfoTable,
   },
   computed: {
     pid: {
@@ -33,73 +35,9 @@ export default {
     name() {
       return Localize.cardName(this.card)
     },
-    type() {
-      return Localize(this.card.cardType)
-    },
-    color() {
-      return Localize(this.card.color)
-    },
     limiting() {
       return Localize.limiting(this.card)
     },
-    cardEffect() {
-      return Localize.effectTexts(this.card)
-    },
-    lifeBurst() {
-      return Localize.burstEffectTexts(this.card)
-    },
-    rows() {
-      let card = this.card
-      let level = {
-        key: Localize('level'),
-        value: card.level,
-      }
-      let power = {
-        key: Localize('power'),
-        value: card.power,
-      }
-      let limit = {
-        key: Localize('limit'),
-        value: (card.limit < 1024) ? card.limit : '∞',
-      }
-      let cost = {
-        key: Localize('cost'),
-        value: Localize.cost(card),
-      }
-      let timing = {
-        key: Localize('timings'),
-        value: Localize.timings(card),
-      }
-      let classes = {
-        key: Localize('classes'),
-        value: Localize.classes(card),
-      }
-      let guard = {
-        key: Localize('guard'),
-        value: Localize.guard(card),
-      }
-      return {
-        'RESONA': [
-          [level, classes],
-          [power, guard],
-        ],
-        'SIGNI': [
-          [level, classes],
-          [power, guard],
-        ],
-        'SPELL': [
-          [cost],
-        ],
-        'LRIG': [
-          [level, classes],
-          [limit, cost],
-        ],
-        'ARTS': [
-          [cost],
-          [timing],
-        ],
-      }[card.cardType] || []
-    },
   },
   methods: {
     goGallery() {
@@ -123,34 +61,18 @@ export default {
         <thumbnail :class="[$style.thumbnail, $color[card.color]]" :pid="pid" @click.native="goGallery"></thumbnail>
         <div :class="$style.main">
           <div>
-            <div>
+            <div style="display: flex;">
               <span>{{ card.wxid }}</span>
-              <span :class="$style.right">{{ card.rarity }}</span>
+              <span style="margin-left: auto;">{{ card.rarity }}</span>
             </div>
-            <div :class="$style.title">{{ name }}</div>
+            <div style="font-size: 1.5em;">{{ name }}</div>
           </div>
-          <div>
-            <span>{{ type }}</span>
-            <span :class="$style.right">{{ limiting }}</span>
+          <div style="display: flex;">
+            <span style="margin-left: auto;">{{ limiting }}</span>
           </div>
         </div>
       </div>
-      <table :class="$style.table">
-        <tbody>
-          <tr v-for="row in rows" :class="$style.rows">
-          	<template v-for="meta in row">
-              <td :class="$style.key">{{ meta.key }}</td>
-              <td :colspan="row.length === 1 ? 3 : 1">{{ meta.value }}</td>
-            </template>
-          </tr>
-          <tr>
-            <td colspan="4">{{ cardEffect }}</td>
-          </tr>
-          <tr>
-            <td colspan="4">{{ lifeBurst }}</td>
-          </tr>
-        </tbody>
-      </table>
+      <card-info-table :card="card"/>
     </div>
   </div>
 </template>
@@ -165,24 +87,6 @@ export default {
   display: flex;
   margin-bottom: 0.5em;
 }
-.title {
-  font-size: 1.5em;
-}
-.table {
-  width: 100%;
-  line-height: 1.5;
-  white-space: pre-line;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-td {
-  border: 1px solid #cbcbcb;
-  padding: .5em .2em;
-}
-.key {
-  width: 15%;
-  text-align: center;
-}
 .thumbnail {
   width: 11em; 
   height: 11em; 
@@ -196,7 +100,4 @@ td {
   overflow: hidden;
   padding: .5em;
 }
-.right {
-  float: right;
-}
 </style>

From bcbff79dfeddc3ffad8dfbaac7c322f7e5eadd26 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Sun, 23 Jul 2017 13:36:40 +0800
Subject: [PATCH 05/12] add `Card` component

---
 src/components/Card.vue  | 106 ++++++++++++++++++++++++++++++++++
 src/pages/DeckEditor.vue | 119 +++++++++++++++++++++++++--------------
 2 files changed, 184 insertions(+), 41 deletions(-)
 create mode 100644 src/components/Card.vue

diff --git a/src/components/Card.vue b/src/components/Card.vue
new file mode 100644
index 0000000..522d986
--- /dev/null
+++ b/src/components/Card.vue
@@ -0,0 +1,106 @@
+<script>
+import Thumbnail from 'components/Thumbnail'
+import Localize from 'js/Localize'
+import Icon from 'components/Icon'
+
+export default {
+  props: {
+    card: {
+      type: Object,
+      require: true,
+    },
+    actionType: {
+      type: String,
+      require: true,
+    },
+  },
+  components: {
+    Thumbnail,
+    Icon,
+  },
+  data: () => ({
+    actionVisible: false,
+  }),
+  computed:{
+    name() {
+      return Localize.cardName(this.card)
+    },
+  },
+  methods: {
+    click() {
+      this.$emit('click', this.card.pid)
+    },
+    buttonClick() {
+      this.$emit('action', this.card.pid)
+    },
+    showAction() {
+      this.actionVisible = true
+    },
+    hideAction() {
+      this.actionVisible = false
+    },
+  },
+}
+
+</script>
+
+<template>
+  <div
+    :class="$style.wrapper"
+    @click.stop="click"
+    @mouseover="showAction"
+    @mouseout="hideAction">
+    <thumbnail :class="$style.image" :pid="card.pid" />
+    <div :class="$style.dimmer">
+      <div :class="$style.title">{{ name }}</div>
+      <a v-show="actionVisible" :class="$style.action" @click.stop="buttonClick">
+        <icon v-if="actionType==='add'" name="add" />
+        <icon v-else name="add" style="transform: rotate(45deg);"/>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.wrapper {
+  width: 8rem;
+  height: 8rem;
+  margin: .5rem;
+  @apply --shadow-2dp;
+}
+.wrapper:hover {
+  @apply --shadow-6dp;
+}
+.image {
+  width: 100%;
+  height: 100%;
+}
+.dimmer {
+  position: relative;
+  top: -2.2rem;
+  display: flex;
+  background-color: color(#000 a(.65))
+}
+.title {
+  flex: 1;
+  font-size: .8rem;
+  line-height: 1rem;
+  padding: .1rem .2rem;
+  height: 2rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #fff;
+}
+.action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 2rem;
+  height: 2rem;
+  line-height: 2rem;
+  padding: .1rem .2rem;
+  font-size: 2rem;
+  color: #fff;
+}
+</style>
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 73cb0e5..7c32942 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -9,6 +9,7 @@ import { defaultSort } from 'js/util'
 import Icon from 'components/Icon'
 import CardInfoTable from 'components/CardInfoTable'
 import Localize from 'js/Localize'
+import Card from 'components/Card'
 
 export default {
   components: {
@@ -19,12 +20,14 @@ export default {
     CardImage,
     Icon,
     CardInfoTable,
+    Card,
   },
   data: () => ({
     queryString: 's',
     timer: -1,
     blocking: false,
     sidebarVisible: false,
+    resultVisible: false,
   }),
   computed: {
     ...mapState([
@@ -108,21 +111,36 @@ export default {
   mounted() {
     this.query = ''
   },
+  watch: {
+    query(str) {
+      if (str) {
+        this.resultVisible = true
+      } else {
+        this.resultVisible = false
+      }
+    },
+  },
 }
 </script>
 
 <template>
   <div>
     <div :class="$style.nav">
-      <div>WHITE HOPE</div>
-      <div>RED AMBITION</div>
-      <div>BLUE APPLI</div>
-      <div>GREEN WANNA</div>
-      <div>BLACDESIRE</div>
-      <div>BLUE REQUEST</div>
+      <div :class="$style.flexCenter">
+        <a :class="$style.title"> WEBXOSS </a>
+      </div>
+      <div :class="$style.decks">
+        <div>WHITE HOPE</div>
+        <div>RED AMBITION</div>
+        <div>BLUE APPLI</div>
+        <div>GREEN WANNA</div>
+        <div>BLACDESIRE</div>
+        <div>BLUE REQUEST</div>
+      </div>
     </div>
     <div>
       <app-header>
+        <div slot="left" style="width: 15%;" />
         <input
           :class="$style.searchBar"
           placeholder="Search..."
@@ -131,32 +149,39 @@ export default {
           autocapitalize="none"
           maxlength="30"
           v-model="query"/>
-        <header-icon name="more"/>
+        <header-icon slot="right" name="blocks"/>
+        <div slot="right" style="width: 15%;"/>
       </app-header>
       <div :class="$style.container" @click="closeSidebar">
-        <div :class="$style.content">
-          <div>
-            <div>{{ deckName }}</div>
+        <div v-show="resultVisible" :class="$style.content">
+          <div :class="$style.cards">
+            <card
+              v-for="card in matchedCards.slice(0,50)"
+              :card=card
+              actionType="add"
+              @click="setAsShownCard"
+              @action="addCard" />
+          </div>
+        </div>
+        <div v-show="!resultVisible" :class="$style.content">
+          <div :class="$style.cards">
+            <card
+              v-for="card in sortedMainDeck"
+              :card=card
+              :class="$style.card"
+              actionType="remove"
+              @click="setAsShownCard"
+              @action="delCard" />
           </div>
-          <div style="display: flex;">
-            <div :class="$style.blocks">
-              <div>MainDeck</div>
-              <div>
-                <block
-                  v-for="card in sortedMainDeck"
-                  :class="$style.deckBlock"
-                  :card="card"
-                  @click="setAsShownCard"/>
-              </div>
-              <div>LrigDeck</div>
-              <div>
-                <block
-                  v-for="card in sortedLrigDeck"
-                  :class="$style.deckBlock"
-                  :card="card"
-                  @click="setAsShownCard"/>
-              </div>
-            </div>
+          <div :class="$style.cards">
+            <card
+              v-for="card in sortedLrigDeck"
+              :card=card
+              :class="$style.card"
+              actionType="remove"
+              @click="setAsShownCard"
+              @action="delCard">
+            </card>
           </div>
         </div>
       </div>
@@ -185,18 +210,33 @@ export default {
   width: 15%;
   height: 100vh;
   font-size: 1.2em;
-  padding-top: 4rem;
   box-shadow: 0 0 4px rgba(0,0,0,.14), 2px 4px 8px rgba(0,0,0,.28);
   background-color: #fff;
+}
+.flexCenter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 3rem;
+  border-bottom: 1px solid var(--cell-border-color);
+}
+.title {
+  font-size: 1.5rem;
+  color: var(--main-color);
+}
+.decks {
+  color: #757575;
+  padding: 1em 1em;
   &>div {
-    width: 10em;
-    padding: .2em 1em;
+    padding: .3em 0;
   }
 }
 .searchBar {
   flex: 1;
   color: #fff;
   padding: .3em .5em;
+  margin-left: 2em;
+  margin-right: 40%;
   background-color: color(var(--main-color) l(+10%));
   border-radius: 3px;
 }
@@ -209,19 +249,16 @@ export default {
 }
 .container {
   margin-left: 15%;
-  margin-right: 10%;
+  margin-right: 15%;
 }
 .content {
-  width: 90%;
-  margin: 0 auto;
+  margin-left: 2em;
   background-color: #fafafa;
 }
-.blocks {
-  padding: 2em;
-  flex: 1;
-}
-.deckBlock {
-  width: 10%;
+.cards {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
 }
 .sidebar {
   position: fixed;

From d0a4269847e226a5f387f87adc1d920bf00181e4 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Thu, 27 Jul 2017 11:55:34 +0800
Subject: [PATCH 06/12] add `FlexboxContaner` component with loadmore behavior

rename `ListContainer` -> `CellConainer`
rename `Card` -> `Box`
store `fontSize` in store.js, change by window's resizing
---
 src/app.vue                                   |  2 +-
 src/components/{Card.vue => Box.vue}          | 43 +++++++-----
 src/components/Cell.vue                       | 30 ++++----
 .../{ListContainer.vue => CellContainer.vue}  | 52 +++++++-------
 src/components/FlexboxContainer.vue           | 69 +++++++++++++++++++
 src/pages/Deck.vue                            | 16 ++---
 src/pages/DeckEditor.vue                      | 66 +++++++++---------
 src/pages/Search.vue                          | 10 +--
 src/store.js                                  | 14 ++--
 9 files changed, 186 insertions(+), 116 deletions(-)
 rename src/components/{Card.vue => Box.vue} (67%)
 rename src/components/{ListContainer.vue => CellContainer.vue} (56%)
 create mode 100644 src/components/FlexboxContainer.vue

diff --git a/src/app.vue b/src/app.vue
index e581fea..bb7a82c 100644
--- a/src/app.vue
+++ b/src/app.vue
@@ -5,7 +5,7 @@ export default {
     let deckFileNames = localStorage.getItem('deck_filenames')
     let fileNames = JSON.parse(deckFileNames)
 
-    this.$store.commit('changeWindowWidth', window.innerWidth)
+    this.$store.commit('setWindowData')
     this.$store.commit('changeLanguage', localStorage.getItem('language') || 'en')
 
     // if no deck in localStorage, initialize WHITE_HOPE
diff --git a/src/components/Card.vue b/src/components/Box.vue
similarity index 67%
rename from src/components/Card.vue
rename to src/components/Box.vue
index 522d986..073cb77 100644
--- a/src/components/Card.vue
+++ b/src/components/Box.vue
@@ -1,7 +1,7 @@
 <script>
 import Thumbnail from 'components/Thumbnail'
-import Localize from 'js/Localize'
 import Icon from 'components/Icon'
+import Localize from 'js/Localize'
 
 export default {
   props: {
@@ -9,7 +9,7 @@ export default {
       type: Object,
       require: true,
     },
-    actionType: {
+    icon: {
       type: String,
       require: true,
     },
@@ -45,18 +45,20 @@ export default {
 </script>
 
 <template>
-  <div
-    :class="$style.wrapper"
-    @click.stop="click"
-    @mouseover="showAction"
-    @mouseout="hideAction">
-    <thumbnail :class="$style.image" :pid="card.pid" />
-    <div :class="$style.dimmer">
-      <div :class="$style.title">{{ name }}</div>
-      <a v-show="actionVisible" :class="$style.action" @click.stop="buttonClick">
-        <icon v-if="actionType==='add'" name="add" />
-        <icon v-else name="add" style="transform: rotate(45deg);"/>
-      </a>
+  <div :class="$style.wrapper">
+    <div
+      :class="$style.box"
+      @click.stop="click"
+      @mouseover="showAction"
+      @mouseout="hideAction">
+      <thumbnail :class="$style.image" :pid="card.pid" />
+      <div :class="$style.dimmer">
+        <div :class="$style.title">{{ name }}</div>
+        <a v-show="actionVisible" :class="$style.action" @click.stop="buttonClick">
+          <icon v-if="icon==='remove'" name="add" style="transform: rotate(45deg);"/>
+          <icon v-else :name="icon"/>
+        </a>
+      </div>
     </div>
   </div>
 </template>
@@ -64,12 +66,17 @@ export default {
 <style module>
 @import 'css/vars.css';
 .wrapper {
-  width: 8rem;
-  height: 8rem;
-  margin: .5rem;
+  height: 9rem;
+  width: 9rem;
+  padding: .5rem;
+}
+.box {
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
   @apply --shadow-2dp;
 }
-.wrapper:hover {
+.box:hover {
   @apply --shadow-6dp;
 }
 .image {
diff --git a/src/components/Cell.vue b/src/components/Cell.vue
index aec47d6..9f3834c 100644
--- a/src/components/Cell.vue
+++ b/src/components/Cell.vue
@@ -193,16 +193,28 @@ export default {
       </div>
     </div>
   </router-link>
-
 </template>
 
 <style src="css/colors.css" module="$color"></style>
 <style module>
 @import 'css/vars.css';
-
+.cell {
+  display: flex;
+  box-sizing: border-box;
+  padding: var(--padding);
+  height: 8rem;
+  justify-content: center;
+  border-bottom: 1px solid var(--cell-border-color);
+}
 .translucent {
   opacity: 0.7;
 }
+.thumbnail {
+  width: calc(8rem - 2 * var(--padding));
+  height: calc(8rem - 2 * var(--padding));
+  border: 2px solid currentColor;
+  margin: auto 0;
+}
 .wrapper {
   position: relative;
   height: 0;
@@ -225,20 +237,6 @@ export default {
     left: 0;
   }
 }
-.cell {
-  display: flex;
-  box-sizing: border-box;
-  padding: var(--padding);
-  height: 8rem;
-  justify-content: center;
-  border-bottom: 1px solid var(--cell-border-color);
-}
-.thumbnail {
-  width: calc(8rem - 2 * var(--padding));
-  height: calc(8rem - 2 * var(--padding));
-  border: 2px solid currentColor;
-  margin: auto 0;
-}
 .left {
   align-self: center;
 }
diff --git a/src/components/ListContainer.vue b/src/components/CellContainer.vue
similarity index 56%
rename from src/components/ListContainer.vue
rename to src/components/CellContainer.vue
index 9f37acd..4ae63f6 100644
--- a/src/components/ListContainer.vue
+++ b/src/components/CellContainer.vue
@@ -10,9 +10,6 @@ export default {
     longListOpimizationEnabled: {
       require: false,
     },
-    columnNumber: {
-      require: false,
-    },
   },
   data: () => ({
     request: -1,
@@ -29,17 +26,19 @@ export default {
         See `updateIndex` for details.
     */
     index: 0,
-    itemHeight: 1,
+    itemHeight: 8,
   }),
   computed: {
     ...mapState([
       'windowWidth',
+      'fontSize',
     ]),
-    _colNum() {
-      return this.columnNumber ? this.columnNumber : 1
+    colunms() {
+      // window's width > 1024px, use 2 colunm view
+      return this.windowWidth > 1024 ? 2 : 1
     },
-    allColunmsCount() {
-      return Math.ceil(this.cards.length / this._colNum)
+    rows() {
+      return this.cards.length / this.colunms
     },
     start() {
       // 5 colunms before index
@@ -47,22 +46,22 @@ export default {
     },
     end() {
       // 10 colunms after index
-      return Math.min(this.allColunmsCount, this.index + 10)
+      return Math.min(this.rows, this.index + 10)
     },
     shownCards() {
-      return this.cards.slice(this._colNum * this.start, this._colNum * this.end)
+      return this.cards.slice(this.colunms * this.start, this.colunms * this.end)
     },
-    shownColunmsCount() {
-      return Math.ceil(this.shownCards.length / this._colNum)
+    shownRows() {
+      return Math.ceil(this.shownCards.length / this.colunms)
     },
     padding() {
-      // Paddings before / after shown cells.
+      // Paddings upper / under shown cells.
       // They keep list height and scroll position from changing。
-      let beforeCount = this.start
-      let afterCount = this.allColunmsCount - this.shownColunmsCount - beforeCount
+      let upperCount = this.start
+      let underCount = this.rows - this.shownRows - upperCount
       return {
-        'padding-top': `${this.itemHeight * beforeCount}px`,
-        'padding-bottom': `${this.itemHeight * afterCount}px`,
+        'padding-top': `${this.itemHeight * upperCount}rem`,
+        'padding-bottom': `${this.itemHeight * underCount}rem`,
       }
     },
     iterator() {
@@ -73,21 +72,14 @@ export default {
   },
   methods: {
     updateIndex() {
-      // Find the top cell in viewport according to`window.scrollY`.
-      if (this.$children.length) {
-        this.itemHeight = this.$children[0].$el.getBoundingClientRect().height
-      }
-      let scrollPostion = document.body.clientHeight === window.innerHeight ?
-        this.$el.parentElement.scrollTop :
-        window.scrollY
-      this.index = Math.round(scrollPostion / this.itemHeight)
-
+      // Find the top item in viewport according to`window.scrollY`.
+      this.index = Math.round(window.scrollY / this.itemHeight / this.fontSize)
       this.request = requestIdleCallback(this.updateIndex)
     },
   },
   mounted() {
     if (this.longListOpimizationEnabled) {
-      // this.updateIndex()
+      this.updateIndex()
     }
   },
   destroyed() {
@@ -104,10 +96,14 @@ export default {
 
 <style module>
 .row {
+  width: 100%;
   display: flex;
   flex-wrap: wrap;
 }
-.row>* {
+.row>a {
   width: 100%;
+  @media (width >= 1024px) {
+    width: 50%;
+  }
 }
 </style>
diff --git a/src/components/FlexboxContainer.vue b/src/components/FlexboxContainer.vue
new file mode 100644
index 0000000..16b17c8
--- /dev/null
+++ b/src/components/FlexboxContainer.vue
@@ -0,0 +1,69 @@
+<script>
+
+export default {
+  props: {
+    cards: {
+      type: Array,
+      require: true,
+    },
+  },
+  data: () => ({
+    colunms: 1,
+    rows: 10,
+    request: 0,
+  }),
+  computed: {
+    shownCount() {
+      return this.colunms * this.rows
+    },
+    iterator() {
+      return this.shownCount < this.cards.length
+        ? this.cards.slice(0, this.shownCount)
+        : this.cards
+    },
+  },
+  methods: {
+    loadMore() {
+      this.rows += 5
+    },
+    resetRows() {
+      this.rows = 10
+    },
+    calcColunms() {
+      if (this.$children.length) {
+        let itemWidth = this.$children[0].$el.clientWidth
+        let selfWidth = this.$el.clientWidth
+        this.colunms = Math.floor(selfWidth / itemWidth)
+      }
+      this.request = requestIdleCallback(this.calcColunms)
+    }
+  },
+  mounted() {
+    this.calcColunms()
+    window.onscroll = () => {
+      if ((window.innerHeight + window.pageYOffset) >= document.body.offsetHeight) {
+        if (this.shownCount < this.cards.length) {
+          this.loadMore()
+        }
+      }
+    }
+  },
+  destroyed() {
+    cancelIdleCallback(this.request)
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.container">
+    <slot v-for="item in iterator" :card="item"/>
+  </div>
+</template>
+
+<style module>
+.container {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index b6b8e91..710651f 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -3,7 +3,7 @@ import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import DeckFloatButton from 'components/DeckFloatButton'
-import ListContainer from 'components/ListContainer'
+import CellContainer from 'components/CellContainer'
 import Cell from 'components/Cell'
 import Block from 'components/Block'
 import DeckHead from 'components/DeckHead'
@@ -19,7 +19,7 @@ export default {
     HeaderMenu,
     DeckModals,
     DeckFloatButton,
-    ListContainer,
+    CellContainer,
     Cell,
     Block,
     DeckHead,
@@ -190,16 +190,16 @@ export default {
 
     <!-- List view -->
     <template v-if="!previewing">
-      <list-container :cards="shownMainDeck">
+      <cell-container :cards="shownMainDeck">
         <template scope="props">
-          <cell :card="props.card" :protectionEnabled="true"></cell>
+          <cell :card="props.card" :protectionEnabled="true"/>
         </template>
-      </list-container>
-      <list-container ref="lrigDeck" :cards="shownLrigDeck">
+      </cell-container>
+      <cell-container ref="lrigDeck" :cards="shownLrigDeck">
         <template scope="props">
-          <cell :card="props.card" :protectionEnabled="true"></cell>
+          <cell :card="props.card" :protectionEnabled="true"/>
         </template>
-      </list-container>
+      </cell-container>
     </template>
 
     <!-- Block view -->
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 7c32942..6b2eca5 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -1,26 +1,24 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
-import ListContainer from 'components/ListContainer'
-import Block from 'components/Block'
+import FlexboxContainer from 'components/FlexboxContainer'
+import CardInfoTable from 'components/CardInfoTable'
 import CardImage from 'components/CardImage'
-import Searcher from 'js/Searcher.js'
-import { defaultSort } from 'js/util'
 import Icon from 'components/Icon'
-import CardInfoTable from 'components/CardInfoTable'
+import Box from 'components/Box'
+import { defaultSort } from 'js/util'
+import Searcher from 'js/Searcher.js'
 import Localize from 'js/Localize'
-import Card from 'components/Card'
 
 export default {
   components: {
     AppHeader,
     HeaderIcon,
-    ListContainer,
-    Block,
+    FlexboxContainer,
+    CardInfoTable,
     CardImage,
     Icon,
-    CardInfoTable,
-    Card,
+    Box,
   },
   data: () => ({
     queryString: 's',
@@ -103,9 +101,8 @@ export default {
       this.sidebarVisible = false
     },
     scrollToTop() {
-      if (this.$refs.scrollDiv) {
-        this.$refs.scrollDiv.scrollTop = 0
-      }
+      window.scrollTo(0, 0)
+      this.$refs.flexboxContainer.resetRows()
     },
   },
   mounted() {
@@ -154,34 +151,33 @@ export default {
       </app-header>
       <div :class="$style.container" @click="closeSidebar">
         <div v-show="resultVisible" :class="$style.content">
-          <div :class="$style.cards">
-            <card
-              v-for="card in matchedCards.slice(0,50)"
-              :card=card
-              actionType="add"
-              @click="setAsShownCard"
-              @action="addCard" />
-          </div>
+          <flexbox-container ref="flexboxContainer" :cards="matchedCards">
+            <template scope="props">
+              <box
+                :card="props.card"
+                :class="$style.card"
+                icon="add"
+                @click="setAsShownCard"
+                @action="addCard" />
+            </template>
+          </flexbox-container>
         </div>
         <div v-show="!resultVisible" :class="$style.content">
-          <div :class="$style.cards">
-            <card
+          <div :class="$style.boxs">
+            <box
               v-for="card in sortedMainDeck"
-              :card=card
-              :class="$style.card"
-              actionType="remove"
+              :card="card"
+              icon="remove"
               @click="setAsShownCard"
-              @action="delCard" />
+              @action="delCard"/>
           </div>
-          <div :class="$style.cards">
-            <card
+          <div :class="$style.boxs">
+            <box
               v-for="card in sortedLrigDeck"
-              :card=card
-              :class="$style.card"
-              actionType="remove"
+              :card="card"
+              icon="remove"
               @click="setAsShownCard"
-              @action="delCard">
-            </card>
+              @action="delCard"/>
           </div>
         </div>
       </div>
@@ -255,7 +251,7 @@ export default {
   margin-left: 2em;
   background-color: #fafafa;
 }
-.cards {
+.boxs {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 63995ee..9f48368 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -1,6 +1,6 @@
 <script>
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
-import ListContainer from 'components/ListContainer'
+import CellContainer from 'components/CellContainer'
 import Searcher from 'js/Searcher.js'
 import marked from 'marked'
 import Cell from 'components/Cell'
@@ -9,7 +9,7 @@ export default {
   components: {
     AppHeader,
     HeaderIcon,
-    ListContainer,
+    CellContainer,
     Cell,
   },
   data: () => ({
@@ -91,11 +91,11 @@ export default {
       <header-icon name="more"/>
     </app-header>
     <section v-if="query && matchedCards.length">
-      <list-container :cards="matchedCards" :longListOpimizationEnabled="true">
+      <cell-container :cards="matchedCards" :longListOpimizationEnabled="true">
         <template scope="props">
-          <cell :card="props.card"></cell>
+          <cell :card="props.card"/>
         </template>
-      </list-container>
+      </cell-container>
     </section>
     <section :class="$style.tips" v-if="!query">
       <div v-html="marked(searchTips)"></div>
diff --git a/src/store.js b/src/store.js
index 4f4e164..145a9e7 100644
--- a/src/store.js
+++ b/src/store.js
@@ -34,6 +34,7 @@ const state = {
     lang: 'en',
   },
   windowWidth: 0,
+  fontSize: 14,
 }
 
 Localize.config = state.localization
@@ -164,8 +165,13 @@ const mutations = {
     state.localization.lang = lang
     setLanguegeCardInfo(lang)
   },
-  changeWindowWidth(state, width) {
-    state.windowWidth = width
+  setWindowData(state) {
+    state.windowWidth = window.innerWidth
+    state.fontSize = +window.getComputedStyle(window.document.body)
+        .fontSize.slice(0, -2)
+  },
+  setFontSize(state, size) {
+    state.fontSize = size
   },
   setShownPid(state, pid) {
     if (0 < pid && pid < Object.keys(CardInfo).length) {
@@ -216,8 +222,6 @@ store.watch((state, getters) => {
   localStorage.setItem(deckName, JSON.stringify(file))
 })
 
-window.addEventListener('resize', () => {
-  store.commit('changeWindowWidth', window.innerWidth)
-}, false)
+window.addEventListener('resize', store.setWindowData, false)
 
 export default store

From 6284795c716c498d86396d4085b1e34925ad67ff Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Thu, 10 Aug 2017 22:38:46 +0800
Subject: [PATCH 07/12] abstract DeckSubheader component

---
 src/components/CardInfoTable.vue    |  2 +-
 src/components/CellContainer.vue    |  6 +-
 src/components/DeckHead.vue         | 70 +++------------------
 src/components/DeckModals.vue       |  8 ++-
 src/components/DeckSubheader.vue    | 95 +++++++++++++++++++++++++++++
 src/components/FlexboxContainer.vue |  9 ++-
 src/css/common.css                  | 29 ++++-----
 src/css/vars.css                    |  4 +-
 src/pages/Deck.vue                  |  2 +-
 src/pages/DeckEditor.vue            | 82 ++++++++++++++++++++-----
 src/store.js                        |  3 -
 11 files changed, 204 insertions(+), 106 deletions(-)
 create mode 100644 src/components/DeckSubheader.vue

diff --git a/src/components/CardInfoTable.vue b/src/components/CardInfoTable.vue
index b00d9e0..d8420b8 100644
--- a/src/components/CardInfoTable.vue
+++ b/src/components/CardInfoTable.vue
@@ -112,7 +112,7 @@ export default {
   </div>
 </template>
 
-<style module>
+<style module scoped>
 .table {
   width: 100%;
   line-height: 1.5;
diff --git a/src/components/CellContainer.vue b/src/components/CellContainer.vue
index 4ae63f6..282b363 100644
--- a/src/components/CellContainer.vue
+++ b/src/components/CellContainer.vue
@@ -35,7 +35,7 @@ export default {
     ]),
     colunms() {
       // window's width > 1024px, use 2 colunm view
-      return this.windowWidth > 1024 ? 2 : 1
+      return this.windowWidth > 961 ? 2 : 1
     },
     rows() {
       return this.cards.length / this.colunms
@@ -100,9 +100,9 @@ export default {
   display: flex;
   flex-wrap: wrap;
 }
-.row>a {
+.row>* {
   width: 100%;
-  @media (width >= 1024px) {
+  @media (min-width: 961px) {
     width: 50%;
   }
 }
diff --git a/src/components/DeckHead.vue b/src/components/DeckHead.vue
index 82b0267..1d63e11 100644
--- a/src/components/DeckHead.vue
+++ b/src/components/DeckHead.vue
@@ -1,74 +1,25 @@
 <script>
-import Localize from 'js/Localize'
-import checkMayusRoom from 'js/MayusRoom'
+import DeckSubheader from 'components/DeckSubheader'
 
 export default {
+  components: {
+    DeckSubheader,
+  },
   props: {
     scrolledToLrig: {
       require: true,
     },
-    previewing: {
-      require: true,
-    },
     shadow: {
       require: true,
     },
   },
-  computed: {
-    burstCount() {
-      return this.$store.getters.deck
-        .map(card => CardInfo[card.cid]) // TODO: utils
-        .filter(card => card.burstEffectTexts)
-        .length
-    },
-    burstClass() {
-      return this.burstCount === 20 ? '' : this.$style.warn
-    },
-    mainCount() {
-      return this.$store.getters.mainDeck.length
-    },
-    mainClass() {
-      return this.mainCount === 40 ? '' : this.$style.warn
-    },
-    lrigCount() {
-      return this.$store.getters.lrigDeck.length
-    },
-    lrigClass() {
-      return this.lrigCount <= 10 ? '' : this.$style.warn
-    },
-    deckBanned() {
-      return checkMayusRoom(this.$store.getters.deck)
-    },
-  },
-  methods: {
-    L(text) {
-      return Localize(text)
-    },
-  },
 }
 </script>
 
 <template>
   <div :class="$style.wrapper">
     <div :class="[$style.head, shadow ? $style.shadow : '']">
-      <template v-if="previewing">
-        <span>{{ L('overview') }}</span>
-      </template>
-
-      <template v-if="!previewing && !scrolledToLrig">
-        <span :class="$style.deckName">{{ L('main_deck')}} </span>
-        (<span :class="mainClass">{{ mainCount }}</span>/40)
-      </template>
-
-      <template v-if="!previewing && scrolledToLrig">
-        <span :class="$style.deckName">{{ L('lrig_deck') }} </span>
-        (<span :class="lrigClass">{{ lrigCount }}</span>/10)
-      </template>
-
-      <div :class="$style.right">
-        <span :class="[$style.warn, $style.mayu]" v-show="deckBanned">{{ L('mayu_room') }}</span>
-        <span>{{ L('life_burst_short') }}: <span :class="burstClass">{{ burstCount }}</span>/20</span>
-      </div>
+      <deck-subheader :class="$style.subheader" :lrig="scrolledToLrig" />
     </div>
   </div>
 </template>
@@ -102,14 +53,7 @@ export default {
     border-bottom: transparent;
   }
 }
-.right {
-  flex: 1;
-  text-align: right;
-}
-.warn {
-  color: #ff5722;
-}
-.mayu {
-  margin-right: .5em;
+.subheader {
+  width: 100%
 }
 </style>
diff --git a/src/components/DeckModals.vue b/src/components/DeckModals.vue
index b0b9a68..53cabe4 100644
--- a/src/components/DeckModals.vue
+++ b/src/components/DeckModals.vue
@@ -73,7 +73,13 @@ export default {
   },
   methods: {
     open(type) {
-      this.$router.replace({
+      let assignRoute
+      if (Object.getOwnPropertyNames(this.$route.query).length) {
+        assignRoute = this.$router.replace.bind(this.$router)
+      } else {
+        assignRoute = this.$router.push.bind(this.$router)
+      }
+      assignRoute({
         path: this.$route.path,
         query: Object.assign({}, this.$route.query, {
           modal: type,
diff --git a/src/components/DeckSubheader.vue b/src/components/DeckSubheader.vue
new file mode 100644
index 0000000..3d866c2
--- /dev/null
+++ b/src/components/DeckSubheader.vue
@@ -0,0 +1,95 @@
+<script>
+import { mapGetters } from 'vuex'
+import Localize from 'js/Localize'
+import checkMayusRoom from 'js/MayusRoom'
+
+export default {
+  props: {
+    lrig: {
+      require: false,
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'deck',
+      'mainDeck',
+      'lrigDeck',
+    ]),
+    burstCount() {
+      return this.deck
+        .map(card => CardInfo[card.cid]) // TODO: utils
+        .filter(card => card.burstEffectTexts)
+        .length
+    },
+    burstClass() {
+      return this.burstCount === 20 ? '' : this.$style.warn
+    },
+    mainCount() {
+      return this.mainDeck.length
+    },
+    mainClass() {
+      return this.mainCount === 40 ? '' : this.$style.warn
+    },
+    lrigCount() {
+      return this.lrigDeck.length
+    },
+    lrigClass() {
+      return this.lrigCount <= 10 ? '' : this.$style.warn
+    },
+    deckBanned() {
+      return checkMayusRoom(this.deck)
+    },
+  },
+  methods: {
+    L(text) {
+      return Localize(text)
+    },
+  },
+}
+
+</script>
+<template>
+  <div :class="$style.subheader">
+    <template v-if="!lrig">
+      <span :class="$style.name">{{ L('main_deck') }}</span>
+      <span :class="mainClass">{{ mainCount }}</span>/40
+
+      <span :class="$style.right">
+        <span v-show="!lrig && deckBanned" :class="[$style.mayu, $style.warn]">
+            {{ L('mayu_room') }}
+        </span>
+
+        <span>
+          {{ L('life_burst_short') }}:
+        </span>
+        <span :class="burstClass">{{ burstCount }}</span>/20
+      </span>
+    </template>
+
+    <template v-if="lrig">
+      <span :class="$style.name">{{ L('lrig_deck') }}</span>
+      <span :class="lrigClass">{{ lrigCount }}</span>/10
+    </template>
+
+  </div>
+</template>
+<style module>
+.subheader {
+  display: flex;
+  font-size: 1em;
+  color: #666;
+  padding: 0 .5rem;
+}
+.name {
+  padding-right: .5em;
+}
+.mayu {
+  padding-right: 1em;
+}
+.right {
+  margin-left: auto;
+}
+.warn {
+  color: #ff5722;
+}
+</style>
diff --git a/src/components/FlexboxContainer.vue b/src/components/FlexboxContainer.vue
index 16b17c8..f22f687 100644
--- a/src/components/FlexboxContainer.vue
+++ b/src/components/FlexboxContainer.vue
@@ -32,11 +32,13 @@ export default {
     calcColunms() {
       if (this.$children.length) {
         let itemWidth = this.$children[0].$el.clientWidth
-        let selfWidth = this.$el.clientWidth
-        this.colunms = Math.floor(selfWidth / itemWidth)
+        if (itemWidth) {
+          let selfWidth = this.$el.clientWidth
+          this.colunms = Math.floor(selfWidth / itemWidth)
+        }
       }
       this.request = requestIdleCallback(this.calcColunms)
-    }
+    },
   },
   mounted() {
     this.calcColunms()
@@ -50,6 +52,7 @@ export default {
   },
   destroyed() {
     cancelIdleCallback(this.request)
+    window.onscroll = false
   },
 }
 </script>
diff --git a/src/css/common.css b/src/css/common.css
index 8106cc4..726e9b2 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -3,33 +3,34 @@
   font-family: PingFangSC-Regular, 'Helvetica Neue', Tahoma, Arial, 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
   color: #333;
 
-  /* small mobile (iPhone5) */
-  @media (width <= 320px) {
+  /* smartphones, iPhone, portrait 480x320 phones */
+  @media (min-width: 320px) {
     font-size: 12px;
   }
 
-  /* middle mobile (iPhone6) */
-  @media (width > 375px) {
-    font-size: 16px;
+  /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
+  @media (min-width: 481px) {
+    font-size: 14px;
   }
 
-  /* large mobile (iPhone6 Plus) */
-  @media (width > 425px) {
+  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
+  @media (min-width: 641px) {
     font-size: 18px;
   }
 
-  /* larger mobile */
-  @media (width >= 667px) {
+  /* tablet, landscape iPad, lo-res laptops ands desktops */
+  @media (min-width: 961px) {
     font-size: 20px;
   }
 
-  /* tablet */
-  @media (width >= 768px) and (width < 1024px) {
-    font-size: 24px;
+  /* big landscape tablets, laptops, and desktops */ 
+  @media (min-width: 1025px){
+    font-size: 22px;
   }
 
-  @media (width >= 1280px) {
-    font-size: 24px;
+  /* hi-res laptops and desktops */
+  @media (min-width: 1281px) {
+    font-size: 22px;
   }
 }
 
diff --git a/src/css/vars.css b/src/css/vars.css
index 4c52207..c65e524 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -8,8 +8,8 @@
   --z-sidebar: 1;
   --z-header: 2;
   --z-header-menu: 3;
-  --z-modal: 4;
-  --z-nav: 5;
+  --z-nav: 4;
+  --z-modal: 5;
 
   /* shadows */
   --shadow-2dp: {
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index 710651f..690ec75 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -184,7 +184,7 @@ export default {
     </app-header>
     <deck-head
       :scrolledToLrig="scrolledToLrig"
-      :previewing="previewing"
+      :show="!previewing"
       :shadow="!scrolledToTop">
     </deck-head>
 
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 6b2eca5..e6d81ff 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -1,8 +1,10 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
+import DeckModals from 'components/DeckModals'
 import FlexboxContainer from 'components/FlexboxContainer'
 import CardInfoTable from 'components/CardInfoTable'
+import DeckSubheader from 'components/DeckSubheader'
 import CardImage from 'components/CardImage'
 import Icon from 'components/Icon'
 import Box from 'components/Box'
@@ -14,14 +16,16 @@ export default {
   components: {
     AppHeader,
     HeaderIcon,
+    DeckModals,
     FlexboxContainer,
+    DeckSubheader,
     CardInfoTable,
     CardImage,
     Icon,
     Box,
   },
   data: () => ({
-    queryString: 's',
+    queryString: '',
     timer: -1,
     blocking: false,
     sidebarVisible: false,
@@ -36,6 +40,7 @@ export default {
       'deckPids',
       'mainDeck',
       'lrigDeck',
+      'deckNames',
     ]),
     query: {
       get() {
@@ -80,6 +85,12 @@ export default {
     },
   },
   methods: {
+    openModal(type) {
+      this.$refs.modals.open(type)
+    },
+    closeModal() {
+      this.$refs.modals.close()
+    },
     delCard(pid) {
       this.$store.commit('delCard', pid)
     },
@@ -94,6 +105,10 @@ export default {
       this.openSidebar()
       this.$store.commit('setShownPid', pid)
     },
+    changeDeck(name) {
+      this.query = ''
+      this.$store.commit('switchDeck', name)
+    },
     openSidebar() {
       this.sidebarVisible = true
     },
@@ -102,11 +117,13 @@ export default {
     },
     scrollToTop() {
       window.scrollTo(0, 0)
-      this.$refs.flexboxContainer.resetRows()
+      if (this.$refs.flexboxContainer) {
+        this.$refs.flexboxContainer.resetRows()
+      }
+    },
+    L(text) {
+      return Localize(text)
     },
-  },
-  mounted() {
-    this.query = ''
   },
   watch: {
     query(str) {
@@ -124,15 +141,17 @@ export default {
   <div>
     <div :class="$style.nav">
       <div :class="$style.flexCenter">
-        <a :class="$style.title"> WEBXOSS </a>
+        <a href="#" :class="$style.title"> WEBXOSS</a>
+      </div>
+      <div :class="$style.flexCenter">
+        <button @click="openModal('add')" :class="[$style.mainColor, $style.button]">
+          {{ L('new_deck') }}
+        </button>
       </div>
       <div :class="$style.decks">
-        <div>WHITE HOPE</div>
-        <div>RED AMBITION</div>
-        <div>BLUE APPLI</div>
-        <div>GREEN WANNA</div>
-        <div>BLACDESIRE</div>
-        <div>BLUE REQUEST</div>
+        <a v-for="name in deckNames" @click="changeDeck(name)">
+          <div>{{ name }}</div>
+        </a>
       </div>
     </div>
     <div>
@@ -147,7 +166,7 @@ export default {
           maxlength="30"
           v-model="query"/>
         <header-icon slot="right" name="blocks"/>
-        <div slot="right" style="width: 15%;"/>
+        <div slot="right" style="width: 10%;"/>
       </app-header>
       <div :class="$style.container" @click="closeSidebar">
         <div v-show="resultVisible" :class="$style.content">
@@ -163,6 +182,17 @@ export default {
           </flexbox-container>
         </div>
         <div v-show="!resultVisible" :class="$style.content">
+          <div :class="$style.flex">
+            <div :class="$style.deckName">{{ deckName }}</div>
+            <div style="margin-left: auto;">
+              <button
+                :class="[$style.grey, $style.button]"
+                @click="openModal('delete')">
+                {{ L('delete')}}
+              </button>
+            </div>
+          </div>
+          <deck-subheader />
           <div :class="$style.boxs">
             <box
               v-for="card in sortedMainDeck"
@@ -171,6 +201,7 @@ export default {
               @click="setAsShownCard"
               @action="delCard"/>
           </div>
+          <deck-subheader :lrig="true" />
           <div :class="$style.boxs">
             <box
               v-for="card in sortedLrigDeck"
@@ -193,6 +224,7 @@ export default {
         <card-info-table :card="shownCard"/>
       </div>
     </transition>
+    <deck-modals ref="modals"/>
   </div>
 </template>
 
@@ -220,6 +252,19 @@ export default {
   font-size: 1.5rem;
   color: var(--main-color);
 }
+.mainColor {
+  color: #fff;
+  background-color: var(--main-color);
+}
+.grey {
+  color: #000;
+  background-color: #eee;
+}
+.button {
+  padding: .2em 2em;
+  text-transform: capitalize;
+  @apply --shadow-4dp;
+}
 .decks {
   color: #757575;
   padding: 1em 1em;
@@ -245,12 +290,20 @@ export default {
 }
 .container {
   margin-left: 15%;
-  margin-right: 15%;
+  margin-right: 10%;
 }
 .content {
   margin-left: 2em;
   background-color: #fafafa;
 }
+.flex {
+  display: flex;
+  align-items: center;
+  padding: .5rem;
+}
+.deckName {
+  font-size: 1.5em;
+}
 .boxs {
   width: 100%;
   display: flex;
@@ -266,7 +319,6 @@ export default {
   background-color: #fafafa;
   overflow-y: auto;
   box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
-  transition: transform 0.3s, right 0.3s;
   padding: .5em;
 }
 .image {
diff --git a/src/store.js b/src/store.js
index 145a9e7..535629e 100644
--- a/src/store.js
+++ b/src/store.js
@@ -170,9 +170,6 @@ const mutations = {
     state.fontSize = +window.getComputedStyle(window.document.body)
         .fontSize.slice(0, -2)
   },
-  setFontSize(state, size) {
-    state.fontSize = size
-  },
   setShownPid(state, pid) {
     if (0 < pid && pid < Object.keys(CardInfo).length) {
       state.shownPid = pid

From 8d225b52ca41d47aa0023191d07778b6e283f721 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Fri, 11 Aug 2017 12:13:17 +0800
Subject: [PATCH 08/12] add deck buttons

---
 src/components/AppHeader/HeaderMenu.vue | 15 +++-
 src/components/Box.vue                  |  1 +
 src/components/DeckHead.vue             |  3 +-
 src/components/DeckSubheader.vue        |  1 -
 src/components/Modal.vue                | 12 ++++
 src/pages/Deck.vue                      |  2 +-
 src/pages/DeckEditor.vue                | 93 +++++++++++++++++++++----
 7 files changed, 109 insertions(+), 18 deletions(-)

diff --git a/src/components/AppHeader/HeaderMenu.vue b/src/components/AppHeader/HeaderMenu.vue
index a935f40..40864ef 100644
--- a/src/components/AppHeader/HeaderMenu.vue
+++ b/src/components/AppHeader/HeaderMenu.vue
@@ -9,6 +9,9 @@ export default {
       type: Array,
       required: true,
     },
+    decktopView: {
+      required: false,
+    },
   },
   computed: {
     opened() {
@@ -42,7 +45,7 @@ export default {
 <template>
   <div :class="[$style.wrapper, opened ? $style.opened : '']" @click.self="close">
     <transition name="pop">
-      <ul :class="$style.menu" v-show="opened">
+      <ul :class="[$style.menu, decktopView ? $style.decktopPostion : $style.postion]" v-show="opened">
         <li
           :class="$style.item"
           v-for="item in items"
@@ -69,8 +72,6 @@ export default {
 }
 .menu {
   position: fixed;
-  top: var(--padding);
-  right: var(--padding);
   z-index: var(--z-header-menu);
 
   background-color: #fff;
@@ -79,6 +80,14 @@ export default {
   will-change: transform;
   transform-origin: right top;
 }
+.postion {
+  top: var(--padding);
+  right: var(--padding);
+}
+.decktopPostion {
+  top: calc(4rem - var(--padding));
+  right: calc(10% + 2 * var(--padding));
+}
 .item {
   padding: var(--padding);
   padding-right: calc(2 * var(--padding));
diff --git a/src/components/Box.vue b/src/components/Box.vue
index 073cb77..bbe8e56 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -75,6 +75,7 @@ export default {
   width: 100%;
   cursor: pointer;
   @apply --shadow-2dp;
+  transition: .3s;
 }
 .box:hover {
   @apply --shadow-6dp;
diff --git a/src/components/DeckHead.vue b/src/components/DeckHead.vue
index 1d63e11..fede497 100644
--- a/src/components/DeckHead.vue
+++ b/src/components/DeckHead.vue
@@ -54,6 +54,7 @@ export default {
   }
 }
 .subheader {
-  width: 100%
+  width: 100%;
+  font-size: 1.3em;
 }
 </style>
diff --git a/src/components/DeckSubheader.vue b/src/components/DeckSubheader.vue
index 3d866c2..c0c095b 100644
--- a/src/components/DeckSubheader.vue
+++ b/src/components/DeckSubheader.vue
@@ -76,7 +76,6 @@ export default {
 <style module>
 .subheader {
   display: flex;
-  font-size: 1em;
   color: #666;
   padding: 0 .5rem;
 }
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index a876102..aba61e7 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -25,6 +25,9 @@ export default {
     cancelText() {
       return this.config.cancelText || L('cancel')
     },
+    opened() {
+      return this.$route.query.modal
+    },
   },
   methods: {
     setInputValue(value) {
@@ -44,6 +47,11 @@ export default {
       this.$emit('ok', this.input)
     },
   },
+  watch: {
+    opened(opened) {
+      document.body.style.overflow = opened ? 'hidden' : 'auto'
+    },
+  },
 }
 </script>
 
@@ -52,6 +60,7 @@ export default {
     ref="wrapper"
     :class="$style.wrapper"
     tabindex="0"
+    @click.self="cancel"
     @keyup.esc="cancel">
     <form :class="$style.dialog" @submit.prevent="ok">
       <h3 :class="$style.title" v-if="config.title">{{ config.title }}</h3>
@@ -103,6 +112,9 @@ export default {
   background-color: #fff;
   border-radius: 2px;
   @apply --shadow-24dp;
+  @media (min-width: 1281px) {
+    width: 30%;
+  }
 }
 .title,
 .content,
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index 690ec75..d3e6db3 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -183,8 +183,8 @@ export default {
       <header-icon slot="right" name="more" @click.native="openMenu"/>
     </app-header>
     <deck-head
+      v-show="!previewing"
       :scrolledToLrig="scrolledToLrig"
-      :show="!previewing"
       :shadow="!scrolledToTop">
     </deck-head>
 
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index e6d81ff..495aae1 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapGetters } from 'vuex'
-import { AppHeader, HeaderIcon } from 'components/AppHeader'
+import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import FlexboxContainer from 'components/FlexboxContainer'
 import CardInfoTable from 'components/CardInfoTable'
@@ -16,6 +16,7 @@ export default {
   components: {
     AppHeader,
     HeaderIcon,
+    HeaderMenu,
     DeckModals,
     FlexboxContainer,
     DeckSubheader,
@@ -33,7 +34,6 @@ export default {
   }),
   computed: {
     ...mapState([
-      'deckName',
       'shownPid',
     ]),
     ...mapGetters([
@@ -42,6 +42,31 @@ export default {
       'lrigDeck',
       'deckNames',
     ]),
+    menuItems() {
+      return [
+        {
+          title: Localize('clone'),
+          icon: 'copy',
+          action: () => {
+            this.openModal('clone')
+          },
+        },
+        {
+          title: Localize('import'),
+          icon: 'download',
+          action: () => {
+            alert('Not yet implemented.')
+          },
+        },
+        {
+          title: Localize('export'),
+          icon: 'upload',
+          action: () => {
+            alert('Not yet implemented.')
+          },
+        },
+      ]
+    },
     query: {
       get() {
         return this.queryString
@@ -65,6 +90,19 @@ export default {
         }, 500)
       },
     },
+    deckName: {
+      get() {
+        return this.$store.state.deckName
+      },
+      set(name) {
+        if (name && !this.deckNames.includes(name)) {
+          this.$store.commit('renameDeck', {
+            origin: this.deckName,
+            name,
+          })
+        }
+      },
+    },
     sortedMainDeck() {
       return defaultSort(this.mainDeck)
     },
@@ -85,6 +123,12 @@ export default {
     },
   },
   methods: {
+    openMenu() {
+      this.$refs.menu.open()
+    },
+    closeMenu() {
+      this.$refs.menu.close()
+    },
     openModal(type) {
       this.$refs.modals.open(type)
     },
@@ -148,9 +192,9 @@ export default {
           {{ L('new_deck') }}
         </button>
       </div>
-      <div :class="$style.decks">
+      <div :class="$style.navList">
         <a v-for="name in deckNames" @click="changeDeck(name)">
-          <div>{{ name }}</div>
+          <div :class="[$style.navItem, name === deckName ? $style.navItemSelected : '']">{{ name }}</div>
         </a>
       </div>
     </div>
@@ -165,7 +209,8 @@ export default {
           autocapitalize="none"
           maxlength="30"
           v-model="query"/>
-        <header-icon slot="right" name="blocks"/>
+        <header-icon slot="right" :style="{ width: 'initial' }" name="blocks"/>
+        <header-icon slot="right" name="more" @click.native="openMenu"/>
         <div slot="right" style="width: 10%;"/>
       </app-header>
       <div :class="$style.container" @click="closeSidebar">
@@ -183,7 +228,13 @@ export default {
         </div>
         <div v-show="!resultVisible" :class="$style.content">
           <div :class="$style.flex">
-            <div :class="$style.deckName">{{ deckName }}</div>
+            <input
+              v-model.lazy.trim="deckName"
+              spellcheck="false"
+              autocomplete="off"
+              autocapitalize="none"
+              maxlength="20"
+              :class="$style.deckNameInput" />
             <div style="margin-left: auto;">
               <button
                 :class="[$style.grey, $style.button]"
@@ -224,6 +275,7 @@ export default {
         <card-info-table :card="shownCard"/>
       </div>
     </transition>
+    <header-menu ref="menu" :items="menuItems" :decktopView="true"/>
     <deck-modals ref="modals"/>
   </div>
 </template>
@@ -264,13 +316,24 @@ export default {
   padding: .2em 2em;
   text-transform: capitalize;
   @apply --shadow-4dp;
+  transition: .3s;
+}
+.button:hover {
+  @apply --shadow-8dp;
 }
-.decks {
+.navList {
   color: #757575;
-  padding: 1em 1em;
-  &>div {
-    padding: .3em 0;
-  }
+  padding: 1em 0;
+}
+.navItem {
+  padding: .4em 1em;
+}
+.navItem:hover {
+  background-color: rgba(0,0,0,.03);
+}
+.navItemSelected {
+  background-color: rgba(0,0,0,.05);
+  color: #212121;
 }
 .searchBar {
   flex: 1;
@@ -301,13 +364,19 @@ export default {
   align-items: center;
   padding: .5rem;
 }
-.deckName {
+.deckNameInput {
   font-size: 1.5em;
+  cursor: text;
+  display: block;
+}
+.deckNameInput:hover {
+  background-color: rgba(77,144,254,0.15);
 }
 .boxs {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
+  padding: .5em 0;
 }
 .sidebar {
   position: fixed;

From 5992b4d53558678cd1124a1df38813abae2fb2e1 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Wed, 16 Aug 2017 12:30:42 +0800
Subject: [PATCH 09/12] add ActionButtonBar component

---
 src/components/ActionButtonBar.vue      |  87 ++++++++++++++++++++
 src/components/AppHeader/HeaderMenu.vue |   2 +-
 src/components/Box.vue                  | 102 ++++++++++++++++--------
 src/css/vars.css                        |  14 ++--
 src/js/Icon.js                          |   2 +
 src/media/check.svg                     |   1 +
 src/media/information.svg               |   1 +
 src/pages/DeckEditor.vue                |  98 ++++++++++-------------
 src/store.js                            |  22 ++++-
 9 files changed, 229 insertions(+), 100 deletions(-)
 create mode 100644 src/components/ActionButtonBar.vue
 create mode 100644 src/media/check.svg
 create mode 100644 src/media/information.svg

diff --git a/src/components/ActionButtonBar.vue b/src/components/ActionButtonBar.vue
new file mode 100644
index 0000000..4d7cadf
--- /dev/null
+++ b/src/components/ActionButtonBar.vue
@@ -0,0 +1,87 @@
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  props: {
+    searching: {
+      require: true,
+    },
+  },
+  computed: {
+    ...mapState([
+      'selectedPids',
+      'deckName',
+    ]),
+    count() {
+      return this.selectedPids.length
+    },
+  },
+  methods: {
+    add() {
+      for (let pid of this.selectedPids)  {
+        // TODO: use dispatch and toast message
+        this.$store.commit('addCard', pid)
+      }
+    },
+    remove() {
+      for (let pid of this.selectedPids) {
+        this.$store.commit('delCard', pid)
+      }
+      this.$store.commit('clearSelectedPids')
+    },
+    cancel() {
+      this.$store.commit('clearSelectedPids')
+    },
+  },
+}
+</script>
+
+<template>
+  <div :class="$style.wrapper">
+    <div :class="$style.count"> {{ count }} selected </div>
+    <div v-show="searching" :class="$style.deck">
+      <span>add to</span>
+      <span>{{ deckName }}</span>
+    </div>
+    <template v-if="!searching">
+      <a :class="$style.cancel" @click="cancel">cancel</a>
+      <a :class="$style.action" @click="remove">remove</a>
+    </template>
+    <template v-if="searching">
+      <a :class="$style.cancel" @click="cancel">ok</a>
+      <a :class="$style.action" @click="add">add</a>
+    </template>
+  </div>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  height: var(--header-height);
+  line-height: var(--header-height);
+  width: 100%;
+  background-color: var(--main-color);
+  z-index: var(--z-action-button-bar);
+  color: #fff;
+  font-size: 1.2em;
+}
+.count {
+  width: 15%;
+  padding-left: 2rem;
+}
+.deck {
+  padding-left: .5rem;
+}
+.cancel {
+  margin-left: auto;
+  padding-right: 2rem;
+}
+.action {
+  padding-right: 2rem;
+}
+</style>
diff --git a/src/components/AppHeader/HeaderMenu.vue b/src/components/AppHeader/HeaderMenu.vue
index 40864ef..34fdc8a 100644
--- a/src/components/AppHeader/HeaderMenu.vue
+++ b/src/components/AppHeader/HeaderMenu.vue
@@ -85,7 +85,7 @@ export default {
   right: var(--padding);
 }
 .decktopPostion {
-  top: calc(4rem - var(--padding));
+  top: calc(var(--header-height) - var(--padding));
   right: calc(10% + 2 * var(--padding));
 }
 .item {
diff --git a/src/components/Box.vue b/src/components/Box.vue
index bbe8e56..81f43ee 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -9,8 +9,7 @@ export default {
       type: Object,
       require: true,
     },
-    icon: {
-      type: String,
+    selection: {
       require: true,
     },
   },
@@ -19,25 +18,36 @@ export default {
     Icon,
   },
   data: () => ({
-    actionVisible: false,
+    selected: false,
   }),
   computed:{
     name() {
       return Localize.cardName(this.card)
     },
+    pid() {
+      return this.card.pid
+    },
   },
   methods: {
     click() {
-      this.$emit('click', this.card.pid)
-    },
-    buttonClick() {
-      this.$emit('action', this.card.pid)
+      if (this.selected) {
+        this.selected = false
+        // this.$store.commit('clearShownPid')
+        this.$store.commit('delSelectedPid', this.pid)
+      } else {
+        this.selected = true
+        this.$store.commit('addSelectedPid', this.pid)
+      }
     },
-    showAction() {
-      this.actionVisible = true
+    actionClick() {
+      this.$store.commit('setShownPid', this.pid)
     },
-    hideAction() {
-      this.actionVisible = false
+  },
+  watch: {
+    selection(selection) {
+      if (selection === false) {
+        this.selected = false
+      }
     },
   },
 }
@@ -48,15 +58,17 @@ export default {
   <div :class="$style.wrapper">
     <div
       :class="$style.box"
-      @click.stop="click"
-      @mouseover="showAction"
-      @mouseout="hideAction">
+      @click.stop="click">
       <thumbnail :class="$style.image" :pid="card.pid" />
-      <div :class="$style.dimmer">
-        <div :class="$style.title">{{ name }}</div>
-        <a v-show="actionVisible" :class="$style.action" @click.stop="buttonClick">
-          <icon v-if="icon==='remove'" name="add" style="transform: rotate(45deg);"/>
-          <icon v-else :name="icon"/>
+      <div v-show="selected" :class="$style.relative">
+        <div :class="$style.dimmer">
+          <icon :class="$style.circle" name="check" />
+        </div>
+      </div>
+      <div :class="$style.content">
+        <div :class="$style.title" :title="name">{{ name }}</div>
+        <a :class="$style.action" @click.stop="actionClick">
+          <icon name="information" />
         </a>
       </div>
     </div>
@@ -66,8 +78,8 @@ export default {
 <style module>
 @import 'css/vars.css';
 .wrapper {
-  height: 9rem;
-  width: 9rem;
+  height: 10.1rem;
+  width: 8rem;
   padding: .5rem;
 }
 .box {
@@ -81,34 +93,56 @@ export default {
   @apply --shadow-6dp;
 }
 .image {
-  width: 100%;
-  height: 100%;
+  width: 8rem;
+  height: 8rem;
 }
 .dimmer {
   position: relative;
-  top: -2.2rem;
-  display: flex;
+  top: -8rem;
+  left: 0;
+  height: 8rem;
+  width: 8rem;
   background-color: color(#000 a(.65))
 }
+.relative {
+  position: relative;
+  height: 0;
+}
+.circle {
+  position: absolute;
+  top: .5em;
+  right: .5em;
+  z-index: var(--z-box-counter);
+  font-size: 1.5em;
+  padding: .2em;
+  background-color: color(#fff a(.9));
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #000;
+}
+.content {
+  display: flex;
+  height: 2.1em;
+  background-color: #333;
+}
 .title {
   flex: 1;
-  font-size: .8rem;
-  line-height: 1rem;
-  padding: .1rem .2rem;
-  height: 2rem;
+  font-size: .7rem;
+  padding: 1em 0 1em 1em;
   overflow: hidden;
+  width: auto;
   text-overflow: ellipsis;
+  white-space: nowrap;
   color: #fff;
 }
 .action {
   display: flex;
   justify-content: center;
   align-items: center;
-  width: 2rem;
-  height: 2rem;
-  line-height: 2rem;
-  padding: .1rem .2rem;
-  font-size: 2rem;
+  width: 2.1rem;
+  height: 2.1rem;
   color: #fff;
 }
 </style>
diff --git a/src/css/vars.css b/src/css/vars.css
index c65e524..bb79561 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -1,15 +1,17 @@
 :root {
   --main-color: #2196f3;
   --header-height: 4rem;
-  --padding: .8rem;
+  --padding: .8em;
   --cell-border-color: #d6d6d6;
 
   /* z-indexes */
-  --z-sidebar: 1;
-  --z-header: 2;
-  --z-header-menu: 3;
-  --z-nav: 4;
-  --z-modal: 5;
+  --z-box-counter: 1;
+  --z-sidebar: 8;
+  --z-header: 16;
+  --z-header-menu: 32;
+  --z-nav: 64;
+  --z-action-button-bar: 96;
+  --z-modal: 128;
 
   /* shadows */
   --shadow-2dp: {
diff --git a/src/js/Icon.js b/src/js/Icon.js
index a0d1782..c50c862 100644
--- a/src/js/Icon.js
+++ b/src/js/Icon.js
@@ -14,3 +14,5 @@ export const burst = require('media/burst.svg')
 export const hexagon = require('media/hexagon.svg')
 export const list = require('media/list.svg')
 export const blocks = require('media/blocks.svg')
+export const information = require('media/information.svg')
+export const check = require('media/check.svg')
diff --git a/src/media/check.svg b/src/media/check.svg
new file mode 100644
index 0000000..68e30c1
--- /dev/null
+++ b/src/media/check.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z" /></svg>
\ No newline at end of file
diff --git a/src/media/information.svg b/src/media/information.svg
new file mode 100644
index 0000000..f411fc0
--- /dev/null
+++ b/src/media/information.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" /></svg>
\ No newline at end of file
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 495aae1..34ac434 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -2,6 +2,7 @@
 import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
+import ActionButtonBar from 'components/ActionButtonBar'
 import FlexboxContainer from 'components/FlexboxContainer'
 import CardInfoTable from 'components/CardInfoTable'
 import DeckSubheader from 'components/DeckSubheader'
@@ -18,6 +19,7 @@ export default {
     HeaderIcon,
     HeaderMenu,
     DeckModals,
+    ActionButtonBar,
     FlexboxContainer,
     DeckSubheader,
     CardInfoTable,
@@ -29,12 +31,11 @@ export default {
     queryString: '',
     timer: -1,
     blocking: false,
-    sidebarVisible: false,
-    resultVisible: false,
   }),
   computed: {
     ...mapState([
       'shownPid',
+      'selectedPids',
     ]),
     ...mapGetters([
       'deckPids',
@@ -90,6 +91,15 @@ export default {
         }, 500)
       },
     },
+    resultVisible() {
+      return !!this.query
+    },
+    sidebarVisible() {
+      return !!this.shownPid
+    },
+    actionButtonBarVisable() {
+      return !!this.selectedPids.length
+    },
     deckName: {
       get() {
         return this.$store.state.deckName
@@ -112,8 +122,15 @@ export default {
     matchedCards() {
       return Searcher.search(this.query)
     },
+    shownCardPid() {
+      if (0 < this.shownPid && this.shownPid < Object.keys(CardInfo).length) {
+        return this.shownPid
+      } else {
+        return 23
+      }
+    },
     shownCard() {
-      return CardInfo[this.shownPid]
+      return CardInfo[this.shownCardPid]
     },
     shownCardName() {
       return Localize.cardName(this.shownCard)
@@ -135,30 +152,15 @@ export default {
     closeModal() {
       this.$refs.modals.close()
     },
-    delCard(pid) {
-      this.$store.commit('delCard', pid)
-    },
-    addCard(pid) {
-      this.$store.dispatch('addCard', pid).then((successed) => {
-        if (!successed) {
-          console.log('already full') // show toast here
-        }
-      })
-    },
-    setAsShownCard(pid) {
-      this.openSidebar()
-      this.$store.commit('setShownPid', pid)
+    closeBar() {
+      this.$store.commit('clearSelectedPids')
+      this.$store.commit('clearShownPid')
     },
     changeDeck(name) {
       this.query = ''
+      this.closeBar()
       this.$store.commit('switchDeck', name)
     },
-    openSidebar() {
-      this.sidebarVisible = true
-    },
-    closeSidebar() {
-      this.sidebarVisible = false
-    },
     scrollToTop() {
       window.scrollTo(0, 0)
       if (this.$refs.flexboxContainer) {
@@ -169,15 +171,6 @@ export default {
       return Localize(text)
     },
   },
-  watch: {
-    query(str) {
-      if (str) {
-        this.resultVisible = true
-      } else {
-        this.resultVisible = false
-      }
-    },
-  },
 }
 </script>
 
@@ -185,7 +178,7 @@ export default {
   <div>
     <div :class="$style.nav">
       <div :class="$style.flexCenter">
-        <a href="#" :class="$style.title"> WEBXOSS</a>
+        <a href="#" :class="$style.title"> WEBXOSS </a>
       </div>
       <div :class="$style.flexCenter">
         <button @click="openModal('add')" :class="[$style.mainColor, $style.button]">
@@ -199,7 +192,7 @@ export default {
       </div>
     </div>
     <div>
-      <app-header>
+      <app-header :class="$style.appHeader">
         <div slot="left" style="width: 15%;" />
         <input
           :class="$style.searchBar"
@@ -211,18 +204,13 @@ export default {
           v-model="query"/>
         <header-icon slot="right" :style="{ width: 'initial' }" name="blocks"/>
         <header-icon slot="right" name="more" @click.native="openMenu"/>
-        <div slot="right" style="width: 10%;"/>
+        <div slot="right" style="width: 15%;"/>
       </app-header>
-      <div :class="$style.container" @click="closeSidebar">
+      <div :class="$style.container" @click="closeBar">
         <div v-show="resultVisible" :class="$style.content">
           <flexbox-container ref="flexboxContainer" :cards="matchedCards">
             <template scope="props">
-              <box
-                :card="props.card"
-                :class="$style.card"
-                icon="add"
-                @click="setAsShownCard"
-                @action="addCard" />
+              <box :card="props.card" :selection="actionButtonBarVisable"/>
             </template>
           </flexbox-container>
         </div>
@@ -245,28 +233,18 @@ export default {
           </div>
           <deck-subheader />
           <div :class="$style.boxs">
-            <box
-              v-for="card in sortedMainDeck"
-              :card="card"
-              icon="remove"
-              @click="setAsShownCard"
-              @action="delCard"/>
+            <box v-for="card in sortedMainDeck" :card="card" :selection="actionButtonBarVisable"/>
           </div>
           <deck-subheader :lrig="true" />
           <div :class="$style.boxs">
-            <box
-              v-for="card in sortedLrigDeck"
-              :card="card"
-              icon="remove"
-              @click="setAsShownCard"
-              @action="delCard"/>
+            <box v-for="card in sortedLrigDeck" :card="card" :selection="actionButtonBarVisable"/>
           </div>
         </div>
       </div>
     </div>
     <transition name="slide">
       <div v-show="sidebarVisible" :class="$style.sidebar">
-        <card-image :class="$style.image" :pid="shownPid"/>
+        <card-image :class="$style.image" :pid="shownCardPid"/>
         <div style="display: flex;">
           <span>{{ shownCard.wxid }}</span>
           <span style="margin-left: auto;">{{ shownCardLimiting }}</span>
@@ -275,7 +253,8 @@ export default {
         <card-info-table :card="shownCard"/>
       </div>
     </transition>
-    <header-menu ref="menu" :items="menuItems" :decktopView="true"/>
+    <action-button-bar v-show="actionButtonBarVisable" :searching="resultVisible" />
+    <header-menu ref="menu" :items="menuItems" :decktopView="true" />
     <deck-modals ref="modals"/>
   </div>
 </template>
@@ -297,7 +276,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 3rem;
+  height: 4rem;
   border-bottom: 1px solid var(--cell-border-color);
 }
 .title {
@@ -335,6 +314,9 @@ export default {
   background-color: rgba(0,0,0,.05);
   color: #212121;
 }
+.appHeader {
+  font-size: .75em;
+}
 .searchBar {
   flex: 1;
   color: #fff;
@@ -353,7 +335,7 @@ export default {
 }
 .container {
   margin-left: 15%;
-  margin-right: 10%;
+  margin-right: 15%;
 }
 .content {
   margin-left: 2em;
@@ -384,7 +366,7 @@ export default {
   top: 4rem;
   right: 0;
   width: 20%;
-  height: calc(100% - 4rem);
+  height: calc(100% - var(--header-height));
   background-color: #fafafa;
   overflow-y: auto;
   box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
diff --git a/src/store.js b/src/store.js
index 535629e..1cf966d 100644
--- a/src/store.js
+++ b/src/store.js
@@ -27,12 +27,15 @@ const state = {
   deckFiles: [],
   remainingPids: [],
 
+  selectedPids: [],
   // current selected deck name
   deckName: '',
-  shownPid: 1,
+  shownPid: 0,
+
   localization: {
     lang: 'en',
   },
+
   windowWidth: 0,
   fontSize: 14,
 }
@@ -175,6 +178,23 @@ const mutations = {
       state.shownPid = pid
     }
   },
+  clearShownPid(state) {
+    state.shownPid = 0
+  },
+  addSelectedPid(state, pid) {
+    if (0 < pid && pid < Object.keys(CardInfo).length) {
+      state.selectedPids.push(pid)
+    }
+  },
+  delSelectedPid(state, pid) {
+    let idx = state.selectedPids.indexOf(pid)
+    if (idx !== -1) {
+      state.selectedPids.splice(idx, 1)
+    }
+  },
+  clearSelectedPids(state) {
+    state.selectedPids.splice(0)
+  },
 }
 
 const actions = {

From b74e436ad8aeec9e4c973872482778f91affc986 Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Wed, 16 Aug 2017 20:04:10 +0800
Subject: [PATCH 10/12] abstract out Sidebar and Tips component

---
 src/components/ActionButtonBar.vue      |  75 +++++++---
 src/components/AppHeader/HeaderMenu.vue |   2 +-
 src/components/Block.vue                |   1 +
 src/components/Box.vue                  |  11 +-
 src/components/DeckHead.vue             | 118 ++++++++++------
 src/components/DeckSubheader.vue        | 118 ++++++----------
 src/components/Sidebar.vue              |  91 +++++++++++++
 src/components/Tips.vue                 |  59 ++++++++
 src/js/Icon.js                          |   1 +
 src/lang/zh_Hans.hjson                  |   2 +-
 src/media/bulb.svg                      |   1 +
 src/pages/Deck.vue                      |  14 +-
 src/pages/DeckEditor.vue                | 174 +++++++++++-------------
 src/pages/Search.vue                    |  42 +-----
 14 files changed, 427 insertions(+), 282 deletions(-)
 create mode 100644 src/components/Sidebar.vue
 create mode 100644 src/components/Tips.vue
 create mode 100644 src/media/bulb.svg

diff --git a/src/components/ActionButtonBar.vue b/src/components/ActionButtonBar.vue
index 4d7cadf..7db1996 100644
--- a/src/components/ActionButtonBar.vue
+++ b/src/components/ActionButtonBar.vue
@@ -1,7 +1,12 @@
 <script>
 import { mapState } from 'vuex'
+import Icon from 'components/Icon'
+import Localize from 'js/Localize'
 
 export default {
+  components: {
+    Icon,
+  },
   props: {
     searching: {
       require: true,
@@ -15,6 +20,9 @@ export default {
     count() {
       return this.selectedPids.length
     },
+    visable() {
+      return !!this.selectedPids.length
+    },
   },
   methods: {
     add() {
@@ -32,26 +40,31 @@ export default {
     cancel() {
       this.$store.commit('clearSelectedPids')
     },
+    L(text) {
+      return Localize(text)
+    },
   },
 }
 </script>
 
 <template>
-  <div :class="$style.wrapper">
-    <div :class="$style.count"> {{ count }} selected </div>
-    <div v-show="searching" :class="$style.deck">
-      <span>add to</span>
-      <span>{{ deckName }}</span>
+  <transition name="slide">
+    <div v-show="visable" :class="$style.wrapper">
+      <div :class="$style.count"> {{ count }} selected </div>
+      <div v-show="searching" :class="$style.deck">
+        <span>add to deck</span>
+        <span :class="$style.name">{{ deckName }}</span>
+      </div>
+      <template v-if="!searching">
+        <a :class="$style.cancel" @click="cancel">{{ L('cancel') }}</a>
+        <a :class="$style.action" @click="remove">{{ L('delete') }}</a>
+      </template>
+      <template v-if="searching">
+        <a :class="$style.cancel" @click="cancel">{{ L('ok') }}</a>
+        <a :class="$style.action" @click="add">{{ L('add') }}</a>
+      </template>
     </div>
-    <template v-if="!searching">
-      <a :class="$style.cancel" @click="cancel">cancel</a>
-      <a :class="$style.action" @click="remove">remove</a>
-    </template>
-    <template v-if="searching">
-      <a :class="$style.cancel" @click="cancel">ok</a>
-      <a :class="$style.action" @click="add">add</a>
-    </template>
-  </div>
+  </transition>
 </template>
 
 <style module>
@@ -60,15 +73,16 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
+  height: var(--header-height);
+  width: 100%;
   display: flex;
   align-items: center;
-  height: var(--header-height);
   line-height: var(--header-height);
-  width: 100%;
   background-color: var(--main-color);
   z-index: var(--z-action-button-bar);
-  color: #fff;
   font-size: 1.2em;
+  color: #fff;
+  text-transform: capitalize;
 }
 .count {
   width: 15%;
@@ -77,11 +91,34 @@ export default {
 .deck {
   padding-left: .5rem;
 }
+.name {
+  padding-left: 2rem;
+}
 .cancel {
   margin-left: auto;
-  padding-right: 2rem;
 }
+.cancel,
 .action {
-  padding-right: 2rem;
+  cursor: pointer;
+  padding: 0 1rem;
+}
+.cancel:hover,
+.action:hover {
+  background-color: rgba(0,0,0,.27);
+}
+.wrapper:global(.slide-enter-active) {
+  animation: slide-in .5s;
+}
+.wrapper:global(.slide-leave-active) {
+  animation: slide-in .5s reverse;
+}
+@keyframes slide-in {
+  from {
+    transform: translate3d(0, -100%, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
 }
 </style>
diff --git a/src/components/AppHeader/HeaderMenu.vue b/src/components/AppHeader/HeaderMenu.vue
index 34fdc8a..b74a5f0 100644
--- a/src/components/AppHeader/HeaderMenu.vue
+++ b/src/components/AppHeader/HeaderMenu.vue
@@ -86,7 +86,7 @@ export default {
 }
 .decktopPostion {
   top: calc(var(--header-height) - var(--padding));
-  right: calc(10% + 2 * var(--padding));
+  right: calc(15% + 2 * var(--padding));
 }
 .item {
   padding: var(--padding);
diff --git a/src/components/Block.vue b/src/components/Block.vue
index 5372cd0..b669293 100644
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@@ -61,6 +61,7 @@ export default {
   right: .2em;
   bottom: .2em;
   padding: 0 .2em;
+  font-size: 1.2em;
   color: #fff;
   background-color: color(#000 a(.6));
 }
diff --git a/src/components/Box.vue b/src/components/Box.vue
index 81f43ee..48826ec 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'vuex'
 import Thumbnail from 'components/Thumbnail'
 import Icon from 'components/Icon'
 import Localize from 'js/Localize'
@@ -9,9 +10,6 @@ export default {
       type: Object,
       require: true,
     },
-    selection: {
-      require: true,
-    },
   },
   components: {
     Thumbnail,
@@ -21,6 +19,12 @@ export default {
     selected: false,
   }),
   computed:{
+    ...mapState([
+      'selectedPids',
+    ]),
+    selection() {
+      return !!this.selectedPids.length
+    },
     name() {
       return Localize.cardName(this.card)
     },
@@ -51,7 +55,6 @@ export default {
     },
   },
 }
-
 </script>
 
 <template>
diff --git a/src/components/DeckHead.vue b/src/components/DeckHead.vue
index fede497..c0c095b 100644
--- a/src/components/DeckHead.vue
+++ b/src/components/DeckHead.vue
@@ -1,60 +1,94 @@
 <script>
-import DeckSubheader from 'components/DeckSubheader'
+import { mapGetters } from 'vuex'
+import Localize from 'js/Localize'
+import checkMayusRoom from 'js/MayusRoom'
 
 export default {
-  components: {
-    DeckSubheader,
-  },
   props: {
-    scrolledToLrig: {
-      require: true,
+    lrig: {
+      require: false,
+    },
+  },
+  computed: {
+    ...mapGetters([
+      'deck',
+      'mainDeck',
+      'lrigDeck',
+    ]),
+    burstCount() {
+      return this.deck
+        .map(card => CardInfo[card.cid]) // TODO: utils
+        .filter(card => card.burstEffectTexts)
+        .length
+    },
+    burstClass() {
+      return this.burstCount === 20 ? '' : this.$style.warn
+    },
+    mainCount() {
+      return this.mainDeck.length
+    },
+    mainClass() {
+      return this.mainCount === 40 ? '' : this.$style.warn
+    },
+    lrigCount() {
+      return this.lrigDeck.length
     },
-    shadow: {
-      require: true,
+    lrigClass() {
+      return this.lrigCount <= 10 ? '' : this.$style.warn
+    },
+    deckBanned() {
+      return checkMayusRoom(this.deck)
+    },
+  },
+  methods: {
+    L(text) {
+      return Localize(text)
     },
   },
 }
-</script>
 
+</script>
 <template>
-  <div :class="$style.wrapper">
-    <div :class="[$style.head, shadow ? $style.shadow : '']">
-      <deck-subheader :class="$style.subheader" :lrig="scrolledToLrig" />
-    </div>
+  <div :class="$style.subheader">
+    <template v-if="!lrig">
+      <span :class="$style.name">{{ L('main_deck') }}</span>
+      <span :class="mainClass">{{ mainCount }}</span>/40
+
+      <span :class="$style.right">
+        <span v-show="!lrig && deckBanned" :class="[$style.mayu, $style.warn]">
+            {{ L('mayu_room') }}
+        </span>
+
+        <span>
+          {{ L('life_burst_short') }}:
+        </span>
+        <span :class="burstClass">{{ burstCount }}</span>/20
+      </span>
+    </template>
+
+    <template v-if="lrig">
+      <span :class="$style.name">{{ L('lrig_deck') }}</span>
+      <span :class="lrigClass">{{ lrigCount }}</span>/10
+    </template>
+
   </div>
 </template>
-
 <style module>
-@import 'css/vars.css';
-:root {
-  --height: calc(0.8 * var(--header-height));
+.subheader {
+  display: flex;
+  color: #666;
+  padding: 0 .5rem;
 }
-.wrapper {
-  height: var(--height)
+.name {
+  padding-right: .5em;
 }
-.head {
-  position: fixed;
-  top: var(--header-height);
-  left: 0;
-  right: 0;
-  z-index: var(--z-header);
-
-  display: flex;
-  align-items: center;
-
-  padding: 0 var(--padding);
-  height: var(--height);
-
-  background-color: #fff;
-  border-bottom: 1px solid var(--cell-border-color);
-
-  &.shadow {
-    @apply --shadow-2dp;
-    border-bottom: transparent;
-  }
+.mayu {
+  padding-right: 1em;
 }
-.subheader {
-  width: 100%;
-  font-size: 1.3em;
+.right {
+  margin-left: auto;
+}
+.warn {
+  color: #ff5722;
 }
 </style>
diff --git a/src/components/DeckSubheader.vue b/src/components/DeckSubheader.vue
index c0c095b..a4d4d5f 100644
--- a/src/components/DeckSubheader.vue
+++ b/src/components/DeckSubheader.vue
@@ -1,94 +1,60 @@
 <script>
-import { mapGetters } from 'vuex'
-import Localize from 'js/Localize'
-import checkMayusRoom from 'js/MayusRoom'
+import DeckHead from 'components/DeckHead'
 
 export default {
-  props: {
-    lrig: {
-      require: false,
-    },
+  components: {
+    DeckHead,
   },
-  computed: {
-    ...mapGetters([
-      'deck',
-      'mainDeck',
-      'lrigDeck',
-    ]),
-    burstCount() {
-      return this.deck
-        .map(card => CardInfo[card.cid]) // TODO: utils
-        .filter(card => card.burstEffectTexts)
-        .length
-    },
-    burstClass() {
-      return this.burstCount === 20 ? '' : this.$style.warn
-    },
-    mainCount() {
-      return this.mainDeck.length
-    },
-    mainClass() {
-      return this.mainCount === 40 ? '' : this.$style.warn
-    },
-    lrigCount() {
-      return this.lrigDeck.length
-    },
-    lrigClass() {
-      return this.lrigCount <= 10 ? '' : this.$style.warn
-    },
-    deckBanned() {
-      return checkMayusRoom(this.deck)
+  props: {
+    scrolledToLrig: {
+      require: true,
     },
-  },
-  methods: {
-    L(text) {
-      return Localize(text)
+    shadow: {
+      require: true,
     },
   },
 }
-
 </script>
-<template>
-  <div :class="$style.subheader">
-    <template v-if="!lrig">
-      <span :class="$style.name">{{ L('main_deck') }}</span>
-      <span :class="mainClass">{{ mainCount }}</span>/40
-
-      <span :class="$style.right">
-        <span v-show="!lrig && deckBanned" :class="[$style.mayu, $style.warn]">
-            {{ L('mayu_room') }}
-        </span>
-
-        <span>
-          {{ L('life_burst_short') }}:
-        </span>
-        <span :class="burstClass">{{ burstCount }}</span>/20
-      </span>
-    </template>
-
-    <template v-if="lrig">
-      <span :class="$style.name">{{ L('lrig_deck') }}</span>
-      <span :class="lrigClass">{{ lrigCount }}</span>/10
-    </template>
 
+<template>
+  <div :class="$style.wrapper">
+    <div :class="[$style.head, shadow ? $style.shadow : '']">
+      <deck-head :class="$style.subheader" :lrig="scrolledToLrig" />
+    </div>
   </div>
 </template>
+
 <style module>
-.subheader {
-  display: flex;
-  color: #666;
-  padding: 0 .5rem;
-}
-.name {
-  padding-right: .5em;
+@import 'css/vars.css';
+:root {
+  --height: calc(0.8 * var(--header-height));
 }
-.mayu {
-  padding-right: 1em;
+.wrapper {
+  height: var(--height)
 }
-.right {
-  margin-left: auto;
+.head {
+  position: fixed;
+  top: var(--header-height);
+  left: 0;
+  right: 0;
+  z-index: var(--z-header);
+
+  display: flex;
+  align-items: center;
+
+  padding: 0 var(--padding);
+  height: var(--height);
+
+  background-color: #fff;
+  border-bottom: 1px solid var(--cell-border-color);
+
+  &.shadow {
+    @apply --shadow-2dp;
+    border-bottom: transparent;
+  }
 }
-.warn {
-  color: #ff5722;
+.subheader {
+  width: 100%;
+  font-size: 1.3em;
 }
 </style>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
new file mode 100644
index 0000000..f6bc5cc
--- /dev/null
+++ b/src/components/Sidebar.vue
@@ -0,0 +1,91 @@
+<script>
+import { mapState } from 'vuex'
+import Localize from 'js/Localize'
+import CardImage from 'components/CardImage'
+import CardInfoTable from 'components/CardInfoTable'
+
+export default {
+  components: {
+    CardImage,
+    CardInfoTable,
+  },
+  data: () => ({
+    pid: 1,
+  }),
+  computed: {
+    ...mapState([
+      'shownPid',
+    ]),
+    sidebarVisible() {
+      return !!this.shownPid
+    },
+    card() {
+      return CardInfo[this.pid]
+    },
+    cardName() {
+      return Localize.cardName(this.card)
+    },
+    cardLimiting() {
+      return Localize.limiting(this.card)
+    },
+  },
+  watch: {
+    shownPid(pid) {
+      if (0 < pid && pid < Object.keys(CardInfo).length) {
+        this.pid = pid
+      }
+    },
+  },
+}
+</script>
+
+<template>
+  <transition name="slide">
+    <div v-show="sidebarVisible" :class="$style.sidebar">
+      <card-image :class="$style.image" :pid="pid"/>
+      <div style="display: flex;">
+        <span>{{ card.wxid }}</span>
+        <span style="margin-left: auto;">{{ cardLimiting }}</span>
+      </div>
+      <div style="font-size: 1.5em;">{{ cardName }}</div>
+      <card-info-table :card="card"/>
+    </div>
+  </transition>
+</template>
+
+<style module>
+@import 'css/vars.css';
+.sidebar {
+  position: fixed;
+  z-index: var(--z-sidebar);
+  top: 4rem;
+  right: 0;
+  width: 20%;
+  height: calc(100% - var(--header-height));
+  background-color: #fafafa;
+  overflow-y: auto;
+  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
+  padding: .5em;
+}
+.image {
+  width: 80%;
+  display: block;
+  margin: 0 auto;
+}
+.sidebar:global(.slide-enter-active) {
+  animation: slide-in .5s;
+}
+.sidebar:global(.slide-leave-active) {
+  animation: slide-in .5s reverse;
+}
+@keyframes slide-in {
+  from {
+    transform: translate3d(100%, 0, 0);
+    visibility: visible;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+</style>
diff --git a/src/components/Tips.vue b/src/components/Tips.vue
new file mode 100644
index 0000000..c63f486
--- /dev/null
+++ b/src/components/Tips.vue
@@ -0,0 +1,59 @@
+<script>
+import marked from 'marked'
+
+export default {
+  props: {
+    name: {
+      type: String,
+      require: true,
+    },
+  },
+  data: () => ({
+    tips: {
+      searchTips: require('../pages/searchTips.md'),
+      emptyTips: require('../pages/emptyTips.md'),
+    },
+  }),
+  computed: {
+    html() {
+      return this.tips[this.name] ? marked(this.tips[this.name]) : ''
+    },
+  },
+}
+</script>
+
+<template>
+  <section :class="$style.tips">
+    <div v-html="html"></div>
+  </section>
+</template>
+
+<style module>
+.tips {
+  padding: 2rem 2rem 0 2rem;
+  color: #666;
+  line-height: 1.5;
+
+  & h3 {
+    font-size: 1.5em;
+  }
+
+  & p,
+  & ul {
+    margin: .5em 0; 
+  }
+
+  & ul {
+    list-style-type: disc;
+    list-style-position: outside;
+    padding-left: 2em;
+  }
+
+  & code {
+    margin: 0 .2em;
+    font-family: monospace;
+    white-space: nowrap;
+    border-bottom: 1px dotted #333;
+  }
+}
+</style>
diff --git a/src/js/Icon.js b/src/js/Icon.js
index c50c862..235b882 100644
--- a/src/js/Icon.js
+++ b/src/js/Icon.js
@@ -16,3 +16,4 @@ export const list = require('media/list.svg')
 export const blocks = require('media/blocks.svg')
 export const information = require('media/information.svg')
 export const check = require('media/check.svg')
+export const bulb = require('media/bulb.svg')
diff --git a/src/lang/zh_Hans.hjson b/src/lang/zh_Hans.hjson
index 759fb3d..2043f7b 100644
--- a/src/lang/zh_Hans.hjson
+++ b/src/lang/zh_Hans.hjson
@@ -3,7 +3,7 @@ suffix: _zh_CN
 // common
 ok: 确定
 cancel: 取消
-add: 新建
+add: 添加
 create: 创建
 reserve: 保留
 
diff --git a/src/media/bulb.svg b/src/media/bulb.svg
new file mode 100644
index 0000000..25a9978
--- /dev/null
+++ b/src/media/bulb.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A7,7 0 0,0 5,9C5,11.38 6.19,13.47 8,14.74V17A1,1 0 0,0 9,18H15A1,1 0 0,0 16,17V14.74C17.81,13.47 19,11.38 19,9A7,7 0 0,0 12,2M9,21A1,1 0 0,0 10,22H14A1,1 0 0,0 15,21V20H9V21Z" /></svg>
\ No newline at end of file
diff --git a/src/pages/Deck.vue b/src/pages/Deck.vue
index d3e6db3..7f8082d 100644
--- a/src/pages/Deck.vue
+++ b/src/pages/Deck.vue
@@ -6,7 +6,7 @@ import DeckFloatButton from 'components/DeckFloatButton'
 import CellContainer from 'components/CellContainer'
 import Cell from 'components/Cell'
 import Block from 'components/Block'
-import DeckHead from 'components/DeckHead'
+import DeckSubheader from 'components/DeckSubheader'
 import Icon from 'components/Icon'
 import { defaultSort, isLrigCard } from 'js/util'
 import _ from 'lodash'
@@ -22,7 +22,7 @@ export default {
     CellContainer,
     Cell,
     Block,
-    DeckHead,
+    DeckSubheader,
     Icon,
   },
   data: () => ({
@@ -124,7 +124,7 @@ export default {
     closeModal() {
       this.$refs.modals.close()
     },
-    updateDeckHeader() {
+    updateDeckSubheaderer() {
       let lrigDeck = this.$refs.lrigDeck
       if (!lrigDeck) {
         return
@@ -133,7 +133,7 @@ export default {
       let top = $lrigDeck ? $lrigDeck.getBoundingClientRect().top : 0
       this.scrolledToLrig = top <= window.innerHeight / 2
       this.scrolledToTop = window.scrollY <= 0
-      this.request = requestIdleCallback(this.updateDeckHeader)
+      this.request = requestIdleCallback(this.updateDeckSubheaderer)
     },
     toggleView() {
       this.previewing ? this.goListView() : this.goBlockView()
@@ -161,7 +161,7 @@ export default {
     },
   },
   mounted() {
-    this.updateDeckHeader()
+    this.updateDeckSubheaderer()
   },
   destroyed() {
     cancelIdleCallback(this.request)
@@ -182,11 +182,11 @@ export default {
         @click.native="toggleView"/>
       <header-icon slot="right" name="more" @click.native="openMenu"/>
     </app-header>
-    <deck-head
+    <deck-subheader
       v-show="!previewing"
       :scrolledToLrig="scrolledToLrig"
       :shadow="!scrolledToTop">
-    </deck-head>
+    </deck-subheader>
 
     <!-- List view -->
     <template v-if="!previewing">
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 34ac434..484d917 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -4,14 +4,16 @@ import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import ActionButtonBar from 'components/ActionButtonBar'
 import FlexboxContainer from 'components/FlexboxContainer'
-import CardInfoTable from 'components/CardInfoTable'
-import DeckSubheader from 'components/DeckSubheader'
-import CardImage from 'components/CardImage'
+import DeckHead from 'components/DeckHead'
+import Sidebar from 'components/Sidebar'
+import Tips from 'components/Tips'
 import Icon from 'components/Icon'
 import Box from 'components/Box'
+import Block from 'components/Block'
 import { defaultSort } from 'js/util'
 import Searcher from 'js/Searcher.js'
 import Localize from 'js/Localize'
+import _ from 'lodash'
 
 export default {
   components: {
@@ -21,20 +23,23 @@ export default {
     DeckModals,
     ActionButtonBar,
     FlexboxContainer,
-    DeckSubheader,
-    CardInfoTable,
-    CardImage,
+    DeckHead,
+    Sidebar,
+    Tips,
     Icon,
     Box,
+    Block,
   },
   data: () => ({
     queryString: '',
     timer: -1,
     blocking: false,
+
+    shownTips: false,
+    previewing: false,
   }),
   computed: {
     ...mapState([
-      'shownPid',
       'selectedPids',
     ]),
     ...mapGetters([
@@ -94,12 +99,6 @@ export default {
     resultVisible() {
       return !!this.query
     },
-    sidebarVisible() {
-      return !!this.shownPid
-    },
-    actionButtonBarVisable() {
-      return !!this.selectedPids.length
-    },
     deckName: {
       get() {
         return this.$store.state.deckName
@@ -113,33 +112,20 @@ export default {
         }
       },
     },
-    sortedMainDeck() {
-      return defaultSort(this.mainDeck)
-    },
-    sortedLrigDeck() {
-      return defaultSort(this.lrigDeck)
-    },
     matchedCards() {
       return Searcher.search(this.query)
     },
-    shownCardPid() {
-      if (0 < this.shownPid && this.shownPid < Object.keys(CardInfo).length) {
-        return this.shownPid
-      } else {
-        return 23
-      }
-    },
-    shownCard() {
-      return CardInfo[this.shownCardPid]
+    shownMainDeck() {
+      let deck = _.unionBy(this.mainDeck, 'pid')
+      return defaultSort(deck)
     },
-    shownCardName() {
-      return Localize.cardName(this.shownCard)
-    },
-    shownCardLimiting() {
-      return Localize.limiting(this.shownCard)
+    shownLrigDeck() {
+      let deck = _.unionBy(this.lrigDeck, 'pid')
+      return defaultSort(deck)
     },
   },
   methods: {
+    defaultSort,
     openMenu() {
       this.$refs.menu.open()
     },
@@ -161,8 +147,12 @@ export default {
       this.closeBar()
       this.$store.commit('switchDeck', name)
     },
+    tooglePreview() {
+      this.previewing ? this.previewing = false : this.previewing = true
+    },
     scrollToTop() {
       window.scrollTo(0, 0)
+      this.shownTips = false
       if (this.$refs.flexboxContainer) {
         this.$refs.flexboxContainer.resetRows()
       }
@@ -192,7 +182,7 @@ export default {
       </div>
     </div>
     <div>
-      <app-header :class="$style.appHeader">
+      <app-header>
         <div slot="left" style="width: 15%;" />
         <input
           :class="$style.searchBar"
@@ -202,58 +192,67 @@ export default {
           autocapitalize="none"
           maxlength="30"
           v-model="query"/>
-        <header-icon slot="right" :style="{ width: 'initial' }" name="blocks"/>
-        <header-icon slot="right" name="more" @click.native="openMenu"/>
+        <template v-if="!resultVisible">
+          <header-icon slot="right" :style="{ width: 'initial' }" name="blocks" @click.native="tooglePreview" />
+          <header-icon slot="right" name="more" @click.native="openMenu"/>
+        </template>
+        <template v-if="resultVisible">
+          <header-icon slot="right" name="bulb" @click.native="shownTips = true" />
+        </template>
         <div slot="right" style="width: 15%;"/>
       </app-header>
       <div :class="$style.container" @click="closeBar">
         <div v-show="resultVisible" :class="$style.content">
-          <flexbox-container ref="flexboxContainer" :cards="matchedCards">
+          <flexbox-container v-if="matchedCards.length && !shownTips" ref="flexboxContainer" :cards="matchedCards">
             <template scope="props">
-              <box :card="props.card" :selection="actionButtonBarVisable"/>
+              <box :card="props.card" />
             </template>
           </flexbox-container>
+          <tips v-if="!matchedCards.length && !shownTips" name="emptyTips" />
+          <tips v-if="shownTips" name="searchTips" />
         </div>
         <div v-show="!resultVisible" :class="$style.content">
-          <div :class="$style.flex">
-            <input
-              v-model.lazy.trim="deckName"
-              spellcheck="false"
-              autocomplete="off"
-              autocapitalize="none"
-              maxlength="20"
-              :class="$style.deckNameInput" />
-            <div style="margin-left: auto;">
-              <button
-                :class="[$style.grey, $style.button]"
-                @click="openModal('delete')">
-                {{ L('delete')}}
-              </button>
+          <template v-if="!previewing">
+            <div :class="$style.flex">
+              <input
+                v-model.lazy.trim="deckName"
+                spellcheck="false"
+                autocomplete="off"
+                autocapitalize="none"
+                maxlength="20"
+                :class="$style.deckNameInput" />
+              <div style="margin-left: auto;">
+                <button
+                  :class="[$style.grey, $style.button]"
+                  @click="openModal('delete')">
+                  {{ L('delete')}}
+                </button>
+              </div>
             </div>
-          </div>
-          <deck-subheader />
-          <div :class="$style.boxs">
-            <box v-for="card in sortedMainDeck" :card="card" :selection="actionButtonBarVisable"/>
-          </div>
-          <deck-subheader :lrig="true" />
-          <div :class="$style.boxs">
-            <box v-for="card in sortedLrigDeck" :card="card" :selection="actionButtonBarVisable"/>
-          </div>
+            <deck-head />
+            <div :class="$style.boxs">
+              <box v-for="card in defaultSort(mainDeck)" :card="card" />
+            </div>
+            <deck-head :lrig="true" />
+            <div :class="$style.boxs">
+              <box v-for="card in defaultSort(lrigDeck)" :card="card" />
+            </div>
+          </template>
+          <template v-if="previewing">          
+            <div :class="$style.blocks">
+              <div>
+                <block v-for="card in shownMainDeck" :class="$style.block" :card="card" :showCount="true" />
+              </div>
+              <div>
+                <block v-for="card in shownLrigDeck" :class="$style.block" :card="card" :showCount="true" />
+              </div>
+            </div>
+          </template>
         </div>
       </div>
     </div>
-    <transition name="slide">
-      <div v-show="sidebarVisible" :class="$style.sidebar">
-        <card-image :class="$style.image" :pid="shownCardPid"/>
-        <div style="display: flex;">
-          <span>{{ shownCard.wxid }}</span>
-          <span style="margin-left: auto;">{{ shownCardLimiting }}</span>
-        </div>
-        <div style="font-size: 1.5em;">{{ shownCardName }}</div>
-        <card-info-table :card="shownCard"/>
-      </div>
-    </transition>
-    <action-button-bar v-show="actionButtonBarVisable" :searching="resultVisible" />
+    <sidebar />
+    <action-button-bar :searching="resultVisible" />
     <header-menu ref="menu" :items="menuItems" :decktopView="true" />
     <deck-modals ref="modals"/>
   </div>
@@ -280,7 +279,7 @@ export default {
   border-bottom: 1px solid var(--cell-border-color);
 }
 .title {
-  font-size: 1.5rem;
+  font-size: 1.7rem;
   color: var(--main-color);
 }
 .mainColor {
@@ -314,9 +313,6 @@ export default {
   background-color: rgba(0,0,0,.05);
   color: #212121;
 }
-.appHeader {
-  font-size: .75em;
-}
 .searchBar {
   flex: 1;
   color: #fff;
@@ -334,8 +330,8 @@ export default {
   background-color: #ffff00;
 }
 .container {
-  margin-left: 15%;
-  margin-right: 15%;
+  padding: 0 15%;
+  min-height: calc(100vh - var(--header-height));
 }
 .content {
   margin-left: 2em;
@@ -360,21 +356,11 @@ export default {
   flex-wrap: wrap;
   padding: .5em 0;
 }
-.sidebar {
-  position: fixed;
-  z-index: var(--z-sidebar);
-  top: 4rem;
-  right: 0;
-  width: 20%;
-  height: calc(100% - var(--header-height));
-  background-color: #fafafa;
-  overflow-y: auto;
-  box-shadow: -2px 0 4px 0 rgba(0, 0, 0, .15);
-  padding: .5em;
+.blocks {
+  padding: var(--padding);
 }
-.image {
-  width: 80%;
-  display: block;
-  margin: 0 auto;
+.block {
+  width: 12%;
+  padding: .2em;
 }
 </style>
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index 9f48368..073d69d 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -2,8 +2,8 @@
 import { AppHeader, HeaderIcon } from 'components/AppHeader'
 import CellContainer from 'components/CellContainer'
 import Searcher from 'js/Searcher.js'
-import marked from 'marked'
 import Cell from 'components/Cell'
+import Tips from 'components/Tips'
 
 export default {
   components: {
@@ -11,15 +11,13 @@ export default {
     HeaderIcon,
     CellContainer,
     Cell,
+    Tips,
   },
   data: () => ({
     // To improve performance when user typing,
     // block the search for a short time after input.
     timer: -1,
     blocking: false,
-
-    searchTips: require('./searchTips.md'), // test
-    emptyTips: require('./emptyTips.md'), // test
   }),
   computed: {
     query: {
@@ -54,7 +52,6 @@ export default {
     },
   },
   methods: {
-    marked,
     updateQueryPart(part) {
       let query = Object.assign({}, this.$route.query, part)
       Object.keys(query).forEach(key => {
@@ -97,12 +94,8 @@ export default {
         </template>
       </cell-container>
     </section>
-    <section :class="$style.tips" v-if="!query">
-      <div v-html="marked(searchTips)"></div>
-    </section>
-    <section :class="$style.tips" v-if="query && !matchedCards.length">
-      <div v-html="marked(emptyTips)"></div>
-    </section>
+    <tips v-if="!query" name="searchTips" />
+    <tips v-if="query && !matchedCards.length" name="emptyTips" />
   </div>
 </template>
 
@@ -122,31 +115,4 @@ export default {
   color: #333;
   background-color: #ffff00;
 }
-.tips {
-  padding: 2rem 2rem 0 2rem;
-  color: #666;
-  line-height: 1.5;
-
-  & h3 {
-    font-size: 1.5em;
-  }
-
-  & p,
-  & ul {
-    margin: .5em 0; 
-  }
-
-  & ul {
-    list-style-type: disc;
-    list-style-position: outside;
-    padding-left: 2em;
-  }
-
-  & code {
-    margin: 0 .2em;
-    font-family: monospace;
-    white-space: nowrap;
-    border-bottom: 1px dotted #333;
-  }
-}
 </style>

From 6e9948485c5e3d7302ac082b536a2b783528ffef Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Thu, 17 Aug 2017 23:20:36 +0800
Subject: [PATCH 11/12] improve DeckEditor

add new localize string to `lang`
save search string in vue-router's query
rename FlexboxContainer -> BoxContainer
---
 src/components/ActionButtonBar.vue            | 22 +++----
 src/components/AppHeader/HeaderMenu.vue       |  2 +-
 src/components/Block.vue                      |  9 +--
 src/components/Box.vue                        | 16 ++---
 ...{FlexboxContainer.vue => BoxContainer.vue} | 19 ++++--
 src/components/Sidebar.vue                    | 20 +++---
 src/components/Tips.vue                       |  2 +-
 src/lang/en.hjson                             |  5 ++
 src/lang/jp.hjson                             |  5 ++
 src/lang/ko.hjson                             |  5 ++
 src/lang/ru.hjson                             |  5 ++
 src/lang/zh_Hans.hjson                        |  5 ++
 src/pages/DeckEditor.vue                      | 64 +++++++++++--------
 src/store.js                                  |  2 +-
 14 files changed, 108 insertions(+), 73 deletions(-)
 rename src/components/{FlexboxContainer.vue => BoxContainer.vue} (76%)

diff --git a/src/components/ActionButtonBar.vue b/src/components/ActionButtonBar.vue
index 7db1996..eb9ccd5 100644
--- a/src/components/ActionButtonBar.vue
+++ b/src/components/ActionButtonBar.vue
@@ -40,8 +40,8 @@ export default {
     cancel() {
       this.$store.commit('clearSelectedPids')
     },
-    L(text) {
-      return Localize(text)
+    L(text, arg) {
+      return Localize(text, arg)
     },
   },
 }
@@ -50,18 +50,18 @@ export default {
 <template>
   <transition name="slide">
     <div v-show="visable" :class="$style.wrapper">
-      <div :class="$style.count"> {{ count }} selected </div>
+      <div :class="$style.count"> {{ L('card_selected', count) }}</div>
       <div v-show="searching" :class="$style.deck">
-        <span>add to deck</span>
+        <span>{{ L('add_to_deck') }}</span>
         <span :class="$style.name">{{ deckName }}</span>
       </div>
       <template v-if="!searching">
-        <a :class="$style.cancel" @click="cancel">{{ L('cancel') }}</a>
         <a :class="$style.action" @click="remove">{{ L('delete') }}</a>
+        <a :class="$style.cancel" @click="cancel">{{ L('cancel') }}</a>
       </template>
       <template v-if="searching">
-        <a :class="$style.cancel" @click="cancel">{{ L('ok') }}</a>
         <a :class="$style.action" @click="add">{{ L('add') }}</a>
+        <a :class="$style.cancel" @click="cancel">{{ L('finished') }}</a>
       </template>
     </div>
   </transition>
@@ -73,14 +73,14 @@ export default {
   position: fixed;
   top: 0;
   left: 0;
+  z-index: var(--z-action-button-bar);
   height: var(--header-height);
   width: 100%;
   display: flex;
   align-items: center;
   line-height: var(--header-height);
-  background-color: var(--main-color);
-  z-index: var(--z-action-button-bar);
   font-size: 1.2em;
+  background-color: var(--main-color);
   color: #fff;
   text-transform: capitalize;
 }
@@ -94,7 +94,7 @@ export default {
 .name {
   padding-left: 2rem;
 }
-.cancel {
+.action {
   margin-left: auto;
 }
 .cancel,
@@ -107,10 +107,10 @@ export default {
   background-color: rgba(0,0,0,.27);
 }
 .wrapper:global(.slide-enter-active) {
-  animation: slide-in .5s;
+  animation: slide-in .3s;
 }
 .wrapper:global(.slide-leave-active) {
-  animation: slide-in .5s reverse;
+  animation: slide-in .3s reverse;
 }
 @keyframes slide-in {
   from {
diff --git a/src/components/AppHeader/HeaderMenu.vue b/src/components/AppHeader/HeaderMenu.vue
index b74a5f0..34fdc8a 100644
--- a/src/components/AppHeader/HeaderMenu.vue
+++ b/src/components/AppHeader/HeaderMenu.vue
@@ -86,7 +86,7 @@ export default {
 }
 .decktopPostion {
   top: calc(var(--header-height) - var(--padding));
-  right: calc(15% + 2 * var(--padding));
+  right: calc(10% + 2 * var(--padding));
 }
 .item {
   padding: var(--padding);
diff --git a/src/components/Block.vue b/src/components/Block.vue
index b669293..e33e20f 100644
--- a/src/components/Block.vue
+++ b/src/components/Block.vue
@@ -28,19 +28,12 @@ export default {
     handleClick() {
       this.$emit('click', this.card.pid)
     },
-    handleHover() {
-      // 节流
-      this.$emit('hover', this.card.pid)
-    },
   },
 }
 </script>
 
 <template>
-  <a
-    :class="$style.block"
-    @click.stop="handleClick"
-    @mouseover="handleHover">
+  <a :class="$style.block" @click.stop="handleClick">
     <card-image :pid="card.pid" :class="$style.image" />
     <div v-if="showCount" :class="$style.dimmer">×{{ count }}</div>
   </a>
diff --git a/src/components/Box.vue b/src/components/Box.vue
index 48826ec..63d0812 100644
--- a/src/components/Box.vue
+++ b/src/components/Box.vue
@@ -22,7 +22,7 @@ export default {
     ...mapState([
       'selectedPids',
     ]),
-    selection() {
+    selecting() {
       return !!this.selectedPids.length
     },
     name() {
@@ -36,7 +36,6 @@ export default {
     click() {
       if (this.selected) {
         this.selected = false
-        // this.$store.commit('clearShownPid')
         this.$store.commit('delSelectedPid', this.pid)
       } else {
         this.selected = true
@@ -48,8 +47,8 @@ export default {
     },
   },
   watch: {
-    selection(selection) {
-      if (selection === false) {
+    selecting(selecting) {
+      if (selecting === false) {
         this.selected = false
       }
     },
@@ -116,14 +115,14 @@ export default {
   top: .5em;
   right: .5em;
   z-index: var(--z-box-counter);
-  font-size: 1.5em;
-  padding: .2em;
-  background-color: color(#fff a(.9));
-  border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
+  font-size: 1.5em;
+  padding: .2em;
   color: #000;
+  background-color: color(#fff a(.9));
+  border-radius: 50%;
 }
 .content {
   display: flex;
@@ -135,7 +134,6 @@ export default {
   font-size: .7rem;
   padding: 1em 0 1em 1em;
   overflow: hidden;
-  width: auto;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: #fff;
diff --git a/src/components/FlexboxContainer.vue b/src/components/BoxContainer.vue
similarity index 76%
rename from src/components/FlexboxContainer.vue
rename to src/components/BoxContainer.vue
index f22f687..2c14430 100644
--- a/src/components/FlexboxContainer.vue
+++ b/src/components/BoxContainer.vue
@@ -1,11 +1,18 @@
 <script>
+import Box from 'components/Box'
 
 export default {
+  components: {
+    Box,
+  },
   props: {
     cards: {
       type: Array,
       require: true,
     },
+    loadMoreEnabled: {
+      require: false,
+    },
   },
   data: () => ({
     colunms: 1,
@@ -17,9 +24,13 @@ export default {
       return this.colunms * this.rows
     },
     iterator() {
-      return this.shownCount < this.cards.length
-        ? this.cards.slice(0, this.shownCount)
-        : this.cards
+      if (this.loadMoreEnabled) {
+        return this.shownCount < this.cards.length
+          ? this.cards.slice(0, this.shownCount)
+          : this.cards
+      } else {
+        return this.cards
+      }
     },
   },
   methods: {
@@ -59,7 +70,7 @@ export default {
 
 <template>
   <div :class="$style.container">
-    <slot v-for="item in iterator" :card="item"/>
+    <box v-for="card in iterator" :card="card" />
   </div>
 </template>
 
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index f6bc5cc..fc95484 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,8 +1,8 @@
 <script>
 import { mapState } from 'vuex'
-import Localize from 'js/Localize'
 import CardImage from 'components/CardImage'
 import CardInfoTable from 'components/CardInfoTable'
+import Localize from 'js/Localize'
 
 export default {
   components: {
@@ -10,22 +10,22 @@ export default {
     CardInfoTable,
   },
   data: () => ({
-    pid: 1,
+    pid: 0,
   }),
   computed: {
     ...mapState([
       'shownPid',
     ]),
-    sidebarVisible() {
+    visible() {
       return !!this.shownPid
     },
     card() {
       return CardInfo[this.pid]
     },
-    cardName() {
+    name() {
       return Localize.cardName(this.card)
     },
-    cardLimiting() {
+    limiting() {
       return Localize.limiting(this.card)
     },
   },
@@ -41,13 +41,13 @@ export default {
 
 <template>
   <transition name="slide">
-    <div v-show="sidebarVisible" :class="$style.sidebar">
+    <div v-show="visible" :class="$style.sidebar">
       <card-image :class="$style.image" :pid="pid"/>
       <div style="display: flex;">
         <span>{{ card.wxid }}</span>
-        <span style="margin-left: auto;">{{ cardLimiting }}</span>
+        <span style="margin-left: auto;">{{ limiting }}</span>
       </div>
-      <div style="font-size: 1.5em;">{{ cardName }}</div>
+      <div style="font-size: 1.5em;">{{ name }}</div>
       <card-info-table :card="card"/>
     </div>
   </transition>
@@ -73,10 +73,10 @@ export default {
   margin: 0 auto;
 }
 .sidebar:global(.slide-enter-active) {
-  animation: slide-in .5s;
+  animation: slide-in .3s;
 }
 .sidebar:global(.slide-leave-active) {
-  animation: slide-in .5s reverse;
+  animation: slide-in .3s reverse;
 }
 @keyframes slide-in {
   from {
diff --git a/src/components/Tips.vue b/src/components/Tips.vue
index c63f486..3419d2f 100644
--- a/src/components/Tips.vue
+++ b/src/components/Tips.vue
@@ -24,7 +24,7 @@ export default {
 
 <template>
   <section :class="$style.tips">
-    <div v-html="html"></div>
+    <div v-html="html" />
   </section>
 </template>
 
diff --git a/src/lang/en.hjson b/src/lang/en.hjson
index 98b02d8..ca89c83 100644
--- a/src/lang/en.hjson
+++ b/src/lang/en.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Type
 classes: Class
diff --git a/src/lang/jp.hjson b/src/lang/jp.hjson
index a8f8172..e49a1f0 100644
--- a/src/lang/jp.hjson
+++ b/src/lang/jp.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: 種類
 classes: タイプ
diff --git a/src/lang/ko.hjson b/src/lang/ko.hjson
index 06a21ed..641e60f 100644
--- a/src/lang/ko.hjson
+++ b/src/lang/ko.hjson
@@ -29,6 +29,11 @@ confirm_delete: 정말로 %s 를 삭제합니까?
 // cell component
 no_cost: 코스트 없음
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: 종류
 classes: 타입
diff --git a/src/lang/ru.hjson b/src/lang/ru.hjson
index 1c78fa0..b213062 100644
--- a/src/lang/ru.hjson
+++ b/src/lang/ru.hjson
@@ -29,6 +29,11 @@ confirm_delete: Вы точно хотите удалить %s ?
 // cell component
 no_cost: нет цены
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Тип
 classes: Класс
diff --git a/src/lang/zh_Hans.hjson b/src/lang/zh_Hans.hjson
index 2043f7b..e4ab8f1 100644
--- a/src/lang/zh_Hans.hjson
+++ b/src/lang/zh_Hans.hjson
@@ -29,6 +29,11 @@ confirm_delete: 确定删除卡组 %s ？
 // cell component
 no_cost: 无费用
 
+// action button bar
+card_selected: 已选择 %s 张卡片
+add_to_deck: 添加到卡组
+finished: 完成
+
 // prop
 cardType: 种类
 classes: 类别
diff --git a/src/pages/DeckEditor.vue b/src/pages/DeckEditor.vue
index 484d917..a61625a 100644
--- a/src/pages/DeckEditor.vue
+++ b/src/pages/DeckEditor.vue
@@ -3,7 +3,7 @@ import { mapState, mapGetters } from 'vuex'
 import { AppHeader, HeaderIcon, HeaderMenu } from 'components/AppHeader'
 import DeckModals from 'components/DeckModals'
 import ActionButtonBar from 'components/ActionButtonBar'
-import FlexboxContainer from 'components/FlexboxContainer'
+import BoxContainer from 'components/BoxContainer'
 import DeckHead from 'components/DeckHead'
 import Sidebar from 'components/Sidebar'
 import Tips from 'components/Tips'
@@ -22,7 +22,7 @@ export default {
     HeaderMenu,
     DeckModals,
     ActionButtonBar,
-    FlexboxContainer,
+    BoxContainer,
     DeckHead,
     Sidebar,
     Tips,
@@ -75,7 +75,7 @@ export default {
     },
     query: {
       get() {
-        return this.queryString
+        return this.$route.query.query || ''
       },
       set(query) {
         if (this.blocking) {
@@ -88,7 +88,9 @@ export default {
           return
         }
 
-        this.queryString = query
+        this.updateQueryPart({
+          query,
+        })
         this.scrollToTop()
         this.blocking = true
         this.timer = setTimeout(() => {
@@ -126,6 +128,18 @@ export default {
   },
   methods: {
     defaultSort,
+    updateQueryPart(part) {
+      let query = Object.assign({}, this.$route.query, part)
+      Object.keys(query).forEach(key => {
+        if (!query[key]) {
+          delete query[key]
+        }
+      })
+      this.$router.replace({
+        path: this.$route.path,
+        query,
+      })
+    },
     openMenu() {
       this.$refs.menu.open()
     },
@@ -150,11 +164,14 @@ export default {
     tooglePreview() {
       this.previewing ? this.previewing = false : this.previewing = true
     },
+    toogleTips() {
+      this.shownTips ? this.shownTips = false : this.shownTips = true
+    },
     scrollToTop() {
       window.scrollTo(0, 0)
       this.shownTips = false
-      if (this.$refs.flexboxContainer) {
-        this.$refs.flexboxContainer.resetRows()
+      if (this.$refs.boxContainer) {
+        this.$refs.boxContainer.resetRows()
       }
     },
     L(text) {
@@ -197,17 +214,17 @@ export default {
           <header-icon slot="right" name="more" @click.native="openMenu"/>
         </template>
         <template v-if="resultVisible">
-          <header-icon slot="right" name="bulb" @click.native="shownTips = true" />
+          <header-icon slot="right" name="bulb" @click.native="toogleTips" />
         </template>
-        <div slot="right" style="width: 15%;"/>
+        <div slot="right" style="width: 10%;"/>
       </app-header>
       <div :class="$style.container" @click="closeBar">
-        <div v-show="resultVisible" :class="$style.content">
-          <flexbox-container v-if="matchedCards.length && !shownTips" ref="flexboxContainer" :cards="matchedCards">
-            <template scope="props">
-              <box :card="props.card" />
-            </template>
-          </flexbox-container>
+        <div v-if="resultVisible" :class="$style.content">
+          <box-container
+            v-if="matchedCards.length && !shownTips"
+            ref="boxContainer"
+            :loadMoreEnabled="true"
+            :cards="matchedCards" />
           <tips v-if="!matchedCards.length && !shownTips" name="emptyTips" />
           <tips v-if="shownTips" name="searchTips" />
         </div>
@@ -230,15 +247,11 @@ export default {
               </div>
             </div>
             <deck-head />
-            <div :class="$style.boxs">
-              <box v-for="card in defaultSort(mainDeck)" :card="card" />
-            </div>
+            <box-container :cards="defaultSort(mainDeck)" />
             <deck-head :lrig="true" />
-            <div :class="$style.boxs">
-              <box v-for="card in defaultSort(lrigDeck)" :card="card" />
-            </div>
+            <box-container :cards="defaultSort(lrigDeck)" />
           </template>
-          <template v-if="previewing">          
+          <template v-if="previewing">
             <div :class="$style.blocks">
               <div>
                 <block v-for="card in shownMainDeck" :class="$style.block" :card="card" :showCount="true" />
@@ -330,11 +343,12 @@ export default {
   background-color: #ffff00;
 }
 .container {
-  padding: 0 15%;
+  padding: 0 10% 0 15%;
   min-height: calc(100vh - var(--header-height));
 }
 .content {
   margin-left: 2em;
+  padding-top: .5em;
   background-color: #fafafa;
 }
 .flex {
@@ -350,12 +364,6 @@ export default {
 .deckNameInput:hover {
   background-color: rgba(77,144,254,0.15);
 }
-.boxs {
-  width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-  padding: .5em 0;
-}
 .blocks {
   padding: var(--padding);
 }
diff --git a/src/store.js b/src/store.js
index 1cf966d..5346eb8 100644
--- a/src/store.js
+++ b/src/store.js
@@ -27,10 +27,10 @@ const state = {
   deckFiles: [],
   remainingPids: [],
 
-  selectedPids: [],
   // current selected deck name
   deckName: '',
   shownPid: 0,
+  selectedPids: [],
 
   localization: {
     lang: 'en',

From 214ec5b7a6694a2c79eae070c62a5e0ef5fda42d Mon Sep 17 00:00:00 2001
From: deardrops <lness@qq.com>
Date: Thu, 17 Aug 2017 23:34:17 +0800
Subject: [PATCH 12/12] add missing language string

---
 src/lang/it.hjson | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/lang/it.hjson b/src/lang/it.hjson
index 36e0caf..2db9c6f 100644
--- a/src/lang/it.hjson
+++ b/src/lang/it.hjson
@@ -29,6 +29,11 @@ confirm_delete: Are you sure to delete %s ?
 // cell component
 no_cost: no cost
 
+// action button bar
+card_selected: %s selected
+add_to_deck: add to deck
+finished: finished
+
 // prop
 cardType: Tipo
 classes: Classe