Strona główna Odkrywaj Pomoc
Zaloguj się
pwa
/
Lungo2.0.js
kopia lustrzana https://github.com/xabstract/Lungo2.0.js.git
2
0
Forkuj 0
Pliki Problemy 0 Wiki
Przeglądaj źródła

Layout: NEW CHALLENGE

Javi Jimenez Villar 13 lat temu
rodzic
b76a1104a4
commit
41a6b3fc65
11 zmienionych plików z 189 dodań i 85 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 14 20
      example/components/lungo/lungo.css
  2. 2 2
      example/components/lungo/lungo.js
  3. 152 50
      example/flexbox.html
  4. 1 1
      packages/lungo.thirdparties
  5. 1 1
      src/modules/Lungo.Constants.coffee
  6. 1 1
      src/router/Lungo.Router.Aside.coffee
  7. 6 3
      src/router/Lungo.Router.coffee
  8. 2 4
      src/stylesheets/lungo.layout.nav.styl
  9. 5 2
      src/stylesheets/lungo.media.phone.styl
  10. 2 1
      src/stylesheets/lungo.widgets.button.styl
  11. 3 0
      src/stylesheets/lungo.widgets.styl

Plik diff jest za duży
+ 14 - 20
example/components/lungo/lungo.css


Plik diff jest za duży
+ 2 - 2
example/components/lungo/lungo.js


+ 152 - 50
example/flexbox.html
Wyświetl plik 

@@ -25,61 +25,173 @@
 
 </head>
 
 </head>
 
 
 
 <body class="app">
 
 <body class="app">
 
-
 
-
 
-    <section id="main" data-transition="" data-aside="features" data-child="second">
 
+    <section id="main" data-transition="" data-aside="features" data-children="folk ">
 
         <header>
 
         <header>
 
-            <nav class="left">
 
-                <a href="#features" data-action="aside" data-router="aside" data-icon="menu"></a>
 
+            <nav>
 
+                <a href="#" data-view-aside="features" data-icon="menu"></a>
 
             </nav>
 
             </nav>
 
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
             <img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
 
             <nav class="right">
 
             <nav class="right">
 
-                <a href="#second" data-router="section" class="button theme" data-icon="brand twitter"></a>
 
+                <a href="#" data-article="folks" data-label="folks"></a>
 
+                <a href="#" data-article="products" data-label="products"></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
-        <nav class="groupbar">
 
-            <a href="#layout-art1" data-router="article" data-label="Profile" class="active"></a>
 
-            <a href="#layout-art2" data-router="article" data-label="Inbox" data-count="19"></a>
 
-            <a href="#layout-art3" data-router="article" data-label="Map"></a>
 
-            <a href="#layout-art4" data-router="article" data-label="Settings"></a>
 
+        <nav class="groupbar" data-article="folks">
 
+            <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
 
+            <a href="#" data-view-article="products" data-label="Products" data-count="5"></a>
 
         </nav>
 
         </nav>
 
 
 
-        <article id="layout-art1" class="active"></article>
 
-        <article id="layout-art2"></article>
 
-        <article id="layout-art3"></article>
 
-        <article id="layout-art4"></article>
 
+        <article id="folks" class="list scroll">
 
+            <ul>
 
+                <li class="thumb selectable" data-view-section="folk" data-image="http://cdn.tapquo.com/photos/javi.jpg">
 
+                    <a href="#" >
 
+                        <strong>Javi Jiménez</strong>
 
+                        <small>Founder & CTO</small>
 
+                    </a>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/ina.jpg">
 
+                    <strong>Ignacio Olalde</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aitor.jpg">
 
+                    <strong>Aitor Jimenez</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/manrique.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/josu.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/inigo.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/jany.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/german.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/cata.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/oihane.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+                <li class="thumb" data-image="http://cdn.tapquo.com/photos/aritz.jpg">
 
+                    <strong>Lorem ipsum dolor sit amet</strong>
 
+                    <small>... consectetur adipisicing elit.</small>
 
+                </li>
 
+            </ul>
 
+        </article>
 
+
 
+        <article id="products" class="list scroll">
 
