Aside in tablet devices

src/boot/Lungo.Boot.Events.js

@@ -42,13 +42,14 @@ LUNGO.Boot.Events = (function(lng, undefined) {
     var _loadTargetFromAside = function(event) {
         var link = lng.dom(this);
         var aside_id = '#' + link.parent('aside').attr('id');
-        var section_id = '#' + lng.dom('section.aside').first().attr('id');
+        var section_id = '#' + lng.dom('section.aside, section.current').first().attr('id');
 
         if (link.data('target') === 'article') {
-            lng.dom('aside' + aside_id + ' a[href][data-target="article"]').removeClass('current');
+            lng.dom('aside' + aside_id + ' a[href][data-target]').removeClass('current');
             link.addClass('current');
         }
-        lng.View.Aside.hide(section_id, aside_id);
+        _hideAsideIfNecesary(section_id, aside_id);
+
     };
 
     var _loadTarget = function(event) {
@@ -100,6 +101,12 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         lng.Router.aside(section_id, aside_id);
     };
 
+    var _hideAsideIfNecesary = function(section_id, aside_id) {
+        if (window.innerWidth < 768) {
+            lng.View.Aside.hide(section_id, aside_id);
+        }
+    };
+
     return {
         start: start
     };

src/stylesheets/css/Lungo.layout.aside.css

@@ -8,6 +8,6 @@ footer.toolbar~aside{bottom:48px;}
 aside~article{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:15px;line-height:40px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
 aside .icon{width:24px;float:left;margin:8px 4px 0 0;font-size:24px;line-height:24px;text-align:center;}
-aside .anchor{font-weight:bold;padding:3px 10px 4px;}
+aside .anchor{font-weight:bold;padding:13px 10px 11px;}
 aside .bubble{float:right;font-size:11px;margin:12px 4px 0 0;}
-@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{visibility:visible;} section.current{width:auto !important;left:256px;right:0px !important;} aside~section{width:auto !important;left:256px;right:0px !important;}}
+@media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} section{width:auto !important;left:256px;right:0px !important;-webkit-transition:none;}section.hide{z-index:-1;}}

src/stylesheets/css/Lungo.layout.css

@@ -1,4 +1,4 @@
-section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
+section{position:absolute;left:0px;top:0px;width:100%;height:100%;z-index:1;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-backface-visibility:hidden;-webkit-transition:-webkit-transform 250ms cubic-bezier(0.39, 0.575, 0.565, 1);}section:first-child,section.show{-webkit-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);visibility:visible;}
 section.hide{-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 header,footer{position:absolute;left:0px;width:100%;height:38px;display:block;z-index:2;line-height:39px;}
 header{top:0px;}header .onleft{margin-left:4px !important;}

src/stylesheets/css/Lungo.theme.pro.css

@@ -90,6 +90,14 @@ section.aside {
 section.aside.onright {
   box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
 }
+@media handheld, only screen and (min-width: 768px) {
+  section.current, section.show {
+    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+  section.current.onright, section.show.onright {
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.5);
+  }
+}
 /* @end */
 /* @group .list */
 .list, .list li:not(.toolbar) a {

src/stylesheets/less/Lungo.layout.aside.less

@@ -38,60 +38,60 @@ aside {
 header:not(.extended) ~ aside { top: @header_footer_height; }    
 header.extended ~ aside { top: @header_extended_height; }        
 footer ~ aside { 
-        bottom: @header_footer_height; 
-        height: auto; 
-    }
-        footer.toolbar ~ aside { bottom: @footer_toolbar_height; }
-    
-    aside ~ article {
-        .transform(translate3d(0px, 0, 0));
-        -webkit-transition: -webkit-transform 250ms @defaultTrasition;
-    }
+    bottom: @header_footer_height; 
+    height: auto; 
+}
+    footer.toolbar ~ aside { bottom: @footer_toolbar_height; }
+
+aside ~ article {
+    .transform(translate3d(0px, 0, 0));
+    -webkit-transition: -webkit-transform 250ms @defaultTrasition;
+}
 
 
-	aside a {
-		display: block;
-		width: 244px;
-		height: 40px;
-		padding: 0 6px;
+aside a {
+	display: block;
+	width: 244px;
+	height: 40px;
+	padding: 0 6px;
+
+	font-size: 15px;
+	line-height: 40px;
+	overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+	aside .icon {
+		width: 24px;
+		float: left;
+		margin: 8px 4px 0 0;
 	
-		font-size: 15px;
-		line-height: 40px;
-		overflow: hidden;
-   		white-space: nowrap;
-  		text-overflow: ellipsis;
-  	}
-		aside .icon {
-			width: 24px;
-			float: left;
-			margin: 8px 4px 0 0;
+		font-size: 24px;
+		line-height: 24px;
+	    text-align: center;		    
+	}
+	aside .anchor {
+		font-weight: bold;
+    	padding: 13px 10px 11px;
+	}
+	aside .bubble {
+    	float: right;
+    	font-size: 11px;
+		margin: 12px 4px 0 0;
+	}
+
+	@media handheld, only screen and (min-width: 768px) {
+		[data-target="aside"] { display: none !important; }
 		
-			font-size: 24px;
-			line-height: 24px;
-		    text-align: center;		    
-		}
-		aside .anchor {
-			font-weight: bold;
-	    	padding: 3px 10px 4px;
-		}
-		aside .bubble {
-	    	float: right;
-	    	font-size: 11px;
-			margin: 12px 4px 0 0;
-		}
-	
-		@media handheld, only screen and (min-width: 768px) {
-			[data-target="aside"] { display: none !important; }		
-			aside { visibility: visible; }
-			section.current {
-    			width: auto !important;
-		    	left: 256px;
-		    	right:  0px !important;
-			}
-			aside ~ section{
-				width: auto !important;
-		    	left: 256px;
-		    	right:  0px !important;
+		section {
+			width: auto !important;
+	    	left: 256px;
+	    	right:  0px !important;
+	    	-webkit-transition: none;
+
+	    	&.hide {
+    			z-index: -1;
 			}
 		}
+	}
 /* @end */

src/stylesheets/less/Lungo.layout.less

@@ -28,9 +28,10 @@ section {
 	-webkit-transition: -webkit-transform 250ms @defaultTrasition;
 	
 	&:first-child, &.show {	
-		.transform(translate3d(0%, 0, 0)); }
+		.transform(translate3d(0%, 0, 0));
+		visibility: visible; }
 	&.hide { 
-		.transform(translate3d(-100%, 0, 0)); }
+		.transform(translate3d(-100%, 0, 0));}
 }
 /* @end */
 

src/stylesheets/less/Lungo.theme.pro.less

@@ -111,9 +111,15 @@ aside {
 
 section.aside {
     box-shadow: -4px 0 8px rgba(0,0,0,0.5);
-    
 	&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
 }
+	
+@media handheld, only screen and (min-width: 768px) {
+	section.current, section.show {
+	    box-shadow: -4px 0 8px rgba(0,0,0,0.5);
+		&.onright { box-shadow: 4px 0 8px rgba(0,0,0,0.5); }
+	}
+}
 
 /* @end */