RC for router screen

src/router/Lungo.Router.js

@@ -37,14 +37,15 @@ Lungo.Router = (function(lng, undefined) {
                 // @todo: Analize Router
 
                 if (lng.DEVICE == DEVICE.PHONE) {
-                    if (current) {
+                    if (current ) {
                         _defineTransition(target, current);
                         current.removeClass(CLASS.SHOW).addClass(CLASS.HIDE);
                     }
                     _showPhoneSection(target);
 
                 } else {
-                    if (current) {
+
+                    if (current && !current.data('child')) {
                         current.addClass(CLASS.HIDE);
 
                         setTimeout(function() {
@@ -52,6 +53,8 @@ Lungo.Router = (function(lng, undefined) {
                         }, lng.Constants.TRANSITION.DURATION);
                     }
 
+
+
                     setTimeout(function() {
                         target.addClass(CLASS.SHOW);
                     }, lng.Constants.TRANSITION.DURATION);

src/stylesheets/lungo.layout.transition.styl

@@ -1,53 +0,0 @@
-/**
- * Stylesheet
- *
- * @namespace Lungo
- * @class Layout
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- */
-
-@import "constants.styl"
-
-section
-  &[data-transition]
-    // display: block !important
-    // display-box()
-    transition-property( opacity, z-index, transform )
-    transition-duration( TRANSITION_TIME )
-    transition-timing-function( DEFAULT_TRANSITION )
-    backface-visibility( hidden )
-
-  /* Transition: POP */
-  &[data-transition="pop"]
-    opacity: 0
-    transform( scale(1.15) )
-    &.show
-      transform( scale(1) )
-      opacity: 1
-    &.hide
-      transform( scale(0.9) )
-      opacity: 0
-
-  /* Transition: SLIDE */
-  // &[data-transition="slide"]
-  //   transform translateX(100%)
-  //   visibility: visible
-  //   &.show
-  //     transform translateX(0%)
-  //   &.hide
-  //     transform translateX(-100%)
-
-  /* Transition: COVER */
-  &[data-transition="cover"]
-    transform( translateY(110%) )
-    &.show, &.hide
-      transform( translateY(0%) )
-
-  /* Transition: FADE */
-  &[data-transition="fade"]
-    opacity: 0
-    &:first-child, &.show
-      opacity: 1
-    &:hide
-      opacity: 0

src/stylesheets/lungo.media.phone.styl

@@ -24,3 +24,43 @@
           transform translateX(-(ASIDE_WIDTH_SMALL))
 
 
+    &[data-transition]
+      display-box()
+      transition-property( opacity, z-index, transform )
+      transition-duration( TRANSITION_TIME )
+      transition-timing-function( DEFAULT_TRANSITION )
+      backface-visibility( hidden )
+
+    /* Transition: POP */
+    &[data-transition="pop"]
+      opacity: 0
+      transform( scale(1.15) )
+      &.show
+        transform( scale(1) )
+        opacity: 1
+      &.hide
+        transform( scale(0.9) )
+        opacity: 0
+
+    /* Transition: SLIDE */
+    &[data-transition="slide"]
+      transform translateX(100%)
+      visibility: visible
+      &.show
+        transform translateX(0%)
+      &.hide
+        transform translateX(-100%)
+
+    /* Transition: COVER */
+    &[data-transition="cover"]
+      transform( translateY(110%) )
+      &.show, &.hide
+        transform( translateY(0%) )
+
+    /* Transition: FADE */
+    &[data-transition="fade"]
+      opacity: 0
+      &:first-child, &.show
+        opacity: 1
+      &:hide
+        opacity: 0

src/stylesheets/lungo.media.tablet.styl

@@ -1,5 +1,7 @@
 @import "constants.styl"
 
+
+// TRANSITION_TIME = 1s
 /* ==== Tablet ==== */
 // @media only screen and (min-width: 768px) and (max-width: 1280px)
 @media only screen and (min-width: 768px)
@@ -11,25 +13,24 @@
 
   aside
     width 15%
-    // transform translateX(-100%)
-    // transition-property transform
-    // transition-duration TRANSITION_TIME
-    // &.show
-    //   transition-delay TRANSITION_TIME
-    //   transform translateX(0%)
+    transform translateX(-100%)
 
+    transition-property transform
+    transition-duration TRANSITION_TIME
+    &.show
+      transform translateX(0%)
 
   section
     ordinal-group(2)
 
     display: none
+    opacity: 0
     transform translateX(100%)
+    -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
+    -webkit-animation-fill-mode: forwards
 
     &.show
       display-box()
-      -webkit-animation: showing TRANSITION_TIME TRANSITION_TIME
-      -webkit-animation-fill-mode: forwards
-
     &.hide
       -webkit-animation: hiding TRANSITION_TIME
 
@@ -46,6 +47,18 @@
 
 
 
+  // &[data-transition]
+  //     display-box()
+  //     transition-propert transform, opacity
+  //     transition-duration( TRANSITION_TIME )
+  //     transition-timing-function( DEFAULT_TRANSITION )
+  //     backface-visibility( hidden )
+
+
+
+
+
+
 @-webkit-keyframes showing
   0%
     opacity: 0

src/view/Lungo.View.Aside.js

@@ -14,6 +14,7 @@ Lungo.View.Aside = (function(lng, undefined) {
     var ATTRIBUTE = lng.Constants.ATTRIBUTE;
     var DEVICE = lng.Constants.DEVICE;
     var QUERY = lng.Constants.QUERY;
+    var TRANSITION = lng.Constants.TRANSITION.DURATION;
 
     /**
      * Active aside for a determinate section
@@ -29,7 +30,7 @@ Lungo.View.Aside = (function(lng, undefined) {
 
         // Deactive
         if ((current_aside && aside_id != current_aside.attr('id')) || aside_id === undefined) {
-            current_aside.removeClass(CLASS.ACTIVE).removeClass(CLASS.SHOW);
+            current_aside.removeClass(CLASS.SHOW).removeClass(CLASS.ACTIVE);
             lng.Element.Cache.aside = undefined;
         }
 
@@ -68,9 +69,13 @@ Lungo.View.Aside = (function(lng, undefined) {
      */
     var show = function(aside) {
         if (lng.Element.Cache.aside) {
-            lng.Element.Cache.aside.addClass(CLASS.SHOW);
+            setTimeout(function() {
+                lng.Element.Cache.aside.addClass(CLASS.SHOW);
+            }, TRANSITION);
 
             if (lng.DEVICE == DEVICE.PHONE) {
+                lng.Element.Cache.aside.addClass(CLASS.SHOW);
+
                 var aside_stylesheet = _asideStylesheet();
                 lng.Element.Cache.section.addClass(aside_stylesheet).addClass(CLASS.ASIDE);
             }
@@ -90,7 +95,7 @@ Lungo.View.Aside = (function(lng, undefined) {
 
                 setTimeout(function() {
                     lng.Element.Cache.aside.removeClass(CLASS.SHOW);
-                }, lng.Constants.TRANSITION.DURATION);
+                }, TRANSITION);
             }
         }
     };