Aside manager & stylesheet

examples/test/app/resources/asides/left.html

@@ -0,0 +1,13 @@
+<aside id="left" class="left">
+    <header data-title="Example of Aside"></header>
+    <article class="list">
+        <ul>
+            <li>
+                <a href="#aside-example" data-target="article" data-icon="user">
+                    <strong>Tap to close</strong>
+                    <small>Lorem ipsum dolor sit amet.</small>
+                </a>
+            </li>
+        </ul>
+    </article>
+</aside>

examples/test/app/resources/asides/mini.html

@@ -1,7 +0,0 @@
-<aside id="kitchen-sink-scroll" class="small -scroll left">
-    <nav>
-        <a href="#nav-1" data-target="article" class="current" data-icon="clock"></a>
-        <a href="#nav-2" data-target="article" data-icon="user" data-count="14"></a>
-        <a href="#test-2" data-target="section" data-icon="pushpin"></a>
-    </nav>
-</aside>

examples/test/app/resources/asides/right.html

@@ -0,0 +1,7 @@
+<aside id="right" class="right small">
+    <nav>
+        <a href="#aside-example" data-target="article" class="current" data-icon="clock"></a>
+        <a href="#aside-example" data-target="article" data-icon="user" data-count="14"></a>
+        <a href="#aside-example" data-target="article" data-icon="pushpin"></a>
+    </nav>
+</aside>

examples/test/app/resources/sections/aside.html

@@ -1,10 +1,9 @@
-<section id="aside" class="extended">
+<section id="asides">
     <header data-back="home" data-title="Aside"></header>
-
-    <nav class="grooupbar">
-        <a href="#" data-icon="left" data-label="Left"></a>
-        <a href="#" data-icon="right" data-label="Right"></a>
-    </nav>
-
-    <article></article>
+    <article id="aside-example" class="indented">
+        <div>
+            <a href="#left" data-target="aside" data-icon="left" class="button big blue">Example of normal aside</a>
+            <a href="#right" data-target="aside" data-icon="right" class="button big red">Example of mini right aside</a>
+        </div>
+    </article>
 </section>

examples/test/kitchensink.html

@@ -153,7 +153,7 @@
             resources: {
                 sections: [ 'notification.html', 'list.html', 'icon.html', 'grid.html', 'form.html', 'aside.html'],
                 templates: [],
-                asides: ['features.html', 'profiles.html']
+                asides: ['features.html', 'left.html', 'right.html']
             }
         });
     </script>

src/stylesheets/Lungo.layout.aside.less

@@ -71,8 +71,8 @@ aside {
             }
 
             & .bubble {
-                top: -36px;
-                left: -16px;
+                top: 4px;
+                left: -22px;
             }
         }
 

src/stylesheets/Lungo.theme.default.less

@@ -9,7 +9,7 @@
 
 @import "constants.less";
 @import "mixins.less";
-@import "lungo.theme.default.font.less";
+// @import "lungo.theme.default.font.less";
 
 @theme: #2A95D3;
 @theme-light:  #39ABE1;
@@ -117,6 +117,10 @@ aside {
         background: @footer-dark; }
 
     & article { background: none; }
+
+    & nav {
+        & .icon {color:white;}
+    }
 }
 
 section.aside {
@@ -172,15 +176,15 @@ aside .list {
             background: none;
             border-top: 1px solid rgba(255,255,255,0.05);
             border-bottom: 1px solid ;
+
             &.current {
                 border-top-color: @theme;
                 .linear-gradient(top, ~','@theme-light 25%, ~','@theme-dark 100%);
-                background-color: @red;
-            }
+                background-color: @red;}
             & strong {
-                text-shadow: 0 1px 1px rgba(0,0,0,0.75);
+                text-shadow: 0 1px 1px rgba(0,0,0,0.5);
                 color: @white; }
-            & small { color:  rgba(255,255,255,0.5); }
+            & small { color: @white; }
         }
     }
 

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

@@ -101,8 +101,8 @@ aside.small nav .icon {
   text-align: center;
 }
 aside.small nav .bubble {
-  top: -36px;
-  left: -16px;
+  top: 4px;
+  left: -22px;
 }
 @media handheld, only screen and (min-width: 768px) {
   .autohide[data-target="aside"] {

src/view/Lungo.View.Aside.js

@@ -61,7 +61,7 @@ Lungo.View.Aside = (function(lng, undefined) {
     var hide = function() {
         var aside = lng.Element.Current.aside;
         if (aside) {
-            lng.Element.Current.section.removeClass(CLASS.ASIDE);
+            lng.Element.Current.section.removeClass(CLASS.ASIDE).removeClass(CLASS.RIGHT).removeClass(CLASS.SMALL);
 
             var aside_stylesheet = _asideStylesheet(aside);
             if (aside_stylesheet) {
@@ -98,8 +98,8 @@ Lungo.View.Aside = (function(lng, undefined) {
 
         //@todo: Refactor
         if (aside_stylesheet) {
-            classes += (aside_stylesheet.indexOf(CLASS.RIGHT) > -1) ? CLASS.RIGHT : '';
-            classes += (aside_stylesheet.indexOf(CLASS.SMALL) > -1) ? CLASS.SMALL : '';
+            classes += (aside_stylesheet.indexOf(CLASS.RIGHT) > -1) ? CLASS.RIGHT + ' ': '';
+            classes += (aside_stylesheet.indexOf(CLASS.SMALL) > -1) ? CLASS.SMALL + ' ': '';
         }
 
         return classes;