Article resizing via CSS3

examples/test_src/index.html

@@ -135,6 +135,14 @@
                 <a href="#messages" data-target="article" data-title="Message" data-icon="chat"><abbr>Messages</abbr></a>
             </nav>
         </header>
+        
+		<footer>
+		    <a href="#" class="button articblue onright" data-icon="key">Sign In</a>
+            <nav class="onleft">
+                <a href="#summary" data-target="article"><span class="icon user"></span></a>
+                <a href="#messages" data-target="article"><span class="icon chat"></span></a>
+            </nav>
+        </footer>
 
 		<article id="summary">
 		    Summary
@@ -145,13 +153,6 @@
 		    Messages
 		</article>
 
-		<footer>
-		    <a href="#" class="button articblue onright" data-icon="key">Sign In</a>
-            <nav class="onleft">
-                <a href="#summary" data-target="article"><span class="icon user"></span></a>
-                <a href="#messages" data-target="article"><span class="icon chat"></span></a>
-            </nav>
-        </footer>
 	</section>
 
 	<section id="demo_events">
@@ -193,6 +194,9 @@
 				<a href="#list_info_sample" data-target="article" data-icon="cloudup"><abbr>Special .class</abbr></a>
 			</nav>
 		</header>
+		
+		<footer data-title="COUNT:*"></footer>
+		
 		<article id="list_sample" class="list"></article>
 		<article id="list_grouped_sample" class="list"></article>
 		<article id="list_info_sample" class="list">
@@ -233,7 +237,6 @@
                 </li>
 		    </ul>
 		</article>
-		<footer data-title="COUNT:*"></footer>
 	</section>
 
 	<section id="demo_toolbar">
@@ -368,7 +371,6 @@
     <script src="../../src/data/Lungo.Data.Sql.js"></script>
     <script src="../../src/data/Lungo.Data.Storage.js"></script>
     <script src="../../src/attributes/Lungo.Attributes.Data.js"></script>
-    <script src="../../src/attributes/Lungo.Attributes.Section.js"></script>
     <script src="../../src/boot/Lungo.Boot.js"></script>
     <script src="../../src/boot/Lungo.Boot.Layout.js"></script>
     <script src="../../src/boot/Lungo.Boot.Events.js"></script>

src/attributes/Lungo.Attributes.Section.js

@@ -1,22 +0,0 @@
-    /**
- * Make an analysis of <elements> in a <section>.
- *
- * @namespace LUNGO.Attributes
- * @class Section
- *
- * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
- * @author Guillermo Pascual <pasku@tapquo.com> || @pasku1
- */
-
-LUNGO.Attributes.Section = {
-     header: {
-         name: 'header',
-         reference: 'height',
-         bind: 'top'
-     },
-     footer: {
-         name: 'footer',
-         reference: 'height',
-         bind: 'bottom'
-     }
-};

src/boot/Lungo.Boot.Section.js

@@ -25,13 +25,11 @@ LUNGO.Boot.Section = (function(lng, undefined) {
      */
     var start = function() {
         var sections = lng.Dom.query(SELECTORS.SECTION);
-        var easing_transition = '-webkit-transform 0.3s ease-in-out';
 
         _initFirstSection(sections);
         _initAllSections(sections);
 
         lng.View.Resize.toolbars();
-        _allocateEasingTransition(sections, easing_transition);
     };
 
     var _initFirstSection = function(sections) {
@@ -39,34 +37,16 @@ LUNGO.Boot.Section = (function(lng, undefined) {
         var first_section_id = '#' + first_section.attr('id');
 
         first_section.addClass(ACTIVE_CLASS);
-
         lng.Router.History.add(first_section_id);
     };
 
     var _initAllSections = function(sections) {
         for (var i = 0, len = sections.length; i < len; i++) {
             var section = lng.Dom.query(sections[i]);
-            _initSection(section);
             _initFirstArticle(section);
         }
     };
 
-    var _initSection = function(section) {
-        var section_attributes = lng.Attributes.Section;
-
-        for (var attribute in section_attributes) {
-            if (lng.Core.isOwnProperty(section_attributes, attribute)) {
-                var property = section_attributes[attribute];
-                lng.View.Resize.article(section, property.name, property.bind, property.reference);
-            }
-        }
-    };
-
-    var _allocateEasingTransition = function(sections, easing) {
-        var transition_property = { '-webkit-transition': easing };
-        sections.css(transition_property);
-    };
-
     var _initFirstArticle = function(section) {
         section.children(SELECTORS.ARTICLE).first().addClass(ACTIVE_CLASS);
     };

src/stylesheets/css/Lungo.layout.css

@@ -1,5 +1,5 @@
 body{height:100%;}
-section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);}
+section{position:absolute;position:fixed;width:100%;height:inherit;z-index:0;-webkit-backface-visibility:hidden;-webkit-transform:translate3d(100%, 0, 0);-moz-transform:translate3d(100%, 0, 0);-ms-transform:translate3d(100%, 0, 0);-o-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0);-webkit-transition:-webkit-transform 0.3s ease-in-out;}
 section:first-child{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
 section.hide{z-index:0;-webkit-transform:translate3d(-100%, 0, 0);-moz-transform:translate3d(-100%, 0, 0);-ms-transform:translate3d(-100%, 0, 0);-o-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);}
 section.show{z-index:1;-webkit-transform:translate3d(0%, 0, 0);-moz-transform:translate3d(0%, 0, 0);-ms-transform:translate3d(0%, 0, 0);-o-transform:translate3d(0%, 0, 0);transform:translate3d(0%, 0, 0);}
@@ -27,6 +27,8 @@ aside~article{-webkit-transition:left 0.3s ease-in-out;left:0px;}
 aside a{display:block;width:244px;height:40px;padding:0 6px;font-size:1.1em;font-weight:bold;line-height:40px;}
 aside a .icon{width:28px;height:28px;float:left;margin:8px 6px 0 0;font-size:1.9em;line-height:1.0em;text-align:center;}
 @media handheld, only screen and (min-width: 768px){[data-target="aside"]{display:none !important;} aside{width:256px;} aside~article{left:256px;}}article{position:absolute;width:100%;height:auto;top:0px;bottom:0px;display:block;z-index:0;opacity:0;}
+header~article{top:40px;}
+footer~article{bottom:40px;}
 article.current{z-index:1;opacity:1;}
 .toolbar{height:48px;line-height:44px;display:block;}
 .toolbar a{float:left;padding:0;font-size:2.0em;}

src/stylesheets/less/Lungo.layout.less

@@ -22,6 +22,8 @@ section{
 	z-index: 0;
 	-webkit-backface-visibility: hidden;
 	.transform(translate3d(100%, 0, 0));
+	
+	-webkit-transition: -webkit-transform 0.3s ease-in-out;
 }
 
 section:first-child  {
@@ -208,11 +210,19 @@ article {
 	z-index: 0;
 	opacity: 0;
 }
+	
+	header ~ article {
+		top: 40px;
+	}
+	
+	footer ~ article {
+		bottom: 40px;
+	}
 
-article.current {
-	z-index: 1;
-	opacity: 1;
-}
+	article.current {
+		z-index: 1;
+		opacity: 1;
+	}
 
 .toolbar{
 	height:48px;