From d7af68a5c588ea2287eba543ab23d1c88100bb7b Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Fri, 27 Apr 2018 23:36:06 -0400
Subject: [PATCH] Add a button to link to the bundle.

Closes #63.
---
 src/components/item_card/BundleButton.vue | 29 ++++++++++++++++-------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/item_card/BundleButton.vue b/src/components/item_card/BundleButton.vue
index c4e26c9..aeb326e 100644
--- a/src/components/item_card/BundleButton.vue
+++ b/src/components/item_card/BundleButton.vue
@@ -1,21 +1,34 @@
 <template>
-  <a class="button is-rounded is-fullwidth" :class="ItemInBundle ? 'is-success' : 'is-danger'"
-    @click="ToggleItemInBundle">
-    <span class="icon">
-      <font-awesome-icon :icon="ItemInBundle ? InBundleIcon : NotInBundleIcon"/>
-    </span>
-    <span>{{bundleItem.bundle.name}}{{numberInBundle}}</span>
-  </a>
+  <div class="field has-addons">
+    <div class="control is-expanded">
+      <a class="button is-rounded is-fullwidth" :class="ItemInBundle ? 'is-success' : 'is-danger'"
+        @click="ToggleItemInBundle">
+        <span class="icon">
+          <font-awesome-icon :icon="ItemInBundle ? InBundleIcon : NotInBundleIcon"/>
+        </span>
+        <span class="is-size-7-mobile">{{bundleItem.bundle.name}}{{numberInBundle}}</span>
+      </a>
+    </div>
+    <div class="control">
+      <router-link class="button is-rounded is-light" :to="{ name: 'bundle-items', params: { id: bundleItem.bundle.id } }">
+        <span class="icon">
+          <external-link/>
+        </span>
+      </router-link>
+    </div>
+  </div>
 </template>
 
 <script>
 import FontAwesomeIcon from '@fortawesome/vue-fontawesome'
 import faCheckSquare from '@fortawesome/fontawesome-free-regular/faCheckSquare'
 import faSquare from '@fortawesome/fontawesome-free-regular/faSquare'
+import ExternalLink from 'mdi-vue/OpenInNewIcon'
 export default {
   name: 'bundle-button',
   components: {
-    'font-awesome-icon': FontAwesomeIcon
+    'font-awesome-icon': FontAwesomeIcon,
+    ExternalLink
   },
   props: {
     bundleItem: {