From 18deb7b13add8d0ed266c45ac3e5d9f624657e34 Mon Sep 17 00:00:00 2001 From: Daniel Weigh Date: Sat, 15 Feb 2014 15:55:58 -0500 Subject: [PATCH 1/2] * fix admin redirect --- admin/app/admin/promo_buzz.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/admin/app/admin/promo_buzz.rb b/admin/app/admin/promo_buzz.rb index ff27e33da..5c841545b 100644 --- a/admin/app/admin/promo_buzz.rb +++ b/admin/app/admin/promo_buzz.rb @@ -47,7 +47,7 @@ ActiveAdmin.register JamRuby::PromoBuzz, :as => 'Buzz' do def create promo = PromoBuzz.create_with_params(params[:jam_ruby_promo_buzz]) - redirect_to('/admin/admin/buzzs') + redirect_to('/admin/buzzs') end def edit @@ -60,7 +60,7 @@ ActiveAdmin.register JamRuby::PromoBuzz, :as => 'Buzz' do def update resource.update_with_params(params[:jam_ruby_promo_buzz]).save! - redirect_to('/admin/admin/buzzs') + redirect_to('/admin/buzzs') end end From 6124cb20fbe591387dc558a16aa473105fb15adb Mon Sep 17 00:00:00 2001 From: Daniel Weigh Date: Sat, 15 Feb 2014 16:11:06 -0500 Subject: [PATCH 2/2] VFRS-1047 Implement the new landing page. Carousel in place -- edit slides in users_controller.erb. At some point, should probably migrate to admin db. Minor rework to make user/* (web.erb) pages appear correctly in firefox -- float issues. Buzz should work (may need some styling) Latest is stubbed out. --- .../assets/javascripts/jquery.carousel-1.1.js | 945 ++++++++++++++++++ .../javascripts/jquery.mousewheel-3.1.9.js | 201 ++++ web/app/assets/javascripts/web/videoDialog.js | 55 + web/app/assets/javascripts/web/web.js | 3 + web/app/assets/javascripts/web/welcome.js | 18 + .../stylesheets/client/screen_common.css.scss | 17 + web/app/assets/stylesheets/web/main.css.scss | 15 +- .../assets/stylesheets/web/welcome.css.scss | 323 ++++++ web/app/controllers/users_controller.rb | 28 +- web/app/views/layouts/web.erb | 16 +- web/app/views/users/_buzz.html.erb | 14 + web/app/views/users/_buzz_item.html.erb | 8 + web/app/views/users/_feed_item.html.erb | 84 ++ web/app/views/users/_latest.html.erb | 16 + web/app/views/users/_slide.html.erb | 5 + web/app/views/users/_videoDialog.html.erb | 18 + web/app/views/users/_video_carousel.html.erb | 12 + web/app/views/users/welcome.html.erb | 38 +- 18 files changed, 1795 insertions(+), 21 deletions(-) create mode 100644 web/app/assets/javascripts/jquery.carousel-1.1.js create mode 100644 web/app/assets/javascripts/jquery.mousewheel-3.1.9.js create mode 100644 web/app/assets/javascripts/web/videoDialog.js create mode 100644 web/app/views/users/_buzz.html.erb create mode 100644 web/app/views/users/_buzz_item.html.erb create mode 100644 web/app/views/users/_feed_item.html.erb create mode 100644 web/app/views/users/_latest.html.erb create mode 100644 web/app/views/users/_slide.html.erb create mode 100644 web/app/views/users/_videoDialog.html.erb create mode 100644 web/app/views/users/_video_carousel.html.erb diff --git a/web/app/assets/javascripts/jquery.carousel-1.1.js b/web/app/assets/javascripts/jquery.carousel-1.1.js new file mode 100644 index 000000000..890040e08 --- /dev/null +++ b/web/app/assets/javascripts/jquery.carousel-1.1.js @@ -0,0 +1,945 @@ + +(function($){ + + var CarouselEvo = function(element, options){ + var settings = $.extend({}, $.fn.carousel.defaults, options), + self = this, + element = $(element), + carousel = element.children('.slides'); + + carousel.children('div').addClass('slideItem'); + var slideItems = carousel.children('.slideItem'), + slideImage = slideItems.find('img'), + currentSlide = 0, + targetSlide = 0, + numberSlides = slideItems.length, + isAnimationRunning = false, + pause = true ; + videos = { + youtube: { + reg: /youtube\.com\/watch/i, + split: '=', + index: 1, + url:'http://www.youtube.com/embed/%id%?autoplay=1&fs=1&rel=0'}, + vimeo: { + reg: /vimeo\.com/i, + split: '/', + index: 3, + url: 'http://player.vimeo.com/video/%id%?portrait=0&autoplay=1'} + }; + + this.current = currentSlide; + this.length = numberSlides; + + this.init = function(){ + var o = settings ; + + initSlides(); + + if (o.directionNav == true){ + initDirectionButton(); + } + + if (o.buttonNav != 'none'){ + initButtonNav(); + } + + if (o.reflection == true){ + initReflection(); + } + + if (o.shadow == true){ + initShadow(); + } + + if (o.description == true){ + initDesc(); + } + + if (o.autoplay == true){ + runAutoplay(); + } + + initVideo(); + + }; + + /* _________________________________ */ + + /* IMAGE */ + /* _________________________________ */ + + var setImageSize = function(p){ + var o = settings, + n = numberSlides , + w = o.frontWidth, + h = o.frontHeight, + ret; + + if (p != 0){ + if (o.hAlign == 'center') { + if (p > 0 && p <= Math.ceil((n-1)/2)){ + var front = setImageSize(p-1); + w = o.backZoom * front.width ; + h = o.backZoom * front.height ; + } + else { + var sz = setImageSize(n-p); + w = sz.width; + h = sz.height; + } + } + else { + //left & right + if (p == (n -1)){ + w = o.frontWidth / o.backZoom; + h = o.frontHeight / o.backZoom; + } + else{ + var front = setImageSize(p-1); + w = o.backZoom * front.width ; + h = o.backZoom * front.height ; + } + } + } + + return ret = {width:w, height:h}; + }; + + /* _______________________________ */ + + /* SLIDE */ + /* _______________________________ */ + + var setSlideSize = function(p){ + var o = settings, + n = numberSlides , + w = o.frontWidth, + h = o.frontHeight + reflectionHeight(p) + shadowHeight(p), + ret; + + if (p != 0){ + if (o.hAlign == 'center'){ + if (p > 0 && p <= Math.ceil((n-1)/2)){ + var front = setImageSize(p-1); + w = o.backZoom * front.width ; + h = (o.backZoom * front.height) + reflectionHeight(p) + shadowHeight(p); + } + else { + var sz = setSlideSize(n - p); + w = sz.width; + h = sz.height; + } + } + else { + //left & right + if (p == (n -1)){ + w = o.frontWidth / o.backZoom; + h = (o.frontHeight/o.backZoom) + reflectionHeight(p) + shadowHeight(p); + } + else{ + var front = setImageSize(p-1); + w = o.backZoom * front.width ; + h = (o.backZoom * front.height) + reflectionHeight(p) + shadowHeight(p); + } + } + } + + return ret = {width:w, height:h}; + }; + + var getMargin = function(p){ + var o = settings, + vm, hm, ret, + iz = setImageSize(p); + + vm = iz.height * o.vMargin; + hm = iz.width * o.hMargin; + return ret = {vMargin:vm, hMargin:hm}; + }; + + var centerPos = function(p){ + var o = settings, + c = topPos(p-1) + (setImageSize(p-1).height - setImageSize(p).height)/2; + + if (o.hAlign != 'center'){ + if (p == (numberSlides -1)){ + c = o.top - ((setImageSize(p).height - setImageSize(0).height)/2); + } + } + return c; + }; + + var topPos = function(p){ + var o = settings, + t = o.top, + vm = getMargin(p).vMargin ; + + if (o.vAlign == 'bottom'){ + t = o.bottom; + } + + if (p != 0){ + if (o.hAlign == 'center'){ + if (p > 0 && p <= Math.ceil((numberSlides-1)/2)){ + if (o.vAlign == 'center'){ + t = centerPos(p); + } + else { + t = centerPos(p) + vm; + } + } + else{ + t = topPos(numberSlides -p); + } + } + else { + if (p == (numberSlides -1)){ + if (o.vAlign == 'center'){ + t = centerPos(p); + } + else { + t = centerPos(p) - vm; + } + } + else{ + if (o.vAlign == 'center'){ + t = centerPos(p); + } + else { + t = centerPos(p) + vm ; + } + } + } + } + + return t; + }; + + var horizonPos = function(p){ + var o = settings, + n = numberSlides , + hPos, + mod = n % 2, + endSlide = n / 2, + + +// hm = getMargin(p).hMargin+80; // +80 was added to move the images more out + hm = getMargin(p).hMargin; // @FIXME NOTE: Original line is above. JK tweak. + + if (p == 0){ + if (o.hAlign == 'center'){ + hPos = (o.carouselWidth - o.frontWidth)/2; + } + else { + hPos = o.left ; + if (o.hAlign == 'right'){ + hPos = o.right; + } + } + } + else { + if (o.hAlign == 'center'){ + if (p > 0 && p <= Math.ceil((n-1)/2)){ + hPos = horizonPos(p-1) - hm; + + if (mod == 0){ + if (p == endSlide){ + hPos = (o.carouselWidth - setSlideSize(p).width)/2 ; + } + } + } + else{ + hPos = o.carouselWidth - horizonPos(n-p) - setSlideSize(p).width; + } + } + else { + if (p == (n -1)){ + hPos = horizonPos(0) - (setSlideSize(p).width - setSlideSize(0).width)/2 - hm ; + } + else{ + hPos = horizonPos(p-1) + (setSlideSize(p-1).width - setSlideSize(p).width)/2 + hm; + } + } + } + + return hPos; + }; + + var setOpacity = function(p){ + var o = settings, + n = numberSlides , + opc = 1, + hiddenSlide = n - o.slidesPerScroll; + + if (hiddenSlide < 2){ + hiddenSlide = 2; + } + + if (o.hAlign == 'center'){ + var s1 = (n-1)/2, + hs2 = hiddenSlide / 2, + lastSlide1 = (s1+1) - hs2, + lastSlide2 = s1 + hs2; + + if (p == 0){ + opc = 1; + } + else { + opc = o.backOpacity; + if (p >= lastSlide1 && p <= lastSlide2){ + opc = 0; + } + } + } + else { //left & right + if (p == 0){ + opc = 1; + } + else { + opc = o.backOpacity; + if (!(p < (n - hiddenSlide))){ + opc = 0 ; + } + } + } + + return opc; + }; + + var setSlidePosition = function(p) { + var pos = new Array(), + o = settings, + n = numberSlides ; + + for (var i = 0; i < n; i++){ + var sz = setSlideSize(i); + if (o.hAlign == 'left'){ + pos[i] = {width:sz.width, height:sz.height, top:topPos(i), left:horizonPos(i), opacity:setOpacity(i)}; + if (o.vAlign == 'bottom'){ + pos[i] = {width:sz.width, height:sz.height, bottom:topPos(i), left:horizonPos(i), opacity:setOpacity(i)} ; + } + } + else { + pos[i] = {width:sz.width, height:sz.height, top:topPos(i), right:horizonPos(i), opacity:setOpacity(i)} ; + if (o.vAlign == 'bottom'){ + pos[i] = {width:sz.width, height:sz.height, bottom:topPos(i), right:horizonPos(i), opacity:setOpacity(i)} ; + } + } + } + return pos[p]; + }; + + // returns the slide # at location i of the ith image + var slidePos = function(i) { + var cs = currentSlide, + pos = i - cs; + + if (i < cs){ + pos += numberSlides ; + } + + return pos; + }; + + //returns z-index + var zIndex = function(i){ + var z, + n = numberSlides , + hAlign = settings.hAlign; + + if (hAlign == 'left' || hAlign == 'right'){ + if (i == (n - 1)){ + z = n - 1; + } + else { + z = n - (2+i); + } + } + else { + if (i >= 0 && i <= ((n - 1)/2)){ + z = (n - 1) - i; + } + else { + z = i - 1 ; + } + } + return z; + }; + + var slidesMouseOver = function(event){ + var o = settings ; + if (o.autoplay == true && o.pauseOnHover == true){ + stopAutoplay(); + } + }; + + var slidesMouseOut = function(event){ + var o = settings ; + if (o.autoplay == true && o.pauseOnHover == true){ + if (pause == true){ + runAutoplay(); + } + } + }; + + var initSlides = function(){ + var o = settings, + n = numberSlides, + images = slideImage ; + + carousel + .css({'width':o.carouselWidth+'px', 'height':o.carouselHeight+'px'}) + .bind('mouseover', slidesMouseOver) + .bind('mouseout', slidesMouseOut); + + for (var i = 0; i < n; i++){ + var item = slideItems.eq(i); + item + .css(setSlidePosition(slidePos(i))) + .bind('click', slideClick); + + slideItems.eq(slidePos(i)).css({'z-index':zIndex(i)}); + images.eq(i).css(setImageSize(slidePos(i))); + + var op = item.css('opacity'); + if (op == 0){ + item.hide(); + } + else { + item.show(); + } + } + + // mouse wheel navigation + if (o.mouse == true){ + carousel.mousewheel(function(event, delta){ + if (delta > 0){ + goTo(currentSlide-1, true, false); + return false ; + } + else if (delta < 0){ + goTo(currentSlide+1, true, false); + return false ; + } + }); + } + }; + + var hideItem = function(slide){ + var op = slide.css('opacity'); + if (op == 0){ slide.hide();} + }; + + var goTo = function(index, isStopAutoplay, isPause){ + if (isAnimationRunning == true){return;} + + var o = settings, + n = numberSlides ; + + if (isStopAutoplay == true){ + stopAutoplay(); + } + + targetSlide = index; + if (targetSlide == n){ targetSlide = 0; } + if (targetSlide == -1){ targetSlide = n - 1; } + o.before(self); + animateSlide(); + pause = isPause ; + }; + + var animateSlide = function(){ + var o = settings, + n = numberSlides; + + if (isAnimationRunning == true ){ return ; } + + if (currentSlide == targetSlide){ + isAnimationRunning = false ; + return ; + } + + isAnimationRunning = true ; + + hideDesc(currentSlide); + + // direction + if (currentSlide > targetSlide) { + var forward = n - currentSlide + targetSlide, + backward = currentSlide - targetSlide; + } + else { + var forward = targetSlide - currentSlide, + backward = currentSlide + n - targetSlide ; + } + + if (forward > backward) { + dir = -1; + } + else { + dir = 1; + } + + currentSlide += dir; + if (currentSlide == n) { currentSlide = 0; } + if (currentSlide == -1) { currentSlide = n - 1; } + + hideVideoOverlay(); + buttonNavState(); + showDesc(currentSlide); + + //animation + for (var i = 0; i < n; i++){ + animateImage(i); + } + + }; + + var animateImage = function(i){ + var o = settings, + item = slideItems.eq(i), + pos = slidePos(i); + + item.show(); + item.animate(setSlidePosition(pos), o.speed, 'linear', function(){ + hideItem($(this)); + if (i == numberSlides - 1){ + isAnimationRunning = false ; + if (currentSlide != targetSlide){ + animateSlide(); + } + else { + self.current = currentSlide ; + showVideoOverlay(currentSlide); + o.after(self); + } + } + }); + + item.css({'z-index':zIndex(pos)}); + slideImage.eq(i).animate(setImageSize(pos), o.speed, 'linear'); + + if (o.reflection == true){ + animateReflection(o, item, i); + } + + if (o.shadow == true){ + animateShadow(o, item, i); + } + }; + + var slideClick = function(event){ + var $this = $(this); + if ($this.index() != currentSlide){ + goTo($this.index(), true, false); + return false; + } + }; + + /* ________________________________ */ + + /* REFLECTION */ + /* ________________________________ */ + + var reflectionHeight = function(p){ + var h = 0, + o = settings ; + + if (o.reflection == true){ + h = o.reflectionHeight * setImageSize(p).height; + } + + return h ; + }; + + var initReflection = function(){ + var o = settings , + items = slideItems , + images = slideImage , + n = numberSlides, + opc = o.reflectionOpacity, + start = 'rgba('+o.reflectionColor+','+ opc +')', + end = 'rgba('+o.reflectionColor+',1)'; + + var style = ''; + + $(style).appendTo('head'); + + for (var i=0; i < n; i++){ + var src = images.eq(i).attr('src'), + sz = setImageSize(i); + + $('
') + .css({'position':'absolute', 'margin':'0', 'padding':'0', 'border':'none', 'overflow':'hidden', 'left':'0', + 'top':setImageSize(i).height+'px', 'width':'100%', 'height':reflectionHeight(i)}) + .appendTo(items.eq(i)) + .append($('').css({'width':sz.width+'px', 'height':sz.height+'px', 'left':'0','margin':'0', + 'padding':'0', 'border':'none', '-moz-transform':'rotate(180deg) scale(-1,1)', + '-webkit-transform':'rotate(180deg) scale(-1,1)', '-o-transform':'rotate(180deg) scale(-1,1)', + 'transform':'rotate(180deg) scale(-1,1)', 'filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)', + '-ms-filter': 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'})) + .append('
'); + } + }; + + var animateReflection = function(option, item, i){ + var ref = item.children('.reflection'), + speed = option.speed, + sz = setImageSize(slidePos(i)); + + ref.animate({'top':sz.height+'px', 'height':reflectionHeight(slidePos(i))}, speed, 'linear'); + ref.children('img').animate(sz, speed, 'linear'); + }; + + /* ________________________________ */ + + /* SHADOW */ + /* ________________________________ */ + + var shadowHeight = function(p){ + var sh = 0; + if (settings.shadow == true){ + sh = 0.1 * setImageSize(p).height; + } + return sh ; + }; + + var shadowMiddleWidth = function(p){ + var w, + s = slideItems.eq(p).find('.shadow'), + sL = s.children('.shadowLeft'), + sR = s.children('.shadowRight'), + sM = s.children('.shadowMiddle'); + return w = setImageSize(p).width - (sL.width() + sR.width()); + }; + + var initShadow = function(){ + var items = slideItems, + n = numberSlides, + sWidth = setImageSize(0).width, + sInner = '
'; + + if (settings.hAlign != 'center'){ + sWidth = setImageSize(n-1).width; + } + + for (var i = 0; i < n; i++){ + var item = items.eq(i); + $('
') + .css({'width':sWidth+'px', 'z-index':'-1', 'position':'absolute', 'margin':'0', 'padding':'0', 'border':'none', + 'overflow':'hidden', 'left':'0', 'bottom':'0'}) + .append(sInner) + .appendTo(item) + .children('div').css({'position':'relative', 'float':'left'}); + + item.find('.shadow').children('.shadowMiddle').width(shadowMiddleWidth(i)); + } + }; + + var animateShadow = function(option, item, i){ + item.find('.shadow').children('.shadowMiddle').animate({'width':shadowMiddleWidth(slidePos(i))+'px'}, option.speed, 'linear'); + }; + + /* ________________________________ */ + + /* DIRECTION BUTTONS */ + /* ________________________________ */ + + var initDirectionButton = function(){ + var el = element ; + el.append('
'); + el.children('.nextButton').bind('click', function(event){ + goTo(currentSlide+1, true, false); + }); + + el.children('.prevButton').bind('click', function(event){ + goTo(currentSlide-1, true, false); + }); + }; + + /* ________________________________ */ + + /* BUTTON NAV */ + /* ________________________________ */ + + var initButtonNav = function(){ + var el = element, + n = numberSlides, + buttonName = 'bullet', + activeClass = 'bulletActive'; + + if (settings.buttonNav == 'numbers'){ + buttonName = 'numbers'; + activeClass = 'numberActive'; + } + + el.append('
'); + var buttonNav = el.children('.buttonNav') ; + + for (var i = 0; i < n; i++){ + var number = ''; + if (buttonName == 'numbers'){ number = i+1 ; } + + $('
'+number+'
') + .css({'text-align':'center'}) + .bind('click', function(event){ + goTo($(this).index(), true, false); + }) + .appendTo(buttonNav); + } + + var b = buttonNav.children('.'+buttonName); + b.eq(0).addClass(activeClass) + buttonNav.css({'width':numberSlides * b.outerWidth(true), 'height':b.outerHeight(true)}); + }; + + var buttonNavState = function(){ + var o = settings, + buttonNav = element.children('.buttonNav'); + + if (o.buttonNav == 'numbers'){ + //numbers + var numbers = buttonNav.children('.numbers') ; + numbers.removeClass('numberActive'); + numbers.eq(currentSlide).addClass('numberActive'); + } + else { + //bullets + var bullet = buttonNav.children('.bullet') ; + bullet.removeClass('bulletActive'); + bullet.eq(currentSlide).addClass('bulletActive'); + } + }; + + /* ________________________________ */ + + /* DESCRIPTION */ + /* ________________________________ */ + + var initDesc = function(){ + var desc = $(settings.descriptionContainer), + w = desc.width(), + h = desc.height(), + descItems = desc.children('div'), + n = descItems.length; + + for (var i = 0; i < n; i++){ + descItems.eq(i) + .hide() + .css({'position':'absolute', 'top':'0', 'left':'0'}); + } + + descItems.eq(0).show(); + }; + + var hideDesc = function(index){ + var o = settings ; + if (o.description == true){ + var desc = $(o.descriptionContainer); + desc.children('div').eq(index).hide(); + } + }; + + var showDesc = function(index){ + var o = settings ; + if (o.description == true){ + var desc = $(o.descriptionContainer); + desc.children('div').eq(index).show(); + } + }; + + /* ___________________________________ */ + + /* VIDEO */ + /* ___________________________________ */ + + var initSpinner = function(){ + var sz = setImageSize(0); + $('') + .hide() + .css(setSlidePosition(0)) + .css({'width':sz.width+'px', 'height':sz.height+'px', 'z-index':numberSlides+3, 'position':'absolute', 'cursor':'pointer', + 'overflow':'hidden', 'padding':'0', 'margin':'0', 'border':'none'}) + .appendTo(carousel); + }; + + var initVideo = function(){ + initSpinner(); + var sz = setImageSize(0); + + $('
') + .hide() + .css(setSlidePosition(0)) + .css({'width':sz.width+'px', 'height':sz.height+'px', 'z-index':numberSlides+2, 'position':'absolute', + 'cursor':'pointer', 'overflow':'hidden', 'padding':'0', 'margin':'0', 'border':'none'}) + .bind('click', videoOverlayClick) + .appendTo(carousel); + + showVideoOverlay(currentSlide); + }; + + var showVideoOverlay = function(index){ + if (slideItems.eq(index).children('a').hasClass('video')){ + carousel.children('.videoOverlay').show(); + } + }; + + var hideVideoOverlay = function(){ + var car = carousel; + car.children('.videoOverlay') + .hide() + .children().remove(); + car.children('.spinner').hide(); + }; + + var getVideo = function(url){ + var types = videos, + src; + + $.each(types, function(i, e){ + if (url.match(e.reg)){ + var id = url.split(e.split)[e.index].split('?')[0].split('&')[0]; + src = e.url.replace("%id%", id); + } + }); + return src ; + }; + + var addVideoContent = function(){ + var vo = carousel.children('.videoOverlay'), + url = slideItems.eq(currentSlide).children('a').attr('href'), + src = getVideo(url); + + $('') + .attr({'width':vo.width()+'px', 'height':vo.height()+'px', 'src':src, 'frameborder':'0'}) + .bind('load', videoLoad) + .appendTo(vo); + }; + + var videoOverlayClick = function(event){ + addVideoContent(); + carousel.children('.spinner').show(); + $(this).hide(); + if (settings.autoplay == true){ + stopAutoplay(); + pause = false ; + } + }; + + var videoLoad = function(event){ + var car = carousel; + car.children('.videoOverlay').show(); + car.children('.spinner').hide(); + }; + + /* ________________________________ */ + + /* AUTOPLAY */ + /* ________________________________ */ + + var runAutoplay = function(){ + intervalProcess = setInterval(function(){ + goTo(currentSlide+1, false, true); + }, settings.autoplayInterval); + + }; + + var stopAutoplay = function(){ + if (settings.autoplay == true){ + clearInterval(intervalProcess); + return ; + } + }; + + + + //public api + this.prev = function(){ + goTo(currentSlide-1, true, false); + }; + + this.next = function(){ + goTo(currentSlide+1, true, false); + }; + + this.goTo = function(index){ + goTo(index, true, false); + }; + + this.pause = function(){ + stopAutoplay(); + pause = false ; + }; + + this.resume = function(){ + if (settings.autoplay == true){ + runAutoplay(); + } + }; + + }; + + //plugin + $.fn.carousel = function(options){ + + var returnArr = []; + for(var i=0; i < this.length; i++){ + if(!this[i].carousel){ + this[i].carousel = new CarouselEvo(this[i], options); + this[i].carousel.init(); + } + returnArr.push(this[i].carousel); + } + return returnArr.length > 1 ? returnArr : returnArr[0]; + + }; + + //default settings + $.fn.carousel.defaults = { + hAlign:'center', + vAlign:'center', + hMargin:0.4, + vMargin:0.2, + frontWidth:340, + frontHeight:280, + carouselWidth:960, + carouselHeight:360, + left:0, + right:0, + top:0, + bottom:0, + backZoom:0.8, + slidesPerScroll:5, + speed:500, + buttonNav:'none', + directionNav:false, + autoplay:true, + autoplayInterval:5000, + pauseOnHover:true, + mouse:true, + shadow:false, + reflection:false, + reflectionHeight:0.4, + reflectionOpacity:0.5, + reflectionColor:'95,140,60', + description:false, descriptionContainer:'.description', + backOpacity:1, + before: function(carousel){}, + after: function(carousel){} + }; + +})(jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/jquery.mousewheel-3.1.9.js b/web/app/assets/javascripts/jquery.mousewheel-3.1.9.js new file mode 100644 index 000000000..6e8924c70 --- /dev/null +++ b/web/app/assets/javascripts/jquery.mousewheel-3.1.9.js @@ -0,0 +1,201 @@ +/*! Copyright (c) 2013 Brandon Aaron (http://brandon.aaron.sh) + * Licensed under the MIT License (LICENSE.txt). + * + * Version: 3.1.9 + * + * Requires: jQuery 1.2.2+ + */ + +(function (factory) { + if ( typeof define === 'function' && define.amd ) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS style for Browserify + module.exports = factory; + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { + + var toFix = ['wheel', 'mousewheel', 'DOMMouseScroll', 'MozMousePixelScroll'], + toBind = ( 'onwheel' in document || document.documentMode >= 9 ) ? + ['wheel'] : ['mousewheel', 'DomMouseScroll', 'MozMousePixelScroll'], + slice = Array.prototype.slice, + nullLowestDeltaTimeout, lowestDelta; + + if ( $.event.fixHooks ) { + for ( var i = toFix.length; i; ) { + $.event.fixHooks[ toFix[--i] ] = $.event.mouseHooks; + } + } + + var special = $.event.special.mousewheel = { + version: '3.1.9', + + setup: function() { + if ( this.addEventListener ) { + for ( var i = toBind.length; i; ) { + this.addEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = handler; + } + // Store the line height and page height for this particular element + $.data(this, 'mousewheel-line-height', special.getLineHeight(this)); + $.data(this, 'mousewheel-page-height', special.getPageHeight(this)); + }, + + teardown: function() { + if ( this.removeEventListener ) { + for ( var i = toBind.length; i; ) { + this.removeEventListener( toBind[--i], handler, false ); + } + } else { + this.onmousewheel = null; + } + }, + + getLineHeight: function(elem) { + return parseInt($(elem)['offsetParent' in $.fn ? 'offsetParent' : 'parent']().css('fontSize'), 10); + }, + + getPageHeight: function(elem) { + return $(elem).height(); + }, + + settings: { + adjustOldDeltas: true + } + }; + + $.fn.extend({ + mousewheel: function(fn) { + return fn ? this.bind('mousewheel', fn) : this.trigger('mousewheel'); + }, + + unmousewheel: function(fn) { + return this.unbind('mousewheel', fn); + } + }); + + + function handler(event) { + var orgEvent = event || window.event, + args = slice.call(arguments, 1), + delta = 0, + deltaX = 0, + deltaY = 0, + absDelta = 0; + event = $.event.fix(orgEvent); + event.type = 'mousewheel'; + + // Old school scrollwheel delta + if ( 'detail' in orgEvent ) { deltaY = orgEvent.detail * -1; } + if ( 'wheelDelta' in orgEvent ) { deltaY = orgEvent.wheelDelta; } + if ( 'wheelDeltaY' in orgEvent ) { deltaY = orgEvent.wheelDeltaY; } + if ( 'wheelDeltaX' in orgEvent ) { deltaX = orgEvent.wheelDeltaX * -1; } + + // Firefox < 17 horizontal scrolling related to DOMMouseScroll event + if ( 'axis' in orgEvent && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) { + deltaX = deltaY * -1; + deltaY = 0; + } + + // Set delta to be deltaY or deltaX if deltaY is 0 for backwards compatabilitiy + delta = deltaY === 0 ? deltaX : deltaY; + + // New school wheel delta (wheel event) + if ( 'deltaY' in orgEvent ) { + deltaY = orgEvent.deltaY * -1; + delta = deltaY; + } + if ( 'deltaX' in orgEvent ) { + deltaX = orgEvent.deltaX; + if ( deltaY === 0 ) { delta = deltaX * -1; } + } + + // No change actually happened, no reason to go any further + if ( deltaY === 0 && deltaX === 0 ) { return; } + + // Need to convert lines and pages to pixels if we aren't already in pixels + // There are three delta modes: + // * deltaMode 0 is by pixels, nothing to do + // * deltaMode 1 is by lines + // * deltaMode 2 is by pages + if ( orgEvent.deltaMode === 1 ) { + var lineHeight = $.data(this, 'mousewheel-line-height'); + delta *= lineHeight; + deltaY *= lineHeight; + deltaX *= lineHeight; + } else if ( orgEvent.deltaMode === 2 ) { + var pageHeight = $.data(this, 'mousewheel-page-height'); + delta *= pageHeight; + deltaY *= pageHeight; + deltaX *= pageHeight; + } + + // Store lowest absolute delta to normalize the delta values + absDelta = Math.max( Math.abs(deltaY), Math.abs(deltaX) ); + + if ( !lowestDelta || absDelta < lowestDelta ) { + lowestDelta = absDelta; + + // Adjust older deltas if necessary + if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { + lowestDelta /= 40; + } + } + + // Adjust older deltas if necessary + if ( shouldAdjustOldDeltas(orgEvent, absDelta) ) { + // Divide all the things by 40! + delta /= 40; + deltaX /= 40; + deltaY /= 40; + } + + // Get a whole, normalized value for the deltas + delta = Math[ delta >= 1 ? 'floor' : 'ceil' ](delta / lowestDelta); + deltaX = Math[ deltaX >= 1 ? 'floor' : 'ceil' ](deltaX / lowestDelta); + deltaY = Math[ deltaY >= 1 ? 'floor' : 'ceil' ](deltaY / lowestDelta); + + // Add information to the event object + event.deltaX = deltaX; + event.deltaY = deltaY; + event.deltaFactor = lowestDelta; + // Go ahead and set deltaMode to 0 since we converted to pixels + // Although this is a little odd since we overwrite the deltaX/Y + // properties with normalized deltas. + event.deltaMode = 0; + + // Add event and delta to the front of the arguments + args.unshift(event, delta, deltaX, deltaY); + + // Clearout lowestDelta after sometime to better + // handle multiple device types that give different + // a different lowestDelta + // Ex: trackpad = 3 and mouse wheel = 120 + if (nullLowestDeltaTimeout) { clearTimeout(nullLowestDeltaTimeout); } + nullLowestDeltaTimeout = setTimeout(nullLowestDelta, 200); + + return ($.event.dispatch || $.event.handle).apply(this, args); + } + + function nullLowestDelta() { + lowestDelta = null; + } + + function shouldAdjustOldDeltas(orgEvent, absDelta) { + // If this is an older event and the delta is divisable by 120, + // then we are assuming that the browser is treating this as an + // older mouse wheel event and that we should divide the deltas + // by 40 to try and get a more usable deltaFactor. + // Side note, this actually impacts the reported scroll distance + // in older browsers and can cause scrolling to be slower than native. + // Turn this off by setting $.event.special.mousewheel.settings.adjustOldDeltas to false. + return special.settings.adjustOldDeltas && orgEvent.type === 'mousewheel' && absDelta % 120 === 0; + } + +})); \ No newline at end of file diff --git a/web/app/assets/javascripts/web/videoDialog.js b/web/app/assets/javascripts/web/videoDialog.js new file mode 100644 index 000000000..6cca3c8fe --- /dev/null +++ b/web/app/assets/javascripts/web/videoDialog.js @@ -0,0 +1,55 @@ +(function(context,$) { + + "use strict"; + + context.JK = context.JK || {}; + + context.JK.VideoDialog = function(app) { + var logger = context.JK.logger; + var rest = context.JK.Rest(); + var dialogId = '#video-dialog'; + + function events() { + $('.carousel .slides').on('click', '.slideItem', function(e) { + var $self = $(this); + $('#video-dialog-header').html($self.data('video-header')); + $('#video-dialog-iframe').attr('src', $self.data('video-url')); + app.layout.showDialog('video-dialog'); + e.stopPropagation(); + e.preventDefault(); + return false; + }) + + $(dialogId + '-close').click(function(e) { + app.layout.closeDialog('video-dialog'); + $('#video-dialog-header').html(''); + $('#video-dialog-iframe').attr('src',''); + e.stopPropagation(); + return false; + }); + } + + function beforeShow() { + + } + + function afterHide() { + + } + + function initialize(){ + + var dialogBindings = { + 'beforeShow' : beforeShow, + 'afterHide': afterHide + }; + + app.bindDialog('video-dialog', dialogBindings); + + events(); + } + + this.initialize = initialize; + + } +})(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/javascripts/web/web.js b/web/app/assets/javascripts/web/web.js index 9c2c551cb..1ab858bbd 100644 --- a/web/app/assets/javascripts/web/web.js +++ b/web/app/assets/javascripts/web/web.js @@ -6,6 +6,8 @@ //= require jquery.cookie //= require jquery.clipboard //= require jquery.easydropdown +//= require jquery.carousel-1.1 +//= require jquery.mousewheel-3.1.9 //= require AAA_Log //= require AAC_underscore //= require globals @@ -14,6 +16,7 @@ //= require facebook_helper //= require web/signupDialog //= require web/signinDialog +//= require web/videoDialog //= require invitationDialog //= require hoverMusician //= require hoverFan diff --git a/web/app/assets/javascripts/web/welcome.js b/web/app/assets/javascripts/web/welcome.js index 59c9cef42..bc99bd4bb 100644 --- a/web/app/assets/javascripts/web/welcome.js +++ b/web/app/assets/javascripts/web/welcome.js @@ -16,9 +16,27 @@ e.preventDefault(); return false; }); + + $('.carousel').carousel({ + hAlign:'center', + vAlign:'bottom', + vMargin:.5, + reflection:true, + reflectionColor:'0,0,0', + directionNav:false, + frontWidth:424, + frontHeight:263, + carouselWidth:750, + carouselHeight:440, + slidesPerScroll:3, + backOpacity:2 + }); + } + context.JK.WelcomePage = initialize; + })(window, jQuery); \ No newline at end of file diff --git a/web/app/assets/stylesheets/client/screen_common.css.scss b/web/app/assets/stylesheets/client/screen_common.css.scss index 4181455be..b552e5cfe 100644 --- a/web/app/assets/stylesheets/client/screen_common.css.scss +++ b/web/app/assets/stylesheets/client/screen_common.css.scss @@ -370,6 +370,23 @@ small, .small {font-size:11px;} width:239px; } +.overlay-video { + position:absolute; + left:50%; + top:20%; + background-color:#333; + border: 1px solid #ed3618; + z-index:1000; + display:none; + + .overlay-video-inner { + padding:25px; + } + + #video-dialog-close { + margin:0; + } +} .white {color:#fff;} .lightgrey {color:#ccc;} .grey {color:#999;} diff --git a/web/app/assets/stylesheets/web/main.css.scss b/web/app/assets/stylesheets/web/main.css.scss index f9e693c82..e5bfbe5fd 100644 --- a/web/app/assets/stylesheets/web/main.css.scss +++ b/web/app/assets/stylesheets/web/main.css.scss @@ -37,18 +37,18 @@ body.web { .logo-home { width: 298px; - margin-top: 30px; + margin: 30px 0; display: inline-block; } .landing-tag { display:inline-block; - width:360px; + margin-left:70px; + width:400px; h1 { - margin:40px 0; color:#ed3718; - font-size:30px; + font-size:26px; font-weight:300; } } @@ -64,11 +64,14 @@ body.web { .landing-content { background-color:black; width:100%; - padding-bottom:15px; min-height: 366px; position:relative; padding-bottom:30px; + .welcome { + padding-top: 30px; + } + h2 { font-size:24px; color:#ccc; @@ -149,7 +152,7 @@ body.web { .landing-comments { margin-left:140px; width:515px; - + a { text-decoration:none; font-weight:bold; diff --git a/web/app/assets/stylesheets/web/welcome.css.scss b/web/app/assets/stylesheets/web/welcome.css.scss index e69de29bb..75a2cbeee 100644 --- a/web/app/assets/stylesheets/web/welcome.css.scss +++ b/web/app/assets/stylesheets/web/welcome.css.scss @@ -0,0 +1,323 @@ + +@charset "UTF-8"; + +body.web { + .welcome { + .landing-tag { + margin:10px 0 40px; + width:348px; + + h1 { + font-size:30px; + } + } + } + + .buzz { + width: 300px; + position:relative; + .buzz-items { + .buzz-item { + padding: 12px 0; + &:last-child { + padding-bottom:0; + } + } + .buzz-item-text { + padding-left: 78px; // 58px width for image + 20px margin + } + } + } + + .latest { + width: 750px; + position:relative; + * { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; + } + .home-session-list { + width:100%; + height:400px; + border: solid 1px #ed3718; + background-color:#353535; + float:left; + + } + .latest-head { + position: absolute; + padding:20px 20px 12px; + height: 53px; + width:inherit; + } + .latest-body { + height: 100%; + width:100%; + padding-top:53px; + + .session-list-wrapper { + padding: 0 20px; + } + } + } + /* +Item Name: jQuery Carousel Evolution +Author: Mapalla +Author URI: http://codecanyon.net/user/Mapalla +Version: 1.1 +*/ + + /* _______________________________________________ */ + + /* CONTAINER */ + /* _______________________________________________ */ + + .carousel + { + position :relative ; + margin :30px auto 0; + width :auto; + height :auto; + border :none; + overflow : hidden ; +// z-index:0; + } + + /* _______________________________________________ */ + + /* SLIDES */ + /* _______________________________________________ */ + + /* slide container */ + .carousel .slides + { + margin :0; + padding :0; + border :none; + list-style :none; + position :relative ; + overflow :visible ; + } + + /* slide item */ + .carousel .slides .slideItem + { + position :absolute ; + cursor :pointer ; + overflow : hidden; + padding :0; + margin :0; + border :none; + } + + .carousel .slides .slideItem a + { + display: block ; + text-decoration :none; + margin :0; + padding :0; + border :none; + outline :none; + } + + .carousel .slides .slideItem img + { + margin :0; + padding :0; + border :none; + width :100%; + height :100%; + } + + /* _______________________________________________ */ + + /* DIRECTION BUTTON */ + /* _______________________________________________ */ + + .carousel .nextButton + { + position :absolute ; + right :10px; + top :133px; + width :35px; + height :35px; + background : url(web/next_button.png) no-repeat center; + cursor :pointer ; + z-index :9999; + } + + .carousel .prevButton + { + position :absolute ; + left :10px; + top :133px; + width :35px; + height: 35px; + background : url(../images/web/prev_button.png); + cursor :pointer ; + z-index :9999; + } + + /* _______________________________________________ */ + + /* NAVIGATION BUTTON */ + /* _______________________________________________ */ + + /* buttons container */ + .carousel .buttonNav + { + position : relative ; + margin :0 auto; + z-index :999; + } + + /* numbers */ + .carousel .buttonNav .numbers + { + position :relative ; + float :left ; + margin :5px; + color : #828282 ; + cursor :pointer ; + font-weight :bold ; + text-decoration :none; + font-size :1em; + font-family :Arial, Verdana ; + } + + .carousel .buttonNav .numbers:hover + { + color: #000; + text-decoration :underline; + } + + .carousel .buttonNav .numberActive + { + background : none; + color :#000; + cursor :default ; + } + + /* bullets */ + .carousel .buttonNav .bullet + { + position :relative ; + float :left ; + width :16px; + height :16px; + background : url(web/Bullet-White.png) no-repeat center ; + margin :5px; + float :left ; + cursor :pointer ; + } + + .carousel .buttonNav .bullet:hover + { + background : url(../images/web/Bullet-Black.png) no-repeat center ; + } + + .carousel .buttonNav .bulletActive + { + background : url(web/Bullet-Black.png) no-repeat center ; + cursor :default ; + } + + /* ____________________________________________________________ */ + + /* VIDEO */ + /* ____________________________________________________________ */ + + .carousel .slides .videoOverlay + { + background :url(video.png) no-repeat center; /* play button */ + } + + .carousel .slides .spinner + { + background : #000 url(loading.gif) no-repeat center; /* video preloader */ + } + + /* _____________________________ * + + /* SHADOW */ + /* _____________________________ */ + + .carousel .shadow + { + width :100%; + height :82px; + } + + .carousel .shadow .shadowLeft + { + background : url(web/shadowLeft.png) no-repeat; + width :100px; + height :82px; + + /* fix png problems in ie */ + -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowLeft.png, sizingmethod=scale)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowLeft.png, sizingmethod=scale); /* IE6 & 7 */ + } + + .carousel .shadow .shadowMiddle + { + height :82px; + background:url(web/shadowTile.png) repeat-x; + + /* fix png problems in ie */ + -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowTile.png, sizingmethod=scale)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowTile.png, sizingmethod=scale); /* IE6 & 7 */ + } + + + .carousel .shadow .shadowRight + { + width :100px; + height :82px; + background:url(web/shadowRight.png) no-repeat; + + /* fix png problems in ie */ + -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../images/web/shadowRight.png, sizingmethod=scale)"; /* IE8 */ + filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=web/shadowRight.png, sizingmethod=scale); /* IE6 & 7 */ + } + + /* ____________________________________________________________ */ + + /* REFLECTION GRADIENT */ + /* ____________________________________________________________ */ + + /* gradient color for Opera */ +// .carousel .gradient +// { +// background-image :url(gradient.svg); +// } +// .carousel { +// position: relative; +// margin: 0 auto; +// width: auto; +// height: auto; +// border: none; +// overflow: hidden; +// z-index: 0; +// +// .slides { +// margin: 0; +// padding: 0; +// border: none; +// list-style: none; +// position: relative; +// overflow: visible; +// +// .slideItem { +// position: absolute; +// cursor: pointer; +// overflow: hidden; +// padding: 0; +// margin: 0; +// border: none; +// } +// } +// } +} diff --git a/web/app/controllers/users_controller.rb b/web/app/controllers/users_controller.rb index 8e472e5be..7b7b0fe8c 100644 --- a/web/app/controllers/users_controller.rb +++ b/web/app/controllers/users_controller.rb @@ -2,6 +2,16 @@ require 'builder' +class Slide + attr_accessor :img_url, :header, :vid_url + + def initialize(type, img_url, vid_url) + @img_url = img_url # preview image + @header = "jamkazam for #{type}" # + @vid_url = vid_url + '?autoplay=1' + end +end + class UsersController < ApplicationController include ClientHelper @@ -185,7 +195,23 @@ class UsersController < ApplicationController end def welcome - @hide_user_dropdown = true + + @slides = [ + Slide.new("musicians", "web/carousel_musicians.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"), + Slide.new("fans", "web/carousel_fans.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"), + Slide.new("bands", "web/carousel_bands.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"), + Slide.new("musicians", "web/carousel_musicians.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"), + Slide.new("fans", "web/carousel_fans.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s"), + Slide.new("bands", "web/carousel_bands.jpg", "http://www.youtube.com/embed/eaYNM7p6Z5s") + ] + + @promo_buzz = Promotional.where(:type => 'JamRuby::PromoBuzz', :aasm_state => :active) + @promo_latest = Promotional.where(:type => 'JamRuby::PromoLatest', :aasm_state => :active); + + if current_user + + end + @welcome_page = true render :layout => "web" end diff --git a/web/app/views/layouts/web.erb b/web/app/views/layouts/web.erb index ffb8878f2..6f91ffb16 100644 --- a/web/app/views/layouts/web.erb +++ b/web/app/views/layouts/web.erb @@ -35,17 +35,23 @@
+ <% unless @welcome_page %> + <%= render "users/user_dropdown" %> + <% else %> + <%= render "users/video_carousel" %> + <% end %> +
<%= link_to root_path do %> <%= image_tag("web/logo_home.png", :alt => "JamKazam logo", :size => "298x54") %> <% end %>
- <% unless @hide_user_dropdown %> - <%= render "users/user_dropdown" %> + <% unless @welcome_page %> + <%= content_tag(:div, content_tag(:h1,'Play music together over the Internet as if in the same room'), :class => "landing-tag") %> + <%= content_tag(:div,'',:class => "clearall") %> <% end %> -


@@ -66,6 +72,7 @@ <%= render "clients/shareDialog" %> <%= render "users/signupDialog" %> <%= render "users/signinDialog" %> + <%= render "users/videoDialog" %> <%= render "clients/notify" %> <%= render "clients/hoverMusician" %> <%= render "clients/hoverFan" %> @@ -111,6 +118,9 @@ var signinDialog = new JK.SigninDialog(JK.app); signinDialog.initialize(); + var videoDialog = new JK.VideoDialog(JK.app); + videoDialog.initialize(); + JK.bindHoverEvents(); }) diff --git a/web/app/views/users/_buzz.html.erb b/web/app/views/users/_buzz.html.erb new file mode 100644 index 000000000..07b08aa61 --- /dev/null +++ b/web/app/views/users/_buzz.html.erb @@ -0,0 +1,14 @@ + + +<%= content_tag(:div, :class => "buzz") do %> + <%= content_tag(:h2, "JamKazam Buzz...") %> +
+ + <%= content_tag(:div, :class => "buzz-items") do %> + <%= render :partial => "buzz_item", :collection => @promo_buzz %> + <% end %> + + +<% end %> + + diff --git a/web/app/views/users/_buzz_item.html.erb b/web/app/views/users/_buzz_item.html.erb new file mode 100644 index 000000000..1fccfc34f --- /dev/null +++ b/web/app/views/users/_buzz_item.html.erb @@ -0,0 +1,8 @@ + + +<%= content_tag(:div, :class => "buzz-item small", :data => { :buzz_item => buzz_item.id}) do %> + <%= content_tag(:div, image_tag(buzz_item.image), :class => "avatar_large mr20") %> + <%= content_tag(:div, buzz_item.text_long, :class => "buzz-item-text") %> + <%= content_tag(:div, "--#{buzz_item.text_short}", :class => "right", :style => "margin-top:6px;") %> + <%= content_tag(:div, nil, :class => "clearall") %> +<% end %> diff --git a/web/app/views/users/_feed_item.html.erb b/web/app/views/users/_feed_item.html.erb new file mode 100644 index 000000000..a75e92783 --- /dev/null +++ b/web/app/views/users/_feed_item.html.erb @@ -0,0 +1,84 @@ + +<%= content_tag(:div, :class => "feed-entry") do %> + + + <%= content_tag(:div, image_tag(src="images/content/avatar_band1.jpg")) %> + + + +
+
RECORDING
+
Tammany Hall
+
An Hour Ago
+
+ + +
+
Twelve Weeks
+
A straight-up guitar-driven blues track. + +
+
+ + +
+ +
+ + + + + +
+ + +
0:00
+ + +
+
+
+ + +
4:59
+
+ + + +
+ 1:23 +
+
+ + + +
Blues
+
80     12     35       Details

