framework7rails 3.0.0 → 4.0.0

data/Framework7-0.9.6/kitchen-sink/notifications.html

@@ -1,21 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Notifications</div>
-    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="notifications" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>Framework7 comes with simple Notifications component that allows you to show some useful messages to user.</p>
-        <p><a href="#" class="button ks-notification-simple">Default notification</a></p>
-        <p><a href="#" class="button ks-notification-full">Full-layout notification</a></p>
-        <p><a href="#" class="button ks-notification-custom">With custom image</a></p>
-        <p><a href="#" class="button ks-notification-callback">With callback on close</a></p>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/panel-right2.html

@@ -1,16 +0,0 @@
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="sliding center">Panel Page 2</div>
-  </div>
-</div>
-<div class="pages">
-  <div data-page="panel-right2" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>This is a panel page 2</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex!</p>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/panel-right3.html

@@ -1,16 +0,0 @@
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Panel Page 3</div>
-  </div>
-</div>
-<div class="pages">
-  <div data-page="panel-right3" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>This is a panel page 3</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo saepe aspernatur inventore dolorum voluptates consequatur tempore ipsum! Quia, incidunt, aliquam sit veritatis nisi aliquid porro similique ipsa mollitia eaque ex!</p>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/panels.html

@@ -1,23 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Side Panels</div>
-    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="panels" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>Framework7 comes with 2 panels (on left and on right), both are optional. They have two different layouts/effects - <b>cover</b> above the content (like left panel here) and <b>reveal</b> (like right panel). You can put absolutely anything inside: data lists, forms, custom content, and even other isolated app view (like in right panel now) with its own dynamic navbar. Checkout panels:</p>
-      </div>
-      <div class="content-block">
-        <div class="row">
-          <div class="col-50"><a href="#" class="button open-panel">Left Panel</a></div>
-          <div class="col-50"><a href="#" data-panel="right" class="button open-panel">Right Panel</a></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/photo-browser.html

@@ -1,36 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Photo Browser</div>
-    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="photo-browser" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>Photo Browser is a standalone and highly configurable component that allows to open window with photo viewer and navigation elements with the following features:</p>
-        <ul>
-          <li>Swiper between photos</li>
-          <li>Multi-gestures support for zooming</li>
-          <li>Toggle zoom by double tap on photo</li>
-          <li>Single click on photo to toggle Exposition mode</li>
-        </ul>
-        <p>Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:</p>
-        <div class="row">
-          <div class="col-33"><a href="#" class="button ks-pb-standalone">Standalone</a></div>
-          <div class="col-33"><a href="#" class="button ks-pb-popup">Popup</a></div>
-          <div class="col-33"><a href="#" class="button ks-pb-page">Page</a></div>
-        </div>
-      </div>
-      <div class="content-block">
-        <p>For Popup and Standalone types, Photo Browser suppots 2 default themes - default Light (like in previous examples) and Dark theme. Here is a Dark theme examples:</p>
-        <div class="row">
-          <div class="col-50"><a href="#" class="button ks-pb-standalone-dark">Standalone</a></div>
-          <div class="col-50"><a href="#" class="button ks-pb-popup-dark">Popup</a></div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/popover.html

@@ -1,21 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Popover</div>
-    <div class="right"><a href="#" data-popover=".popover-menu" class="open-popover link icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="popover" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>Of course, Framework7 has Popovers. Popovers may be called on absolutely any element with dynamic positioning. Note that due to Apple guide lines it is not recommended to use popovers on iPhone, only on bigger screens (iPad), so on small screen it may have wrong positioning because it is not fit to screen. For iPhone it is recommended to use <a href="modals.html">actions and modals</a> instead. Try the "bars" icon on navbar, "menu" link on bottom toolbar, links and buttons in text below:</p>
-        <p><a href="#" data-popover=".popover-menu" class="button open-popover">Open popover on me</a></p>
-        <p>Mauris fermentum neque et luctus venenatis. Vivamus a sem rhoncus, ornare tellus eu, euismod mauris. In porta turpis at semper convallis. Duis adipiscing leo eu nulla lacinia, quis rhoncus metus condimentum. Etiam nec malesuada nibh. Maecenas quis lacinia nisl, vel posuere dolor. Vestibulum condimentum, nisl ac vulputate egestas, neque enim dignissim elit, rhoncus volutpat magna enim a est. Aenean sit amet ligula neque. Cras suscipit rutrum enim. Nam a odio facilisis, elementum tellus non, <a href="#" class="open-popover" data-popover=".popover-menu">popover</a> tortor. Pellentesque felis eros, dictum vitae lacinia quis, lobortis vitae ipsum. Cras vehicula bibendum lorem quis imperdiet.</p>
-        <p>In hac habitasse platea dictumst. Etiam varius, ante vel ornare facilisis, velit massa rutrum dolor, ac porta magna magna lacinia nunc. Curabitur <a href="#" class="open-popover" data-popover=".popover-menu">popover!</a> cursus laoreet. Aenean vel tempus augue. Pellentesque in imperdiet nibh. Mauris rhoncus nulla id sem suscipit volutpat. Pellentesque ac arcu in nisi viverra pulvinar. Nullam nulla orci, bibendum sed ligula non, ullamcorper iaculis mi. In hac habitasse platea dictumst. Praesent varius at nisl eu luctus. Cras aliquet porta est. Quisque elementum quis dui et consectetur. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sed laoreet purus. Pellentesque eget ante ante.</p>
-        <p>Duis et ultricies nibh. Sed facilisis turpis urna, ac imperdiet erat venenatis eu. Proin sit amet faucibus tortor, et varius sem. Etiam vitae lacinia neque. Aliquam nisi purus, interdum in arcu sed, ultrices rutrum arcu. Nulla mi turpis, consectetur vel enim quis, facilisis viverra dui. Aliquam quis convallis tortor, quis semper ligula. Morbi ullamcorper <a href="#" class="open-popover" data-popover=".popover-menu">one more popover</a> massa at accumsan. Etiam purus odio, posuere in ligula vitae, viverra ultricies justo. Vestibulum nec interdum nisi. Aenean ac consectetur velit, non malesuada magna. Sed pharetra vehicula augue, vel venenatis lectus gravida eget. Curabitur lacus tellus, venenatis eu arcu in, interdum auctor nunc. Nunc non metus neque. Suspendisse viverra lectus sed risus aliquet, vel accumsan dolor feugiat.</p>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/preloader.html

