website: wire close button for demos, fade white overlay
This commit is contained in:
parent
2b154b3f68
commit
518b31a6f6
|
@ -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>
|
||||
|
|
|
@ -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');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -32,6 +32,7 @@
|
|||
font-size: 30px;
|
||||
@include lato-light();
|
||||
transition: all 250ms ease-in;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover{
|
||||
text-decoration: none;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in a new issue