+ + + + +
+ +

+ +<% end %> + \ No newline at end of file diff --git a/web/app/views/users/_latest.html.erb b/web/app/views/users/_latest.html.erb new file mode 100644 index 000000000..81e3a6fd3 --- /dev/null +++ b/web/app/views/users/_latest.html.erb @@ -0,0 +1,16 @@ + + +<%= content_tag(:div, :class => "latest") do %> + <%= content_tag(:div, '', :class => "home-session-list") do %> + <%= content_tag(:h2, "Latest Sessions & Recordings", :class => "latest-head") %> + + <%= content_tag(:div, :class => "latest-body") do %> + <%= content_tag(:div, :class => "session-list-wrapper content-scroller") do %> + <%= render :partial => "feed_item", :collection => @promo_buzz %> + <% end %> + <% end %> + + <% end %> +<% end %> + + diff --git a/web/app/views/users/_slide.html.erb b/web/app/views/users/_slide.html.erb new file mode 100644 index 000000000..7389a75a8 --- /dev/null +++ b/web/app/views/users/_slide.html.erb @@ -0,0 +1,5 @@ + + +<%= content_tag(:div, :data => { :video_header => slide.header, :video_url => slide.vid_url}) do %> + <%= image_tag(slide.img_url, :alt => slide.header) %> +<% end %> diff --git a/web/app/views/users/_videoDialog.html.erb b/web/app/views/users/_videoDialog.html.erb new file mode 100644 index 000000000..bc2a72099 --- /dev/null +++ b/web/app/views/users/_videoDialog.html.erb @@ -0,0 +1,18 @@ + + +
+ + +
+