@@ -1,28 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Preloader</div>
-    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="preloader" class="page">
-    <div class="page-content">
-      <div class="content-block">
-        <p>How about an activity indicator? Framework 7 has a nice one. The F7 preloader is made with SVG and animated with CSS so it can be easily resized. Two options are available: the default is for a light background and another on a dark background. The HTML is pretty easy, just add a .preloader class to any element. For the dark background option, also add a .dark class. Here are some examples:</p>
-      </div>
-      <div class="content-block row ks-preloaders">
-        <div class="col-25">Default:<br><span class="preloader"></span></div>
-        <div style="background-color: #333;" class="col-25">Dark:<br><span class="preloader preloader-white"></span></div>
-        <div class="col-25">Big:<br><span class="preloader ks-preloader-big"></span></div>
-        <div style="background-color: #333;" class="col-25">Dark:<br><span class="preloader preloader-white ks-preloader-big"></span></div>
-      </div>
-      <div class="content-block">
-        <p>With <b>app.showIndicator()</b> you can call small overlay with indicator:</p><a href="#" class="button demo-indicator">Open small indicator overlay</a>
-        <p>With <b>app.showPreloader()</b> you can call modal window with preloader:</p><a href="#" class="button demo-preloader">Open preloader modal</a>
-        <p>With <b>app.showPreloader('My text...')</b> you can call it with custom title:</p><a href="#" class="button demo-preloader-custom">Open custom preloader</a>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html

@@ -1,52 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Pull To Refresh</div>
-    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="pull-to-refresh" class="page">
-    <div class="page-content pull-to-refresh-content">
-      <div class="pull-to-refresh-layer">
-        <div class="preloader"></div>
-        <div class="pull-to-refresh-arrow"></div>
-      </div>
-      <div class="list-block media-list">
-        <ul>
-          <li class="item-content">
-            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?1" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Yellow Submarine</div>
-              </div>
-              <div class="item-subtitle">Beatles</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?2" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Don't Stop Me Now</div>
-              </div>
-              <div class="item-subtitle">Queen</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-media"><img src="http://hhhhold.com/88/d/jpg?3" width="44"/></div>
-            <div class="item-inner">
-              <div class="item-title-row">
-                <div class="item-title">Billie Jean</div>
-              </div>
-              <div class="item-subtitle">Michael Jackson</div>
-            </div>
-          </li>
-        </ul>
-        <div class="list-block-label">
-          <p>Just pull page down to let the magic happen.<br>Note that pull-to-refresh feature is optimised for touch and native iOS scrolling so it may not work on desktop browser.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>

data/Framework7-0.9.6/kitchen-sink/searchbar.html

@@ -1,233 +0,0 @@
-
-<div class="navbar">
-  <div class="navbar-inner">
-    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
-    <div class="center sliding">Search Bar</div>
-    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
-  </div>
-</div>
-<div class="pages navbar-through">
-  <div data-page="searchbar" class="page">
-    <form data-search-list=".search-here" data-search-in=".item-title" class="searchbar">
-      <div class="searchbar-input">
-        <input type="search" placeholder="Search"/><a href="#" class="searchbar-clear"></a>
-      </div><a href="#" class="searchbar-cancel">Cancel</a>
-    </form>
-    <div class="searchbar-overlay"></div>
-    <div class="page-content">
-      <div class="list-block searchbar-not-found">
-        <ul>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Nothing found</div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="list-block search-here searchbar-found">
-        <ul>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Acura </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Audi</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">BMW</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Cadillac </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Chevrolet </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Chrysler </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Dodge </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Ferrari </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Ford </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">GMC </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Honda</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Hummer</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Hyundai</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Infiniti </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Isuzu </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Jaguar </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Jeep </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Kia</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Lamborghini </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Land Rover</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Lexus </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Lincoln </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Lotus </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Mazda</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Mercedes-Benz</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Mercury </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Mitsubishi</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Nissan </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Oldsmobile </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Peugeot </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Pontiac </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Porsche</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Regal</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Saab </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Saturn </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Subaru </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Suzuki </div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Toyota</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Volkswagen</div>
-            </div>
-          </li>
-          <li class="item-content">
-            <div class="item-inner">
-              <div class="item-title">Volvo</div>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</div>