Aside scrollable

examples/test/app/app.js

@@ -5,8 +5,10 @@ var App = (function(lng, undefined) {
         name: 'Kitchen Sink',
         version: '1.2',
         resources: {
+
             sections: [
                 'aside.html', 'aside-profiles.html']
+
         }
     });
 

examples/test/app/sections/aside-profiles.html

@@ -1,4 +1,4 @@
-<aside id="profiles" class="scrollable onright">
+<aside id="profiles" class="scroll onright">
     <div>
         <div class="anchor">Author of LungoJS</div>
         <a href="http://twitter.com/soyjavi" target="_blank" data-image="assets/images/avatars/soyjavi.jpg">Javi Jim&eacute;nez Villar</a>

examples/test/app/sections/aside.html

@@ -1,5 +1,5 @@
-<aside id="kitchen-sink-scroll" class="scrollable  small">
-    <div>
+<aside id="kitchen-sink-scroll" class="scroll small">
+    <ul>
         <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
         <a href="#nav-2" data-target="article" data-icon="calendar"></a>
         <a href="#test-2" data-target="section" data-icon="plus" data-count="14"></a>
@@ -9,33 +9,11 @@
         <a href="#lists" data-target="section" data-icon="items" data-count="5"></a>
         <a href="#events" data-target="article" data-icon="user"></a>
         <a href="#scrolls" data-target="article" data-icon="down"></a>
-    </div>
-</aside>
-
-<!--
-<aside id="kitchen-sink-scroll" class="scrollable current">
-    <div>
-        <div class="title">Select a option</div>
-        <a href="#nav-1" data-target="article" class="current" data-icon="clock">Alarm</a>
-        <a href="#nav-2" data-target="article" data-icon="calendar">Calendar</a>
-        <a href="#test-2" data-target="section" data-icon="plus" data-count="14">Buttons & Colours</a>
-        <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
-        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
-        <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>
-        <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
-        <a href="#events" data-target="article" data-icon="user">Events</a>
-        <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
-        <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
-        <a href="#welcome" data-target="article" class="current" data-icon="wifi">Welcome</a>
-        <a href="#navigation" data-target="section" data-icon="map">Navigation</a>
-        <a href="#buttons" data-target="article" data-icon="plus" data-count="14">Buttons & Colours</a>
-        <a href="#icons" data-target="article" data-icon="picture" data-count="94">Icons</a>
-        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6">Data Attributes</a>
-        <a href="#forms" data-target="section" data-icon="edit" data-count="7">Form Elements</a>
-        <a href="#lists" data-target="section" data-icon="items" data-count="5">Lists</a>
-        <a href="#events" data-target="article" data-icon="user">Events</a>
-        <a href="#scrolls" data-target="article" data-icon="down">Scrolls</a>
-        <a href="#urls" data-target="article" data-icon="down">URL Scheme Reference</a>
-    </div>
-</aside>
--->
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+        <a href="#scrolls" data-target="article" data-icon="down"></a>
+    </ul>
+</aside>

src/stylesheets/Lungo.layout.article.less

@@ -65,15 +65,6 @@ article {
     }
 }
 
-.prueba li {
-    list-style: none;
-    float: left;
-    width: 48px;
-    height: 48px;
-    background: #ccc;
-    margin: 1px;
-}
-
 header:not(.extended) ~ article { top: @header-height; }
     header.extended ~ article { top: @header_extended_height; }
 footer:not(.with-labels) ~ article { bottom: @article-bottom; }

src/stylesheets/Lungo.layout.aside.less

@@ -21,12 +21,12 @@ section.aside {
 }
 
 aside {
-    position: absolute;
-    width: inherit;
-    height: inherit;
-    top: 0px;
+    position: fixed;
+    height: auto;
+    top: 0;
+    bottom: 0;
     visibility: hidden;
-    z-index: 0;
+    z-index: -1;
 
     width: @aside-width;
     max-width: @aside-width;

src/stylesheets/Lungo.widgets.less

@@ -26,7 +26,10 @@
         overflow-x: scroll;
         overflow-y: hidden !important;
 
-        & > * { min-width: 4096px; }
+        & > * {
+            min-width: 4096px;
+            & > * { float: left; }
+        }
     }
 }
 

src/stylesheets/css/Lungo.layout.article.css

@@ -5,7 +5,6 @@ article .box.quarter{height:25%;}
 article .box.third{height:33.3%;}
 article .box.middle{height:50%;}
 article .box.two-thirds{height:66.7%;}
-.prueba li{list-style:none;float:left;width:48px;height:48px;background:#ccc;margin:1px;}
 header:not(.extended)~article{top:42px;}
 header.extended~article{top:75px;}
 footer:not(.with-labels)~article{bottom:41px;}

src/stylesheets/css/Lungo.widgets.css

@@ -1,5 +1,5 @@
 .scrollable{display:block;}
-.scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;}.scroll.horizontal{overflow-x:scroll;overflow-y:hidden !important;}.scroll.horizontal >*{min-width:4096px;}
+.scroll{overflow-y:scroll;-webkit-overflow-scrolling:touch;-webkit-box-flex:1;}.scroll.horizontal{overflow-x:scroll;overflow-y:hidden !important;}.scroll.horizontal >*{min-width:4096px;}.scroll.horizontal >* >*{float:left;}
 .onleft{float:left;}
 .onright{float:right;}
 .hidden{display:none;}