* landing pages in VRFS-2037

This commit is contained in:
Seth Call 2014-08-14 22:23:22 -05:00
commit d34929d70b
35 changed files with 589 additions and 21 deletions

View File

@ -153,7 +153,7 @@ module JamRuby
true
end
def join_the_session(music_session, as_musician, tracks, user, audio_latency)
def join_the_session(music_session, as_musician, tracks, user, audio_latency)
self.music_session_id = music_session.id
self.as_musician = as_musician
self.joining_session = true

View File

@ -87,6 +87,7 @@ group :development, :test do
gem 'execjs', '1.4.0'
gem 'factory_girl_rails', '4.1.0' # in dev because in use by rake task
gem 'database_cleaner', '1.3.0' #in dev because in use by rake task
gem 'slim'
end
group :unix do
gem 'therubyracer' #, '0.11.0beta8'

View File

@ -23,6 +23,14 @@
var shutdownDialog = new JK.ShutdownDialog(app);
shutdownDialog.initialize();
var googleHelper = new JK.GoogleHelper(app);
JK.GoogleHelperInstance = googleHelper;
googleHelper.initialize();
var twitterHelper = new JK.TwitterHelper(app);
JK.TwitterHelperInstance = twitterHelper;
twitterHelper.initialize(gon.global.twitter_public_account);
var facebookHelper = new JK.FacebookHelper(app);
JK.FacebookHelperInstance = facebookHelper;
facebookHelper.initialize(gon.global.facebook_app_id);
@ -35,7 +43,6 @@
JK.TextMessageDialogInstance = textMessageDialog;
textMessageDialog.initialize();
var friendSelectorDialog = new JK.FriendSelectorDialog(app);
JK.FriendSelectorDialogInstance = friendSelectorDialog;
friendSelectorDialog.initialize();

View File

@ -49,13 +49,13 @@
function initialize(fbAppID) {
loginStatusDeferred = $.Deferred();
var fbAppID_ = fbAppID;
window.fbAsyncInit = function() {
window.fbAsyncInit = function() {
FB.init({
appId : fbAppID_,
// channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html',
status : true, // check the login status upon init?
cookie : true, // set sessions cookies to allow server to access the session?
xfbml : false, // parse XFBML tags on this page?
xfbml : true, // parse XFBML tags on this page?
oauth : true // enable OAuth 2.0
});
@ -72,13 +72,19 @@
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
deferredLoginStatus()
.done(function() {
FB.Event.subscribe('edge.create', function(response) {
JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.facebook, JK.clientType());
});
});
}
this.initialize = initialize;
this.promptLogin = promptLogin;
this.deferredLoginStatus = deferredLoginStatus;
this.ready = deferredLoginStatus; // shorter alias for deferredLoginStatus
};
})(window, jQuery);

View File

@ -0,0 +1,23 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.GoogleHelper = function(app) {
var logger = context.JK.logger;
var googleReadyDeferred = null;
var $self = $(this);
var connected = false;
function ready() {
return googleReadyDeferred;
}
function initialize(_twitterPublicAccountName) {
googleReadyDeferred = $.Deferred();
return this;
}
this.initialize = initialize;
this.ready = ready;
};
})(window, jQuery);

View File

@ -22,6 +22,8 @@
//= require globals
//= require AAB_message_factory
//= require facebook_helper
//= require twitter_helper
//= require google_helper
//= require layout
//= require user_dropdown
//= require jamkazam

View File

@ -0,0 +1,45 @@
(function(context,$) {
"use strict";
context.JK = context.JK || {};
context.JK.TwitterHelper = function(app) {
var logger = context.JK.logger;
var twitterReadyDeferred = null;
var $self = $(this);
var connected = false;
function ready() {
return twitterReadyDeferred;
}
function initialize(_twitterPublicAccountName) {
twitterReadyDeferred = $.Deferred();
context.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return context.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
context.twttr.ready(function (twttr) {
// bind events here
twitterReadyDeferred.resolve();
});
ready()
.done(function() {
context.twttr.events.bind('follow', function (event) {
var followedUserId = event.data.user_id;
var followedScreenName = event.data.screen_name;
JK.GA.trackJKSocial(JK.GA.Categories.jkFollow, JK.GA.JKSocialTargets.twitter, JK.clientType());
});
})
return this;
}
this.initialize = initialize;
this.ready = ready;
};
})(window, jQuery);

View File

@ -22,6 +22,8 @@
//= require globals
//= require AAB_message_factory
//= require facebook_helper
//= require twitter_helper
//= require google_helper
//= require web/signup_helper
//= require web/signin_helper
//= require extras

View File

