Просмотр исходного кода

Optimized behavior for aside in tablet device

soyjavi 13 лет назад
Родитель
Сommit
3da224167c

+ 16 - 5
example/navigation.html

@@ -20,24 +20,32 @@
 
 <body>
     <aside id="a">
-        <header data-title="aside"></header>
+        <header data-title="aside a"></header>
         <article></article>
     </aside>
 
-    <section id="zero" data-transition="slide" data-children="one" data-aside="a">
+    <aside id="b">
+        <header data-title="aside b"></header>
+        <article></article>
+    </aside>
+
+    <section id="zero" data-transition data-children="one" data-aside="a">
         <header data-title="Zero">
             <nav class="left">
                 <button data-icon="list" data-view-aside="a"></button>
             </nav>
             <nav class="right">
-                <button data-icon="arrow-right" data-view-section="two"></button>
+                <button data-icon="arrow-right" data-view-section="one"></button>
             </nav>
         </header>
         <article id="zero-1"></article>
     </section>
 
-    <section id="one" data-transition="slide" data-children="two" data-aside="a">
-        <header data-title="One">
+    <section id="one" data-transition="slide" data-children="two" data-aside="b">
+        <header data-title="One" data-back="home">
+            <nav class="left">
+                <button data-icon="list" data-view-aside="b"></button>
+            </nav>
             <nav class="right">
                 <button data-icon="arrow-right" data-view-section="two"></button>
             </nav>
@@ -78,6 +86,9 @@
             version: '2.2',
             history: false
         });
+
+        // Lungo.Notification.show("user", "Hello world! yeah");
+        // Lungo.Notification.show()
     </script>
 </body>
 </html>

+ 5 - 1
src/modules/Lungo.Aside.coffee

@@ -21,7 +21,11 @@ Lungo.Aside = do(lng = Lungo) ->
 
     # Deactive
     if current_aside and aside_id isnt current_aside?.attr(C.ATTRIBUTE.ID)
-      current_aside.removeClass(C.CLASS.SHOW).removeClass C.CLASS.ACTIVE
+      if lng.DEVICE is C.DEVICE.PHONE
+        current_aside.removeClass(C.CLASS.SHOW).removeClass C.CLASS.ACTIVE
+      else
+        current_aside.addClass(C.CLASS.HIDE)
+        setTimeout (-> current_aside.removeClass(C.CLASS.SHOW).removeClass(C.CLASS.ACTIVE).removeClass(C.CLASS.HIDE)), C.TRANSITION.DURATION
       lng.Element.Cache.aside = null
 
     # Active

+ 1 - 1
src/stylesheets/lungo.media.phone.styl

@@ -41,7 +41,7 @@
           transform translateX(100%)
         &.hide
           transform scale(0.9)
-          z-index: 0
+          z-index: -1
           &:not(.last)
             opacity: 0
             transition none !important

+ 8 - 1
src/stylesheets/lungo.media.tablet.styl

@@ -9,8 +9,15 @@
       transform translateX(-100%)
       transition-property transform
       transition-duration TRANSITION_TIME
+      margin-right: -(ASIDE_WIDTH)
       &.show
         transform translateX(0%)
+        margin-right: 0
+        transition-delay (TRANSITION_TIME / 2)
+      &.hide
+        transform translateX(-100%)
+        margin-right: -(ASIDE_WIDTH)
+        transition-delay 0 !important
 
     & > section
       display: none
@@ -25,7 +32,7 @@
         animation hiding TRANSITION_TIME
 
       &:not([data-children])
-        box-flex (1)
+        box-flex(1)
 
       &[data-children]
         width: 320px