framework7rails 3.0.0 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (212) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/lib/framework7rails/version.rb +2 -2
  4. data/update_from_vendor.rb +1 -1
  5. data/vendor/assets/javascripts/framework7.js +5806 -2303
  6. data/vendor/assets/javascripts/framework7.js.map +1 -1
  7. data/vendor/assets/stylesheets/framework7.css +2164 -464
  8. data/vendor/assets/stylesheets/framework7.themes.css +189 -25
  9. metadata +2 -205
  10. data/Framework7-0.9.6/.gitignore +0 -5
  11. data/Framework7-0.9.6/.jshintrc +0 -33
  12. data/Framework7-0.9.6/.travis.yml +0 -5
  13. data/Framework7-0.9.6/CHANGELOG.md +0 -342
  14. data/Framework7-0.9.6/Gruntfile.js +0 -560
  15. data/Framework7-0.9.6/LICENSE +0 -20
  16. data/Framework7-0.9.6/README.md +0 -113
  17. data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
  18. data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
  19. data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
  20. data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
  21. data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
  22. data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
  23. data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
  24. data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
  25. data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
  26. data/Framework7-0.9.6/apps/todo7/index.html +0 -112
  27. data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
  28. data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
  29. data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
  30. data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
  31. data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
  32. data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
  33. data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
  34. data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
  35. data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
  36. data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
  37. data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
  38. data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
  39. data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
  40. data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
  41. data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
  42. data/Framework7-0.9.6/apps/weather7/index.html +0 -127
  43. data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
  44. data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
  45. data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
  46. data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
  47. data/Framework7-0.9.6/bower.json +0 -30
  48. data/Framework7-0.9.6/dist/about.html +0 -28
  49. data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
  50. data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
  51. data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
  52. data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
  53. data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
  54. data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
  55. data/Framework7-0.9.6/dist/css/my-app.css +0 -0
  56. data/Framework7-0.9.6/dist/form.html +0 -229
  57. data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
  58. data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
  59. data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
  60. data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
  61. data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
  62. data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
  63. data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
  64. data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
  65. data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
  66. data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
  67. data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
  68. data/Framework7-0.9.6/dist/index.html +0 -102
  69. data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
  70. data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
  71. data/Framework7-0.9.6/dist/js/my-app.js +0 -48
  72. data/Framework7-0.9.6/dist/services.html +0 -28
  73. data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
  74. data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
  75. data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
  76. data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
  77. data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
  78. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
  79. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
  80. data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
  81. data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
  82. data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
  83. data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
  84. data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
  85. data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
  86. data/Framework7-0.9.6/examples/split-view/about.html +0 -19
  87. data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
  88. data/Framework7-0.9.6/examples/split-view/index.html +0 -135
  89. data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
  90. data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
  91. data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
  92. data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
  93. data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
  94. data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
  95. data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
  96. data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
  97. data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
  98. data/Framework7-0.9.6/examples/split-view/services.html +0 -19
  99. data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
  100. data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
  101. data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
  102. data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
  103. data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
  104. data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
  105. data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
  106. data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
  107. data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
  108. data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
  109. data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
  110. data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
  111. data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
  112. data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
  113. data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
  114. data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
  115. data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
  116. data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
  117. data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
  118. data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
  119. data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
  120. data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
  121. data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
  122. data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
  123. data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
  124. data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
  125. data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
  126. data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
  127. data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
  128. data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
  129. data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
  130. data/Framework7-0.9.6/kitchen-sink/index.html +0 -466
  131. data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
  132. data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
  133. data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
  134. data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
  135. data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
  136. data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
  137. data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
  138. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
  139. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
  140. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
  141. data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
  142. data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
  143. data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
  144. data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
  145. data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
  146. data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
  147. data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
  148. data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
  149. data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
  150. data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
  151. data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
  152. data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
  153. data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
  154. data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
  155. data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
  156. data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
  157. data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
  158. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
  159. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
  160. data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
  161. data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
  162. data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
  163. data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
  164. data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
  165. data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
  166. data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
  167. data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
  168. data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
  169. data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
  170. data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
  171. data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
  172. data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
  173. data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
  174. data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
  175. data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
  176. data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
  177. data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
  178. data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
  179. data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
  180. data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
  181. data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
  182. data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
  183. data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
  184. data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
  185. data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
  186. data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
  187. data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
  188. data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
  189. data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
  190. data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
  191. data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
  192. data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
  193. data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
  194. data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
  195. data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
  196. data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
  197. data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
  198. data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
  199. data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
  200. data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
  201. data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
  202. data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
  203. data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
  204. data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
  205. data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
  206. data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
  207. data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
  208. data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
  209. data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
  210. data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
  211. data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
  212. data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,71 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Messages
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="messages").no-toolbar.toolbar-fixed
13
- .toolbar.messagebar
14
- .toolbar-inner
15
- a(href="#").link.icon-only
16
- i.icon.icon-camera
17
- textarea(placeholder="Message")
18
- a(href="#").link Send
19
- .page-content.messages-content
20
- .messages
21
- .messages-date Sunday, Feb 9,
22
- span 12:58
23
- .message.message-sent
24
- .message-text Hi, Kate
25
- .message.message-sent
26
- .message-text How are you?
27
- .message.message-received.message-with-avatar
28
- .message-name Kate Johnson
29
- .message-text Hi, i am good
30
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)")
31
- .message.message-received.message-with-avatar
32
- .message-name Blue Ninja
33
- .message-text Hi there, I am also fine, thanks! And how are you?
34
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
35
- .message.message-sent
36
- .message-text Hey, Blue Ninja! Glad to see you ;)
37
- .message.message-sent
38
- .message-text What do you think about my new logo?
39
- .messages-date Wednesday, Feb 12,
40
- span 19:33
41
- .message.message-sent
42
- .message-text Hey? Any thoughts about my new logo?
43
- .messages-date Thursday, Feb 13,
44
- span 11:20
45
- .message.message-sent
46
- .message-text Alo...
47
- .message.message-sent
48
- .message-text Are you there?
49
- .message.message-received.message-with-avatar
50
- .message-name Blue Ninja
51
- .message-text Hi, i am here
52
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
53
- .message.message-received.message-with-avatar
54
- .message-name Blue Ninja
55
- .message-text Your logo is great
56
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
57
- .message.message-received.message-with-avatar
58
- .message-name Kate Johnson
59
- .message-text Leave me alone!
60
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)")
61
- .message.message-sent
62
- .message-text :(
63
- .message.message-sent
64
- .message-text Hey, look, cutest kitten ever!
65
- .message.message-sent
66
- .message-text
67
- img(src="http://placekitten.com/g/300/400")
68
- .message.message-received.message-with-avatar
69
- .message-name Blue Ninja
70
- .message-text Yep
71
- .message-avatar(style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-7.jpg)")
@@ -1,36 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Modals
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="modals")
13
- .page-content
14
- .content-block
15
- p There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:
16
- .content-block.row
17
- .col-33
18
- a.button(href="#").demo-alert Alert
19
- .col-33
20
- a.button(href="#").demo-confirm Confirm
21
- .col-33
22
- a.button(href="#").demo-prompt Prompt
23
- .content-block.row
24
- .col-50
25
- a.button(href="#").demo-login Login Modal
26
- .col-50
27
- a.button(href="#").demo-password Password Modal
28
- .content-block.row
29
- .col-50
30
- a.button(href="#").demo-actions Action Sheet
31
- .col-50
32
- a.button(href="#", data-popup=".demo-popup").open-popup Popup
33
- .content-block
34
- p Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones:
35
- a.button(href="#", style="display:inline-block; vertical-align:middle").demo-actions-popover Action/Popover
36
-
@@ -1,43 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Navbars And Toolbars
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="navbars-toolbars")
13
- .page-content
14
- .list-block
15
- ul
16
- li
17
- a(href="deep-navbar.html").item-link
18
- .item-content
19
- .item-media
20
- i.icon.icon-f7
21
- .item-inner
22
- .item-title Deep Dynamic Navbar
23
- li
24
- a(href="hide-navbar-toolbar.html").item-link
25
- .item-content
26
- .item-media
27
- i.icon.icon-f7
28
- .item-inner
29
- .item-title Hide Navbar & Toolbar
30
- li
31
- a(href="tabbar.html").item-link
32
- .item-content
33
- .item-media
34
- i.icon.icon-f7
35
- .item-inner
36
- .item-title Tab Bar
37
- li
38
- a(href="tabbar-labels.html").item-link
39
- .item-content
40
- .item-media
41
- i.icon.icon-f7
42
- .item-inner
43
- .item-title Tab Bar With Labels
@@ -1,7 +0,0 @@
1
- .pages.navbar-through
2
- .page(data-page="no-navbar-toolbar").no-navbar.no-toolbar
3
- .page-content
4
- .content-block
5
- p On this page Navbar and Toolbar were hidden dynamically. Just add "no-toolbar no-navbar" class to this page to make it work.
6
- p
7
- a(href="index.html").back.button Go Back
@@ -1,7 +0,0 @@
1
- .pages.navbar-through
2
- .page(data-page="no-navbar").no-navbar
3
- .page-content
4
- .content-block
5
- p On this page Navbar was hidden dynamically. All you need to make it work is just to add "no-navbar" class to this page.
6
- p
7
- a(href="index.html").back.button Go Back
@@ -1,17 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Hide Toolbar
8
- .right
9
- a(href="#").open-panel.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="no-toolbar").no-toolbar
13
- .page-content
14
- .content-block
15
- p On this page Toolbar was hidden dynamically. Just add "no-toolbar" class to this page to make it work.
16
- p
17
- a(href="index.html").back.button Go Back
@@ -1,23 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Notifications
8
- .right
9
- a(href="#").open-panel.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="notifications")
13
- .page-content
14
- .content-block
15
- p Framework7 comes with simple Notifications component that allows you to show some useful messages to user.
16
- p
17
- a(href="#").button.ks-notification-simple Default notification
18
- p
19
- a(href="#").button.ks-notification-full Full-layout notification
20
- p
21
- a(href="#").button.ks-notification-custom With custom image
22
- p
23
- a(href="#").button.ks-notification-callback With callback on close
@@ -1,21 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Side Panels
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="panels")
13
- .page-content
14
- .content-block
15
- 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:
16
- .content-block
17
- .row
18
- .col-50
19
- a(href="#").button.open-panel Left Panel
20
- .col-50
21
- a(href="#", data-panel="right").button.open-panel Right Panel
@@ -1,36 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Photo Browser
8
- .right
9
- a(href="#").open-panel.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="photo-browser")
13
- .page-content
14
- .content-block
15
- 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:
16
- ul
17
- li Swiper between photos
18
- li Multi-gestures support for zooming
19
- li Toggle zoom by double tap on photo
20
- li Single click on photo to toggle Exposition mode
21
- p Photo Browser could be opened in a three ways - as a Standalone component, in Popup, and as separate Page:
22
- .row
23
- .col-33
24
- a(href="#").button.ks-pb-standalone Standalone
25
- .col-33
26
- a(href="#").button.ks-pb-popup Popup
27
- .col-33
28
- a(href="#").button.ks-pb-page Page
29
- .content-block
30
- 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:
31
- .row
32
- .col-50
33
- a(href="#").button.ks-pb-standalone-dark Standalone
34
- .col-50
35
- a(href="#").button.ks-pb-popup-dark Popup
36
-
@@ -1,21 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Popover
8
- .right
9
- a(href="#", data-popover=".popover-menu").open-popover.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="popover")
13
- .page-content
14
- .content-block
15
- 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:
16
- p
17
- a(href="#", data-popover=".popover-menu").button.open-popover Open popover on me
18
- 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.
19
- 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.
20
- 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.
21
-
@@ -1,31 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Preloader
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="preloader")
13
- .page-content
14
- .content-block
15
- 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:
16
- .content-block.row.ks-preloaders
17
- .col-25 Default:<br>
18
- span.preloader
19
- .col-25(style="background-color: #333;") Dark:<br>
20
- span.preloader.preloader-white
21
- .col-25 Big:<br>
22
- span.preloader.ks-preloader-big
23
- .col-25(style="background-color: #333;") Dark:<br>
24
- span.preloader.preloader-white.ks-preloader-big
25
- .content-block
26
- p With <b>app.showIndicator()</b> you can call small overlay with indicator:
27
- a(href="#").button.demo-indicator Open small indicator overlay
28
- p With <b>app.showPreloader()</b> you can call modal window with preloader:
29
- a(href="#").button.demo-preloader Open preloader modal
30
- p With <b>app.showPreloader('My text...')</b> you can call it with custom title:
31
- a(href="#").button.demo-preloader-custom Open custom preloader
@@ -1,44 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Pull To Refresh
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="pull-to-refresh")
13
- .page-content.pull-to-refresh-content
14
- .pull-to-refresh-layer
15
- .preloader
16
- .pull-to-refresh-arrow
17
- .list-block.media-list
18
- ul
19
- li.item-content
20
- .item-media
21
- img(src="http://hhhhold.com/88/d/jpg?1", width="44")
22
- .item-inner
23
- .item-title-row
24
- .item-title Yellow Submarine
25
- .item-subtitle Beatles
26
- li.item-content
27
- .item-media
28
- img(src="http://hhhhold.com/88/d/jpg?2", width="44")
29
- .item-inner
30
- .item-title-row
31
- .item-title Don't Stop Me Now
32
- .item-subtitle Queen
33
- li.item-content
34
- .item-media
35
- img(src="http://hhhhold.com/88/d/jpg?3", width="44")
36
- .item-inner
37
- .item-title-row
38
- .item-title Billie Jean
39
- .item-subtitle Michael Jackson
40
- .list-block-label
41
- 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.
42
-
43
-
44
-
@@ -1,146 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Search Bar
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="searchbar")
13
- form.searchbar(data-search-list=".search-here", data-search-in=".item-title")
14
- .searchbar-input
15
- input(type="search", placeholder="Search")
16
- a(href="#").searchbar-clear
17
- a(href="#").searchbar-cancel Cancel
18
- .searchbar-overlay
19
- .page-content
20
- .list-block.searchbar-not-found
21
- ul
22
- li.item-content
23
- .item-inner
24
- .item-title Nothing found
25
- .list-block.search-here.searchbar-found
26
- ul
27
- li.item-content
28
- .item-inner
29
- .item-title Acura
30
- li.item-content
31
- .item-inner
32
- .item-title Audi
33
- li.item-content
34
- .item-inner
35
- .item-title BMW
36
- li.item-content
37
- .item-inner
38
- .item-title Cadillac
39
- li.item-content
40
- .item-inner
41
- .item-title Chevrolet
42
- li.item-content
43
- .item-inner
44
- .item-title Chrysler
45
- li.item-content
46
- .item-inner
47
- .item-title Dodge
48
- li.item-content
49
- .item-inner
50
- .item-title Ferrari
51
- li.item-content
52
- .item-inner
53
- .item-title Ford
54
- li.item-content
55
- .item-inner
56
- .item-title GMC
57
- li.item-content
58
- .item-inner
59
- .item-title Honda
60
- li.item-content
61
- .item-inner
62
- .item-title Hummer
63
- li.item-content
64
- .item-inner
65
- .item-title Hyundai
66
- li.item-content
67
- .item-inner
68
- .item-title Infiniti
69
- li.item-content
70
- .item-inner
71
- .item-title Isuzu
72
- li.item-content
73
- .item-inner
74
- .item-title Jaguar
75
- li.item-content
76
- .item-inner
77
- .item-title Jeep
78
- li.item-content
79
- .item-inner
80
- .item-title Kia
81
- li.item-content
82
- .item-inner
83
- .item-title Lamborghini
84
- li.item-content
85
- .item-inner
86
- .item-title Land Rover
87
- li.item-content
88
- .item-inner
89
- .item-title Lexus
90
- li.item-content
91
- .item-inner
92
- .item-title Lincoln
93
- li.item-content
94
- .item-inner
95
- .item-title Lotus
96
- li.item-content
97
- .item-inner
98
- .item-title Mazda
99
- li.item-content
100
- .item-inner
101
- .item-title Mercedes-Benz
102
- li.item-content
103
- .item-inner
104
- .item-title Mercury
105
- li.item-content
106
- .item-inner
107
- .item-title Mitsubishi
108
- li.item-content
109
- .item-inner
110
- .item-title Nissan
111
- li.item-content
112
- .item-inner
113
- .item-title Oldsmobile
114
- li.item-content
115
- .item-inner
116
- .item-title Peugeot
117
- li.item-content
118
- .item-inner
119
- .item-title Pontiac
120
- li.item-content
121
- .item-inner
122
- .item-title Porsche
123
- li.item-content
124
- .item-inner
125
- .item-title Regal
126
- li.item-content
127
- .item-inner
128
- .item-title Saab
129
- li.item-content
130
- .item-inner
131
- .item-title Saturn
132
- li.item-content
133
- .item-inner
134
- .item-title Subaru
135
- li.item-content
136
- .item-inner
137
- .item-title Suzuki
138
- li.item-content
139
- .item-inner
140
- .item-title Toyota
141
- li.item-content
142
- .item-inner
143
- .item-title Volkswagen
144
- li.item-content
145
- .item-inner
146
- .item-title Volvo