framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade

@@ -0,0 +1,239 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="forms.html").back.link
+        i.icon.icon-back 
+        span Forms
+    .center.sliding Form Elements
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="form-elements")
+    .page-content
+      .content-block-title Full Layout
+      .list-block
+        ul
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-name
+              .item-inner 
+                .item-title.label Name
+                .item-input
+                  input(type="text", placeholder="Your name")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-email
+              .item-inner 
+                .item-title.label E-mail
+                .item-input
+                  input(type="email", placeholder="E-mail")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-url
+              .item-inner 
+                .item-title.label URL
+                .item-input
+                  input(type="url", placeholder="URL")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-password
+              .item-inner 
+                .item-title.label Password
+                .item-input
+                  input(type="password", placeholder="Password")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-tel
+              .item-inner 
+                .item-title.label Phone
+                .item-input
+                  input(type="tel", placeholder="Phone")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-gender
+              .item-inner 
+                .item-title.label Gender
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-calendar
+              .item-inner 
+                .item-title.label Birth date
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-calendar
+              .item-inner 
+                .item-title.label Date time
+                .item-input
+                  input(type="datetime-local", placeholder="Birth day")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-toggle
+              .item-inner 
+                .item-title.label Switch
+                .item-input
+                  label.label-switch
+                    input(type="checkbox")
+                    .checkbox
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-settings
+              .item-inner
+                .item-title.label Slider
+                .item-input
+                  .range-slider
+                    input(type="range", min="0", max="100", value="50", step="0.1")
+          li.align-top
+            .item-content
+              .item-media
+                i.icon.icon-form-comment
+              .item-inner 
+                .item-title.label Textarea
+                .item-input
+                  textarea
+      .content-block-title Icons and inputs
+      .list-block
+        ul
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-name
+              .item-inner 
+                .item-input
+                  input(type="text", placeholder="Your name")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-email
+              .item-inner 
+                .item-input
+                  input(type="email", placeholder="E-mail")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-gender
+              .item-inner 
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-calendar
+              .item-inner 
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-toggle
+              .item-inner 
+                .item-input
+                  label.label-switch
+                    input(type="checkbox")
+                    .checkbox
+      .content-block-title Labels and inputs
+      .list-block
+        ul
+          li
+            .item-content
+              .item-inner 
+                .item-title.label Name
+                .item-input
+                  input(type="text", placeholder="Your name")
+          li
+            .item-content
+              .item-inner 
+                .item-title.label E-mail
+                .item-input
+                  input(type="email", placeholder="E-mail")
+          li
+            .item-content
+              .item-inner 
+                .item-title.label Gender
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-inner 
+                .item-title.label Birth date
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30")
+          li
+            .item-content
+              .item-inner 
+                .item-title.label Switch
+                .item-input
+                  label.label-switch
+                    input(type="checkbox")
+                    .checkbox
+      .content-block-title Just inputs
+      .list-block
+        ul
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="text", placeholder="Your name")
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="email", placeholder="E-mail")
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30")
+      .content-block-title Inset, just inputs
+      .list-block.inset
+        ul
+          ul
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="text", placeholder="Your name")
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="email", placeholder="E-mail")
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-inner 
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30")

data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade

