From ea668cd51d6d7978fb74c2a6d95b90879039d02f Mon Sep 17 00:00:00 2001
From: Ami Wang <ami@lob.com>
Date: Sun, 20 Mar 2016 15:38:47 -0700
Subject: [PATCH] feat(dex): boxes base!!!

---
 app/components/box.ts     |  3 ++
 app/components/pokemon.ts |  9 +++++
 app/styles/tracker.scss   | 72 +++++++++++++++++++++++++++++++++++----
 app/styles/variables.scss |  6 +++-
 app/views/box.html        | 35 +++++++++++++++++--
 app/views/pokemon.html    |  3 ++
 6 files changed, 118 insertions(+), 10 deletions(-)
 create mode 100644 app/components/pokemon.ts
 create mode 100644 app/views/pokemon.html

diff --git a/app/components/box.ts b/app/components/box.ts
index 1dba526c..670da638 100644
--- a/app/components/box.ts
+++ b/app/components/box.ts
@@ -1,8 +1,11 @@
 import { Component } from 'angular2/core';
 
+import { PokemonComponent } from './pokemon';
+
 const HTML = require('../views/box.html');
 
 @Component({
+  directives: [PokemonComponent],
   selector: 'box',
   template: HTML
 })
diff --git a/app/components/pokemon.ts b/app/components/pokemon.ts
new file mode 100644
index 00000000..67ca8adc
--- /dev/null
+++ b/app/components/pokemon.ts
@@ -0,0 +1,9 @@
+import { Component } from 'angular2/core';
+
+const HTML = require('../views/pokemon.html');
+
+@Component({
+  selector: 'pokemon',
+  template: HTML
+})
+export class PokemonComponent {}
diff --git a/app/styles/tracker.scss b/app/styles/tracker.scss
index ae96d9b1..668207d4 100644
--- a/app/styles/tracker.scss
+++ b/app/styles/tracker.scss
@@ -100,13 +100,13 @@ info {
 dex {
   @include flex-grow(1);
 
-  padding: 100px;
+  padding: 100px 0;
   overflow-y: scroll;
 }
 
 header {
   margin: 0 auto;
-  max-width: 600px;
+  width: 6 * $pokemon-box-size + 2;
 
   h1 {
     margin: 0;
@@ -132,7 +132,7 @@ header {
 
       padding: 10px;
       text-align: center;
-      background-color: #f1f1f1;
+      background-color: $light-gray;
       font-family: $font-secondary;
       font-size: 11px;
       font-weight: 700;
@@ -148,7 +148,7 @@ header {
       }
 
       &:hover:not(.active) {
-        background-color: darken(#f1f1f1, 5%);
+        background-color: darken($light-gray, 5%);
       }
     }
   }
@@ -159,7 +159,7 @@ header {
     h3 {
       margin: 10px 0;
       font-family: $font-secondary;
-      font-size: 13px;
+      font-size: 12px;
       font-weight: 400;
       text-transform: uppercase;
       letter-spacing: 1px;
@@ -180,8 +180,66 @@ header {
 
 box {
   display: block;
-  margin: 100px auto 0;
-  max-width: 600px;
+  margin: 60px auto 0;
+  width: 6 * $pokemon-box-size + 2;
+
+  h1 {
+    margin: 0 0 10px;
+    font-family: $font-secondary;
+    font-size: 25px;
+    font-weight: 700;
+    text-transform: uppercase;
+  }
+
+  .box-container {
+    @include flexbox();
+    @include flex-wrap(wrap);
+
+    border: 1px solid $light-gray;
+  }
+
+  pokemon {
+    @include flexbox();
+    @include flex-direction(column);
+    @include align-items(center);
+    @include justify-content(center);
+    @include transition(all .1s ease-out);
+
+    width: $pokemon-box-size;
+    height: $pokemon-box-size;
+    border: 1px solid $light-gray;
+
+    h4 {
+      margin: 0;
+      font-size: 17px;
+      font-weight: 400;
+    }
+
+    p {
+      margin: 0;
+      font-family: $font-secondary;
+      font-size: 12px;
+      font-weight: 400;
+      text-transform: uppercase;
+    }
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &.captured {
+      background-color: $brand-primary-light;
+      border-color: darken($brand-primary-light, 5%);
+    }
+
+    &.disabled {
+      opacity: .1;
+
+      &:hover {
+        cursor: default;
+      }
+    }
+  }
 }
 
 @media (max-width: 1100px) {
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index baf44170..139f9e7b 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -1,6 +1,10 @@
 $font-primary: 'Alegreya Sans', 'Helvetica', sans-serif;
 $font-secondary: 'Montserrat', 'Helvetica', sans-serif;
 
-$brand-primary: #ffcb05;
+$brand-primary: #ffd924;
+$brand-primary-light: lighten($brand-primary, 20%);
 $brand-secondary: #18447d;
 $brand-secondary-dark: darken($brand-secondary, 7%);
+$light-gray: #f1f1f1;
+
+$pokemon-box-size: 110px;
diff --git a/app/views/box.html b/app/views/box.html
index b0f48089..99b48599 100644
--- a/app/views/box.html
+++ b/app/views/box.html
@@ -1,2 +1,33 @@
-<hr>
-<p>this is a dex box</p>
+<h1>001 - 030</h1>
+<div class="box-container">
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="captured disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="captured disabled"></pokemon>
+  <pokemon class="captured disabled"></pokemon>
+  <pokemon class="captured disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon class="disabled"></pokemon>
+  <pokemon></pokemon>
+  <pokemon class="captured"></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon class="captured"></pokemon>
+  <pokemon class="captured"></pokemon>
+  <pokemon class="captured"></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon></pokemon>
+  <pokemon class="captured"></pokemon>
+  <pokemon class="captured"></pokemon>
+</div>
diff --git a/app/views/pokemon.html b/app/views/pokemon.html
new file mode 100644
index 00000000..6cc49611
--- /dev/null
+++ b/app/views/pokemon.html
@@ -0,0 +1,3 @@
+<h4>Fletchinder</h4>
+<img src="http://cdn.bulbagarden.net/upload/e/ec/001MS.png">
+<p>#001</p>