+            <ul>
 
+                <li class="selectable" data-image="http://cdn.tapquo.com/lungo/icon-144.png">
 
+                    <a href="#" data-view-section="quojs">
 
+                        <strong>QuoJS</strong>
 
+                        <small>Micro Mobile JavaScript Library</small>
 
+                    </a>
 
+                </li>
 
+                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png" data-view-section="list"  data-async="app/sections/list.html">
 
+                    <strong>TukTuk</strong>
 
+                    <small>Lorem ipsum dolor sit amet</small>
 
+                </li>
 
+                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
 
+                    <strong>Monocle</strong>
 
+                    <small>Lorem ipsum dolor sit amet</small>
 
+                </li>
 
+                <li data-image="http://cdn.tapquo.com/lungo/icon-144.png">
 
+                    <strong>LungoJS</strong>
 
+                    <small>Lorem ipsum dolor sit amet</small>
 
+                </li>
 
+            </ul>
 
+        </article>
 
 
 
         <footer>
 
         <footer>
 
             <nav>
 
             <nav>
 
-                <a href="#layout-art1" data-router="article" data-icon="home" class="active"></a>
 
-                <a href="#layout-art2" data-router="article" data-icon="inbox" data-count="19"></a>
 
-                <a href="#layout-art3" data-router="article" data-icon="compass"></a>
 
-                <a href="#layout-art4" data-router="article" data-icon="settings"></a>
 
+                <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>
 
             </nav>
 
             </nav>
 
         </footer>
 
         </footer>
 
     </section>
 
     </section>
 
 
 
 
 
-    <section id='second' data-transition="slide" data-aside="features" -data-child="third">
 
-        <header data-title='second' data-back="home">
 
-            <nav class="right">
 
-                <a href="#features2" data-action="aside" data-router="aside" data-icon="menu"></a>
 
+    <section id='folk' data-transition="cover" data-aside="features">
 
+        <header data-title='Javi Jimenez'>
 
+            <nav>
 
+                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
 
 
-        <article id='a' class='active'></article>
 
+        <article id='f1' class='active list scroll'>
 
+            <ul>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+                <li>
 
+                    <strong>lorem</strong>
 
+                </li>
 
+            </ul>
 
+
 
+        </article>
 
     </section>
 
     </section>
 
 
 
 
 
-    <section id='third' data-transition="slide" data-aside="features">
 
-        <header data-title='second' data-back="home">
 
-            <nav class="right">
 
-                <a href="#features2" data-action="aside" data-router="aside" data-icon="menu"></a>
 
+    <section id='quojs' data-transition="slide" data-aside="features2">
 
+        <header data-title='QuoJS'>
 
+            <nav>
 
+                <a href="#" data-view-section="back" data-label="Back" class="button"></a>
 
             </nav>
 
             </nav>
 
         </header>
 
         </header>
 
-
 
-        <article id='a' class='active'></article>
 
+        <article id='q1' class='active'></article>
 
     </section>
 
     </section>
 
 
 
 
 
@@ -94,26 +206,15 @@
 
         <article class="list scroll active">
 
         <article class="list scroll active">
 
             <ul>
 
             <ul>
 
                 <!-- Basic Layout -->
 
                 <!-- Basic Layout -->
 
-                <li class="active">
 
-                    <a href="#layout-art1" data-router="article" data-title="Profile" class="active">
 
-                        <strong>Profile</strong></a>
 
+                <li data-view-article="folks" data-title="Profile" data-icon="users">
 
+                    <div class="tag right">11</div>
 
+                    <strong>Folks</strong>
 
+                    <small>Discover our team!</small>
 
                 </li>
 
                 </li>
 
-                <li>
 
-                    <a href="#layout-art2" data-router="article" data-title="Inbox">
 
-                        <div class="tag right">19</div>
 
-                        <strong>Inbox</strong></a>
 
-                </li>
 
-                <li>
 
-                    <a href="#layout-art3" data-router="article" data-title="Map"><strong>Map</strong></a>
 
-                </li>
 
-                <li>
 
