|
|
@@ -1,237 +0,0 @@
|
|
|
-<!doctype html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>Lungo Flexbox - SDK</title>
|
|
|
- <meta name="description" content="">
|
|
|
- <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
|
|
|
- <meta name="HandheldFriendly" content="True">
|
|
|
- <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
|
- <meta name="apple-mobile-web-app-capable" content="yes">
|
|
|
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
|
- <meta name="format-detection" content="telephone=no">
|
|
|
- <meta http-equiv="cleartype" content="on">
|
|
|
-
|
|
|
- <!-- Main Stylesheet -->
|
|
|
- <link rel="stylesheet" href="components/lungo.brownie/lungo.css">
|
|
|
- <link rel="stylesheet" href="components/lungo.brownie/lungo.theme.css">
|
|
|
- <link rel="stylesheet" href="components/lungo.icon/lungo.icon.css">
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <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>
|
|
|
- <a href="#" data-view-menu="options" data-icon="star"></a>
|
|
|
- <a href="#" data-icon="user" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
|
|
|
- <a href="#" class="button" data-article="products" data-label="Folks" data-view-article="folks"></a>
|
|
|
- <a href="#" data-icon="user" class="button" data-article="products" data-view-article="folks"></a>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <div class="title centered">Folks</div>
|
|
|
-
|
|
|
- <nav class="on-right">
|
|
|
- <button data-icon="user" class="button" data-article="folks" data-label="Products" data-view-article="products" data-async="static/articles/products.html"></button>
|
|
|
- </nav>
|
|
|
- </header>
|
|
|
-
|
|
|
- <nav id="options" data-control="menu" class="icons">
|
|
|
- <a href="#" data-view-article="folks" data-icon="star" data-title="Folks">Folks</a>
|
|
|
- <a href="#" data-view-article="products" data-icon="heart" data-title="Explore">Explore</a>
|
|
|
- <a href="#" data-view-article="article" data-icon="comments">Activity</a>
|
|
|
- <a href="#" data-view-article="article" data-icon="user">Profile</a>
|
|
|
- <a href="#" data-view-section="folk" data-icon="thumbs-up">Folk</a>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <nav data-control="groupbar" data-os="android" data-article="folks">
|
|
|
- <a href="#" data-view-article="folks" data-label="Folks" data-count="11"></a>
|
|
|
- <a href="#" data-view-article="products" data-async="static/articles/products.html" data-label="Products" ></a>
|
|
|
- </nav>
|
|
|
-
|
|
|
- <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="#" >
|
|
|
- <div class="right tag">@soyjavi</div>
|
|
|
- <strong class="text bold">Javi Jiménez</strong>
|
|
|
- <small>Founder & CTO</small>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
- <li class="thumb" data-image="http://cdn.tapquo.com/photos/aitor.jpg">
|
|
|
- <div class="right tag bck success">@aitorjv</div>
|
|
|
- <strong class="text bold">Aitor Jimenez</strong>
|
|
|
- <small>Founder & Business Management</small>
|
|
|
- </li>
|
|
|
- <li class="thumb" data-view-section="folk2" data-image="http://cdn.tapquo.com/photos/ina.jpg">
|
|
|
- <strong class="text bold">Ignacio Olalde</strong>
|
|
|
- <small>... consectetur adipisicing elit.</small>
|
|
|
-
|
|
|
- <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-view-section="folk2" data-image="http://cdn.tapquo.com/photos/mikel.jpg">
|
|
|
- <strong class="text bold">Mikel de Eulate</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/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>
|
|
|
-
|
|
|
- <footer data-os="ios">
|
|
|
- <nav>
|
|
|
- <a href="#" data-view-article="folks" data-icon="desktop" data-count="11"></a>
|
|
|
- <a href="#" data-view-article="products" data-async="static/articles/products.html" data-icon="tablet" data-count="5"></a>
|
|
|
- </nav>
|
|
|
- </footer>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section id="test" data-transition="slide">
|
|
|
- <header data-title="Test" data-back="chevron-left"></header>
|
|
|
- <article></article>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section id='folk' data-transition="slide" data-aside="features" data-children="x">
|
|
|
- <header data-title='Javi Jimenez'>
|
|
|
- <nav>
|
|
|
- <a href="#" data-view-section="back" data-label="Back" class="button"></a>
|
|
|
- </nav>
|
|
|
- </header>
|
|
|
- <article id='f1' class='active list scroll'>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <strong>lorem</strong>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </article>
|
|
|
- </section>
|
|
|
-
|
|
|
- <section id='folk2' data-transition="cover" data-aside="features" data-children="x">
|
|
|
- <header data-title='Javi Jimenez'>
|
|
|
- <nav>
|
|
|
- <a href="#" data-view-section="back" data-label="Back" class="button"></a>
|
|
|
- </nav>
|
|
|
- </header>
|
|
|
- <article id='f1' class='active list scroll'>
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <strong>lorem</strong>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </article>
|
|
|
- </section>
|
|
|
-
|
|
|
- <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='q1' class='active'></article>
|
|
|
- </section>
|
|
|
-
|
|
|
- <aside id="features" >
|
|
|
- <header data-title="Features">
|
|
|
- <nav class="on-right">
|
|
|
- <a href="#" class="buttons" data-icon="settings"></a>
|
|
|
- </nav>
|
|
|
- </header>
|
|
|
- <article class="list scroll active">
|
|
|
- <ul>
|
|
|
- <!-- Basic Layout -->
|
|
|
- <li data-view-article="folks" data-title="Profile" data-icon="user">
|
|
|
- <a href="#">
|
|
|
- <div class="tag right">11</div>
|
|
|
- <strong>Folks</strong>
|
|
|
- </a>
|
|
|
- </li>
|
|
|
-
|
|
|
- <li data-view-article="products" data-title="Third Parties" data-async="static/articles/products.html">
|
|
|
- <div class="tag right">5</div>
|
|
|
- <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="desktop">
|
|
|
- <div class="tag right">5</div>
|
|
|
- <strong>Folk F1</strong>
|
|
|
- <small>Fueled by coffee</small>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </article>
|
|
|
- </aside>
|
|
|
-
|
|
|
- <aside id="features2" class="on-right">
|
|
|
- <header data-title="Features 2"></header>
|
|
|
-
|
|
|
- <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>
|
|
|
- </ul>
|
|
|
- </article>
|
|
|
- </aside>
|
|
|
-
|
|
|
- <!-- Lungo dependencies -->
|
|
|
- <script src="components/quojs/quo.js"></script>
|
|
|
- <script src="components/lungo.brownie/lungo.debug.js"></script>
|
|
|
-
|
|
|
- <!-- LungoJS - Sandbox App -->
|
|
|
- <script>
|
|
|
- Lungo.init({
|
|
|
- name: 'Flexbox',
|
|
|
- version: '2.2',
|
|
|
- history: false
|
|
|
- });
|
|
|
-
|
|
|
- Lungo.ready(function() {
|
|
|
- // pull = new Lungo.Element.Pull('section#main article', {
|
|
|
- // onPull: "Pull down to refresh",
|
|
|
- // onRelease: "Release to get new data",
|
|
|
- // onRefresh: "Refreshing...",
|
|
|
- // callback: function() {
|
|
|
- // setTimeout(function(){
|
|
|
- // pull.hide();
|
|
|
- // }, 1000)
|
|
|
- // }
|
|
|
- // });
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
soyjavi