From d576366a05718b9bbec854bc8e2d8f837fdad2bf Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sun, 27 Jan 2013 11:34:09 -0700 Subject: [PATCH] bringing in Jeff's ftue mockups. Partial commit to bring in Gemfile changes --- app/assets/javascripts/jamkazam.js | 2 +- app/assets/javascripts/layout.js | 14 ++ app/assets/stylesheets/client/ftue.css.scss | 133 ++++++++++++++++++ .../stylesheets/client/jamkazam.css.scss | 5 + app/views/clients/_signin.html.erb | 68 +++++++++ app/views/clients/index.html.erb | 2 + 6 files changed, 223 insertions(+), 1 deletion(-) create mode 100644 app/views/clients/_signin.html.erb diff --git a/app/assets/javascripts/jamkazam.js b/app/assets/javascripts/jamkazam.js index 8cb752bbe..848f3c097 100644 --- a/app/assets/javascripts/jamkazam.js +++ b/app/assets/javascripts/jamkazam.js @@ -34,7 +34,7 @@ if (targetArg) { targetUrl += "/:" + targetArg; } - rules[target] = {route: '/' + targetUrl, method: target}; + rules[target] = {route: '/' + targetUrl + '/d:?', method: target}; routingContext[target] = fn; }); routes.context(routingContext); diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index 3e5380646..8cdd97e81 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -78,6 +78,7 @@ // is layout and every other method starts with 'layoutX'. Perhaps // a little redundant? layoutCurtain(width, height); + layoutDialogOverlay(width, height); layoutScreens(width, height); layoutSidebar(width, height); layoutHeader(width, height); @@ -86,12 +87,22 @@ function layoutCurtain(screenWidth, screenHeight) { var curtainStyle = { + position: 'absolute', width: screenWidth + 'px', height: screenHeight + 'px' }; $('.curtain').css(curtainStyle); } + function layoutDialogOverlay(screenWidth, screenHeight) { + var style = { + position: 'absolute', + width: screenWidth + 'px', + height: screenHeight + 'px' + }; + $('.dialog-overlay').css(style); + } + function layoutScreens(screenWidth, screenHeight) { var previousScreenSelector = '[layout-id="' + previousScreen + '"]'; var currentScreenSelector = '[layout-id="' + currentScreen + '"]'; @@ -333,6 +344,7 @@ function hideDialogs() { $('[layout="dialog"]').hide(); + $('.dialog-overlay').hide(); } function linkClicked(evt) { @@ -359,6 +371,7 @@ } function changeToScreen(screen, data) { + context.alert(JSON.stringify(data)); previousScreen = currentScreen; currentScreen = screen; @@ -377,6 +390,7 @@ } function showDialog(dialog) { + $('.dialog-overlay').show(); centerDialog(dialog); $('[layout-id="' + dialog + '"]').show(); } diff --git a/app/assets/stylesheets/client/ftue.css.scss b/app/assets/stylesheets/client/ftue.css.scss index be15eba5e..5092cdae8 100644 --- a/app/assets/stylesheets/client/ftue.css.scss +++ b/app/assets/stylesheets/client/ftue.css.scss @@ -40,3 +40,136 @@ div[layout-id="ftue3"] { background-color:#0f0; } } + +/* Start Jeff's ftue.css */ +.ftue-overlay { + z-index:100; + width:800px; + height:400px; + position:absolute; + left:50%; + top:20%; + margin-left:-400px; + background-color:#333; + border: 1px solid #ed3618; +} + +.ftue-inner { + width:750px; + height:320px; + padding:25px; + font-size:15px; + color:#aaa; +} + +.ftue-inner input[type=text], .ftue-inner input[type=password] { + padding:3px; + font-size:13px; + width:145px; +} + +.ftue-inner input.gearprofile { + width:auto; +} + +.ftue-inner select.audiodropdown { + width:223px; + color:#666; +} + +.ftue-left { + float:left; + width:340px; + padding-right:30px; + border-right:solid 1px #484848; +} + +.ftue-right { + width: 340px; + padding-left:30px; + float:left; +} + +.ftue-inner a { + color:#ccc; +} + +.ftue-inner a:hover { + color:#fff; +} + +.ftue-instrumentlist { + width:340px; + height:178px; + background-color:#c5c5c5; + border:none; + -webkit-box-shadow: inset 2px 2px 3px 0px #888; + box-shadow: inset 2px 2px 3px 0px #888; + color:#666; + overflow:auto; + font-size:14px; +} + +.ftue-instrumentlist select { + width:100%; + color:#666; +} + +table.audiogeartable { + margin-left:-20px; + margin-right:-20px; +} + +.ftue-gainmeter { + width:223px; + height:55px; + display:inline-block; + margin-right:8px; + position:relative; + background-color:#242323; +} + +.gainmeter-vu-top { + position:absolute; + left:0px; + top:0px; +} + +.gainmeter-vu-bottom { + position:absolute; + left:0px; + bottom:0px; +} + +.gainmeter-gain { + position:absolute; + top:18px; + left:10px; + width:150px; + height:18px; + background-image:url(../images/content/bkg_slider_gain_horiz.png); + background-repeat:repeat-x; +} + +.gainmeter-gain-wrapper { + position:relative; + width:51px; + height:18px; +} + +.gainmeter-gain-slider { + position:absolute; + top:0px; + left:60%; + width:10px; + height:18px; +} + +.gainmeter-label { + font-size:16px; + color:#ED3618; + position:absolute; + top:18px; + right:16px; +} +/* End Jeff's CSS */ diff --git a/app/assets/stylesheets/client/jamkazam.css.scss b/app/assets/stylesheets/client/jamkazam.css.scss index ca9539b69..b1c5301f3 100644 --- a/app/assets/stylesheets/client/jamkazam.css.scss +++ b/app/assets/stylesheets/client/jamkazam.css.scss @@ -7,6 +7,7 @@ @import "compass/reset"; @import "compass/css3/images"; @import "compass/css3/background-size"; +@import "compass/css3/opacity"; @import "client/common.css.scss"; @@ -122,6 +123,10 @@ input[type="button"] { .curtain { background-color: shade($color7, 10%); } +.dialog-overlay { + background-color: #000; + @include opacity(0.8); +} .avatar { display: block; diff --git a/app/views/clients/_signin.html.erb b/app/views/clients/_signin.html.erb new file mode 100644 index 000000000..bdb4ae4fe --- /dev/null +++ b/app/views/clients/_signin.html.erb @@ -0,0 +1,68 @@ + + +
+ + +
+

sign in or register

+
+ + +
+ + +

+ + Already a member? Enter your email address and password: +
+
+ +
+ + + + + + + + + + + + + +
Email Address:Password
Keep me logged inSIGN IN
+
+ Forgot Password? +
+
+
+
Not a member? Join JamKazam for free:
+
+ REGISTER NOW +
+ +
+ + + +

+
+
+ + + Have a Facebook account? Login or + register via Facebook:
+
+
+
+ We recommend using Connect with Facebook because it will make it easier to find and/or invite your musician friends using the JamKazam service. +
+ + +
+ + +
+ + diff --git a/app/views/clients/index.html.erb b/app/views/clients/index.html.erb index cbd8ccf80..3216df14c 100644 --- a/app/views/clients/index.html.erb +++ b/app/views/clients/index.html.erb @@ -1,6 +1,8 @@
+ <%= render "landing" %> +<%= render "signin" %> <%= render "footer" %> <%= render "header" %> <%= render "ftue1" %>