-                    <a href="#layout-art4" data-router="article" data-title="Settings"><strong>Settings</strong></a>
 
-                </li>
 
-                <li>
 
-                    <a href="#second" data-router="section"><strong>Section 2</strong></a>
 
-                </li>
 
-                <li>
 
-                    <a href="#third" data-router="section"><strong>Section 3</strong></a>
 
+                <li data-view-article="products" data-title="Products" data-icon="mobile">
 
+                    <div class="tag right">5</div>
 
+                    <strong>Products</strong>
 
+                    <small>Fueled by coffee</small>
 
                 </li>
 
                 </li>
 
             </ul>
 
             </ul>
 
         </article>
 
         </article>
 
@@ -145,7 +246,8 @@
 
     <script>
 
     <script>
 
         Lungo.init({
 
         Lungo.init({
 
             name: 'Flexbox',
 
             name: 'Flexbox',
 
-            version: '2.2'
 
+            version: '2.2'//,
 
+            // resources: ['app/sections/list.html']
 
         });
 
         });
 
     </script>
 
     </script>
 
 </body>
 
 </body>

+ 1 - 1
packages/lungo.thirdparties
Wyświetl plik 

@@ -1 +1 @@
 
-Subproject commit 95c0fb4e68e2233e527a64b29e56b384640d42ea
 
+Subproject commit 7b9bf5f0ecbcda9c3e3d71ba8e14c3be55289907

+ 1 - 1
src/modules/Lungo.Constants.coffee
Wyświetl plik 

@@ -30,7 +30,7 @@ Lungo.Constants =
 
     MENU_HREF           : "[data-control=menu] a[href]"
 
     MENU_HREF           : "[data-control=menu] a[href]"
 
     INPUT_CHECKBOX      : "input[type=range].checkbox"
 
     INPUT_CHECKBOX      : "input[type=range].checkbox"
 
     NAVIGATION_ITEM     : "a[href][data-router=\"article\"]"
 
     NAVIGATION_ITEM     : "a[href][data-router=\"article\"]"
 
-    REFERENCE_LINK      : " a[href][data-article]"
 
+    ARTICLE_REFERENCE   : "[data-article]"
 
     TITLE               : "header .title, footer .title"
 
     TITLE               : "header .title, footer .title"
 
     ACTIVE_LIST_ITEM    : "li a.active, li.active"
 
     ACTIVE_LIST_ITEM    : "li a.active, li.active"

+ 1 - 1
src/router/Lungo.Router.Aside.coffee
Wyświetl plik 

@@ -47,7 +47,7 @@ Lungo.Aside = do(lng = Lungo) ->
 
   Display an aside element with a particular <section>
 
   Display an aside element with a particular <section>
 
   @method show
 
   @method show
 
   ###
 
   ###
 
-  show = (aside) ->
 
