Adds item-list element; renames example app to Calf.

diff --git a/example/index.html b/example/index.html
index 643d495..325dc0a 100644 (file)
--- a/example/index.html
+++ b/example/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <title>Cowhide example</title>
+    <title>Calf: a Cowhide example</title>
     <meta name="description" content="An example showcasing ivi-webui's capabilities.">
     <meta name="viewport" content="width=device-width">
 
@@ -24,19 +24,32 @@
         <button class="btn btn-primary" data-toggle="ch-button">Driving mode</button>
       </div>
 
-      <h2>Example application: music player.</h2>
+      <h2>Calf Music Player<small>A Cowhide example application.</small></h2>
       <div id="application"></div>
     </div> <!-- container -->
 
     <!-- initial template of our application; it just installs the outlet. -->
     <script type="text/x-handlebars" data-template-name="application">
-      {{outlet}}
+      <div class="navbar navbar-inverse">
+        <div class="navbar-inner">
+          <a class="brand" href="#">Calf</a>
+          <ul class="nav">
+            <li><a href="/">Artists</a></li>
+            <li><a href="/">Albums</a></li>
+            <li><a href="/">Songs</a></li>
+          </ul>
+        </div>
+      </div>
+      <div class="content">
+        {{outlet}}
+      </div>
     </script>
 
     <script type="text/x-handlebars" data-template-name="artists">
-      <h3>Artists</h3>
       {{#each artist in controller}}
-        <p>{{artist.lastName}}, {{artist.firstName}}
+        <li>
+          <strong>{{artist.lastName}}</strong>, {{artist.firstName}}
+        </li>
       {{/each}}
     </script>
 

diff --git a/example/javascripts/app/app.js b/example/javascripts/app/app.js
index f1fb38c..429bc06 100644 (file)
--- a/example/javascripts/app/app.js
+++ b/example/javascripts/app/app.js
@@ -1,7 +1,7 @@
 (function(win) {
     'use strict';
 
-    win.CowhideMusic = window.Ember.Application.create({
+    win.Calf = window.Ember.Application.create({
         VERSION: '0.1',
         rootElement: '#application',
         ready: function() {

diff --git a/example/javascripts/app/controllers/application.js b/example/javascripts/app/controllers/application.js
index de909ba..99dc44d 100644 (file)
--- a/example/javascripts/app/controllers/application.js
+++ b/example/javascripts/app/controllers/application.js
@@ -4,4 +4,4 @@
     var ApplicationController = Ember.Controller.extend({});
 
     app.ApplicationController = ApplicationController;
-})(window.CowhideMusic, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/javascripts/app/controllers/artists.js b/example/javascripts/app/controllers/artists.js
index a0b8fc6..8bbdf92 100644 (file)
--- a/example/javascripts/app/controllers/artists.js
+++ b/example/javascripts/app/controllers/artists.js
@@ -19,4 +19,4 @@
     });
 
     app.ArtistsController = ArtistsController;
-})(window.CowhideMusic, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/javascripts/app/router.js b/example/javascripts/app/router.js
index b3aa098..aa27cbb 100644 (file)
--- a/example/javascripts/app/router.js
+++ b/example/javascripts/app/router.js
@@ -15,4 +15,4 @@
     });
 
     app.Router = Router;
-})(window.CowhideMusic, window.Ember);
+})(window.Calf, window.Ember);

diff --git a/example/javascripts/app/views/application.js b/example/javascripts/app/views/application.js
index fd657a6..be7ddf8 100644 (file)
--- a/example/javascripts/app/views/application.js
+++ b/example/javascripts/app/views/application.js
@@ -6,4 +6,4 @@
     });
 
     app.ApplicationView = ApplicationView;
-})(window.CowhideMusic, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/javascripts/app/views/artists.js b/example/javascripts/app/views/artists.js
index fa12891..01dd3d4 100644 (file)
--- a/example/javascripts/app/views/artists.js
+++ b/example/javascripts/app/views/artists.js
@@ -2,8 +2,10 @@
     'use strict';
 
     var ArtistsView = Ember.View.extend({
-        templateName: 'artists'
+        templateName: 'artists',
+        tagName: 'ul',
+        classNames: ['item-list', 'striped']
     });
 
     app.ArtistsView = ArtistsView;
-})(window.CowhideMusic, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);
\ No newline at end of file

diff --git a/example/styles/example.css b/example/styles/example.css
index 1cf28de..b6b99a6 100644 (file)
--- a/example/styles/example.css
+++ b/example/styles/example.css
@@ -1,6 +1,5 @@
 #application {
