Merge branch 'master' into slemmer_20121211

app/assets/stylesheets/client/common.css.scss

@@ -27,6 +27,5 @@ $translucent1: rgba(#000, 0.3);
 $translucent2: rgba(#fff, 0.4);
 $text: #f3f1ee;
 
-$gradient-diff: 30%;
-$link: $color8;
+$gradient-diff: 30%; $link: $color8;
 $border: hsl(210, 50%, 45%);

app/assets/stylesheets/client/jamkazam.css.scss

@@ -77,43 +77,6 @@ label {
     background-color: shade($color7, 10%);
 }
 
-.screen {
-    display:none;
-}
-
-.screen.secondary {
-    border: 1px solid $ColorScreenPrimary;
-    background-color:$ColorScreenBackground;
-}
-.buttonrow, .screen.secondary .footer {
-    position: absolute;
-    bottom:0px;
-    right:0px;
-    z-index:5;
-    background-color:$translucent1;
-    width:100%;
-    /*text-align:right;*/
-}
-.screen.secondary .footer button {
-    margin:1em 0em 1em 1em;
-}
-
-.screen.secondary .breadcrumb {
-    margin-bottom:3em;
-}
-
-.screen.secondary .breadcrumb p {
-    float:left;
-}
-
-.screen.secondary p {
-    margin: .5em;
-    cursor: pointer;
-    font-size: 120%;
-}
-.screen.secondary p.current {
-    font-weight: bold;
-}
 
 .avatar {
     display: block;

app/assets/stylesheets/client/screen_common.css.scss

@@ -0,0 +1,92 @@
+/* Common styles used in screens */
+@import "client/common.css.scss";
+
+.screen {
+    display:none;
+}
+
+.screen.secondary {
+    border: 1px solid $ColorScreenPrimary;
+    background-color:$ColorScreenBackground;
+}
+
+.content-head {
+
+    height:21px;
+    padding:4px;
+    background-color:#ED3618;
+
+    h1 {
+        margin: 0px 0px 0px 0px;
+        padding:0;
+        float:left;
+        font-weight:100;
+        font-size:24px;
+    }
+
+
+    .content-nav {
+        float:right;
+        margin-right:10px;
+
+        .home-icon {
+            float:left;
+            margin-right:20px;
+        }
+
+        a.arrow-right {
+            float:left;
+            display:block;
+            margin-top:2px;
+            margin-right:10px;
+            width: 0; 
+            height: 0; 
+            border-top: 7px solid transparent;
+            border-bottom: 7px solid transparent;
+            border-left: 7px solid #FFF;
+        }
+
+        a.arrow-left {
+            float:left;
+            display:block;
+            margin-top:2px;
+            margin-right:20px;
+            width: 0; 
+            height: 0; 
+            border-top: 7px solid transparent;
+            border-bottom: 7px solid transparent; 
+            border-right:7px solid #FFF; 
+        }
+
+    }
+}
+
+.buttonrow, .screen.secondary .footer {
+    position: absolute;
+    bottom:0px;
+    right:0px;
+    z-index:5;
+    background-color:$translucent1;
+    width:100%;
+    /*text-align:right;*/
+}
+.screen.secondary .footer button {
+    margin:1em 0em 1em 1em;
+}
+
+.screen.secondary .breadcrumb {
+    margin-bottom:3em;
+}
+
+.screen.secondary .breadcrumb p {
+    float:left;
+}
+
+.screen.secondary p {
+    margin: .5em;
+    cursor: pointer;
+    font-size: 120%;
+}
+.screen.secondary p.current {
+    font-weight: bold;
+}

app/assets/stylesheets/screen_common.css.scss

@@ -0,0 +1 @@
+/* Styles used across multiple screens */

app/views/clients/_ftue1.html.erb

@@ -0,0 +1,10 @@
+<!-- First time user experience screen 1 -->
+<div layout="screen" layout-id="ftue1" class="screen secondary">
+    <div class="content-head">
+        <h1>Welcome to JamKazam!</h1>
+        <%= render "screen_navigation" %>
+    </div>
+
+    <p>You'll need appropriate audio gear. Here are some links to where you can buy some.</p>
+    <p>Make sure your audio gear is plugged in, then <a href="#/ftue2">CONTINUE</a>.</p>
+</div>

app/views/clients/_ftue2.html.erb

@@ -0,0 +1,10 @@
+<!-- First time user experience screen 1 -->
+<div layout="screen" layout-id="ftue2" class="screen secondary">
+    <div class="content-head">
+        <h1>Welcome to JamKazam!</h1>
+        <%= render "screen_navigation" %>
+    </div>
+
+    <p>Next we'll show you how to hook up a cable for a loopback test, so we can test your latency.</p>
+    <p>Once your cables are all connected, then <a href="#/ftue3">CONTINUE</a>.</p>
+</div>

app/views/clients/_ftue3.html.erb

@@ -0,0 +1,10 @@
+<!-- First time user experience screen 1 -->
+<div layout="screen" layout-id="ftue3" class="screen secondary">
+    <div class="content-head">
+        <h1>Welcome to JamKazam!</h1>
+        <%= render "screen_navigation" %>
+    </div>
+
+    <p>TESTS happen on this page...</p>
+    <p>If everything looks good, then <a href="#/home">WE'RE DONE</a>.</p>
+</div>

app/views/clients/_screen_navigation.html.erb

@@ -0,0 +1,6 @@
+<!-- section navigation -->
+<div class="content-nav">
+    <a href="#/home" class="home-icon"><%= image_tag "content/icon_home.png", {:width => 20, :height => 15} %></a>
+    <a class="arrow-left" href="#"></a>
+    <a class="arrow-right op50" href="#"></a>
+</div>

app/views/clients/index.html.erb

@@ -3,6 +3,9 @@
 <%= render "landing" %>
 <%= render "footer" %>
 <%= render "header" %>
+<%= render "ftue1" %>
+<%= render "ftue2" %>
+<%= render "ftue3" %>
 <%= render "home" %>
 <%= render "sidebar" %>
 <%= render "createSession" %>

app/views/layouts/client.html.erb

@@ -10,6 +10,7 @@
     <%= stylesheet_link_tag    "client/jamkazam", media: "all" %>
     <%= stylesheet_link_tag    "client/header", media: "all" %>
     <%= stylesheet_link_tag    "client/footer", media: "all" %>
+    <%= stylesheet_link_tag    "client/screen_common", media: "all" %>
     <%= stylesheet_link_tag    "client/notify", media: "all" %>
     <%= stylesheet_link_tag    "client/dialog", media: "all" %>
     <%= stylesheet_link_tag    "client/sidebar", media: "all" %>