improve detail display and scrollbar in web plugin

Moved track, format, lyrics, etc. to separate div with id 'extra-detail'
so that theses can scroll independent of the main details(Title, Album, Artist).
Split the templates and javascript rendering objects accordingly.

This has a better scrollbar display than the previous commit.

beetsplug/web/static/beets.css

@@ -7,7 +7,7 @@ body {
     left: 0;
     right: 0;
     top: 0;
-    height: 36px;
+    height: 3em;
 
     color: white;
 
@@ -35,7 +35,7 @@ body {
     width: 17em;
 
     position: fixed;
-    top: 36px;
+    top: 3em;
     left: 0;
     bottom: 0;
     margin: 0;
@@ -61,7 +61,7 @@ body {
     width: 17em;
 
     position: fixed;
-    top: 36px;
+    top: 3em;
     left: 0;
     bottom: 0;
     margin: 2.2em 0 0 0;
@@ -87,54 +87,51 @@ body {
     font-size: 0.9em;
 }
 
-#detail {
+
+#main-detail, #extra-detail {
     position: fixed;
-    top: 36px;
-    bottom: 0;
     left: 17em;
     margin: 1.0em 0 0 1.5em;
 }
-#detail .artist, #detail .album, #detail .title {
+#main-detail {
+    top: 3em;
+    height: 6.1em;
+}
+#main-detail .artist, #main-detail .album, #main-detail .title {
     display: block;
 }
-#detail .title {
+#main-detail .title {
     font-size: 1.3em;
     font-weight: bold;
 }
-#detail .albumtitle {
+#main-detail .albumtitle {
     font-style: italic;
 }
 
-/*Fix for correctly displaying line breaks in lyrics*/
-#detail .lyrics {
-    white-space: pre-wrap;
-}
-
-/*Fix for handling overflow of detail div*/
-#detail div {
-    height: 90%;
-}
-
-#detail dl {
+#extra-detail {
     overflow-x: hidden;
     overflow-y: auto;
-    height: inherit;
+    top: 9em;
+    bottom: 0;
+    right: 0;
 }
-
-#detail dl dt, #detail dl dd {
+/*Fix for correctly displaying line breaks in lyrics*/
+#extra-detail .lyrics {
+    white-space: pre-wrap;
+}
+#extra-detail dl dt, #extra-detail dl dd {
     list-style: none;
     margin: 0;
     padding: 0;
 }
-
-#detail dl dt {
+#extra-detail dl dt {
     width: 10em;
     float: left;
     text-align: right;
     font-weight: bold;
     clear: both;
 }
-#detail dl dd {
+#extra-detail dl dd {
     margin-left: 10.5em;
 }
 
@@ -142,7 +139,7 @@ body {
 #player {
     float: left;
     width: 150px;
-    height: 36px;
+    height: 3em;
 }
 #player .play, #player .pause, #player .disabled {
     -webkit-appearance: none;
@@ -155,8 +152,8 @@ body {
     margin: 0;
     text-align: center;
 
-    width: 36px;
-    height: 36px;
+    width: 3em;
+    height: 3em;
 }
 #player .disabled {
     color: #666;

beetsplug/web/static/beets.js

@@ -196,9 +196,10 @@ var ItemEntryView = Backbone.View.extend({
             this.$('.playing').hide();
     }
 });
-var ItemDetailView = Backbone.View.extend({
+//Holds Title, Artist, Album etc.
+var ItemMainDetailView = Backbone.View.extend({
     tagName: "div",
-    template: _.template($('#item-detail-template').html()),
+    template: _.template($('#item-main-detail-template').html()),
     events: {
         'click .play': 'play',
     },
@@ -210,7 +211,15 @@ var ItemDetailView = Backbone.View.extend({
         app.playItem(this.model);
     }
 });
-
+// Holds Track no., Format, MusicBrainz link, Lyrics, Comments etc.
+var ItemExtraDetailView = Backbone.View.extend({
+    tagName: "div",
+    template: _.template($('#item-extra-detail-template').html()),
+    render: function() {
+        $(this.el).html(this.template(this.model.toJSON()));
+        return this;
+    }
+});
 // Main app view.
 var AppView = Backbone.View.extend({
     el: $('body'),
@@ -246,9 +255,12 @@ var AppView = Backbone.View.extend({
         $('#results li').removeClass("selected");
         $(view.el).addClass("selected");
 
-        // Show detail.
-        var detailView = new ItemDetailView({model: view.model});
-        $('#detail').empty().append(detailView.render().el);
+        // Show main and extra detail.
+        var mainDetailView = new ItemMainDetailView({model: view.model});
+        $('#main-detail').empty().append(mainDetailView.render().el);
+
+        var extraDetailView = new ItemExtraDetailView({model: view.model});
+        $('#extra-detail').empty().append(extraDetailView.render().el);
     },
     playItem: function(item) {
         var url = '/item/' + item.get('id') + '/file';

beetsplug/web/templates/index.html

@@ -37,7 +37,10 @@
             </ul>
         </div>
 
-        <div id="detail">
+        <div id="main-detail">
+        </div>
+
+        <div id="extra-detail">
         </div>
 
         <!-- Templates. -->
@@ -45,7 +48,7 @@
             <%= title %>
             <span class="playing">&#9654;</span>
         </script>
-        <script type="text/template" id="item-detail-template">
+        <script type="text/template" id="item-main-detail-template">
             <span class="artist"><%= artist %></span>
             <span class="album">
                 <span class="albumtitle"><%= album %></span>
@@ -55,6 +58,9 @@
 
             <button class="play">&#9654;</button>
 
+            
+        </script>
+        <script type="text/template" id="item-extra-detail-template">
             <dl>
                 <dt>Track</dt>
                 <dd><%= track %>/<%= tracktotal %></dd>