Working class page as panels.

assignment.css

@@ -8,4 +8,26 @@
   font-size: 400%;
   text-shadow: 2px 2px 5px #000; }
 
+#class-row h2 {
+  text-align: center;
+  font-size: 150%; }
+#class-row .col-md-3,
+#class-row .col-xs-6,
+#class-row .col-sm-4,
+#class-row .col-md-3 {
+  padding: 5px; }
+#class-row .panel {
+  -webkit-box-shadow: 2px 2px 5px #0F0F0F;
+  -moz-box-shadow: 2px 2px 5px #0F0F0F;
+  box-shadow: 2px 2px 5px #0F0F0F; }
+#class-row img {
+  height: 200px;
+  width: 100%;
+  object-fit: cover;
+  margin-left: auto;
+  margin-right: auto; }
+#class-row .panel-body,
+#class-row a.thumbnail {
+  border: none; }
+
 /*# sourceMappingURL=assignment.css.map */

assignment.css.map

@@ -1,6 +1,6 @@
 {
 "version": 3,
-"mappings": "AACE,wBAAU;EACR,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;AAGpB,iBAAG;EACD,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,gBAAgB",
+"mappings": "AACE,wBAAU;EACR,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;AAGpB,iBAAG;EACD,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,gBAAgB;;AAK/B,aAAG;EACD,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;AAGjB;;;oBAGU;EACR,OAAO,EAAE,GAAG;AAGd,iBAAO;EACL,kBAAkB,EAAE,mBAAmB;EACvC,eAAe,EAAE,mBAAmB;EACpC,UAAU,EAAE,mBAAmB;AAGjC,cAAI;EACF,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,KAAK;EACjB,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;AAGpB;sBACY;EACV,MAAM,EAAE,IAAI",
 "sources": ["assignment.scss"],
 "names": [],
 "file": "assignment.css"

assignment.scss

@@ -12,3 +12,36 @@
     text-shadow: 2px 2px 5px #000;
   }
 }
+
+#class-row {
+  h2 {
+    text-align: center;
+    font-size: 150%;
+  }
+
+  .col-md-3,
+  .col-xs-6,
+  .col-sm-4,
+  .col-md-3 {
+    padding: 5px;
+  }
+
+  .panel {
+    -webkit-box-shadow: 2px 2px 5px #0F0F0F;
+    -moz-box-shadow: 2px 2px 5px #0F0F0F;
+    box-shadow: 2px 2px 5px #0F0F0F;
+  }
+  
+  img {
+    height: 200px;
+    width: 100%;
+    object-fit: cover;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .panel-body,
+  a.thumbnail {
+    border: none;
+  }
+}

routing.js

@@ -113,12 +113,25 @@ function AboutContext() {
 }
 
 function ClassContext(q) {
+  var category = animals_data.category;
+  var animals = null;
+  var klass;
+
   this.class = q.class ? q.class : null;
   if (!this.class) {
     window.location.assign("");
   }
   console.log("Class page", this.class);
-};
+  for (klass in category) {
+    if (category.hasOwnProperty(klass)) {
+      if (category[klass].name === this.class) {
+        animals = category[klass].animals;
+        break;
+      }
+    }
+  }
+  this.animals = animals;
+}
 
 /**
  * Home context.

templates/class.hbs

@@ -1,4 +1,28 @@
 <div class="class">
   {{> nav activeGallery="active" }}
-  CLASS {{ greeting }} {{ moreText }}
+
+  <div class="container">
+    <ol class="breadcrumb">
+      <li><a href="#">Home</a></li>
+      <li>{{class}}</li>
+    </ol>
+
+    <h1>{{class}}</h1>
+    <div id="class-row" class="row">
+    {{#each animals}}
+      <div class="col-xs-6 col-sm-4 col-md-3">
+        <div class="panel panel-default">
+          <a href="#species?class={{../class}}&species={{name}}">
+            <div class="panel-heading">
+              <h2>{{ name }}</h2>
+            </div>
+            <div class="panel-body">
+              <span class="thumbnail"><img src="{{ image2 }}" /></span>
+            </div>
+          </a>
+        </div>
+      </div>
+    {{/each}}
+    </div>
+  </div>
 </div>