Add compact view setting

src/components/Settings.vue

@@ -55,6 +55,24 @@
         </div>
       </div>
     </section>
+    <section class="section">
+      <div class="container">
+        <h2 class="subtitle">
+          Compact View
+        </h2>
+        <p class="content">
+          Enable a more compact table view instead of the card view.
+          Note that this may result in horizontal scrolling on smaller (phone-sized) devices.
+          The card view is recommended for those.
+        </p>
+        <div class="field">
+          <button-checkbox v-model="CompactView">
+            Use Compact View
+          </button-checkbox>
+          <p class="help">Enables a compact tabular view for item information.</p>
+        </div>
+      </div>
+    </section>
     <section class="section">
       <div class="container">
         <h2 class="subtitle">
@@ -188,6 +206,14 @@ export default {
         this.$store.commit('toggleSkills')
       }
     },
+    CompactView: {
+      get () {
+        return this.$store.state.CompactView
+      },
+      set (newValue) {
+        this.$store.commit('toggleCompactView')
+      }
+    },
     SavedData: function () {
       return this.$store.getters.GetSerializedState
     }

src/store/index.js

@@ -27,7 +27,8 @@ export default new Vuex.Store({
     BundleRewardsSpoilers: true,
     ItemInfoSpoilers: true,
     SeasonsSpoilers: true,
-    SkillsSpoilers: true
+    SkillsSpoilers: true,
+    CompactView: false
   },
   plugins: [
     createPersistedState({
@@ -39,7 +40,8 @@ export default new Vuex.Store({
           BundleRewardsSpoilers: state.BundleRewardsSpoilers,
           ItemInfoSpoilers: state.ItemInfoSpoilers,
           SeasonsSpoilers: state.SeasonsSpoilers,
-          SkillsSpoilers: state.SkillsSpoilers
+          SkillsSpoilers: state.SkillsSpoilers,
+          CompactView: state.CompactView
         }
       )
     })
@@ -106,6 +108,9 @@ export default new Vuex.Store({
     toggleSkills (state) {
       state.SkillsSpoilers = !state.SkillsSpoilers
     },
+    toggleCompactView (state) {
+      state.CompactView = !state.CompactView
+    },
     initState (state) {
       Vue.set(state, 'seasons', prestate.seasons)
       Vue.set(state, 'skills', prestate.skills)