Resolves #288 Resolves #266 Fix the level dancing bug

src/js/views/levelDropdownView.js

@@ -281,7 +281,6 @@ var LevelDropdownView = ContainedBase.extend({
     // also go find the series and update the about
     _.each(this.seriesViews, function(view) {
       if (view.levelIDs.indexOf(id) === -1) {
-        view.resetAbout();
         return;
       }
       view.updateAboutForLevelID(id);
@@ -354,8 +353,7 @@ var SeriesView = BaseView.extend({
   template: _.template($('#series-view').html()),
   events: {
     'click div.levelIcon': 'click',
-    'mouseenter div.levelIcon': 'enterIcon',
-    'mouseleave div.levelIcon': 'leaveIcon'
+    'mouseenter div.levelIcon': 'enterIcon'
   },
 
   initialize: function(options) {
@@ -365,7 +363,11 @@ var SeriesView = BaseView.extend({
     this.levels = LevelStore.getLevelsInSequence(this.name);
 
     this.levelIDs = [];
+    var firstLevelInfo = null;
     _.each(this.levels, function(level) {
+      if (firstLevelInfo === null) {
+        firstLevelInfo = intl.getName(LevelStore.getLevel(level.id));
+      }
       this.levelIDs.push(level.id);
     }, this);
 
@@ -375,6 +377,7 @@ var SeriesView = BaseView.extend({
     this.JSON = {
       displayName: intl.getIntlKey(this.info, 'displayName'),
       about: intl.getIntlKey(this.info, 'about') || " ",
+      levelInfo: firstLevelInfo,
       ids: this.levelIDs
     };
 
@@ -396,13 +399,8 @@ var SeriesView = BaseView.extend({
     return $(element).attr('data-id');
   },
 
-  resetAbout: function() {
-    this.$('p.about').text(intl.getIntlKey(this.info, 'about'))
-      .css('font-style', 'inherit');
-  },
-
   setAbout: function(content) {
-    this.$('p.about').text(content).css('font-style', 'italic');
+    this.$('p.levelInfo').text(content);
   },
 
   enterIcon: function(ev) {
@@ -412,11 +410,10 @@ var SeriesView = BaseView.extend({
 
   updateAboutForLevelID: function(id) {
     var level = LevelStore.getLevel(id);
-    this.setAbout(intl.getName(level));
-  },
-
-  leaveIcon: function() {
-    this.resetAbout();
+    // hack -- parse out the level number from
+    // the ID 
+    var levelNumber = id.replace(/[^0-9]/g, '');
+    this.setAbout(levelNumber + ': ' + intl.getName(level));
   },
 
   click: function(ev) {

src/style/main.css

@@ -865,6 +865,7 @@ div.displayName h3 {
 div.iconHolder {
 }
 
+div.seriesView p.levelInfo,
 div.seriesView p.about {
   margin: 0px;
   padding: 4px;
@@ -872,6 +873,10 @@ div.seriesView p.about {
   color: #CCC;
 }
 
+div.seriesView p.levelInfo {
+  font-style: italic;
+}
+
 div.levelIcon {
   height: 40px;
   width: 40px;

src/template.index.html

@@ -222,6 +222,9 @@
     <p class="about">
       <%= about %>
     </p>
+    <p class="levelInfo">
+      <%= levelInfo %>
+    </p>
     <div class="iconHolder box horizontal">
       <% for (var i = 0; i < ids.length; i++) { %>
         <div class="levelIcon box center centerAlign vertical" id="levelIcon-<%=ids[i]%>" data-id="<%=ids[i]%>">