From d6587155be7f3664f16078ce90b349ddb76a7c1a Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Thu, 17 Mar 2016 09:38:29 -0400
Subject: [PATCH 1/9] OnClick assignment now gets executed.

---
 main.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/main.js b/main.js
index 9012a46..53287e1 100644
--- a/main.js
+++ b/main.js
@@ -7,6 +7,11 @@ var v = new Vue({
     },
     ready: function(){
         this.fetchData();
+        $('.list-group-item').on('click', function() {
+            $('.glyphicon', this)
+            .toggleClass('glyphicon-chevron-right')
+            .toggleClass('glyphicon-chevron-down');
+        });
     },
     methods: {
         fetchData: function(){
@@ -18,13 +23,3 @@ var v = new Vue({
         }
     }
 });
-
-$(function() {
-
-  $('.list-group-item').on('click', function() {
-    $('.glyphicon', this)
-      .toggleClass('glyphicon-chevron-right')
-      .toggleClass('glyphicon-chevron-down');
-  });
-
-});

From bb29a3234c9086c71fcddcd61e0b371152a97dd1 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Fri, 18 Mar 2016 17:43:50 -0400
Subject: [PATCH 2/9] Added Seasons and skills tabs.

---
 index.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/index.html b/index.html
index 8105a31..11d180e 100644
--- a/index.html
+++ b/index.html
@@ -14,6 +14,8 @@
         </li>
         <li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical
             List</a></li>
+        <li role="presentation"><a href="#season-list" aria-controls="season-list" role="tab" data-toggle="tab">By Season</a></li>
+        <li role="presentation"><a href="#skill-list" aria-controls="skill-list" role="tab" data-toggle="tab">By Skill</a></li>
         <li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
 
     </ul>
@@ -64,8 +66,57 @@
                             <div class="checkbox"><label><input type="checkbox" v-model="user_data" id="{{ item.id }}"
                                                                 value="{{ item.id }}"/>{{ item.name }} — {{ item.source
                                 }}</label></div>
+            <div role="tabpanel" class="tab-pane" id="season-list">
+                <div class="list-group list-group-root well">
+
+                    <template v-for="season in static.seasons">
+                        <a href="#season-{{ season.id }}" class="list-group-item" data-toggle="collapse">
+                            <div class="checkbox">
+                                <i class="glyphicon glyphicon-chevron-right"></i>
+                                <label><input type="checkbox"/>{{ season.name }}</label>
+                            </div>
                         </a>
+                        <div class="list-group collapse" id="season-{{ season.id }}">
+                            <template v-for="item in static.items | filterBy season.id in 'seasons'">
+                                <a class="list-group-item">
+                                    <div class="checkbox">
+                                        <label>
+                                            <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
+                                            {{ item.name }} — {{ item.source }}
+                                        </label>
+                                    </div>
+                                </a>
+                            </template>
+                        </div>
                     </template>
+
+                </div>
+            </div>
+
+            <div role="tabpanel" class="tab-pane" id="skill-list">
+                <div class="list-group list-group-root well">
+
+                    <template v-for="skill in static.skills">
+                        <a href="#skill-{{ skill.id }}" class="list-group-item" data-toggle="collapse">
+                            <div class="checkbox">
+                                <i class="glyphicon glyphicon-chevron-right"></i>
+                                <label><input type="checkbox"/>{{ skill.name }}</label>
+                            </div>
+                        </a>
+                        <div class="list-group collapse" id="skill-{{ skill.id }}">
+                            <template v-for="item in static.items | filterBy skill.id in 'skills'">
+                                <a class="list-group-item">
+                                    <div class="checkbox">
+                                        <label>
+                                            <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
+                                            {{ item.name }} — {{ item.source }}
+                                        </label>
+                                    </div>
+                                </a>
+                            </template>
+                        </div>
+                    </template>
+
                 </div>
             </div>
 

From 7fc920647e0c1bd7f06f52980a1bb7e6eb6cf043 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Fri, 18 Mar 2016 18:04:22 -0400
Subject: [PATCH 3/9] Fixed HTML formatting.

---
 index.html | 45 ++++++++++++++++++++++++++++-----------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 11d180e..5a08a7f 100644
--- a/index.html
+++ b/index.html
@@ -10,14 +10,11 @@
 <div class="container">
     <h1>Stardew Valley Community Center Checklist</h1>
     <ul class="nav nav-tabs" role="tablist">
-        <li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">Bundles</a>
-        </li>
-        <li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical
-            List</a></li>
+        <li role="presentation" class="active"><a href="#bundles" aria-controls="bundles" role="tab" data-toggle="tab">By Bundle</a></li>
+        <li role="presentation"><a href="#ab-list" aria-controls="ab-list" role="tab" data-toggle="tab">Alphabetical List</a></li>
         <li role="presentation"><a href="#season-list" aria-controls="season-list" role="tab" data-toggle="tab">By Season</a></li>
         <li role="presentation"><a href="#skill-list" aria-controls="skill-list" role="tab" data-toggle="tab">By Skill</a></li>
         <li role="presentation"><a href="#about" aria-controls="about" role="tab" data-toggle="tab">About</a></li>
-
     </ul>
     <div id="app">
         <div class="just-padding tab-content">
@@ -34,19 +31,25 @@
 
                             <template v-for="bundle in static.bundles | filterBy room.id in 'room'">
                                 <a href="#bundle-{{ bundle.id }}" class="list-group-item" data-toggle="collapse">
-                                    <div class="checkbox"><i class="glyphicon glyphicon-chevron-right"></i><label><input
-                                            type="checkbox"/>{{ bundle.name }}</label></div>
+                                    <div class="checkbox">
+                                        <i class="glyphicon glyphicon-chevron-right"></i>
+                                        <label>
+                                            <input type="checkbox"/>
+                                            {{ bundle.name }}
+                                        </label>
+                                    </div>
                                 </a>
                                 <div class="list-group collapse" id="bundle-{{ bundle.id }}">
                                     <template v-for="item in static.items | filterBy bundle.id in 'bundles'">
                                         <a class="list-group-item">
-                                            <div class="checkbox"><label>
-                                                <template v-for="bundle in item.bundles"><input type="checkbox"
-                                                                                                v-model="user_data"
-                                                                                                id="{{ item.id }}"
-                                                                                                value="{{ item.id }}"/>
-                                                </template>
-                                                {{ item.name }} — {{ item.source }}</label></div>
+                                            <div class="checkbox">
+                                                <label>
+                                                    <template v-for="bundle in item.bundles">
+                                                        <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
+                                                    </template>
+                                                    {{ item.name }} — {{ item.source }}
+                                                </label>
+                                            </div>
                                         </a>
                                     </template>
                                 </div>
@@ -63,9 +66,17 @@
                 <div class="list-group">
                     <template v-for="item in static.items | orderBy 'name'">
                         <a class="list-group-item">
-                            <div class="checkbox"><label><input type="checkbox" v-model="user_data" id="{{ item.id }}"
-                                                                value="{{ item.id }}"/>{{ item.name }} — {{ item.source
-                                }}</label></div>
+                            <div class="checkbox">
+                                <label>
+                                    <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
+                                    {{ item.name }} — {{ item.source }}
+                                </label>
+                            </div>
+                        </a>
+                    </template>
+                </div>
+            </div>
+
             <div role="tabpanel" class="tab-pane" id="season-list">
                 <div class="list-group list-group-root well">
 

From 3d8d6e8ff21387b5ecb707fd71c3370238624db4 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Sun, 20 Mar 2016 22:21:33 -0400
Subject: [PATCH 4/9] Added seasons to existing items.

---
 bundles.json | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)

