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,15 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left
4
- a(href="#").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Left Page 2
8
- .pages
9
- .page(data-page="left-page-2")
10
- .page-content
11
- .content-block
12
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
13
- p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
14
- p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
15
- p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
@@ -1,18 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left
4
- a(href="#").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Services
8
- .right
9
- a(href="#", data-panel="left").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages
12
- .page(data-page="services")
13
- .page-content
14
- .content-block
15
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
16
- p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
17
- p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
18
- p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
@@ -1,15 +0,0 @@
1
- // Initialize your app
2
- var myApp = new Framework7();
3
-
4
- // Export selectors engine
5
- var $$ = Dom7;
6
-
7
- // Add views
8
- var leftView = myApp.addView('.view-left', {
9
- // Because we use fixed-through navbar we can enable dynamic navbar
10
- dynamicNavbar: true
11
- });
12
- var mainView = myApp.addView('.view-main', {
13
- // Because we use fixed-through navbar we can enable dynamic navbar
14
- dynamicNavbar: true
15
- });
@@ -1,19 +0,0 @@
1
-
2
- <div class="navbar">
3
- <div class="navbar-inner">
4
- <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
- <div class="center sliding">Left Page 1</div>
6
- </div>
7
- </div>
8
- <div class="pages">
9
- <div data-page="left-page-1" class="page">
10
- <div class="page-content">
11
- <div class="content-block">
12
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
13
- <p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
14
- <p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
15
- <p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
16
- </div>
17
- </div>
18
- </div>
19
- </div>
@@ -1,19 +0,0 @@
1
-
2
- <div class="navbar">
3
- <div class="navbar-inner">
4
- <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
- <div class="center sliding">Left Page 2</div>
6
- </div>
7
- </div>
8
- <div class="pages">
9
- <div data-page="left-page-2" class="page">
10
- <div class="page-content">
11
- <div class="content-block">
12
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
13
- <p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
14
- <p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
15
- <p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
16
- </div>
17
- </div>
18
- </div>
19
- </div>
@@ -1,62 +0,0 @@
1
- /* Your app custom files in this file */
2
-
3
- .view-left {
4
- border-right: 1px solid #b2b2b2;
5
- }
6
-
7
- /* This will fix flicker navbar in left panel view */
8
- .panel-left {
9
- .page-content {
10
- padding: 0;
11
- }
12
- .page {
13
- margin-top: 44px;
14
- padding-bottom: 44px;
15
- }
16
- .navbar {
17
- position: relative;
18
- margin-bottom: -44px;
19
- }
20
- }
21
-
22
-
23
- /* Because we have panels-overlay inside of .views we need to fix its open position for right panel */
24
- body.with-panel-right-reveal .panel-overlay {
25
- margin-left: 0;
26
- }
27
- /* iPad Vertical */
28
- @media (min-width:569px) {
29
- .panel.panel-left.panel-cover {
30
- width: 320px;
31
- left: -320px;
32
- }
33
- body.with-panel-left-cover .panel-left {
34
- -webkit-transform: translate3d(320px,0,0);
35
- -ms-transform: translate3d(320px,0,0);
36
- transform: translate3d(320px,0,0);
37
- }
38
- }
39
- /* iPad Horizontal */
40
- @media (min-width:769px) {
41
- body .panel.panel-left.panel-cover {
42
- left: 0;
43
- width: 320px;
44
- display: block;
45
- }
46
- body.with-panel-left-cover .panel-left {
47
- -webkit-transform: translate3d(0px,0,0);
48
- -ms-transform: translate3d(0px,0,0);
49
- transform: translate3d(0px,0,0);
50
- }
51
- .view-main {
52
- float: right;
53
- width: ~"-webkit-calc(100% - 320px)";
54
- width: ~"-moz-calc(100% - 320px)";
55
- width: ~"-ms-calc(100% - 320px)";
56
- width: ~"calc(100% - 320px)";
57
- }
58
- /* Let's hide panel-opener when left panel is visible */
59
- .view-main .navbar .open-panel {
60
- display: none;
61
- }
62
- }
@@ -1,20 +0,0 @@
1
-
2
- <div class="navbar">
3
- <div class="navbar-inner">
4
- <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
- <div class="center sliding">Services</div>
6
- <div class="right"><a href="#" data-panel="left" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
7
- </div>
8
- </div>
9
- <div class="pages">
10
- <div data-page="services" class="page">
11
- <div class="page-content">
12
- <div class="content-block">
13
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
14
- <p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
15
- <p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
16
- <p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
17
- </div>
18
- </div>
19
- </div>
20
- </div>
@@ -1,19 +0,0 @@
1
-
2
- <div class="navbar">
3
- <div class="navbar-inner">
4
- <div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
- <div class="center sliding">About Us</div>
6
- </div>
7
- </div>
8
- <div class="pages">
9
- <div data-page="about" class="page">
10
- <div class="page-content">
11
- <div class="content-block">
12
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
13
- <p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
14
- <p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
15
- <p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
16
- </div>
17
- </div>
18
- </div>
19
- </div>
@@ -1,23 +0,0 @@
1
- /* Your app custom files in this file */
2
- .view-left {
3
- float: left;
4
- width: 320px;
5
- border-right: 1px solid #b2b2b2;
6
- }
7
- .view-main {
8
- width: -webkit-calc(100% - 321px);
9
- width: -moz-calc(100% - 321px);
10
- width: -ms-calc(100% - 321px);
11
- width: calc(100% - 321px);
12
- }
13
- @media (max-width: 768px) {
14
- .view-left {
15
- width: 240px;
16
- }
17
- .view-main {
18
- width: -webkit-calc(100% - 241px);
19
- width: -moz-calc(100% - 241px);
20
- width: -ms-calc(100% - 241px);
21
- width: calc(100% - 241px);
22
- }
23
- }
@@ -1,135 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
6
- <meta name="apple-mobile-web-app-capable" content="yes">
7
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
8
- <title>My App</title>
9
- <!-- Path to Framework7 Library CSS-->
10
- <link rel="stylesheet" href="../../dist/css/framework7.min.css">
11
- <!-- Path to your custom app styles-->
12
- <link rel="stylesheet" href="css/my-app.css">
13
- </head>
14
- <body>
15
- <!-- Status bar overlay for fullscreen mode-->
16
- <div class="statusbar-overlay"></div>
17
- <!-- Panels overlay-->
18
- <div class="panel-overlay"></div>
19
- <!-- Left panel with reveal effect-->
20
- <div class="panel panel-left panel-reveal">
21
- <div class="content-block">
22
- <p>Left panel content goes here</p>
23
- </div>
24
- </div>
25
- <!-- Right panel with cover effect-->
26
- <div class="panel panel-right panel-cover">
27
- <div class="content-block">
28
- <p>Right panel content goes here</p>
29
- </div>
30
- </div>
31
- <!-- Views-->
32
- <div class="views">
33
- <!-- Left view-->
34
- <div class="view view-left navbar-through">
35
- <div class="navbar">
36
- <div class="navbar-inner">
37
- <div class="center sliding">Left View</div>
38
- </div>
39
- </div>
40
- <div class="pages">
41
- <div data-page="index-left" class="page">
42
- <div class="page-content">
43
- <div class="content-block-title">Left View Links</div>
44
- <div class="list-block">
45
- <ul>
46
- <li><a href="left-page-1.html" class="item-link">
47
- <div class="item-content">
48
- <div class="item-inner">
49
- <div class="item-title">Left Page 1</div>
50
- </div>
51
- </div></a></li>
52
- <li><a href="left-page-2.html" class="item-link">
53
- <div class="item-content">
54
- <div class="item-inner">
55
- <div class="item-title">Left Page 2</div>
56
- </div>
57
- </div></a></li>
58
- </ul>
59
- </div>
60
- <div class="content-block-title">Control Main View</div>
61
- <div class="list-block">
62
- <ul>
63
- <li><a href="about.html" data-view=".view-main" class="item-link">
64
- <div class="item-content">
65
- <div class="item-inner">
66
- <div class="item-title">About</div>
67
- </div>
68
- </div></a></li>
69
- <li><a href="services.html" data-view=".view-main" class="item-link">
70
- <div class="item-content">
71
- <div class="item-inner">
72
- <div class="item-title">Services</div>
73
- </div>
74
- </div></a></li>
75
- <li><a href="#" data-view=".view-main" class="back item-link">
76
- <div class="item-content">
77
- <div class="item-inner">
78
- <div class="item-title">Back in history</div>
79
- </div>
80
- </div></a></li>
81
- </ul>
82
- </div>
83
- </div>
84
- </div>
85
- </div>
86
- </div>
87
- <!-- Right view, it is main view-->
88
- <div class="view view-main navbar-through">
89
- <div class="navbar">
90
- <div class="navbar-inner">
91
- <div class="center sliding">Main View</div>
92
- </div>
93
- </div>
94
- <!-- Pages-->
95
- <div class="pages">
96
- <!-- Page, data-page contains page name-->
97
- <div data-page="index-1" class="page">
98
- <!-- Scrollable page content-->
99
- <div class="page-content">
100
- <div class="content-block-title">Hello</div>
101
- <div class="content-block">
102
- <div class="content-block-inner">
103
- <p>This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.</p>
104
- <p>Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.</p>
105
- <p>The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.</p>
106
- <p>And of course, your favorite panels are still here: <a href="#" class="open-panel">left</a> and <a href="#" data-panel="right" class="open-panel">right</a></p>
107
- </div>
108
- </div>
109
- <div class="list-block">
110
- <ul>
111
- <li><a href="about.html" class="item-link">
112
- <div class="item-content">
113
- <div class="item-inner">
114
- <div class="item-title">About</div>
115
- </div>
116
- </div></a></li>
117
- <li><a href="services.html" class="item-link">
118
- <div class="item-content">
119
- <div class="item-inner">
120
- <div class="item-title">Services</div>
121
- </div>
122
- </div></a></li>
123
- </ul>
124
- </div>
125
- </div>
126
- </div>
127
- </div>
128
- </div>
129
- </div>
130
- <!-- Path to Framework7 Library JS-->
131
- <script type="text/javascript" src="../../dist/js/framework7.min.js"></script>
132
- <!-- Path to your app js-->
133
- <script type="text/javascript" src="js/my-app.js"></script>
134
- </body>
135
- </html>
@@ -1,15 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left
4
- a(href="#").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding About Us
8
- .pages
9
- .page(data-page="about")
10
- .page-content
11
- .content-block
12
- p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
13
- p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
14
- p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
15
- p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
@@ -1,107 +0,0 @@
1
- doctype
2
- html
3
- head
4
- meta(charset="utf-8")
5
- meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
6
- meta(name='apple-mobile-web-app-capable', content='yes')
7
- meta(name="apple-mobile-web-app-status-bar-style", content="black")
8
- title My App
9
- // Path to Framework7 Library CSS
10
- link(rel="stylesheet", href="../../dist/css/framework7.min.css")
11
- // Path to your custom app styles
12
- link(rel="stylesheet", href="css/my-app.css")
13
- body
14
- // Status bar overlay for fullscreen mode
15
- .statusbar-overlay
16
-
17
- // Panels overlay
18
- .panel-overlay
19
- // Left panel with reveal effect
20
- .panel.panel-left.panel-reveal
21
- .content-block
22
- p Left panel content goes here
23
- // Right panel with cover effect
24
- .panel.panel-right.panel-cover
25
- .content-block
26
- p Right panel content goes here
27
-
28
- // Views
29
- .views
30
- // Left view
31
- .view.view-left.navbar-through
32
- .navbar
33
- .navbar-inner
34
- .center.sliding Left View
35
- .pages
36
- .page(data-page="index-left")
37
- .page-content
38
- .content-block-title Left View Links
39
- .list-block
40
- ul
41
- li
42
- a(href="left-page-1.html").item-link
43
- .item-content
44
- .item-inner
45
- .item-title Left Page 1
46
- li
47
- a(href="left-page-2.html").item-link
48
- .item-content
49
- .item-inner
50
- .item-title Left Page 2
51
-
52
- .content-block-title Control Main View
53
- .list-block
54
- ul
55
- li
56
- a(href="about.html", data-view=".view-main").item-link
57
- .item-content
58
- .item-inner
59
- .item-title About
60
- li
61
- a(href="services.html", data-view=".view-main").item-link
62
- .item-content
63
- .item-inner
64
- .item-title Services
65
- li
66
- a(href="#", data-view=".view-main").back.item-link
67
- .item-content
68
- .item-inner
69
- .item-title Back in history
70
- // Right view, it is main view
71
- .view.view-main.navbar-through
72
- .navbar
73
- .navbar-inner
74
- .center.sliding Main View
75
- // Pages
76
- .pages
77
- // Page, data-page contains page name
78
- .page(data-page="index-1")
79
- // Scrollable page content
80
- .page-content
81
- .content-block-title Hello
82
- .content-block
83
- .content-block-inner
84
- p This is an example of split view application layout, commonly used on iPad apps. The main approach of such kind of layout is that you can see different views at the same time.
85
- p Each view may have different layout, different navbar type (dynamic, fixed or static) or without navbar.
86
- p The fun thing is that you can easily control one view from another without any line of JavaScript just using "data-view" attribute on links.
87
- p And of course, your favorite panels are still here:
88
- a(href="#").open-panel left
89
- | and
90
- a(href="#", data-panel="right").open-panel right
91
- .list-block
92
- ul
93
- li
94
- a(href="about.html").item-link
95
- .item-content
96
- .item-inner
97
- .item-title About
98
- li
99
- a(href="services.html").item-link
100
- .item-content
101
- .item-inner
102
- .item-title Services
103
-
104
- // Path to Framework7 Library JS
105
- script(type="text/javascript", src="../../dist/js/framework7.min.js")
106
- // Path to your app js
107
- script(type="text/javascript", src="js/my-app.js")