bringing in Jeff's ftue mockups. Partial commit to bring in Gemfile changes
This commit is contained in:
Jonathon Wilson
parent
f832bc9415
commit
d576366a05
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
<!-- ftue overlay content -->
|
||||
|
||||
<div class="ftue-overlay" layout-id="signin" layout="dialog">
|
||||
|
||||
<!-- ftue header -->
|
||||
<div class="content-head">
|
||||
<h1>sign in or register</h1>
|
||||
</div>
|
||||
|
||||
<!-- inner wrapper -->
|
||||
<div class="ftue-inner">
|
||||
|
||||
<!-- sign in left column -->
|
||||
<div class="ftue-left"><br />
|
||||
|
||||
<span class="white"><strong>Already a member?</strong></span> Enter your email address and password:
|
||||
<br>
|
||||
<br>
|
||||
|
||||
<form>
|
||||
<table cellpadding="0" cellspacing="10">
|
||||
<tr>
|
||||
<td>Email Address:</td>
|
||||
<td>Password</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input type="text"></td>
|
||||
<td><input type="password"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td valign="top"><small><input type="checkbox"> Keep me logged in</small></td>
|
||||
<td align="right"><a href="#" class="button-orange">SIGN IN</a><br>
|
||||
<br>
|
||||
<small><a href="#">Forgot Password?</a></small>
|
||||
</td>
|
||||
</tr>
|
||||
</table></form>
|
||||
<br>
|
||||
<br>
|
||||
<div align="center"><span class="white"><strong>Not a member?</strong></span> Join JamKazam for free:<br>
|
||||
<br>
|
||||
<a href="ftue_register.shtml" class="button-orange">REGISTER NOW</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- end left column -->
|
||||
|
||||
<!-- sign in right column -->
|
||||
<div class="ftue-right"><br>
|
||||
<br>
|
||||
<br>
|
||||
|
||||
|
||||
<span class="white"><strong>Have a Facebook account?</strong></span> Login or
|
||||
register via Facebook:<br>
|
||||
<br>
|
||||
<a href="#"><img src="images/content/button_facebook.png" width="245" height="34"></a><br>
|
||||
<br>
|
||||
We recommend using <span class="white"><strong>Connect with Facebook</strong></span> because it will make it easier to find and/or invite your musician friends using the JamKazam service.
|
||||
</div>
|
||||
<!-- end right column -->
|
||||
|
||||
</div>
|
||||
<!-- end inner -->
|
||||
|
||||
</div>
|
||||
<!-- end overlay content -->
|
||||
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<div class="curtain" style="width:100%; height:100%; z-index:9999; background-color:#ffffff;"></div>
|
||||
<div class="dialog-overlay" style="display:none; width:100%; height:100%; z-index:99;"></div>
|
||||
|
||||
<%= render "landing" %>
|
||||
<%= render "signin" %>
|
||||
<%= render "footer" %>
|
||||
<%= render "header" %>
|
||||
<%= render "ftue1" %>
|
||||
|
|
|
|||
Loading…
Reference in New Issue