Permalink
Browse files

doc: Two new sample-layouts

  • Loading branch information...
MikeMitterer committed Mar 4, 2015
1 parent 007bf6f commit c4f1be8f37b832ff0e369480ffa8c0c5606c4e9f
Showing with 6,764 additions and 6 deletions.
  1. +11 −0 WskMaterial.iml
  2. +23 −5 example/index.html
  3. +7 −0 example/layout-header-drawer-footer/.gitignore
  4. +5 −0 example/layout-header-drawer-footer/CHANGELOG.md
  5. +34 −0 example/layout-header-drawer-footer/LICENSE
  6. +3 −0 example/layout-header-drawer-footer/README.md
  7. +20 −0 example/layout-header-drawer-footer/pubspec.yaml
  8. BIN example/layout-header-drawer-footer/web/images/app-icon.png
  9. BIN example/layout-header-drawer-footer/web/images/desktop-handsfree-hero.jpg
  10. +129 −0 example/layout-header-drawer-footer/web/index.html
  11. +58 −0 example/layout-header-drawer-footer/web/main.dart
  12. +184 −0 example/layout-header-drawer-footer/web/styles/_colors.scss
  13. +2,856 −0 example/layout-header-drawer-footer/web/styles/main.css
  14. +85 −0 example/layout-header-drawer-footer/web/styles/main.scss
  15. +7 −0 example/layout-header-drawer/.gitignore
  16. +5 −0 example/layout-header-drawer/CHANGELOG.md
  17. +34 −0 example/layout-header-drawer/LICENSE
  18. +3 −0 example/layout-header-drawer/README.md
  19. +20 −0 example/layout-header-drawer/pubspec.yaml
  20. BIN example/layout-header-drawer/web/images/app-icon.png
  21. BIN example/layout-header-drawer/web/images/desktop-handsfree-hero.jpg
  22. +95 −0 example/layout-header-drawer/web/index.html
  23. +58 −0 example/layout-header-drawer/web/main.dart
  24. +184 −0 example/layout-header-drawer/web/styles/_colors.scss
  25. +2,771 −0 example/layout-header-drawer/web/styles/main.css
  26. +79 −0 example/layout-header-drawer/web/styles/main.scss
  27. +7 −1 example/styleguide/web/styleguide.css
  28. +86 −0 lib/sass/footer/_mini_footer-flex.scss
