From d98bc2d210c05ff48624da627b27dd0db5e72301 Mon Sep 17 00:00:00 2001 From: Seth Call Date: Fri, 28 Feb 2014 06:40:19 +0000 Subject: [PATCH] * VRFS-1248 - rolled back --- web/app/assets/javascripts/tickDuration.js | 19 ++ .../stylesheets/easydropdown_jk.css.scss | 2 +- .../stylesheets/web/audioWidgets.css.scss | 197 ++++++++++++++++++ 3 files changed, 217 insertions(+), 1 deletion(-) create mode 100644 web/app/assets/javascripts/tickDuration.js create mode 100644 web/app/assets/stylesheets/web/audioWidgets.css.scss diff --git a/web/app/assets/javascripts/tickDuration.js b/web/app/assets/javascripts/tickDuration.js new file mode 100644 index 000000000..e215bb7fd --- /dev/null +++ b/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); + diff --git a/web/app/assets/stylesheets/easydropdown_jk.css.scss b/web/app/assets/stylesheets/easydropdown_jk.css.scss index 8014964f4..ed51ce5a2 100644 --- a/web/app/assets/stylesheets/easydropdown_jk.css.scss +++ b/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%; diff --git a/web/app/assets/stylesheets/web/audioWidgets.css.scss b/web/app/assets/stylesheets/web/audioWidgets.css.scss new file mode 100644 index 000000000..6f27d2e74 --- /dev/null +++ b/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; + } +} \ No newline at end of file