#139 compact view (#144)

* Add styles to better display tag lists

* Add components to display data in a table

* Add compact view setting

* Fix spelling

* Add table view if enabled

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/components/bundles/BundleItems.vue

@@ -23,12 +23,9 @@
           <progress class="progress is-info" :value="GetRoomItemsRedeemed(bundle.room)" :max="bundle.room.items_required" />
         </div>
       </div>
-        <!-- Room Progress -->
-        <!-- Bundle Progress -->
-    <!-- </section>
-    <section class="section"> -->
         <div class="columns is-multiline">
-          <div class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex" v-for="bundleitem in bundleItems" :key="bundleitem.id">
+          <item-table v-if="CompactView" :items="bundleItems.map(i => i.item)" />
+          <div v-else class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex" v-for="bundleitem in bundleItems" :key="bundleitem.id">
             <item-card :item="bundleitem.item"></item-card>
           </div>
         </div>
@@ -38,6 +35,7 @@
 
 <script>
 import ItemCard from '@/components/item_card/ItemCard'
+import ItemTable from '@/components/item_table/ItemTable.vue'
 export default {
   name: 'bundle-items',
   computed: {
@@ -49,6 +47,9 @@ export default {
     },
     bundleItems: function () {
       return this.bundle.items.filter(item => !(this.$store.state.HideCompleted && this.isItemComplete(item)))
+    },
+    CompactView () {
+      return this.$store.state.CompactView
     }
   },
   methods: {
@@ -59,7 +60,8 @@ export default {
     GetRoomItemsRedeemed: function (room) { return this.$store.getters.GetRoomItemsRedeemed(room) }
   },
   components: {
-    ItemCard
+    ItemCard,
+    ItemTable
   }
 }
 </script>

src/components/item_card/SeasonList.vue

@@ -44,5 +44,8 @@ export default {
 </script>
 
 <style scoped>
-
+.tags {
+  justify-content: center;
+  flex-wrap: no-wrap;
+}
 </style>

src/components/item_card/SkillList.vue

@@ -20,5 +20,9 @@ export default {
 </script>
 
 <style scoped>
+.tags {
+  justify-content: center;
+  flex-wrap: nowrap;
+}
 
 </style>

src/components/item_table/ItemTable.vue

@@ -0,0 +1,53 @@
+<template>
+  <table class="table is-bordered is-striped is-narrow is-fullwidth">
+    <thead>
+      <tr>
+        <th>
+          Item
+        </th>
+        <th>
+          Source
+        </th>
+        <th>
+          Seasons
+        </th>
+        <th>
+          Skills
+        </th>
+        <th>
+          Bundles
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <item-table-row v-for="item in items" :key="item.id" :item="item" />
+    </tbody>
+  </table>
+</template>
+
+<script>
+import ItemTableRow from '@/components/item_table/ItemTableRow.vue'
+
+export default {
+  name: 'ItemTable',
+  components: {
+    ItemTableRow
+  },
+  data () {
+    return {
+
+    }
+  },
+  props: {
+    items: {
+      type: Array
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+table {
+  table-layout: fixed
+}
+</style>

src/components/item_table/ItemTableRow.vue

@@ -0,0 +1,118 @@
+<template>
+  <tr>
+    <td>
+      {{item.name}}
+    </td>
+    <td>
+      {{item.source}}
+    </td>
+    <td v-if="showSeasonList">
+        <season-list :seasons="item.seasons"/>
+    </td>
+    <td v-if="showSkillList">
+        <skill-list :skills="item.skills"/>
+    </td>
+    <td>
+      <bundle-button v-for="bundleItem in item.bundles" :key="bundleItem.id" :bundle-item="bundleItem" :item="item"/>
+    </td>
+  </tr>
+</template>
+
+<script>
+import SeasonList from '../item_card/SeasonList'
+import SkillList from '../item_card/SkillList'
+import BundleButton from '../item_card/BundleButton'
+export default {
+  name: 'ItemTable',
+  components: {
+    BundleButton,
+    SkillList,
+    SeasonList
+  },
+  data () {
+    return {
+
+    }
+  },
+  computed: {
+    showItemDesc: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.ItemInfoSpoilers)
+    },
+    showSeasonList: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.SeasonsSpoilers)
+    },
+    showSkillList: function () {
+      return !(this.$store.state.HideSpoilers && this.$store.state.SkillsSpoilers)
+    }
+  },
+  props: {
+    item: {
+      type: Object,
+      default: function () {
+        return {
+          id: 22,
+          name: 'Purple Mushroom',
+          source: 'Can be found in the mines or in the farm cave if you selected the mushroom perk.',
+          seasons: [
+            {
+              id: 'spring',
+              order: 0,
+              name: 'Spring'
+            },
+            {
+              id: 'summer',
+              order: 1,
+              name: 'Summer'
+            },
+            {
+              id: 'fall',
+              order: 2,
+              name: 'Fall'
+            },
+            {
+              id: 'winter',
+              order: 3,
+              name: 'Winter'
+            }
+          ],
+          skills: [
+            {
+              id: 'mining',
+              order: 1,
+              name: 'Mining'
+            },
+            {
+              id: 'foraging',
+              order: 2,
+              name: 'Foraging'
+            }
+          ],
+          'bundles': [
+            {
+              'count': 1,
+              'bundle': {
+                id: 5,
+                name: 'Exotic Foraging Bundle',
+                room: 0,
+                reward: 'Autumn\'s Bounty (5)'
+              },
+              'id': 24
+            },
+            {
+              'count': 1,
+              'bundle': {
+                id: 23,
+                name: 'Field Research Bundle',
+                room: 4,
+                reward: 'Recycling Machine'
+              },
+              'id': 25
+            }
+          ]
+        }
+      }
+    }
+
+  }
+}
+</script>

src/components/search/Search.vue

@@ -3,7 +3,8 @@
   <search-form v-model="search"></search-form>
   <section class="container">
     <div class="columns is-multiline">
-      <div class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex" v-for="item in filtered_items" :key="item.id">
+      <item-table v-if="CompactView" :items="filtered_items" />
+      <div v-else class="column is-3-widescreen is-4-desktop is-12-mobile is-6-tablet is-flex" v-for="item in filtered_items" :key="item.id">
         <item-card :item="item"></item-card>
       </div>
     </div>
@@ -15,12 +16,14 @@
 <script>
 import SearchForm from '@/components/search/SearchForm'
 import ItemCard from '@/components/item_card/ItemCard'
+import ItemTable from '@/components/item_table/ItemTable.vue'
 import _ from 'lodash'
 export default {
   name: 'search',
   components: {
     SearchForm,
-    ItemCard
+    ItemCard,
+    ItemTable
   },
   data () {
     return {
@@ -49,6 +52,9 @@ export default {
         ,
         'name'
       )
+    },
+    CompactView () {
+      return this.$store.state.CompactView
     }
   },
   methods: {

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)