+  show = ->
 
     if lng.Element.Cache.aside?
 
     if lng.Element.Cache.aside?
 
       setTimeout (-> lng.Element.Cache.aside.addClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
       setTimeout (-> lng.Element.Cache.aside.addClass C.CLASS.SHOW), C.TRANSITION.DURATION
 
       if lng.DEVICE is C.DEVICE.PHONE
 
       if lng.DEVICE is C.DEVICE.PHONE

+ 6 - 3
src/router/Lungo.Router.coffee
Wyświetl plik 

@@ -49,6 +49,10 @@ Lungo.Router = do(lng = Lungo) ->
 
       if target.length > 0
 
       if target.length > 0
 
         current.removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
 
         current.removeClass(C.CLASS.ACTIVE).trigger C.TRIGGER.UNLOAD
 
         lng.Element.Cache.article = target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
 
         lng.Element.Cache.article = target.addClass(C.CLASS.ACTIVE).trigger(C.TRIGGER.LOAD)
 
+
 
+        if element.data(C.ATTRIBUTE.TITLE)?
 
+          lng.Element.Cache.section.find(C.QUERY.TITLE).text element.data(C.ATTRIBUTE.TITLE)
 
+
 
         do _url
 
         do _url
 
 
 
 
 
@@ -102,9 +106,8 @@ Lungo.Router = do(lng = Lungo) ->
 
   _updateNavigationElements = (element) ->
 
   _updateNavigationElements = (element) ->
 
     article_id = lng.Element.Cache.article.attr C.ATTRIBUTE.ID
 
     article_id = lng.Element.Cache.article.attr C.ATTRIBUTE.ID
 
     lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE).siblings("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
 
     lng.dom(C.QUERY.ARTICLE_ROUTER).removeClass(C.CLASS.ACTIVE).siblings("[data-view-article=#{article_id}]").addClass(C.CLASS.ACTIVE)
 
-    lng.dom(C.QUERY.REFERENCE_LINK).hide().siblings("[data-article=#{article_id}]").show()
 
-    # if element?.data(C.ATTRIBUTE.TITLE)
 
-    #   lng.Element.Cache.section.find(C.QUERY.TITLE).text element.data(C.ATTRIBUTE.TITLE)
 
+    lng.dom(C.QUERY.ARTICLE_REFERENCE).hide()
 
+    lng.dom("[data-article=#{article_id}]").style("display", "-webkit-box")
 
 
 
   _removeLast = -> _history.length -= 1
 
   _removeLast = -> _history.length -= 1

+ 2 - 4
src/stylesheets/lungo.layout.nav.styl
Wyświetl plik 

@@ -38,9 +38,9 @@ nav
 
         display: inline-block
 
         display: inline-block
 
 
 
 
 
-    &.right a.button:last-child
 
+    &.right a.button, .right button
 
       margin-right: 6px
 
       margin-right: 6px
 
-    &:not(.right) a.button:first-child
 
+    &:not(.right) a.button, :not(.right) button
 
       margin-left: 6px
 
       margin-left: 6px
 
 
 
     & a:not(.button)
 
     & a:not(.button)
 
@@ -70,8 +70,6 @@ nav
 
 
 
 
 
   &.groupbar
 
   &.groupbar
 
-    // position: relative
 
-    // top: HEADER_HEIGHT
 
     height: HEADER_GROUPBAR_HEIGHT
 
     height: HEADER_GROUPBAR_HEIGHT
 
     width: 100%
 
     width: 100%
 
     z-index: 2
 
     z-index: 2

+ 5 - 2
src/stylesheets/lungo.media.phone.styl
Wyświetl plik 

@@ -52,9 +52,11 @@
 
 
 
     /* Transition: COVER */
 
     /* Transition: COVER */
 
     &[data-transition="cover"]
 
     &[data-transition="cover"]
 
-      transform( translateY(110%) )
 
+      transform translateY(110%)
 
       &.show, &.hide
 
       &.show, &.hide
 
-        transform( translateY(0%) )
 
+        transform translateY(0%)
 
+      &.hide
 
+        display: block
 
 
 
     /* Transition: FADE */
 
     /* Transition: FADE */
 
     &[data-transition="fade"]
 
     &[data-transition="fade"]
 
@@ -63,3 +65,4 @@
 
         opacity: 1
 
         opacity: 1
 
       &:hide
 
       &:hide
 
         opacity: 0
 
         opacity: 0
 
+

+ 2 - 1
src/stylesheets/lungo.widgets.button.styl
Wyświetl plik 

@@ -33,7 +33,8 @@
 
 
 
   &.anchor
 
   &.anchor
 
     display: block
 
     display: block
 
-    width: inherit
 
+    // width: inherit
 
+    width: 100%
 
     position: relative
 
     position: relative
 
     & .icon
 
     & .icon
 
       position: absolute
 
       position: absolute

+ 3 - 0
src/stylesheets/lungo.widgets.styl
Wyświetl plik 

@@ -102,6 +102,9 @@ size = 5px
 
     text-align: center
 
     text-align: center
 
   &.align_justify
 
   &.align_justify
 
     text-align: justify
 
     text-align: justify
 
+
 
+  &.tiny
 
+    font-size: 0.8em
 
   &.small
 
   &.small
 
     font-size: FONT_SIZE_SMALL
 
     font-size: FONT_SIZE_SMALL
 
   &.big
 
   &.big