Merge pull request #743 from udiboy1209/master

Fix web plugin scroll and lyrics newline bug

beetsplug/web/static/beets.css

@@ -87,40 +87,55 @@ 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: 36px;
+    height: 98px;
+}
+#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;
 }
 
-#detail dl dt, #detail dl dd {
+#extra-detail {
+    overflow-x: hidden;
+    overflow-y: auto;
+    top: 134px;
+    bottom: 0;
+    right: 0;
+}
+/*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;
 }
 
+
 #player {
     float: left;
     width: 150px;

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>
@@ -80,7 +86,7 @@
                 </dd>
                 <% if (lyrics) { %>
                     <dt>Lyrics</dt>
-                    <dd><%= lyrics %></dd>
+                    <dd class="lyrics"><%= lyrics %></dd>
                 <% } %>
                 <% if (comments) { %>
                     <dt>Comments</dt>