diff --git a/bundles.json b/bundles.json
index 6d13551..713a80d 100644
--- a/bundles.json
+++ b/bundles.json
@@ -4,258 +4,344 @@
       "id": 0,
       "name": "Wild Horseradish",
       "source": "Foraging during Spring.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 1,
       "name": "Daffodil",
       "source": "Foraging during Spring. Buy from Pierre's Shop at the Flower Dance.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 2,
       "name": "Leek",
       "source": "Foraging during Spring.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 3,
       "name": "Dandelion",
       "source": "Foraging during Spring. Buy from Pierre's Shop at the Flower Dance.",
+      "seasons": ["spring"],
+      "skills": ["foraging"],
       "bundles": [0]
     },
     {
       "id": 4,
       "name": "Grape",
       "source": "Foraging during Summer.",
+      "seasons": ["summer", "fall"],
+      "skills": ["foraging", "farming"],
       "bundles": [1]
     },
     {
       "id": 5,
       "name": "Spice Berry",
       "source": "Foraging during Summer.",
+      "seasons": ["summer"],
+      "skills": ["foraging"],
       "bundles": [1]
     },
     {
       "id": 6,
       "name": "Sweet Pea",
       "source": "Foraging during Summer.",
+      "seasons": ["summer"],
+      "skills": ["foraging"],
       "bundles": [1]
     },
     {
       "id": 7,
       "name": "Common Mushroom",
       "source": "Foraging during Fall Or if you have the mushroom in your cave.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 8,
       "name": "Wild Plum",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 9,
       "name": "Hazelnut",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 10,
       "name": "Blackberry",
       "source": "Foraging during Fall.",
+      "seasons": ["fall"],
+      "skills": ["foraging"],
       "bundles": [2]
     },
     {
       "id": 11,
       "name": "Winter Root",
       "source": "Foraging during Winter or dropped by slimes on 41-79 Mines levels.",
+      "seasons": ["winter", "spring", "summer", "fall"],
+      "skills": ["foraging", "combat"],
       "bundles": [3]
     },
     {
       "id": 12,
       "name": "Crystal Fruit",
       "source": "Foraging during Winter or dropped by coal sprites on 41-79 Mines levels.",
+      "seasons": ["winter", "spring", "summer", "fall"],
+      "skills": ["foraging", "combat"],
       "bundles": [3]
     },
     {
       "id": 13,
       "name": "Snow Yam",
       "source": "Foraging during Winter (Using a Hoe outside the farm).",
+      "seasons": ["winter"],
+      "skills": ["foraging"],
       "bundles": [3]
     },
     {
       "id": 14,
       "name": "Crocus",
       "source": "Foraging during Winter.",
+      "seasons": ["winter"],
+      "skills": ["foraging"],
       "bundles": [3]
     },
     {
       "id": 15,
       "name": "Wood (99)",
       "source": "Chopping trees or logs using an axe.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [4, 4]
     },
     {
       "id": 16,
       "name": "Stone (99)",
       "source": "Smashing stones with a pickaxe.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["mining"],
       "bundles": [4]
     },
     {
       "id": 17,
       "name": "Hardwood (10)",
       "source": "Chopping large stumps with an upgraded axe. Also in crates in the Mines",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [4]
     },
     {
       "id": 18,
       "name": "Coconut",
       "source": "Found in the desert.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 19,
       "name": "Cactus Fruit",
       "source": "Found in the desert.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 20,
       "name": "Cave Carrot",
       "source": "In boxes inside the mines or using the hoe on soil spots in the Mines.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["mining"],
       "bundles": [5]
     },
     {
       "id": 21,
       "name": "Red Mushroom",
       "source": "Can be found in the mines or in the farm cave if you selected the mushroom perk.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [5]
     },
     {
       "id": 22,
       "name": "Purple Mushroom",
       "source": "Can be found in the mines or in the farm cave if you selected the mushroom perk.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging", "mining"],
       "bundles": [5]
     },
     {
       "id": 23,
       "name": "Maple Syrup",
       "source": "Harvested from maple trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 24,
       "name": "Oak Resin",
       "source": "Harvested from oak trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 25,
       "name": "Pine Tar",
       "source": "Harvested from pine trees using a Tapper.",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 26,
       "name": "Morel",
       "source": "In the farm cave if you selected the mushroom perk",
+      "seasons": ["spring", "summer", "fall", "winter"],
+      "skills": ["foraging"],
       "bundles": [5]
     },
     {
       "id": 26,
       "name": "Parsnip",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 28,
       "name": "Green Bean",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 29,
       "name": "Cauliflower",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 30,
       "name": "Potato",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [6]
     },
     {
       "id": 31,
       "name": "Tomato",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 32,
       "name": "Hot Pepper",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 33,
       "name": "Blueberry",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 34,
       "name": "Melon",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [7]
     },
     {
       "id": 35,
       "name": "Corn",
       "source": "Crops during Summer and Fall.",
+      "seasons": ["summer", "fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 36,
       "name": "Eggplant",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 37,
       "name": "Pumpkin",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 38,
       "name": "Yam",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [8]
     },
     {
       "id": 39,
       "name": "Parsnip (Gold Star) (5)",
       "source": "Crops during Spring.",
+      "seasons": ["spring"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 40,
       "name": "Melon (Gold Star) (5)",
       "source": "Crops during Summer.",
+      "seasons": ["summer"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 41,
       "name": "Pumpkin (Gold Star) (5)",
       "source": "Crops during Fall.",
+      "seasons": ["fall"],
+      "skills": ["farming"],
       "bundles": [9]
     },
     {
       "id": 42,
       "name": "Corn (Gold Star) (5)",
       "source": "Crops during Summer and Fall.",
+      "seasons": ["summer", "fall"],
+      "skills": ["farming"],
       "bundles": [9]
     }
   ],

From a7a0d554b2cbe21224cd80ee67841d5ac53dac6f Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Sun, 20 Mar 2016 22:23:03 -0400
Subject: [PATCH 5/9] Switched from a list of items to a panel.

Each panel shows a button for each bundle it is in with a checkbox.
This will need to be hooked up to an onclick even in the future.
---
 index.html | 204 ++++++++++++++++++++++++++++++++++++++++++-----------
 main.css   |  64 +++++++++++++++++
 2 files changed, 226 insertions(+), 42 deletions(-)

diff --git a/index.html b/index.html
index 5a08a7f..ff83689 100644
--- a/index.html
+++ b/index.html
@@ -40,18 +40,47 @@
                                     </div>
                                 </a>
                                 <div class="list-group collapse" id="bundle-{{ bundle.id }}">
-                                    <template v-for="item in static.items | filterBy bundle.id in 'bundles'">
-                                        <a class="list-group-item">
-                                            <div class="checkbox">
-                                                <label>
-                                                    <template v-for="bundle in item.bundles">
-                                                        <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
-                                                    </template>
-                                                    {{ item.name }} — {{ item.source }}
-                                                </label>
-                                            </div>
-                                        </a>
-                                    </template>
+                                    <div class="container-fluid">
+                                        <div class="row row-eq-height">
+                                            <template v-for="item in static.items | filterBy bundle.id in 'bundles'">
+                                                <div class="col-md-3">
+                                                    <div class="panel panel-default">
+                                                        <div class="panel-heading">
+                                                            <h3 class="panel-title">{{ item.name }}</h3>
+                                                        </div>
+                                                        <div class="panel-body">
+                                                            <p>{{ item.source }}</p>
+                                                            <div class="button-area">
+                                                                <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                            </div>
+                                                        </div>
+                                                        <div class="panel-footer">
+                                                            <div class="panel-footer-area">
+                                                                <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                            </div>
+                                                            <div class="panel-footer-area">
+                                                                <span class="glyphicon glyphicon-grain"></span>
+                                                                <div class="footer-text-area">
+                                                                    <template v-for="skill_id in item.skills">
+                                                                        <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                            <div class="footer-text">{{ skill.name }}</div>
+                                                                        </template>
+                                                                    </template>
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </div>
+                                    </div>
                                 </div>
 
                             </template>
@@ -63,17 +92,46 @@
             </div>
 
             <div role="tabpanel" class="tab-pane" id="ab-list">
-                <div class="list-group">
-                    <template v-for="item in static.items | orderBy 'name'">
-                        <a class="list-group-item">
-                            <div class="checkbox">
-                                <label>
-                                    <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
-                                    {{ item.name }} — {{ item.source }}
-                                </label>
+                <div class="container-fluid">
+                    <div class="row row-eq-height">
+                        <template v-for="item in static.items | orderBy 'name'">
+                            <div class="col-md-3">
+                                <div class="panel panel-default">
+                                    <div class="panel-heading">
+                                        <h3 class="panel-title">{{ item.name }}</h3>
+                                    </div>
+                                    <div class="panel-body">
+                                        <p>{{ item.source }}</p>
+                                        <div class="button-area">
+                                            <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                        </div>
+                                    </div>
+                                    <div class="panel-footer">
+                                        <div class="panel-footer-area">
+                                            <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                        </div>
+                                        <div class="panel-footer-area">
+                                            <span class="glyphicon glyphicon-grain"></span>
+                                            <div class="footer-text-area">
+                                                <template v-for="skill_id in item.skills">
+                                                    <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                        <div class="footer-text">{{ skill.name }}</div>
+                                                    </template>
+                                                </template>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
                             </div>
-                        </a>
-                    </template>
+                        </template>
+                    </div>
                 </div>
             </div>
 
@@ -88,16 +146,47 @@
                             </div>
                         </a>
                         <div class="list-group collapse" id="season-{{ season.id }}">
-                            <template v-for="item in static.items | filterBy season.id in 'seasons'">
-                                <a class="list-group-item">
-                                    <div class="checkbox">
-                                        <label>
-                                            <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
-                                            {{ item.name }} — {{ item.source }}
-                                        </label>
-                                    </div>
-                                </a>
-                            </template>
+                            <div class="container-fluid">
+                                <div class="row row-eq-height">
+                                    <template v-for="item in static.items | filterBy season.id in 'seasons'">
+                                        <div class="col-md-3">
+                                            <div class="panel panel-default">
+                                                <div class="panel-heading">
+                                                    <h3 class="panel-title">{{ item.name }}</h3>
+                                                </div>
+                                                <div class="panel-body">
+                                                    <p>{{ item.source }}</p>
+                                                    <div class="button-area">
+                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                    </div>
+                                                </div>
+                                                <div class="panel-footer">
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                    </div>
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-grain"></span>
+                                                        <div class="footer-text-area">
+                                                            <template v-for="skill_id in item.skills">
+                                                                <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                    <div class="footer-text">{{ skill.name }}</div>
+                                                                </template>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </template>
 
@@ -115,16 +204,47 @@
                             </div>
                         </a>
                         <div class="list-group collapse" id="skill-{{ skill.id }}">
-                            <template v-for="item in static.items | filterBy skill.id in 'skills'">
-                                <a class="list-group-item">
-                                    <div class="checkbox">
-                                        <label>
-                                            <input type="checkbox" v-model="user_data" id="{{ item.id }}" value="{{ item.id }}"/>
-                                            {{ item.name }} — {{ item.source }}
-                                        </label>
-                                    </div>
-                                </a>
-                            </template>
+                            <div class="container-fluid">
+                                <div class="row row-eq-height">
+                                    <template v-for="item in static.items | filterBy skill.id in 'skills'">
+                                        <div class="col-md-3">
+                                            <div class="panel panel-default">
+                                                <div class="panel-heading">
+                                                    <h3 class="panel-title">{{ item.name }}</h3>
+                                                </div>
+                                                <div class="panel-body">
+                                                    <p>{{ item.source }}</p>
+                                                    <div class="button-area">
+                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                    </div>
+                                                </div>
+                                                <div class="panel-footer">
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-calendar"></span>
+                                                                <span class="footer-text-area">
+                                                                    <template v-for="season_id in item.seasons">
+                                                                        <template v-for="season in static.seasons | filterBy season_id in 'id'">
+                                                                            <span class="footer-text">{{ season.name }}</span>
+                                                                        </template>
+                                                                    </template>
+                                                                </span>
+                                                    </div>
+                                                    <div class="panel-footer-area">
+                                                        <span class="glyphicon glyphicon-grain"></span>
+                                                        <div class="footer-text-area">
+                                                            <template v-for="skill_id in item.skills">
+                                                                <template v-for="skill in static.skills | filterBy skill_id in 'id'">
+                                                                    <div class="footer-text">{{ skill.name }}</div>
+                                                                </template>
+                                                            </template>
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </template>
+                                </div>
+                            </div>
                         </div>
                     </template>
 
diff --git a/main.css b/main.css
index 00850cb..b40e8c2 100644
--- a/main.css
+++ b/main.css
@@ -31,3 +31,67 @@
 .list-group-item .glyphicon {
     margin-right: 5px;
 }
+
+.row-eq-height, .row-eq-height > div[class*='col-']{
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex: 1 0 auto;
+    flex-wrap: wrap;
+}
+
+.panel {
+   display: flex;
+   flex-direction:column;
+   align-content:stretch;
+    flex-grow: 1;
+}
+
+.panel-body{
+    display:         flex;
+    flex-direction: column;
+    flex-grow: 1;
+}
+
+.panel-body > p{
+    flex-grow: 1;
+}
+
+.panel-body > .button-area{
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.button-area > .btn{
+    flex: 1 0 auto;
+    margin-top: 1rem;
+}
+
+.panel-footer{
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+}
+
+.panel-footer-area{
+    display: flex;
+    flex-direction: row;
+    flex: 1 0 auto;
+    justify-content: space-around;
+}
+
+.footer-text-area{
+    margin-left: 1rem;
+    flex: 1 0 auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+}
+
+.footer-text{
+    flex-grow: 1;
+}

From 51b33b0ed31e4ee9ef21f2d81eda53f1bedc053c Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Sun, 20 Mar 2016 22:26:08 -0400
Subject: [PATCH 6/9] Removed bundle name hardcode.

---
 index.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index ff83689..9cbe7a9 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
                                                         <div class="panel-body">
                                                             <p>{{ item.source }}</p>
                                                             <div class="button-area">
-                                                                <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                                <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
                                                             </div>
                                                         </div>
                                                         <div class="panel-footer">
@@ -103,7 +103,7 @@
                                     <div class="panel-body">
                                         <p>{{ item.source }}</p>
                                         <div class="button-area">
-                                            <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                            <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
                                         </div>
                                     </div>
                                     <div class="panel-footer">
@@ -157,7 +157,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">
@@ -215,7 +215,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>Construction Bundle</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">

From a85ad85b5724c126438f713c5f4af7068f404077 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Mon, 21 Mar 2016 00:13:06 -0400
Subject: [PATCH 7/9] Added a search box to the alphabetical list.

---
 index.html | 12 +++++++++++-
 main.css   |  4 ++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 9cbe7a9..58f0abe 100644
--- a/index.html
+++ b/index.html
@@ -93,8 +93,18 @@
 
             <div role="tabpanel" class="tab-pane" id="ab-list">
                 <div class="container-fluid">
+                    <div class="row">
+                        <div class="col-md-3">
+                            <form class="form-inline">
+                                <div class="form-group">
+                                    <label for="search">Filter</label>
+                                    <input type="text" class="form-control" id="search" v-model="search_name" />
+                                </div>
+                            </form>
+                        </div>
+                    </div>
                     <div class="row row-eq-height">
-                        <template v-for="item in static.items | orderBy 'name'">
+                        <template v-for="item in static.items | orderBy 'name' | filterBy search_name in 'name'">
                             <div class="col-md-3">
                                 <div class="panel panel-default">
                                     <div class="panel-heading">
diff --git a/main.css b/main.css
index b40e8c2..25add83 100644
--- a/main.css
+++ b/main.css
@@ -95,3 +95,7 @@
 .footer-text{
     flex-grow: 1;
 }
+
+form{
+    margin-bottom: 1rem;
+}

From 53c8d82cb96c5f6fa92e9ee8a246087fe0ed53d4 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Mon, 21 Mar 2016 00:13:23 -0400
Subject: [PATCH 8/9] Added basic user_data.

---
 index.html |  2 +-
 main.js    | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 58f0abe..eb3f5b0 100644
--- a/index.html
+++ b/index.html
@@ -113,7 +113,7 @@
                                     <div class="panel-body">
                                         <p>{{ item.source }}</p>
                                         <div class="button-area">
-                                            <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                            <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                         </div>
                                     </div>
                                     <div class="panel-footer">
diff --git a/main.js b/main.js
index 53287e1..d7ef1f6 100644
--- a/main.js
+++ b/main.js
@@ -3,10 +3,16 @@ var v = new Vue({
     data:{
         debug: true,
         static: null,
-        user_data: []
+        user_data: [],
+        btnChecked: 'btn-success',
+        btnUnchecked: 'btn-warning',
+        boxChecked: 'glyphicon-check',
+        boxUnchecked: 'glyphicon-unchecked'
+    },
+    created: function(){
+        this.fetchData();
     },
     ready: function(){
-        this.fetchData();
         $('.list-group-item').on('click', function() {
             $('.glyphicon', this)
             .toggleClass('glyphicon-chevron-right')
@@ -18,8 +24,14 @@ var v = new Vue({
             this.$http.get('bundles.json', function(data, status, response){
                 if(status == 200){
                     this.static = data;
+                    for(var i = 0; i < this.static.items.length; i++){
+                        this.user_data.push(false);
+                    }
                 }
             });
+        },
+        completeItem: function(itemId){
+            this.user_data.$set(itemId, !this.user_data[itemId]);
         }
     }
 });

From 5ac012a0f92d558a7aaa438e5e2319f2d7f3e252 Mon Sep 17 00:00:00 2001
From: John Cleaver <cleaver.john.k@gmail.com>
Date: Mon, 21 Mar 2016 00:15:55 -0400
Subject: [PATCH 9/9] Hooked up all the buttons to the basic user_data.

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index eb3f5b0..c12351e 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
                                                         <div class="panel-body">
                                                             <p>{{ item.source }}</p>
                                                             <div class="button-area">
-                                                                <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                                <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                             </div>
                                                         </div>
                                                         <div class="panel-footer">
@@ -167,7 +167,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">
@@ -225,7 +225,7 @@
                                                 <div class="panel-body">
                                                     <p>{{ item.source }}</p>
                                                     <div class="button-area">
-                                                        <button v-for="bundle_id in item.bundles" class="btn btn-warning"><span class="glyphicon glyphicon-unchecked"></span>{{ static.bundles[bundle_id].name }}</button>
+                                                        <button v-for="bundle_id in item.bundles" class="btn" v-bind:class="[user_data[item.id] ? btnChecked : btnUnchecked]" v-on:click="completeItem(item.id)"><span class="glyphicon" v-bind:class="[user_data[item.id] ? boxChecked : boxUnchecked]" ></span>{{ static.bundles[bundle_id].name }}</button>
                                                     </div>
                                                 </div>
                                                 <div class="panel-footer">