* VRFS-1248 - rolled back

web/app/assets/javascripts/tickDuration.js

@@ -0,0 +1,19 @@
+(function(context, $) {
+
+  "use strict";
+
+  context.JK = context.JK || {};
+  context.JK.TickDuration = function(customSelector) {
+    setInterval(function() {
+      $.each($(customSelector ? customSelector : '.tick-duration'), function(index, item) {
+        var $duration = $(item);
+        var createdAt = new Date(Number($duration.attr('data-created-at')) * 1000)
+        var millisElapsed = (new Date()).getTime() - createdAt.getTime();
+        $duration.text(context.JK.prettyPrintSeconds( parseInt(millisElapsed / 1000)));
+      });
+    }, 333);
+  }
+
+
+})(window, jQuery);
+

web/app/assets/stylesheets/easydropdown_jk.css.scss

@@ -27,7 +27,7 @@ body.jam {
 
 
   .dropdown-wrapper div.dropdown-container {
-    position: relative;
+    position: absolute;
     height: 0;
     left: -1px;
     top: 100%;

web/app/assets/stylesheets/web/audioWidgets.css.scss

@@ -0,0 +1,197 @@
+@import "client/common.css.scss";
+
+.session-controls {
+  margin-top: 15px;
+  padding: 3px 5px 3px 10px;
+  width: 93%;
+  min-width: 200px;
+  background-color: #242323;
+  position: relative;
+  font-size: 13px;
+  text-align: center;
+  @include border_box_sizing;
+  height: 36px;
+}
+
+.recording-controls {
+  margin-top: 15px;
+  padding: 3px 5px 3px 10px;
+  width: 93%;
+  min-width: 200px;
+  background-color: #242323;
+  position: relative;
+  font-size: 13px;
+  text-align: center;
+  @include border_box_sizing;
+  height: 36px;
+}
+
+.feed-entry {
+  position:relative;
+  display:block;
+  white-space:nowrap;
+  min-width:700px;
+  border-bottom:solid 1px #666;
+  max-height:74px;
+  overflow:hidden;
+  margin-top:20px;
+
+  &:nth-child(1) {
+    margin-top:0;
+  }
+
+  /**
+  &.animate-down {
+    -webkit-transition: max-height height 2s;
+    transition: max-height height 2s;
+    -moz-transition: max-height height 2s;
+    -o-transition: max-height height 2s;
+    -ms-transition: max-height height 2s;
+  }
+
+  &.animate-up {
+    -webkit-transition: max-height height .4s;
+    transition: max-height height .4s;
+    -moz-transition: max-height height .4s;
+    -o-transition: max-height height .4s;
+    -ms-transition: max-height height .4s;
+  }
+  */
+
+  .session-status {
+    float:left;
+    font-size:18px;
+  }
+
+  .inprogress {
+    .session-status {
+      font-size: 15px;
+      color: #cccc00;
+      margin-left:20px;
+    }
+  }
+
+  .recording-current {
+    top:8px;
+  }
+  .session-duration {
+    top:8px;
+  }
+
+  .recording-controls, .session-controls {
+    margin-top:0px;
+    margin-bottom:5px;
+    padding:8px 5px 8px 10px;
+    width:98%;
+    line-height:19px;
+  }
+
+  .session-controls {
+    &.ended {
+      background-color: #471f18;
+
+      .play-button {
+        display:none;
+      }
+    }
+
+    &.inprogress {
+      background-color: #4C742E;
+    }
+  }
+
+  .details {
+    color:#ED3618;
+  }
+
+  .avatar-small {
+    @include content_box_sizing;
+    margin-top:0px;
+    margin-left:0px;
+  }
+
+  .title {
+    font-size:16px;
+    color:#999;
+    margin-bottom:3px;
+  }
+
+  .artist {
+    font-size:12px;
+    font-weight:bold;
+    color:#ccc;
+    margin-bottom:10px;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .name {
+    font-weight:bold;
+    font-size:14px;
+  }
+
+  .description {
+    font-size:12px;
+    white-space:normal;
+    line-height:14px;
+    overflow:hidden;
+    text-overflow:ellipsis;
+    height:60px;
+  }
+
+  .feed-details {
+    vertical-align:middle;
+
+    img {
+      vertical-align:middle;
+    }
+  }
+
+  .play-count {
+    margin-right:10px;
+  }
+
+  .comment-count {
+    margin-right:10px;
+  }
+
+  .like-count {
+    margin-right:10px;
+  }
+
+  .musicians {
+    margin-top:10px;
+    font-size:11px;
+  }
+
+  .musicians td {
+    border-right:none;
+    border-top:none;
+    padding:3px;
+    vertical-align:middle;
+  }
+
+  .musicians a {
+    color:#fff;
+    text-decoration:none;
+  }
+
+  .avatar-tiny {
+    float:left;
+    padding:1px;
+    width:24px;
+    height:24px;
+    background-color:#ed3618;
+    -webkit-border-radius:12px;
+    -moz-border-radius:12px;
+    border-radius:12px;
+  }
+
+  .avatar-tiny img {
+    width: 24px;
+    height: 24px;
+    -webkit-border-radius:12px;
+    -moz-border-radius:12px;
+    border-radius:12px;
+  }
+}