View
@@ -26,6 +26,17 @@
<excludeFolder url="file://$MODULE_DIR$/example/icon-toggle/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/item/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/item/web/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/.pub" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/build" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/packages/wsk_material" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/web/images/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/web/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer-footer/web/styles/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/.pub" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/packages/wsk_material" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/web/images/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/web/packages" />
+ <excludeFolder url="file://$MODULE_DIR$/example/layout-header-drawer/web/styles/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/packages/wsk_material" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/layout/web/packages" />
View
@@ -13,13 +13,21 @@
font-family: "Roboto", Arial, "sans-serif";
font-size: 15px;;
}
- a {
- text-decoration: none;
+
+ a { text-decoration: none; }
+
+ ol a {
min-width: 200px;
display: inline-block;
}
.links { padding: 2em; }
.links div { margin-left: 1em; }
+
+ .cols {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ }
</style>
</head>
<body>
@@ -35,9 +43,11 @@ <h1>Web Starter Kit - Material Design, Dart version</h1>
<a href="https://github.com/MikeMitterer/dart-wsk-material" target="_blank">GitHub</a>
</p>
- <div class="PreviewBlock">
- <h2>WSK-Material</h2>
- <ul><li><a href="styleguide/web/index.html">Styleguide</a> (takes a while - loads all other samples in iframes)</li></ul>
+ <h2>WSK-Material</h2>
+ <ul><li><a href="styleguide/web/index.html">Styleguide</a> (takes a while - loads all other samples in iframes)</li></ul>
+
+ <div class="cols">
+ <div class="samples">
<h2>WSK-Material-Samples</h2>
<ol>
<li><a href="accordion/web/index.html">accordion/web/index.html</a><span class="script">[ with main.dart ]</span></li>
@@ -65,6 +75,14 @@ <h2>WSK-Material-Samples</h2>
</ol>
</div>
+ <div class="layouts">
+ <h2>Layouts</h2>
+ <ol>
+ <li><a href="layout-header-drawer/web/index.html">layout-header-drawer</a> - Fixed header, footer scrolls</li>
+ <li><a href="layout-header-drawer-footer/web/index.html">layout-header-drawer-footer</a> - Fixed header, fixed footer</li>
+ </ol>
+ </div>
+ </div>
<p>There is also a AngularDart version available. Check it out on
<a href="http://wsk.angular.mikemitterer.at">http://wsk.angular.mikemitterer.at</a></p>
@@ -0,0 +1,7 @@
+.buildlog
+.DS_Store
+.idea
+.pub/
+build/
+packages
+pubspec.lock
@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.0.1
+
+- Initial version, created by Stagehand
@@ -0,0 +1,34 @@
+Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
+IT-Consulting and Development Limited, Austrian Branch
+
+All rights reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+ * Redistributions of source code must retain the above copyright
+ notice, this list of conditions and the following disclaimer.
+ * Redistributions in binary form must reproduce the above copyright
+ notice, this list of conditions and the following disclaimer in the
+ documentation and/or other materials provided with the distribution.
+ * Neither the name of the Michael Mitterer, IT-Consulting
+ and Development Limited, Austrian Branch, nor the
+ names of its contributors may be used to endorse or promote products
+ derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL Michael Mitterer,
+IT-Consulting and Development Limited, Austrian Branch, BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
@@ -0,0 +1,3 @@
+# Uber-simple web app
+
+Generated by Stagehand. See LICENSE.
@@ -0,0 +1,20 @@
+name: layout-header-drawer-footer
+version: 0.0.1
+description: An absolute bare-bones web app.
+#author: <your name> <email@example.com>
+#homepage: https://www.example.com
+
+environment:
+ sdk: '>=1.0.0 <2.0.0'
+
+dependencies:
+ browser: any
+
+ wsk_material:
+ path: ../..
+
+ logging: any
+ logging_handlers: any
+ console_log_handler: any
+
+
Binary file not shown.
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <title>Prettify - Sample</title>
+
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+ <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+ <link rel="stylesheet" href="styles/main.css">
+
+ <link rel="shortcut icon" href="assets/icons/favicon.ico"/>
+</head>
+
+<body>
+<div class="wsk-layout wsk-js-layout wsk-layout--fixed-header wsk-layout--overlay-drawer-button">
+ <div class="wsk-layout__header addscrollshadow">
+ <!-- Icon -->
+ <img class="wsk-layout-icon" src="images/app-icon.png"/>
+ <!-- Title -->
+ <span class="wsk-layout-title">Sample layout - fixed header, fixed footer</span>
+ <!-- Add spacer, to align navigation to the right -->
+ <div class="wsk-layout-spacer"></div>
+ <!-- Navigation -->
+ <nav class="wsk-navigation">
+ <a class="wsk-navigation__link hide-on-mobile" href="#">Item 1</a>
+ <a class="wsk-navigation__link hide-on-mobile" href="#">Item 2</a>
+ <a class="wsk-navigation__link hide-on-mobile" href="#">Item 3</a>
+ <a class="wsk-navigation__link hide-on-mobile" href="#">Item 4</a>
+ </nav>
+ </div>
+ <div class="wsk-layout__drawer">
+ <span class="wsk-layout-title">Sample layout</span>
+ <nav class="wsk-navigation">
+ <a class="wsk-navigation__link" href="#">Item 1</a>
+ <a class="wsk-navigation__link" href="#">Item 2</a>
+ <a class="wsk-navigation__link" href="#">Item 3</a>
+ <a class="wsk-navigation__link" href="#">Item 4</a>
+ </nav>
+ </div>
+ <div class="wsk-layout__content" id="top">
+ <section>
+ <header><h3>My header</h3></header>
+ <p>First section</p>
+ ll
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+ dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
+ consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+ sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
+ sea takimata sanctus est Lorem ipsum dolor sit amet.
+ </section>
+ </div>
+ <footer class="wsk-mini-footer-flex">
+ <div class="wsk-mini-footer--left-section">
+ <div class="wsk-logo">
+ <strong>Sample layout</strong>
+ </div>
+ <ul class="wsk-mini-footer--link-list">
+ <li><a href="#" target="_blank">Link I</a></li>
+ <li><a href="#" target="_blank">Link II</a></li>
+ </ul>
+ </div>
+ <div class="wsk-mini-footer--right-section">
+ <ul class="wsk-mini-footer--link-list">
+ <li><a href="http://www.mikemitterer.at">www.MikeMitterer.at</a></li>
+ </ul>
+
+ <button class="wsk-mini-footer--social-btn"></button>
+ <button class="wsk-mini-footer--social-btn"></button>
+ </div>
+ </footer>
+</div>
+<div class="back-to-top">
+ <button id="totop" class="wsk-button wsk-js-button wsk-button--fab wsk-js-ripple-effect wsk-button--colored">
+ <i class="fa fa-angle-up"></i>
+ </button>
+</div>
+</div>
+
+<!--<footer>-->
+<!--I took some samples and some descriptions from <a href="http://demo.stanleyhlng.com/prettify-js">http://demo.stanleyhlng.com/prettify-js</a>-->
+<!--</footer>-->
+
+
+<script type="application/dart" src="main.dart"></script>
+<script data-pub-inline src="packages/browser/dart.js"></script>
+
+</body>
+
+</html>
@@ -0,0 +1,58 @@
+import 'dart:html' as html;
+
+import 'package:logging/logging.dart';
+import 'package:console_log_handler/console_log_handler.dart';
+
+import 'package:wsk_material/wskcomponets.dart';
+
+void main() {
+ html.querySelector("body").classes.add("update-theme");
+ configLogging();
+
+ scrollChecker();
+
+ registerAllWskComponents();
+ upgradeAllRegistered();
+ html.querySelector("body").classes.remove("update-theme");
+}
+
+void configLogging() {
+ hierarchicalLoggingEnabled = false; // set this to true - its part of Logging SDK
+
+ // now control the logging.
+ // Turn off all logging first
+ Logger.root.level = Level.INFO;
+ Logger.root.onRecord.listen(new LogConsoleHandler());
+}
+
+void scrollChecker() {
+ final html.HtmlElement body = html.querySelector("body");
+ final html.HtmlElement content = html.querySelector(".wsk-layout__content");
+ final html.HtmlElement shadow = html.querySelector(".addscrollshadow");
+ final html.ButtonElement button = html.querySelector("#totop");
+
+ if(content == null || shadow == null || button == null) {
+ return;
+ }
+
+ button.onClick.listen((_) {
+ content.scrollTop = 0;
+ });
+
+ content.onScroll.listen((final html.Event event) {
+ final int top = content.scrollTop;
+
+ if(top > 25) {
+ shadow.classes.add("wsk-shadow--z2");
+ } else {
+ shadow.classes.remove("wsk-shadow--z2");
+ }
+
+ if(top > 100) {
+ body.classes.add("add-back-to-top-button");
+ } else {
+ body.classes.remove("add-back-to-top-button");
+ }
+
+ });
+}
Oops, something went wrong.

0 comments on commit c4f1be8

Please sign in to comment.