[Calf] Uses the 'scrollable' widgets for artist/album/song lists.

diff --git a/examples/calf/index.html b/examples/calf/index.html
index fd8f472..95566ae 100644 (file)
--- a/examples/calf/index.html
+++ b/examples/calf/index.html
@@ -75,13 +75,15 @@
     </script>
 
     <script type="text/x-handlebars" data-template-name="artists">
-      {{#if controller.arrangedContent}}
-        {{#each artist in controller.arrangedContent}}
-          {{view Calf.ArtistView contentBinding="artist"}}
-        {{/each}}
-      {{else}}
-        <li>No artists in your library</li>
-      {{/if}}
+      <ul class="item-list striped">
+        {{#if controller.arrangedContent}}
+          {{#each artist in controller.arrangedContent}}
+            {{view Calf.ArtistView contentBinding="artist"}}
+          {{/each}}
+        {{else}}
+          <li>No artists in your library</li>
+        {{/if}}
+      </ul>
     </script>
 
     <script type="text/x-handlebars" data-template-name="artist">
@@ -98,13 +100,15 @@
     </script>
 
     <script type="text/x-handlebars" data-template-name="albums">
-      {{#if controller.arrangedContent}}
-        {{#each album in controller.arrangedContent}}
-          {{view Calf.AlbumView contentBinding="album"}}
-        {{/each}}
-      {{else}}
-        <li>No albums found.</li>
-      {{/if}}
+      <ul class="item-list striped">
+        {{#if controller.arrangedContent}}
+          {{#each album in controller.arrangedContent}}
+            {{view Calf.AlbumView contentBinding="album"}}
+          {{/each}}
+        {{else}}
+          <li>No albums found.</li>
+        {{/if}}
+      </ul>
     </script>
 
     <script type="text/x-handlebars" data-template-name="album">
@@ -114,13 +118,15 @@
     </script>
 
     <script type="text/x-handlebars" data-template-name="songs">
-      {{#if controller.arrangedContent}}
-        {{#each song in controller.arrangedContent}}
-          <li>{{view Calf.SongView contentBinding="song"}}</li>
-        {{/each}}
-      {{else}}
-        <li>No songs found.</li>
-      {{/if}}
+      <ul class="item-list striped">
+        {{#if controller.arrangedContent}}
+          {{#each song in controller.arrangedContent}}
+            <li>{{view Calf.SongView contentBinding="song"}}</li>
+          {{/each}}
+        {{else}}
+          <li>No songs found.</li>
+        {{/if}}
+      </ul>
     </script>
 
     <script type="text/x-handlebars" data-template-name="song">
@@ -208,4 +214,4 @@
     <!-- This file contains other code needed by this example app. -->
     <script src="javascripts/calf.js"></script>
   </body>
-</html>
\ No newline at end of file
+</html>

diff --git a/examples/calf/javascripts/app/views/albums.js b/examples/calf/javascripts/app/views/albums.js
index 723d5b6..e22788a 100644 (file)
--- a/examples/calf/javascripts/app/views/albums.js
+++ b/examples/calf/javascripts/app/views/albums.js
@@ -3,9 +3,13 @@
 
     var AlbumsView = app.Page.extend({
         templateName: 'albums',
-        tagName: 'ul',
-        classNames: ['item-list', 'striped']
+        tagName: 'div',
+        classNames: ['library', 'scrollable'],
+
+        didInsertElement: function() {
+          this.$().ch_scrollable('enable');
+        }
     });
 
     app.AlbumsView = AlbumsView;
-})(window.Calf, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);

diff --git a/examples/calf/javascripts/app/views/artists.js b/examples/calf/javascripts/app/views/artists.js
index ea47119..286fefc 100644 (file)
--- a/examples/calf/javascripts/app/views/artists.js
+++ b/examples/calf/javascripts/app/views/artists.js
@@ -3,9 +3,13 @@
 
     var ArtistsView = app.Page.extend({
         templateName: 'artists',
-        tagName: 'ul',
-        classNames: ['item-list', 'striped']
+        tagName: 'div',
+        classNames: ['library', 'scrollable'],
+
+        didInsertElement: function() {
+          this.$().ch_scrollable('enable');
+        }
     });
 
     app.ArtistsView = ArtistsView;
-})(window.Calf, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);

diff --git a/examples/calf/javascripts/app/views/songs.js b/examples/calf/javascripts/app/views/songs.js
index e8654f1..543f14b 100644 (file)
--- a/examples/calf/javascripts/app/views/songs.js
+++ b/examples/calf/javascripts/app/views/songs.js
@@ -3,9 +3,13 @@
 
     var SongsView = app.Page.extend({
         templateName: 'songs',
-        tagName: 'ul',
-        classNames: ['item-list', 'striped']
+        tagName: 'div',
+        classNames: ['library', 'scrollable'],
+
+        didInsertElement: function() {
+          this.$().ch_scrollable('enable');
+        }
     });
 
     app.SongsView = SongsView;
-})(window.Calf, window.Ember);
\ No newline at end of file
+})(window.Calf, window.Ember);

diff --git a/examples/calf/styles/calf.css b/examples/calf/styles/calf.css
index 43093de..58ae3fa 100644 (file)
--- a/examples/calf/styles/calf.css
+++ b/examples/calf/styles/calf.css
@@ -1,9 +1,13 @@
 #application {
-    height: 540px;
     overflow: hidden;
     margin-bottom: 30px;
 }
 
+.library {
+    height: 300px;
+    overflow-y: auto;
+}
+
 .now-playing {
     position: relative;
 }
@@ -29,4 +33,4 @@
     float: right;
     margin-left: 15px;
     margin-right: 15px;
-}
\ No newline at end of file
+}