@@ -0,0 +1,60 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="forms.html").back.link
+        i.icon.icon-back 
+        span Forms
+    .center.sliding Smart Selects
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="form-selects")
+    .page-content
+      .content-block Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
+      .list-block
+        ul
+          li
+            a(href="#").item-link.smart-select
+              select(name="fruits")
+                option(value="apple", selected=true) Apple
+                option(value="pineapple") Pineapple
+                option(value="pear") Pear
+                option(value="orange") Orange
+                option(value="melon") Melon
+                option(value="peach") Peach
+                option(value="banana") Banana
+              .item-content
+                .item-inner
+                  .item-title Fruit
+          li
+            a(href="#").item-link.smart-select
+              select(name="car", multiple)
+                optgroup(label="Japanese")
+                  option(value="honda", selected=true) Honda
+                  option(value="lexus") Lexus
+                  option(value="mazda") Mazda
+                  option(value="nissan") Nissan
+                  option(value="toyota") Toyota
+                optgroup(label="German")
+                  option(value="audi", selected=true) Audi
+                  option(value="bmw") BMW
+                  option(value="mercedes") Mercedes
+                  option(value="vw") Volkswagen
+                  option(value="volvo") Volvo
+                optgroup(label="American")
+                  option(value="cadillac") Cadillac
+                  option(value="chrysler") Chrysler
+                  option(value="dodge") Dodge
+                  option(value="ford", selected=true) Ford
+              .item-content
+                .item-inner
+                  .item-title Car
+          li
+            a(href="#").item-link.smart-select
+              select(name="mac-windows")
+                option(value="mac", selected=true) Mac
+                option(value="windows") Windows
+              .item-content
+                .item-inner
+                  .item-title Mac or Windows

data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade

@@ -0,0 +1,134 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="forms.html").back.link
+        i.icon.icon-back 
+        span Forms
+    .center.sliding Form Storage
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="form-storage")
+    .page-content
+      .content-block
+        p With forms storage it is easy to store and parse forms data, especially on Ajax loaded pages. All you need to make it work is to add "store-data" class to your <form> and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically! Just try to fill the form below and then go to any other page, or even you may close this site, and when you will back here form fields will keep your data.
+      .content-block-title Personal Details
+      form.store-data.list-block(id="demoform-1")
+        ul
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-name
+              .item-inner 
+                .item-title.label Name
+                .item-input
+                  input(type="text", placeholder="Your name", name="name")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-email
+              .item-inner 
+                .item-title.label E-mail
+                .item-input
+                  input(type="email", placeholder="E-mail", name="email")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-url
+              .item-inner 
+                .item-title.label URL
+                .item-input
+                  input(type="url", placeholder="URL", name="url")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-password
+              .item-inner 
+                .item-title.label Password
+                .item-input
+                  input(type="password", placeholder="Password", name="password")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-tel
+              .item-inner 
+                .item-title.label Phone
+                .item-input
+                  input(type="tel", placeholder="Phone", name="phone")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-gender
+              .item-inner 
+                .item-title.label Gender
+                .item-input
+                  select
+                    option Male
+                    option Female
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-calendar
+              .item-inner 
+                .item-title.label Birth date
+                .item-input
+                  input(type="date", placeholder="Birth day", value="2014-04-30", name="birth-date")
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-toggle
+              .item-inner 
+                .item-title.label Switch
+                .item-input
+                  label.label-switch
+                    input(type="checkbox", name="switch")
+                    .checkbox
+          li
+            .item-content
+              .item-media
+                i.icon.icon-form-settings
+              .item-inner
+                .item-title.label Slider
+                .item-input
+                  .range-slider
+                    input(type="range", min="0", max="100", value="50", step="0.1", name="slider")
+          li.align-top
+            .item-content
+              .item-media
+                i.icon.icon-form-comment
+              .item-inner 
+                .item-title.label About Me
+                .item-input
+                  textarea(name="about-me")
+      .content-block-title I like
+      form.store-data.list-block(id="demoform-2")
+        ul
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Books
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Movies")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Movies
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Food")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Food
+          li
+            label.label-checkbox.item-content
+              input(type="checkbox", name="ks-checkbox", value="Drinks")
+              .item-media
+                i.icon.icon-form-checkbox
+              .item-inner
+                .item-title Drinks

data/Framework7-0.9.6/kitchen-sink/jade/forms.jade

