|
|
@@ -25,61 +25,173 @@
|
|
|
</head>
|
|
|
|
|
|
<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>
|
|
|
- <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>
|
|
|
<img src="http://cdn.tapquo.com/lungo/logo.png" class="title centered">
|
|
|
<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>
|
|
|
</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>
|
|
|
|
|
|
- <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>
|
|
|
<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>
|
|
|
</footer>
|
|
|
</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>
|
|
|
</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 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>
|
|
|
</header>
|
|
|
-
|
|
|
- <article id='a' class='active'></article>
|
|
|
+ <article id='q1' class='active'></article>
|
|
|
</section>
|
|
|
|
|
|
|
|
|
@@ -94,26 +206,15 @@
|
|
|
<article class="list scroll active">
|
|
|
<ul>
|
|
|
<!-- 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>
|
|
|
- <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>
|
|
|
</ul>
|
|
|
</article>
|
|
|
@@ -145,7 +246,8 @@
|
|
|
<script>
|
|
|
Lungo.init({
|
|
|
name: 'Flexbox',
|
|
|
- version: '2.2'
|
|
|
+ version: '2.2'//,
|
|
|
+ // resources: ['app/sections/list.html']
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
Javi Jimenez Villar