Implement search, style sidebar

Raijinili · Aug 30, 2015 · 7084e3a · 7084e3a
1 parent 9e54a2c
commit 7084e3a
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 16 deletions.
diff --git a/app.js b/app.js
@@ -239,9 +239,25 @@ $(document).ready(function() {
             activeCities = getActiveCities();
             $('.units').empty();
             populateUnits(filterUnits(unitLibrary, activeCities));
+            searchFilter();
         });
     }
 
+
+    $("#search").on("keyup", searchFilter);
+
+    function searchFilter() {
+        var value = $("#search").val().toLowerCase();
+
+        $(".units .unit").each(function() {
+            if ($(this).data("searchText").toLowerCase().search(value) > -1) {
+                $(this).show();
+            }
+            else {
+                $(this).hide();
+            }
+        });
+    }
 
 
     // Go time.

diff --git a/css/skeleton.css b/css/skeleton.css
@@ -183,7 +183,7 @@ input[type="button"] {
   white-space: nowrap;
   background-color: transparent;
   border-radius: 4px;
-  border: 1px solid #FFF;
+  border: 2px solid #c8532f;
   cursor: pointer;
   box-sizing: border-box;
   text-shadow: 0 2px 4px #1e2835); }
@@ -198,16 +198,16 @@ input[type="submit"]:focus,
 input[type="reset"]:focus,
 input[type="button"]:focus {
   color: #FFF;
-  border-color: #FFF;
+  border-color: #c8532f;
   outline: 0; }
 .button.button-primary,
 button.button-primary,
 input[type="submit"].button-primary,
 input[type="reset"].button-primary,
 input[type="button"].button-primary {
   color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0;
+  background-color: #c8532f;
+  border-color: #c8532f;
   text-shadow:none; }
 .button.button-primary:hover,
 button.button-primary:hover,
@@ -220,8 +220,8 @@ input[type="submit"].button-primary:focus,
 input[type="reset"].button-primary:focus,
 input[type="button"].button-primary:focus {
   color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
+  background-color: #AF3A16;
+  border-color: #AF3A16; }
 
 
 /* Forms
@@ -267,7 +267,7 @@ input[type="url"]:focus,
 input[type="password"]:focus,
 textarea:focus,
 select:focus {
-  border: 1px solid #33C3F0;
+  border: 1px solid #c8532f;
   outline: 0; }
 label,
 legend {

diff --git a/css/styles.css b/css/styles.css
@@ -26,12 +26,14 @@ body:after {
 
 header {
     color: #fff;
-    background-color: #111;
+    background-color: #c8532f;
+
 }
 
 .navigation {
     list-style: none;
     margin:0;
+    opacity: .8;
 }
 
 .navigation a {
@@ -40,26 +42,47 @@ header {
 }
 
 .navigation li {
-    color: #33C3F0;
+    color: #FFF;
+    font-size: 1.2em;
+    text-align: center;
     margin: 0;
     padding: 8px 0 8px 0;
 }
 
 .navigation li:hover {
-    color: #1EAEDB;
+    text-decoration: underline;
 }
 
 .hero h2 {
     color: #fff;
     text-shadow: 0 2px 4px #1e2835;
 }
 
+#search {
+    width: 168px;
+}
+
 .buttons {
-    width: 180px;
+    width: 190px;
     vertical-align: top;
     display: inline-block;
     position: absolute;
     margin: 0;
+    padding: 0 10px 0 10px;
+    box-sizing: border-box;
+    border: 2px solid #c8532f;
+    border-radius: 8px;
+
+
+}
+
+.buttons p {
+    color: #FFF;
+    font-size: 1.5em;
+    margin-bottom: 5px;
+    margin-top: 10px;
+    text-shadow: 0 2px 4px #1e2835;
+
 }
 
 .city {
@@ -72,8 +95,8 @@ header {
 
 .units {
     display: inline-block;
-    min-height: 500px;
-    margin: 0 0 0 184px;
+    min-height: 646px;
+    margin: 0 0 0 200px;
     text-align: left;
 }
 
@@ -82,7 +105,7 @@ header {
     margin: 0 4px 2px 4px;
     min-height: 210px;
     border-radius: 8px;
-    box-shadow: 0 0 0 1px black;
+    box-shadow: 0 0 0 1px #222;
     display: inline-block;
     background: #D1D1BA;
 }
@@ -149,6 +172,7 @@ header {
     padding: 0 0 0 16px;
     font-size: 0.9em;
     font-weight: 800;
+    white-space: nowrap;
     background-color: black;
     color: white;
 }
@@ -171,7 +195,8 @@ header {
 
 footer {
     color: #fff;
-    background-color: #111;
+    background-color: rgba(17, 17, 17, .85);
+    opacity: .8;
     text-align: center;
     margin: 0;
     padding: 8px 32px 8px 32px;

diff --git a/images/hg-favicon.ico b/images/hg-favicon.ico
diff --git a/index.html b/index.html
@@ -36,7 +36,13 @@ <h2 style="margin-top: 10%">Highgrounds Units</h2>
     </div>
 
     <aside class="buttons">
+
+      <p>Search</p>
+      <input id="search" type="text"/>
+
+      <p href="#">Filter by city</p>
       <div class="cities"></div>
+
     </aside>
 
     <!-- City template -->
@@ -53,7 +59,11 @@ <h2 style="margin-top: 10%">Highgrounds Units</h2>
 
     <!-- Unit template -->
     <script id="unit-card" type="text/x-handlebars-template">
-      <div class="unit">
+      <div class="unit" data-search-text="{{name}} 
+                                          {{#each types }}{{this}}{{/each}} 
+                                          {{rarity}} 
+                                          {{#each homeActions}}{{this.type}}{{/each}} 
+                                          {{#each battleActions}}{{this.type}}{{/each}}">
         <div class="unit-top row">
           <div class="one-third column unit-sprite">
              <img src="images/outline.png">