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] 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;
+}