-    border: 1px solid #ccc;
     height: 540px;
     overflow: hidden;
     margin-bottom: 30px;
-}
\ No newline at end of file
+}

diff --git a/grunt.js b/grunt.js
index 25b165b..bff8105 100644 (file)
--- a/grunt.js
+++ b/grunt.js
@@ -5,12 +5,16 @@ module.exports = function(grunt) {
     watch: {
       files: [
         'grunt.js',
+
         'src/bootstrap/**/*.{js,less}',
         'src/*.{js,less}',
         'src/themes/*.less',
+        'src/cowhide-less/*.less',
+
         'example/javascripts/*.js',
         'example/javascripts/app/*.js',
         'example/javascripts/app/**/*.js',
+
         'tests/**/*.js'
       ],
       tasks: 'default'

diff --git a/src/bootstrap/less/bootstrap.less b/src/bootstrap/less/bootstrap.less
index aaa3d8a..5c14151 100644 (file)
--- a/src/bootstrap/less/bootstrap.less
+++ b/src/bootstrap/less/bootstrap.less
@@ -15,6 +15,9 @@
 @import "variables.less"; // Modify this for custom colors, font-sizes, etc
 @import "mixins.less";
 
+// Cowhide additions
+@import "cowhide-item-lists.less";
+
 // Grid system and page structure
 @import "scaffolding.less";
 @import "grid.less";

diff --git a/src/bootstrap/less/cowhide-item-lists.less b/src/bootstrap/less/cowhide-item-lists.less
new file mode 100644 (file)
index 0000000..b85498c
--- /dev/null
+++ b/src/bootstrap/less/cowhide-item-lists.less
@@ -0,0 +1,39 @@
+ul.item-list {
+    margin-left: 0;
+
+    li {
+        list-style: none;
+        padding: 16px 8px;
+        background-color: darken(@bodyBackground, 5%);
+        border-left: 1px solid;
+        border-right: 1px solid;
+        border-bottom: 1px solid;
+        border-color: darken(@bodyBackground, 10%);
+
+        &:first-of-type, &:first-child {
+            .border-top-radius(4px);
+            border-top: 1px solid;
+            border-top-color: darken(@bodyBackground, 2.5%);
+        }
+        &:last-of-type, &:first-child {
+            .border-bottom-radius(4px);
+            border-bottom: 1px solid;
+            border-bottom-color: darken(@bodyBackground, 15%);
+        }
+
+        &:hover {
+            background-color: darken(@bodyBackground, 1%);
+        }
+    }
+}
+
+ul.item-list.striped {
+    li {
+        &:nth-child(even), &:nth-of-type(even) {
+            background-color: darken(@bodyBackground, 3%);
+            &:hover {
+                background-color: darken(@bodyBackground, 2%);
+            }
+        }
+    }
+}
\ No newline at end of file

diff --git a/src/cowhide-cyborg.less b/src/cowhide-cyborg.less
index ca2cd97..ec3aff3 100644 (file)
--- a/src/cowhide-cyborg.less
+++ b/src/cowhide-cyborg.less
@@ -1,3 +1,7 @@
 @import "bootstrap/less/bootstrap.less";
+
 @import "themes/cyborg-variables.less";
 @import "themes/cyborg-bootswatch.less";
+
+// TODO: this doesn't seem to work.
+@import "themes/cyborg-item-lists.less";

diff --git a/src/cowhide-default.less b/src/cowhide-default.less
index 3c46a86..b22b632 100644 (file)
--- a/src/cowhide-default.less
+++ b/src/cowhide-default.less
@@ -1 +1 @@
-@import "bootstrap/less/bootstrap.less";
\ No newline at end of file
+@import "bootstrap/less/bootstrap.less";

diff --git a/src/themes/cyborg-item-lists.less b/src/themes/cyborg-item-lists.less
new file mode 100644 (file)
index 0000000..9c8c58f
--- /dev/null
+++ b/src/themes/cyborg-item-lists.less
@@ -0,0 +1,21 @@
+ul.item-list {
+    li {
+        background-color: lighten(@bodyBackground, 5%);
+        border-color: lighten(@bodyBackground, 10%);
+
+        &:first-of-type, &:first-child {
+            border-top-color: lighten(@bodyBackground, 2.5%);
+        }
+        &:last-of-type, &:first-child {
+            border-bottom-color: lighten(@bodyBackground, 15%);
+        }
+    }
+}
+
+ul.item-list.striped {
+    li {
+        &:nth-child(even), &:nth-of-type(even) {
+            background-color: lighten(@bodyBackground, 3%);
+        }
+    }
+}
\ No newline at end of file