@@ -0,0 +1,52 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Forms
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="forms")
+    .page-content
+      .content-block 
+        p Framework7 provides very flexible forms layout, you can use it with/out icons, with/out labels, or mixed layouts.
+      .list-block
+        ul
+          li
+            a(href="forms-elements.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Form Elements
+          li
+            a(href="forms-checkboxes.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Checkboxes And Radios
+          li
+            a(href="forms-selects.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Smart Selects
+          li
+            a(href="forms-buttons.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Buttons
+          li
+            a(href="forms-storage.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Form Storage

data/Framework7-0.9.6/kitchen-sink/jade/grid.jade

@@ -0,0 +1,110 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link 
+        i.icon.icon-back 
+        span Back
+    .center.sliding Grid
+    .right
+      a(href="#").link.open-panel.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="grid")
+    .page-content
+      .content-block
+        p Framework7 comes with flexible layout grid:
+      .ks-grid
+        .content-block-title Columns with gutter
+        .content-block
+          .row
+            .col-50 .col-50
+            .col-50 .col-50
+          .row
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-25 .col-25
+          .row
+            .col-33 .col-33
+            .col-33 .col-33
+            .col-33 .col-33
+          .row
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+          .row
+            .col-33 .col-33
+            .col-66 .col-66
+          .row
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-50 .col-50
+          .row
+            .col-75 .col-75
+            .col-25 .col-25
+          .row
+            .col-80 .col-80
+            .col-20 .col-20
+        .content-block-title No gutter between columns
+        .content-block
+          .row.no-gutter
+            .col-50 .col-50
+            .col-50 .col-50
+          .row.no-gutter
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-25 .col-25
+          .row.no-gutter
+            .col-33 .col-33
+            .col-33 .col-33
+            .col-33 .col-33
+          .row.no-gutter
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+            .col-20 .col-20
+          .row.no-gutter
+            .col-33 .col-33
+            .col-66 .col-66
+          .row.no-gutter
+            .col-25 .col-25
+            .col-25 .col-25
+            .col-50 .col-50
+          .row.no-gutter
+            .col-75 .col-75
+            .col-25 .col-25
+          .row.no-gutter
+            .col-80 .col-80
+            .col-20 .col-20
+        .content-block-title Nested
+        .content-block
+          .row
+            .col-50 .col-50
+              .row
+                .col-50 .col-50
+                .col-50 .col-50
+            .col-50 .col-50
+              .row
+                .col-33 .col-33
+                .col-66 .col-66
+        .content-block-title Responsive Grid
+        .content-block
+          p Grid cells have different size on Phone/Tablet
+          .row
+            .col-100.tablet-50 .col-100.tablet-50
+            .col-100.tablet-50 .col-100.tablet-50
+          .row
+            .col-50.tablet-25 .col-50.tablet-25
+            .col-50.tablet-25 .col-50.tablet-25
+            .col-50.tablet-25 .col-50.tablet-25
+            .col-50.tablet-25 .col-50.tablet-25
+          .row
+            .col-100.tablet-40 .col-100.tablet-40
+            .col-50.tablet-60 .col-50.tablet-60
+            .col-50.tablet-66 .col-50.tablet-66
+            .col-100.tablet-33 .col-100.tablet-33
+          

data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade

@@ -0,0 +1,38 @@
+.navbar
+  .navbar-inner
+    .left.sliding
+      a(href="index.html").back.link
+        i.icon.icon-back 
+        span Back
+    .center.sliding Hide Navbar & Toolbar
+    .right
+      a(href="#").open-panel.link.icon-only
+        i.icon.icon-bars
+.pages.navbar-through
+  .page(data-page="hide-navbar-toolbar")
+    .page-content
+      .content-block
+        p Sometimes you may need to hide top Navbar or bottom Toolbar. Framework7 allows this by adding additional classes to pages. Check examples:
+      .list-block
+        ul
+          li
+            a(href="no-navbar.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Hide Navbar
+          li
+            a(href="no-toolbar.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Hide Toolbar
+          li
+            a(href="no-navbar-toolbar.html").item-link
+              .item-content
+                .item-media
+                  i.icon.icon-f7
+                .item-inner 
+                  .item-title Hide Both