| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 `app-sk` provides general application layout, introducing a | 2 `app-sk` provides general application layout, introducing a |
| 3 responsive scaffold containing a header, toolbar, menu, title and | 3 responsive scaffold containing a header, toolbar, rtoolbar, title and |
| 4 areas for application content, as well as automatic inclusion of | 4 areas for application content, as well as automatic inclusion of |
| 5 common menu items, login status, and version tag. | 5 common menu items, login status, and version tag. |
| 6 | 6 |
| 7 Example: | 7 Example: |
| 8 | 8 |
| 9 <app-sk mode="standard" responsive_width="600px" drawer_width="230px"> | 9 <app-sk mode="standard" responsive_width="600px" drawer_width="230px"> |
| 10 <h1 header>Title goes here</h1> | 10 <h1 header>Title goes here</h1> |
| 11 <foo-status-sk rtoolbar></foo-status-sk> <!-to be right aligned, on the to
p bar-> |
| 11 <div navigation>Nav goes here</div> | 12 <div navigation>Nav goes here</div> |
| 12 <div>Content goes here</div> | 13 <div>Content goes here</div> |
| 13 </app-sk> | 14 </app-sk> |
| 14 | 15 |
| 15 Properties: | 16 Properties: |
| 16 mode - Controls header and scrolling behavior for the paper-header-panel. | 17 mode - Controls header and scrolling behavior for the paper-header-panel. |
| 17 Options are "standard", "seamed", "waterfall", "waterfall-tall", "scroll" | 18 Options are "standard", "seamed", "waterfall", "waterfall-tall", "scroll" |
| 18 and "cover". Default is "standard". | 19 and "cover". Default is "standard". |
| 19 | 20 |
| 20 tall_class - The class used by the paper-header-panel in waterfall-tall mode. | 21 tall_class - The class used by the paper-header-panel in waterfall-tall mode. |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 73 } | 74 } |
| 74 </style> | 75 </style> |
| 75 <template> | 76 <template> |
| 76 <paper-header-panel id="headerPanel" mode="{{mode}}" tallClass="{{tall_class
}}"> | 77 <paper-header-panel id="headerPanel" mode="{{mode}}" tallClass="{{tall_class
}}"> |
| 77 <paper-toolbar> | 78 <paper-toolbar> |
| 78 <template is="dom-if" if="{{_showMenuButton}}"> | 79 <template is="dom-if" if="{{_showMenuButton}}"> |
| 79 <paper-icon-button id="menuButton" icon="icons:menu" on-tap="_togglePa
nel"></paper-icon-button> | 80 <paper-icon-button id="menuButton" icon="icons:menu" on-tap="_togglePa
nel"></paper-icon-button> |
| 80 </template> | 81 </template> |
| 81 <content select="[header], header, [toolbar], toolbar"></content> | 82 <content select="[header], header, [toolbar], toolbar"></content> |
| 82 <div class="flex"></div> | 83 <div class="flex"></div> |
| 84 <content select="[rtoolbar], rtoolbar"></content> |
| 83 <app-menu-sk></app-menu-sk> | 85 <app-menu-sk></app-menu-sk> |
| 84 <login-sk></login-sk> | 86 <login-sk></login-sk> |
| 85 </paper-toolbar> | 87 </paper-toolbar> |
| 86 <template is="dom-if" if="{{no_drawer}}"> | 88 <template is="dom-if" if="{{no_drawer}}"> |
| 87 <div main id="maincontent" class="layout vertical"> | 89 <div main id="maincontent" class="layout vertical"> |
| 88 <content select="*"></content> | 90 <content select="*"></content> |
| 89 <div class="layout horizontal"> | 91 <div class="layout horizontal"> |
| 90 <div class="flex"></div> | 92 <div class="flex"></div> |
| 91 <version-sk></version-sk> | 93 <version-sk></version-sk> |
| 92 </div> | 94 </div> |
| (...skipping 74 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 167 return narrow; | 169 return narrow; |
| 168 }, | 170 }, |
| 169 | 171 |
| 170 _togglePanel: function() { | 172 _togglePanel: function() { |
| 171 this.$.drawerPanel.togglePanel(); | 173 this.$.drawerPanel.togglePanel(); |
| 172 }, | 174 }, |
| 173 }); | 175 }); |
| 174 }()); | 176 }()); |
| 175 </script> | 177 </script> |
| 176 </dom-module> | 178 </dom-module> |
| OLD | NEW |