website: wire close button for demos, fade white overlay

This commit is contained in:
Jack Pearkes 2015-03-17 12:22:18 -07:00
parent 2b154b3f68
commit 518b31a6f6
6 changed files with 25 additions and 7 deletions

View file

@ -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>

View file

@ -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');
}
}
});

View file

@ -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);

View file

@ -32,6 +32,7 @@
font-size: 30px;
@include lato-light();
transition: all 250ms ease-in;
cursor: pointer;
&:hover{
text-decoration: none;

View file

@ -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;