+
X CLOSE
+
+ + +
+ +
+ + +
+ \ No newline at end of file diff --git a/web/app/views/users/_video_carousel.html.erb b/web/app/views/users/_video_carousel.html.erb new file mode 100644 index 000000000..410a2f9ad --- /dev/null +++ b/web/app/views/users/_video_carousel.html.erb @@ -0,0 +1,12 @@ + + +<%= content_tag(:div, :class => "carousel right") do %> + + <%= content_tag(:div, :class => "slides") do %> + <%= render :partial => "slide", :collection => @slides %> + <% end %> + + +<% end %> + + diff --git a/web/app/views/users/welcome.html.erb b/web/app/views/users/welcome.html.erb index 9fa795817..209d57544 100644 --- a/web/app/views/users/welcome.html.erb +++ b/web/app/views/users/welcome.html.erb @@ -1,17 +1,33 @@ -<%= content_tag(:div, :class => "landing-tag") do -%> - <%= content_tag(:h1, "Play music together over the Internet as if in the same room") %> +<%= content_tag(:div, :class => "welcome") do -%> + <%= content_tag(:div, :class => "landing-tag") do -%> + <%= content_tag(:h1, "Play music together over the Internet as if in the same room") %> + <% end %> + <% end %> -
- <% content_for :after_black_bar do %> - <%= content_tag(:div, :class => "home-questions") do -%> - Have questions about how JamKazam works? - Here are some answers. + <%= content_tag(:div, '', :style =>"padding-top:20px;") do %> + + + + + <%= content_tag(:div, render(:partial => "buzz"), :class => "right") %> + + + <%= content_tag(:div, render(:partial => "latest"), :class => "left") %> + + <%= content_tag(:div, '', :class => "clearall") %> + + <%= content_tag(:div, :class => "home-questions") do -%> + Have questions about how JamKazam works? + Here are some answers. + <% end %> <% end %> <% end %>