@ -342,7 +342,7 @@ ul.shortcuts {
.tagline {
font-size:30px;
margin-top:35px;
color:#ed3718;
color:#ed3618;
font-weight:300;
width:345px;
clear:left;

View File

@ -516,7 +516,7 @@ ul.shortcuts {
.tagline {
font-size:30px;
margin-top:35px;
color:#ed3718;
color:#ed3618;
font-weight:300;
width:345px;
clear:left;

View File

@ -573,4 +573,24 @@ hr {
body.jam .icheckbox_minimal {
display:inline-block;
position:relative;
}
.follow-links {
.facebook-follow-btn {
margin-right:5px;
margin-top:-2px;
display:inline-block;
}
.twitter-follow-btn {
margin-right:5px;
display:inline-block;
}
.g-follow-btn {
display:inline-block;
}
}

View File

@ -0,0 +1,199 @@
@import "client/common.css.scss";
// landing_page is a a/b testing landing page
// #ed3618 - orange
$headerText: white;
body.web.landing_page {
#profile {
display:none;
}
&.wo_1 {
.landing-content h1 {
margin-left:45px;
}
}
&.wo_3 {
.landing-content h1 {
margin-left:55px;
}
}
&.wb_2 {
.landing-content h1 {
margin-left:120px;
}
}
&.wb_3 {
.landing-content h1 {
margin-left:130px;
}
}
.landing-tag {
font-size:14px;
position: absolute;
left: 60%;
top: 25px;
margin: 0;
h1 {
color: $ColorScreenPrimary !important;
}
}
.landing-content {
h1 {
color: $headerText !important;
font-size:20px;
font-weight:normal;
}
.buzz {
margin-top:55px;
height:268px;
overflow:hidden;
border-color: $color2;
border-style:solid;
border-width:1px;
background-color:$ColorUIBackground;
padding:10px;
h2 {
color: $ColorScreenPrimary !important;
font-size:20px;
}
}
.video-container {
width:75%;
margin:20px 0 30px 0;
position: relative;
padding-bottom: 40.00%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#signup {
margin:10px 0 0 0;
}
.cta-container {
margin-left:11%;
h2 {
margin-left:45px;
}
}
.more-container {
margin-top:35px;
a {
margin-top:40px;
}
.follow-links {
margin-top:40px;
line-height: 10px; // centers all 3 buttons vertically on the same line
margin-left:28px;
}
}
}
&.full {
.column {
float:left;
@include border_box_sizing;
&:nth-child(1) {
width:60%;
}
&:nth-child(2) {
width:40%;
}
}
}
&.tight {
.wrapper {
text-align:center;
}
.video-wrapper {
margin:auto;
}
.landing-content h1 {
text-align:center;
margin:0;
}
.landing-tag {
left:68%;
display:none;
}
.video-container {
width:55%;
margin:20px auto 30px;
position: relative;
padding-bottom: 25.00%;
padding-top: 30px; height: 0; overflow: hidden;
}
.cta-container {
h2 {
margin-left:0;
}
}
.column {
float:left;
@include border_box_sizing;
&:nth-child(1) {
width:50%;
padding-left:19%;
}
&:nth-child(2) {
width:28%;
padding-left:9%;
}
}
.more-container {
margin-top:0;
h2 {
text-align:center;
}
.follow-links {
margin-top:10px;
text-align:center;
margin-left:0;
.social-follow-btn {
display:block;
margin-top:5px;
}
}
}
}
}

View File

@ -26,7 +26,7 @@ body.web {
.home-questions {
font-size: 20px;
color: #ed3718;
color: #ed3618;
padding-top:30px;
padding-bottom:40px;
text-align:center;
@ -49,7 +49,7 @@ body.web {
width:400px;
h1 {
color:#ed3718;
color:#ed3618;
font-size:26px;
font-weight:300;
line-height:30px;
@ -83,7 +83,7 @@ body.web {
.wrapper h1 {
position:relative;
padding-top:15px;
color:#ed3718 !important;
color:#ed3618 !important;
font-weight:normal;
font-size:40px;
}
@ -120,7 +120,7 @@ body.web {
.landing-sidebar {
width:350px;
background:#353535;
border:solid 1px #ed3718;
border:solid 1px #ed3618;
position:absolute;
top:30px;
right:0px;

View File

@ -19,4 +19,5 @@
*= require web/events
*= require users/signinCommon
*= require dialogs/dialog
*= require landings/landing_page
*/

View File

@ -50,7 +50,7 @@ body.web {
top:5px; // XXX remove post release
width:100%;
height:400px;
border: solid 1px #ed3718;
border: solid 1px #ed3618;
background-color:#353535;
float:left;
overflow:hidden;

View File

@ -0,0 +1,53 @@
class LandingsController < ApplicationController
respond_to :html
def watch_bands
@promo_buzz = PromoBuzz.active
if Rails.application.config.use_promos_on_homepage
@promo_latest = PromoLatest.active
else
@promo_latest, start = Feed.index(nil, limit: 10)
end
page = params['p'].to_i
if page == 2
render 'watch_bands_2', layout: 'web'
elsif page == 3
render 'watch_bands_3', layout: 'web'
else
render 'watch_bands_1', layout: 'web'
end
end
def watch_overview
@promo_buzz = PromoBuzz.active
if Rails.application.config.use_promos_on_homepage
@promo_latest = PromoLatest.active
else
@promo_latest, start = Feed.index(nil, limit: 10)
end
page = params['p'].to_i
if page == 2
render 'watch_overview_2', layout: 'web'
elsif page == 3
render 'watch_overview_3', layout: 'web'
else
render 'watch_overview_1', layout: 'web'
end
end
def watch_bands_tight
render 'watch_bands_tight', layout: 'web'
end
def watch_overview_tight
render 'watch_overview_tight', layout: 'web'
end
end

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wb_1')
.column
h1 Watch 6 Bands Play Together from Different Locations
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Need to Know More?
= link_to 'Watch a Video to See How JamKazam Works', landing_wb_path(p: 2), class: 'landing_wb'
br clear="all"

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wb_2')
.column
h1 See How JamKazam Works
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Still Need More Info?
= link_to 'Watch a Video to See How to Get Started', landing_wb_path(p: 3), class: 'landing_wb'
br clear="all"

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wb_3')
.column
h1 See How to Get Started
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/DBo--aj_P1w" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Not a Good Time to Sign Up?
= render :partial => 'users/follow_links'
br clear="all"

View File

@ -0,0 +1,16 @@
- provide(:page_name, 'landing_page tight wbt_1')
h1 Watch 6 Bands Play Together from Different Locations
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
.row
.column
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
.more-container
h2 Not a Good Time to Sign Up?
= render :partial => 'users/follow_links'
br clear="all"

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wo_1')
.column
h1 Watch Video to See How JamKazam Works
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Need to Know More?
= link_to 'Watch 6 Bands Play Using JamKazam', landing_wo_path(p: 2), class: 'landing_wb'
br clear="all"

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wo_2')
.column
h1 Watch 6 Bands Play Together from Different Locations
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/I2reeNKtRjg" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Still Need More Info?
= link_to 'See How to Get Started Using JamKazam', landing_wo_path(p: 3), class: 'landing_wb'
br clear="all"

View File

@ -0,0 +1,17 @@
- provide(:page_name, 'landing_page full wo_3')
.column
h1 See How to Get Started Using JamKazam
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/DBo--aj_P1w" frameborder="0" allowfullscreen
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
= render :partial => "users/buzz", locals: {header: 'From Our Community'}
.more-container
h2 Not a Good Time to Sign Up?
= render :partial => 'users/follow_links'
br clear="all"

View File

@ -0,0 +1,16 @@
- provide(:page_name, 'landing_page tight wot_1')
h1 Watch Overview Video to See How JamKazam Works
.video-wrapper
.video-container
iframe src="//www.youtube.com/embed/ylYcvTY9CVo" frameborder="0" allowfullscreen
.row
.column
.cta-container
h2 It's FREE! Ready to Go?
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.column
.more-container
h2 Not a Good Time to Sign Up?
= render :partial => 'users/follow_links'
br clear="all"

View File

@ -127,6 +127,8 @@
<%= render "shared/ga" %>
<!-- version info: <%= version %> -->
<%= render "shared/twttr" %>
<%= render "shared/facebook_sdk" %>
<!-- version: <%= version %> -->
</body>
</html>

View File

@ -0,0 +1 @@
script src="https://apis.google.com/js/platform.js" async defer

View File

View File

@ -1,11 +1,12 @@
<% header ||= local_assigns[:header] = local_assigns.fetch(:header, 'JamKazam Buzz...') %>
<!-- BEGIN BUZZ -->
<%= content_tag(:div, :class => "buzz") do %>
<%= content_tag(:h2, "JamKazam Buzz...") %>
<%= content_tag(:h2, header) %>
<br>
<!-- BEGIN ITEMS -->
<%= content_tag(:div, :class => "buzz-items") do %>
<%= render :partial => "buzz_item", :collection => @promo_buzz %>
<%= render :partial => "users/buzz_item", :collection => @promo_buzz %>
<% end %>
<!-- END ITEMS -->

View File

@ -0,0 +1,10 @@
.follow-links
.facebook-follow-btn.social-follow-btn
.fb-like data-href="https://www.facebook.com/JamKazam" data-layout="button" data-action="like"
.twitter-follow-btn.social-follow-btn
a href="https://twitter.com/#{Gon.global.twitter_public_account}" class="twitter-follow-button" data-show-count="false"
= "Follow @#{Gon.global.twitter_public_account}"
.g-follow-btn.social-follow-btn
.g-follow data-annotation="none" data-height="20" data-href="https://plus.google.com/106619885929396862606" data-rel="publisher"

View File

@ -0,0 +1,4 @@
.share_links
- [:twitter, :facebook, :google].each do |site|
= link_to(image_tag("content/icon_#{site}.png", :style => "vertical-align:top"), "javascript:void(0)", {'data-site' => site, :class => 'like-link'})
= ' '

View File

@ -7,10 +7,7 @@
= link_to image_tag("web/cta_button.png", :alt => "Sign up now for your free account!"), signup_path, class: "signup", id: "signup"
.clearleft
= link_to "Already have an account?", signin_path, class: "signin", id: "signin"
.share_links
- [:twitter, :facebook, :google].each do |site|
= link_to(image_tag("content/icon_#{site}.png", :style => "vertical-align:top"), "javascript:void(0)", {'data-site' => site, :class => 'like-link'})
= ' '
= render :partial => 'users/share_links'
- content_for :after_black_bar do
- if @jamfest_2014

View File

@ -205,6 +205,7 @@ if defined?(Bundler)
config.twitter_app_id = ENV['TWITTER_APP_ID'] || 'nQj2oEeoJZxECC33tiTuIg'
config.twitter_app_secret = ENV['TWITTER_APP_SECRET'] || 'Azcy3QqfzYzn2fsojFPYXcn72yfwa0vG6wWDrZ3KT8'
config.twitter_public_account = 'jamkazam'
config.autocheck_create_session_agreement = false;

View File

@ -1,4 +1,5 @@
Gon.global.facebook_app_id = Rails.application.config.facebook_app_id
Gon.global.ftue_network_test_packet_size = Rails.application.config.ftue_network_test_packet_size
Gon.global.ftue_network_test_backend_retries = Rails.application.config.ftue_network_test_backend_retries
Gon.global.twitter_public_account = Rails.application.config.twitter_public_account
Gon.global.env = Rails.env

View File

@ -21,6 +21,12 @@ SampleApp::Application.routes.draw do
match '/signin', to: 'sessions#create', via: :post
match '/signout', to: 'sessions#destroy', via: :delete
# landing pages
match '/landing/wb', to: 'landings#watch_bands', via: :get, as: 'landing_wb'
match '/landing/wo', to: 'landings#watch_overview', via: :get, as: 'landing_wo'
match '/landing/wbt', to: 'landings#watch_bands_tight', via: :get, as: 'landing_wbt'
match '/landing/wot', to: 'landings#watch_overview_tight', via: :get, as: 'landing_wot'
# oauth
match '/auth/:provider/callback', :to => 'sessions#oauth_callback'
match '/auth/failure', :to => 'sessions#failure'

View File

@ -0,0 +1,52 @@
require 'spec_helper'
describe "Alternate Landing Pages", :js => true, :type => :feature, :capybara_feature => true do
subject { page }
it "landing-page watch-bands" do
visit landing_wb_path
find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
find('a.landing_wb', text: 'Watch a Video to See How JamKazam Works').trigger(:click)
find('h1', text: 'See How JamKazam Works')
find('a.landing_wb', text: 'Watch a Video to See How to Get Started').trigger(:click)
find('h1', text: 'See How to Get Started')
find('div.fb-like')
find('iframe.twitter-follow-button')
find('.g-follow-btn iframe')
end
it "landing-page watch-overview" do
visit landing_wo_path
find('h1', text: 'Watch Video to See How JamKazam Works')
find('a.landing_wb', text: 'Watch 6 Bands Play Using JamKazam').trigger(:click)
find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
find('a.landing_wb', text: 'See How to Get Started Using JamKazam').trigger(:click)
find('h1', text: 'See How to Get Started Using JamKazam')
find('div.fb-like')
find('iframe.twitter-follow-button')
find('.g-follow-btn iframe')
end
it "landing-page-tight watch-bands" do
visit landing_wbt_path
find('h1', text: 'Watch 6 Bands Play Together from Different Locations')
find('h2', text: "It's FREE! Ready to Go?")
find('h2', text: 'Not a Good Time to Sign Up?')
find('div.fb-like')
find('iframe.twitter-follow-button')
find('.g-follow-btn iframe')
end
it "landing-page-tight watch-overview" do
visit landing_wot_path
find('h1', text: 'Watch Overview Video to See How JamKazam Works')
find('h2', text: "It's FREE! Ready to Go?")
find('h2', text: 'Not a Good Time to Sign Up?')
find('div.fb-like')
find('iframe.twitter-follow-button')
find('.g-follow-btn iframe')
end
end