From 518b31a6f6538ac336c6f5e1c5fa1821d1540bbe Mon Sep 17 00:00:00 2001
From: Jack Pearkes <jackpearkes@gmail.com>
Date: Tue, 17 Mar 2015 12:22:18 -0700
Subject: [PATCH] website: wire close button for demos, fade white overlay

---
 website/source/_ember_templates.html.erb            |  2 +-
 website/source/assets/javascripts/app/Sidebar.js    |  2 +-
 .../assets/javascripts/demo/controllers/demo.js     |  8 +++++++-
 .../source/assets/javascripts/demo/views/demo.js    | 13 ++++++++++++-
 website/source/assets/stylesheets/_demo.scss        |  1 +
 website/source/assets/stylesheets/_sidebar.scss     |  6 +++---
 6 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/website/source/_ember_templates.html.erb b/website/source/_ember_templates.html.erb
index 5301d08c9..09b438b67 100644
--- a/website/source/_ember_templates.html.erb
+++ b/website/source/_ember_templates.html.erb
@@ -6,7 +6,7 @@
 
 <script type="text/x-handlebars" data-template-name="demo">
     <div class="terminal">
-        <a class="close-terminal" href="#">X</a>
+        <span class="close-terminal" {{action "close"}}>X</span>
         {{outlet}}
         <div class="loading-bar"></div>
     </div>
diff --git a/website/source/assets/javascripts/app/Sidebar.js b/website/source/assets/javascripts/app/Sidebar.js
index 67239be95..986f1bae9 100644
--- a/website/source/assets/javascripts/app/Sidebar.js
+++ b/website/source/assets/javascripts/app/Sidebar.js
@@ -16,7 +16,7 @@ Sidebar = Base.extend({
     	this.$sidebarHeader = $('#sidebar .sidebar-header');
     	this.$toggleButton = $('.navbar-toggle');
 
-    	this.sidebarImg = this.$sidebarHeader.css('background-image');    	
+    	this.sidebarImg = this.$sidebarHeader.css('background-image');
 
 		this.addEventListeners();
 	},
diff --git a/website/source/assets/javascripts/demo/controllers/demo.js b/website/source/assets/javascripts/demo/controllers/demo.js
index 2b7fda536..0deda6601 100644
--- a/website/source/assets/javascripts/demo/controllers/demo.js
+++ b/website/source/assets/javascripts/demo/controllers/demo.js
@@ -9,5 +9,11 @@ Demo.DemoController = Ember.ObjectController.extend({
     var index = this.get('currentLog.length') + this.get('cursor');
 
     this.set('currentText', this.get('currentLog')[index]);
-  }.observes('cursor')
+  }.observes('cursor'),
+
+  actions: {
+    close: function() {
+      this.transitionTo('index');
+    }
+  }
 });
diff --git a/website/source/assets/javascripts/demo/views/demo.js b/website/source/assets/javascripts/demo/views/demo.js
index 91f380202..eb68c9f7b 100644
--- a/website/source/assets/javascripts/demo/views/demo.js
+++ b/website/source/assets/javascripts/demo/views/demo.js
@@ -2,7 +2,15 @@ Demo.DemoView = Ember.View.extend({
   classNames: ['demo-overlay'],
 
   didInsertElement: function() {
-    var element  = this.$();
+    var controller = this.get('controller'),
+        overlay    = $('.sidebar-overlay'),
+        element    = this.$();
+
+    overlay.addClass('active');
+
+    overlay.on('click', function() {
+      controller.transitionTo('index');
+    });
 
     element.hide().fadeIn(300);
 
@@ -44,6 +52,9 @@ Demo.DemoView = Ember.View.extend({
   },
 
   willDestroyElement: function() {
+    // Remove overlay
+    $('.sidebar-overlay').removeClass('active');
+
     var element  = this.$();
 
     element.fadeOut(400);
diff --git a/website/source/assets/stylesheets/_demo.scss b/website/source/assets/stylesheets/_demo.scss
index d63c74ecf..72ef843c4 100644
--- a/website/source/assets/stylesheets/_demo.scss
+++ b/website/source/assets/stylesheets/_demo.scss
@@ -32,6 +32,7 @@
         font-size: 30px;
         @include lato-light();
         transition: all 250ms ease-in;
+        cursor: pointer;
 
         &:hover{
             text-decoration: none;
diff --git a/website/source/assets/stylesheets/_sidebar.scss b/website/source/assets/stylesheets/_sidebar.scss
index afc540d3a..0398a8a17 100644
--- a/website/source/assets/stylesheets/_sidebar.scss
+++ b/website/source/assets/stylesheets/_sidebar.scss
@@ -1,4 +1,4 @@
-  
+
 // Base variables
 // --------------------------------------------------
 $screen-tablet:          768px;
@@ -460,7 +460,7 @@ $sidebar-font-weight: 300;
   bottom: 0;
   opacity: 0;
   background: $white;
-  z-index: $zindex-sidebar-fixed - 1;
+  z-index: 2;
 
   -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
   -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
@@ -473,7 +473,7 @@ $sidebar-font-weight: 300;
 }
 
 .sidebar-overlay.active {
-  opacity: 0.8;
+  opacity: 0.3;
   visibility: visible;
   -webkit-transition-delay: 0;
   -moz-transition-delay: 0;