Fix errors in layout

lwh912 · Mar 5, 2013 · b805fab · b805fab
1 parent 3886e2a
commit b805fab
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 21 deletions.
diff --git a/example/app/app.js b/example/app/app.js
@@ -177,6 +177,6 @@ Lungo.ready(function() {
     //     }
     // });
     // Lungo.Notification.html("<h1 class='title'>Title</h1><article>aslkdkals</article><a href='#' class='button large anchor' >Seleccionar</a>", "Cancelar");
-    Lungo.Notification.push("Lorem ipsum dolor sit amet", "home");
+    // Lungo.Notification.push("Lorem ipsum dolor sit amet", "home");
 
 });
diff --git a/example/flexbox.html b/example/flexbox.html
@@ -26,7 +26,7 @@
 
 <body class="app">
 
-    <section id="main" data-transition="" data-aside="features" data-children="folk ">
+    <section id="main" data-transition="slide" data-aside="features" data-children="folk ">
         <header>
             <nav class="left">
                 <a href="#" data-view-aside="features" data-icon="menu"></a>
@@ -59,7 +59,7 @@
             <a href="#" data-view-article="products" data-async="app/articles/products.html" data-label="Products" data-count="5"></a>
         </nav>
 
-        <article id="folks" class="list scroll indente-d">
+        <article id="folks" class="active list scroll indente-d">
             <ul>
                 <li class="thumb selectable arrow" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
                     <a href="#" >
@@ -110,6 +110,10 @@
             </ul>
         </article>
 
+        <article id="sub">
+            sub
+        </article>
+
         <!--
         <article id="products" class="list scroll">
             <ul>
@@ -137,12 +141,16 @@
 
         <footer>
             <nav>
-                <a href="#" data-view-article="folks" data-icon="users" data-count="11"></a>
-                <a href="#" data-view-article="products" data-icon="mobile" data-count="5"></a>
+                <a href="#" data-view-article="folks" data-icon="desktop" data-count="11"></a>
+                <a href="#" data-view-article="products" data-icon="tablet" data-count="5"></a>
             </nav>
         </footer>
     </section>
 
+    <section id="test">
+        <header data-title="Test" data-back="home"></header>
+        <article></article>
+    </section>
 
     <section id='folk' data-transition="slide" data-aside="features" data-children="x">
         <header data-title='Javi Jimenez'>
@@ -225,7 +233,7 @@
         <article class="list scroll active">
             <ul>
                 <!-- Basic Layout -->
-                <li data-view-article="folks" data-title="Profile" data-icon="users">
+                <li data-view-article="folks" data-title="Profile" data-icon="user">
                     <a href="#">
                         <div class="tag right">11</div>
                         <strong>Folks</strong>
@@ -238,8 +246,11 @@
                     <strong>Products</strong>
                     <small>Fueled by coffee</small>
                 </li>
+                <li data-view-section="test" data-icon="desktop">
+                    <strong>Section TEST</strong>
+                </li>
 
-                <li data-view-section="folk" data-view-article="f1" data-icon="mobile">
+                <li data-view-section="folk" data-view-article="f1" data-icon="desktop">
                     <div class="tag right">5</div>
                     <strong>Folk F1</strong>
                     <small>Fueled by coffee</small>
@@ -271,11 +282,14 @@
         Lungo.init({
             name: 'Flexbox',
             version: '2.2',
-            history: true
+            history: false
             //,
             // resources: ['app/sections/list.html']
         });
 
+        Lungo.ready(function() {
+            // Lungo.Router.article("main", "sub");
+        });
         // Lungo.Notification.show("hola", "user");
 
         // Lungo.Notification.show();

diff --git a/src/stylesheets/lungo.layout.list.styl b/src/stylesheets/lungo.layout.list.styl
@@ -50,7 +50,7 @@
         margin-top: -(LIST_PADDING)
         margin-left: -(LIST_PADDING_HORIZONTAL)
 
-        height: S = 60px
+        height: S = 61px
         width: S
         font-size: 3.6em
         line-height: 1.3em

diff --git a/src/stylesheets/lungo.layout.nav.styl b/src/stylesheets/lungo.layout.nav.styl
@@ -95,7 +95,7 @@ nav
     top: HEADER_HEIGHT
     visibility: hidden
     z-index: 2
-    width: inherit
+    width: 100%
     text-align: center
 
     transform translateY(-120%)

diff --git a/src/stylesheets/lungo.layout.styl b/src/stylesheets/lungo.layout.styl
@@ -17,12 +17,6 @@ body, html
   overflow: hidden
 
 body
-  &[data-position="absolute"] > section
-    position: absolute
-
-  &[data-position="fixed"] > section
-    position: fixed
-
   /* ========================================================================= */
   /* ============================= ASIDE/SECTION ============================= */
   /* ========================================================================= */
@@ -55,7 +49,7 @@ body
         z-index: -1
         margin: 0 4px
         float: left
-        font-size: (FONT_SIZE_BIG * 1.2)
+        font-size: FONT_SIZE_LARGE
         box-flex(1)
 
         &.centered

diff --git a/src/stylesheets/lungo.media.phone.styl b/src/stylesheets/lungo.media.phone.styl
@@ -3,11 +3,19 @@
 /* ==== Any phone ==== */
 @media only screen and (max-width: 767px)
   body
+    &[data-position="absolute"] > section
+      position: absolute
+    &[data-position="fixed"] > section
+      position: fixed
 
     & > aside
       position: absolute
 
     & > section
+      display: none
+      &:not([data-transition]).show
+        display: block
+
       &.show.aside
         &:not(.right)
           transform translateX(ASIDE_WIDTH)
@@ -16,6 +24,7 @@
       &.show.hide
         z-index: -1
 
+
       &[data-transition]
         display-box()
         transition-property opacity, z-index, transform

diff --git a/src/stylesheets/lungo.media.tablet.styl b/src/stylesheets/lungo.media.tablet.styl
@@ -35,7 +35,9 @@
         box-flex (1)
 
       &[data-children]
-        width: 25%
+        width: 320px
+        // width: 25%
+        // max-width: 320px
 
       & [data-view-aside]
         display: none !important

diff --git a/src/stylesheets/lungo.widgets.button.styl b/src/stylesheets/lungo.widgets.button.styl
@@ -14,31 +14,31 @@
   border: none
   cursor: pointer
   font-family: inherit
-  font-size: FONT_SIZE_BIG
   text-align: center
   text-decoration: none
   outline: none
 
   header &
+    font-size: 1.0em
     height: H = 32px
     line-height: H
     padding: 0 8px
     & > .icon
       font-size: 1.3em
     & .icon + abbr
       position: relative
-      top: -3px
+      top: -2px
       left: 1px
       display: inline
 
   article &
+    font-size: FONT_SIZE_BIG
     height: H = 40px
     line-height: (H - 2)
     padding: 0 14px
 
     & .icon + abbr
       margin-left: 6px
-
     &:not(.anchor) .icon
       line-height: (H / 2)