First version of aside.small

examples/test/app/events.js

@@ -2,11 +2,6 @@ App.Events = (function(lng, undefined) {
 
     lng.ready(function() {
 
-        lng.View.Aside.toggle('.onright');
-
-        console.error('LUNGO', LUNGO);
-
-
         setTimeout(function() {
 
             lng.View.Element.progress('#progress-normal', 50, true, 'yeah');

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

@@ -1,36 +1,82 @@
 <aside id="profiles" class="scroll onright">
     <div>
-        <header data-title="Opciones">
-            <nav class="onright">
+        <header data-title="Favorites">
+            <nav class="plain onright">
                 <a href="#" data-icon="refresh"></a>
             </nav>
         </header>
 
-        <div class="list">
-            <li data-image="assets/images/avatars/soyjavi.jpg">
-                <a href="#nav-1" data-target="article">
-                    <strong>Javi Jimenez Villar</strong>
-                    <small>Author of @lungojs</small>
-                </a>
-            </li>
-            <li class="red" data-icon="home">
-                    <div class="bubble black onright">23.23</div>
-                    <strong>Lorem Ipsum</strong>
-                    <small>...is a traditional text</small>
-                </li>
-            <li>
-                <div class="bubble red onright">128</div>
-                <strong>Javi Jimenez Villar</strong>
-            </li>
-            <li>
-                <strong>Javi Jimenez Villar</strong>
-            </li>
-            <li>
-                <strong>Javi Jimenez Villar</strong>
-            </li>
+        <div class="list scroll" style="height: 128px;">
+            <ul>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/1.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-2" data-target="article" data-image="assets/images/avatars/2.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/3.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/4.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/5.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/6.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/7.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/8.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/9.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/10.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+                <li class="thumb">
+                    <a href="#nav-1" data-target="article" data-image="assets/images/avatars/11.jpg">
+                        <strong>Name of friend</strong>
+                        <small>Extra info: mail / phone</small>
+                    </a>
+                </li>
+            </ul>
         </div>
-        <!--
         <footer>prueba</footer>
-    -->
+
     </div>
 </aside>

examples/test/app/sections/aside.html

@@ -1,11 +1,8 @@
-<aside id="kitchen-sink-scroll" class=" small">
-    <ul>
+<aside id="kitchen-sink-scroll" class="small scroll onleft">
+    <nav>
         <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>
-        <a href="#icons" data-target="article" data-icon="picture" data-count="94"></a>
-        <a href="#data-attributes" data-target="article" data-icon="tag" data-count="6"></a>
-        <a href="#forms" data-target="section" data-icon="edit" data-count="7"></a>
-        <a href="#lists" data-target="section" data-icon="items" data-count="15"></a>
-    </ul>
+       <a href="#nav-2" data-target="article" data-icon="check"  data-count="14"></a>
+       <a href="#test-2" data-target="section" data-icon="wifi"></a>
+
+    </nav>
 </aside>

examples/test/index.html

@@ -64,9 +64,9 @@
 
         <footer class="toolbar with-labels">
             <nav>
-                <a href="#nav-1" data-target="article" data-title="d" data-icon="phone" data-label="Lists" data-count="12"></a>
-                <a href="#nav-2" data-target="article" data-title="b" data-icon="calendar" data-count="17" data-label="Form"></a>
-                <a href="#nav-3" data-target="article" data-title="c"  data-icon="mail" data-label="Emails" data-count="1"></a>
+                <a href="#nav-1" data-target="article" data-title="d" data-icon="phone" data-label="Lists" data-count="1"></a>
+                <a href="#nav-2" data-target="article" data-title="b" data-icon="calendar" data-count="12" data-label="Form"></a>
+                <a href="#nav-3" data-target="article" data-title="c"  data-icon="mail" data-label="Emails" data-count="123"></a>
                 <a href="#nav-4" data-target="article" data-title="a" class="current" data-icon="clock" data-label="box"></a>
             </nav>
         </footer>
@@ -84,19 +84,43 @@
 
 
 
-        <article id="nav-1" class="list">
+        <article id="nav-1" class="list scroll">
             <ul>
-                <li class="red" data-icon="home">
-                    <div class="bubble red onright">23.23</div>
-                    <strong>Lorem Ipsum</strong>
-                    <small>...is a traditional text</small>
+                <li>
+                    <a href="#" >
+                        <strong>List: none</strong>
+                        <small>a: none</small>
+                    </a>
                 </li>
-                <li class="red" data-icon="home">
-                    <div class="bubble green onright">23.23<span class="icon home"></span></div>
-                    <strong>Lorem Ipsum</strong>
-                    <small><span class="icon home"></span>...is a traditional text</small>
+
+                <li class=" selectable" >
+                    <a href="#" data-image="assets/images/avatars/soyjavi.jpg">
+
+                        <div class="onright" data-icon="calendar">2 days ago</div>
+                        <strong>List: .selectable</strong>
+                        <small>a: data-image</small>
+                    </a>
                 </li>
-                <li>
+                 <li class="arrow thumb">
+                    <a href="#" data-image="assets/images/avatars/soyjavi.jpg">
+                        <strong>List: .arrow .thumb </strong>
+                         <small>a: data-image</small>
+                    </a>
+                </li>
+                <li class="red">
+                    <a href="#"  data-icon="home">
+                        <div class="bubble red onright"><span class="icon pushpin"></span>125m</div>
+                        <strong>List: .red</strong>
+                        <small data-icon="home">a: data-icon & .bubble</small>
+                    </a>
+                </li>
+
+                <li class="padding" data-icon="user">
+                    <strong>List: .padding & data-icon</strong>
+                    <small><span class="icon home"></span>a: undefined</small>
+                </li>
+
+                <li class="padding">
                     <input type="text" placeholder="Input text"/>
                     <textarea placeholder="Textarea sample"></textarea>
                     <label class="select">
@@ -107,11 +131,6 @@
                         </select>
                     </label>
                 </li>
-                <li class="red selectable" data-icon="pushpin">
-                    <div class="bubble arcticblue onright">23.23<span class="icon pushpin"></span></div>
-                    <strong>Lorem Ipsum</strong>
-                    <small><span class="icon pushpin"></span>...is a traditional text</small>
-                </li>
             </ul>
 
         </article>

src/boot/Lungo.Boot.Events.js

@@ -32,7 +32,7 @@ LUNGO.Boot.Events = (function(lng, undefined) {
         var resize = 'resize';
 
         lng.dom(SELECTORS.WINDOW).on(resize, _changeOrientation);
-        lng.dom(SELECTORS.HREF_TARGET).touch(_loadTarget);
+        lng.dom(SELECTORS.HREF_TARGET).tap(_loadTarget);
         lng.dom(SELECTORS.HREF_TARGET_FROM_ASIDE).tap(_hideAsideIfNecesary);
     };
 

src/stylesheets/Lungo.layout.aside.less

@@ -37,60 +37,29 @@ aside {
         position: relative;
         left: none;
     }
-    /*
-    & a {
-        display: block;
-        height: 40px;
-        font-size: 14px;
-        line-height: 40px;
-        overflow: hidden;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-    }
-
-
-    & .bubble {
-        float: right;
-        padding-bottom: 0px;
-    }
-    & *.not(.anchor) .bubble { margin-top: 13px; }
-    & *.anchor .bubble { margin-top: 2px; }
-
-    & .icon {
-        width: 24px;
-        float: left;
-        margin: 8px 4px 0 0;
-
-        font-size: 24px;
-        line-height: 24px;
-        text-align: center;
-    }
-
-    & .anchor {
-        font-weight: bold;
-        line-height: 19px;
-    }
 
     &.small {
         width: @aside-width-small;
 
-        & a {
-            padding: 0 8px;
-            height: @aside-width-small;
-        }
-        & .icon {
-            height: 48px;
-            width: 48px;
-            font-size: 48px;
-            line-height: 48px;
-            //background: red;
+        & nav {
+            margin-top: @header-height;
+            & a {
+                padding: 0px;
+                width: @aside-width-small;
+                height: @aside-width-small;
+            }
+            & .icon {
+                font-size: 64px;
+                text-align: center;
+            }
+
+            & .bubble {
+                left: -24px;
+            }
         }
 
-        & .bubble {
-            margin-top: -48px;
-        }
+
     }
-    */
 }
 
 @media handheld, only screen and (min-width: 768px) {

src/stylesheets/Lungo.layout.list.less

@@ -17,7 +17,7 @@
         list-style-type: none;
 
         &.padding {
-            padding: 8px 6px;
+            padding: 8px;
         }
 
         & a {
@@ -42,7 +42,7 @@
             transform: rotate(45deg);
         }
 
-         & .icon, & img {
+        & .icon, & img {
             float: left;
             width: 32px;
             height: 32px;
@@ -60,6 +60,7 @@
         }
     }
 
+
     & small {
         display: block;
         overflow: hidden;

src/stylesheets/Lungo.theme.default.less

@@ -18,7 +18,7 @@
         @theme-highlight-color: #1b6777;
         @theme-highlight-text-shadow: 0 1px 0 rgba(255,255,255,0.2);
 
-@border-radius-section: 5px;
+@border-radius-section: 4px;
 
 @color-border: #2566a4;
     @color-border-light: #64b9e2;
@@ -125,18 +125,30 @@ aside {
 		.box-shadow(~"inset 0 1px 0 #434b55, inset 0 -1px 0 #384352");
     	.linear-gradient(top, ~',#2c3440 0%', ~',#242d38 100%');
     	
+    	& nav a {
+			.box-shadow(~"1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1)");
+		}	
 	}
 	
 	& .list li {
         color: #F0F0F0;
 		background: none;
         border-bottom: 1px solid #434b55;
-        
-        & a {
+   		& strong {
+			text-shadow: 0 1px 1px black;
+		}
+		
+		& small {
+			color:  rgba(255,255,255,0.3);
+		}
+	}
 	
-	background: red;
-}
+	& a {
+		color: #fff !important;
+		opacity: 0.5;
+		&.current { opacity: 1; }
 	}
+		
 }
 
 section.aside {
@@ -388,8 +400,16 @@ input[type="range"] {
     header .bubble.count {
         .linear-gradient(top, ~','@color-secondary 0%, ~','@color-secondary-dark 100%);
     }
-
-    .list .bubble{
+	
+    article .list .bubble{
 		.box-shadow(~'inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3)');
 	}
+	
+	
+	aside .list .bubble {
+		background: rgba(0,0,0,0.25);
+				.box-shadow(~'inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56');
+		.box-shadow(~'inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2)');
+	}
+		
 /* @end */

src/stylesheets/Lungo.widgets.less

@@ -34,7 +34,6 @@
 .hidden { display: none; }
 .indented > * { padding: 10px; }
 
-
 .icon.small {
     font-size: 20px !important;
     height: 16px !important;
@@ -42,7 +41,6 @@
     line-height: 16px !important;
 }
 
-
 .framed { border: 2px solid #fff;}
 
 .round { .border-radius(4px); }

src/stylesheets/css/Lungo.layout.list.css

@@ -1,4 +1,4 @@
-.list{font-size:1.15em;}.list li{list-style-type:none;}.list li.padding{padding:8px 6px;}
+.list{font-size:1.15em;}.list li{list-style-type:none;}.list li.padding{padding:8px;}
 .list li a{position:relative;display:block;padding:8px;}
 .list li.arrow>a::after{content:'';display:block;width:6px;height:6px;border-right:3px solid #D0D0D8;border-top:3px solid #D0D0D8;position:absolute;right:12px;top:43%;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
 .list li .icon,.list li img{float:left;width:32px;height:32px;margin-right:8px;font-size:46px;line-height:32px;text-align:center;}

src/stylesheets/css/Lungo.theme.default.css

@@ -31,15 +31,15 @@ section > header {
   -webkit-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
   -moz-box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
   box-shadow: inset 0 1px 0  #64b9e2 , inset 0 -1px 0  #2566a4;
-  -webkit-border-radius: 5px 5px 0px 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-border-radius: 5px 5px 0px 0px;
-  -moz-border-radius: 5px 5px 0px 0px;
-  border-radius: 5px 5px 0px 0px;
+  -webkit-border-radius: 4px 4px 0px 0px;
+  -moz-border-radius: 4px 4px 0px 0px;
+  border-radius: 4px 4px 0px 0px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -67,15 +67,15 @@ section > footer {
   background-image: linear-gradient(top , #353b42 0% , #272a2d 60%);
   border-top: 1px inset #2A2A2A;
   color: #353b42;
-  -webkit-border-radius: 0px 0px 5px 5px;
-  -moz-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
-  -webkit-border-radius: 0px 0px 5px 5px;
-  -moz-border-radius: 0px 0px 5px 5px;
-  border-radius: 0px 0px 5px 5px;
+  -webkit-border-radius: 0px 0px 4px 4px;
+  -moz-border-radius: 0px 0px 4px 4px;
+  border-radius: 0px 0px 4px 4px;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
@@ -193,13 +193,32 @@ aside footer {
   background-image: -o-linear-gradient(top ,#2c3440 0% ,#242d38 100%);
   background-image: linear-gradient(top ,#2c3440 0% ,#242d38 100%);
 }
+aside header nav a,
+aside footer nav a {
+  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+  box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+  -webkit-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+  -moz-box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+  box-shadow: 1px 0 0 rgba(255,255,255,0.1), inset -1px 0 0 rgba(0,0,0,0.1);
+}
 aside .list li {
   color: #F0F0F0;
   background: none;
   border-bottom: 1px solid #434b55;
 }
-aside .list li a {
-  background: red;
+aside .list li strong {
+  text-shadow: 0 1px 1px black;
+}
+aside .list li small {
+  color: rgba(255, 255, 255, 0.3);
+}
+aside a {
+  color: #fff !important;
+  opacity: 0.5;
+}
+aside a.current {
+  opacity: 1;
 }
 section.aside {
   -webkit-box-shadow: -4px 0 8px rgba(0,0,0,0.5);
@@ -721,7 +740,7 @@ header .bubble.count {
   background-image: -o-linear-gradient(top , #353b42 0% , #272a2d 100%);
   background-image: linear-gradient(top , #353b42 0% , #272a2d 100%);
 }
-.list .bubble {
+article .list .bubble {
   -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
@@ -729,4 +748,19 @@ header .bubble.count {
   -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
   box-shadow: inset 1px 0 0 rgba(0,0,0,0.3), inset 0 1px 0 rgba(0,0,0,0.3), inset -1px 0 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(0,0,0,0.3);
 }
+aside .list .bubble {
+  background: rgba(0, 0, 0, 0.25);
+  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -webkit-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -moz-box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  box-shadow: inset 0 1px 0 #1b212a), inset 0 -1px 0 #454c56;
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+  box-shadow: inset 0 1px 0 rgba(0,0,0,0.3), inset 0 -1px 0 rgba(255,255,255,0.2);
+}
 /* @end */