Various fixer uppers

static/css/dss.main.css

@@ -782,3 +782,10 @@ img.mix-listing-image {
 .btn-group a {
     cursor: pointer;
 }
+
+.truncate {
+    width: 250px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

static/js/dss/apps/sidebar/views/sidebarLeftNav.coffee

@@ -2,6 +2,9 @@
     class Views.SidebarLeftNav extends Marionette.LayoutView
         template: "sidebarleftnav"
 
+        regions:
+            nowPlayingRegion: '#sidebar-shortcuts-now-playing'
+
         events:
             "click #button-mute": "muteAudio"
             "click #header-random-button": "showRandom"
@@ -14,6 +17,10 @@
         initialize: ->
             @listenTo App.vent, "mix:play", @trackPlaying
             @listenTo App.vent, "mix:pause", @trackPaused
+            @listenTo App.vent, 'mix:init', @mixInit
+
+        onRender: ->
+            $('#sidebar-shortcuts-now-playing', @el).hide()
 
         muteAudio: ->
             if App.audioController.audioState is 0
@@ -36,5 +43,12 @@
         donate: ->
             App.vent.trigger('app:donate')
 
+        mixInit: (model) ->
+            $(@nowPlayingRegion.el).show()
+            @nowPlayingRegion.show(new App.NowPlayingApp.Views.NowPlayingView({
+                source: 'mix',
+                model: model
+            }))
+
     Views.SidebarView
 

static/js/dss/templates/nowplaying.jst

@@ -1,24 +1,14 @@
-<div class="widget-header header-color-pink">
-    <h5>
-        <i class="fa fa-music"></i>
-        Now Playing
-    </h5>
-</div>
-
-<div class="widget-body">
 <div class="profile-activity clearfix">
     <div>
-            <img class="pull-left" alt="mix-image" src="<%= mix_image %>">
-            <a class="user" href="<%= item_url %>" title="<%= title %>"><%= title %></a>
+        <img class="pull-left" alt="Alex Doe's avatar" src="<%= mix_image %>">
+        <a class="user" href="#"><%= user_name %></a>
 
-            <div class="time">
-                <i class="fa fa-user bigger-110"></i>
-                <a href="/<%= user_profile_url %>">
-                    <%= user_name %>
-                </a>
+        <div class="truncate pull-left white">
+            <%= title %>
         </div>
     </div>
-        <div class="now-playing-tools action-buttons">
+
+    <div class="tools action-buttons">
         <a id="now-playing-play" class="blue" data-bypass="true">
             <i class="fa fa-play bigger-125"></i>
         </a>
@@ -27,4 +17,3 @@
         </a>
     </div>
 </div>
-</div>

static/js/dss/templates/sidebarleftnav.jst

@@ -30,6 +30,8 @@
     </div>
 </div><!-- /.sidebar-shortcuts -->
 <% } %>
+<div class="sidebar-shortcuts" id="sidebar-shortcuts-now-playing">
+</div>
 
 <ul class="nav nav-list">