Permalink
Browse files

feature: Template for small app added, Themes regenerated

  • Loading branch information...
MikeMitterer committed May 22, 2015
1 parent e332a91 commit c42fc7b72f02691afad033fd8f9df59e1d857196
Showing 367 changed files with 1,401 additions and 1,033 deletions.
@@ -8,5 +8,11 @@
"name" : "template-admin",
"description" : "Admin template",
"preview" : "template-admin.jpg"
},
{
"name" : "template-fixed-header",
"description" : "Small apps",
"preview" : "template-fixed-header.jpg"
}
]
Binary file not shown.
@@ -31,7 +31,7 @@
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en' rel='stylesheet' type='text/css'>
<!-- Page styles -->
<!--<link id="theme" rel="stylesheet" href="packages/mdl/assets/themes/amber-cyan/material.css">-->
<!--<link id="theme" rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">-->
<link id="theme" rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">
<link rel="stylesheet" href="styleguide.css">
</head>
<body class="mdl-typography">
@@ -29,5 +29,19 @@ <h4>Layout-Templates</h4>
Source on GitHub
</a>
</li>
<li>
<a href="http://mdl.samples.mikemitterer.at/template-fixed-header/index.html" target="_blank" class="mdl-color-text--700">
<span class="mdl-list-view--avatar mdl-color--200">
<img src="assets/images/template-fixed-header.jpg">
</span>
<span class="mdl-list-view--name">
Small apps
</span>
</a>
<a href="https://github.com/MikeMitterer/dart-material-design-lite/tree/mdl/example/template-fixed-header"
class="mdl-color-text--400 github" target="_blank">
Source on GitHub
</a>
</li>
</ul></div>
</section>
@@ -0,0 +1,7 @@
.buildlog
.DS_Store
.idea
.pub/
build/
packages
pubspec.lock
@@ -0,0 +1 @@
#autoprefixer: false
@@ -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,2 @@
# MDL Sticky footer sample
@@ -0,0 +1,20 @@
name: mdl_template_template_fixed_header
version: 0.0.1
description: Material Design Lite 'Fixed Header' Template
#author: <your name> <email@example.com>
#homepage: https://www.example.com
environment:
sdk: '>=1.0.0 <2.0.0'
dependencies:
browser: any
mdl:
path: ../..
logging: any
logging_handlers: any
console_log_handler: any
@@ -0,0 +1,8 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="24" height="24" viewBox="0, 0, 24, 24">
<g id="Logo">
<path d="M4.564,21.938 C2.841,22.457 1.512,22.416 0.827,21.668 C-0.938,19.779 1.99,14.132 7.429,8.609 C2.8,14.007 0.453,19.405 2.093,21.315 C2.613,21.917 3.464,22.104 4.564,21.938" fill="#FFFFFF"/>
<path d="M13.285,23.329 C10.398,23.329 7.803,22.167 5.914,20.298 L8.032,18.201 C9.61,19.654 11.686,20.568 13.99,20.568 C18.849,20.568 22.794,16.519 22.794,11.536 C22.794,9.273 22.005,7.218 20.676,5.639 C22.524,7.508 23.686,10.104 23.686,12.948 C23.686,18.699 19.015,23.329 13.285,23.329" fill="#FFFFFF"/>
<path d="M2.903,12.854 C2.903,15.72 4.045,18.295 5.893,20.163 L5.893,20.163 C4.585,18.585 3.775,16.529 3.775,14.287 L3.775,14.287 C3.775,9.283 7.72,5.235 12.579,5.235 L12.579,5.235 C14.883,5.235 16.98,6.148 18.537,7.623 L18.537,7.623 L20.655,5.504 C18.766,3.615 16.171,2.452 13.305,2.452 L13.305,2.452 C7.554,2.452 2.903,7.124 2.903,12.854" fill="#FFFFFF"/>
<path d="M20.801,1.269 C22.628,3.221 19.223,9.387 13.181,15.055 C11.146,16.986 9.049,18.606 7.118,19.789 C8.426,18.855 9.755,17.733 11.083,16.488 C17.354,10.591 20.884,4.176 18.994,2.141 C18.205,1.31 16.627,1.352 14.613,2.079 C17.479,0.605 19.804,0.21 20.801,1.269" fill="#FFFFFF"/>
</g>
</svg>
@@ -0,0 +1,8 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="48" height="48" viewBox="0, 0, 48, 48">
<g id="Logo">
<path d="M9.129,43.877 C5.682,44.915 3.024,44.831 1.654,43.336 C-1.876,39.558 3.979,28.263 14.859,17.217 C5.599,28.014 0.907,38.811 4.187,42.631 C5.225,43.835 6.928,44.208 9.129,43.877" fill="#FFFFFF"/>
<path d="M26.569,46.658 C20.797,46.658 15.606,44.333 11.828,40.596 L16.063,36.402 C19.219,39.308 23.371,41.135 27.981,41.135 C37.698,41.135 45.588,33.038 45.588,23.072 C45.588,18.546 44.009,14.435 41.352,11.279 C45.048,15.016 47.373,20.207 47.373,25.896 C47.373,37.398 38.03,46.658 26.569,46.658" fill="#FFFFFF"/>
<path d="M5.807,25.709 C5.807,31.44 8.09,36.589 11.786,40.325 L11.786,40.325 C9.17,37.17 7.55,33.058 7.55,28.575 L7.55,28.575 C7.55,18.566 15.44,10.469 25.157,10.469 L25.157,10.469 C29.766,10.469 33.96,12.296 37.075,15.245 L37.075,15.245 L41.31,11.009 C37.531,7.231 32.341,4.905 26.611,4.905 L26.611,4.905 C15.108,4.905 5.807,14.248 5.807,25.709" fill="#FFFFFF"/>
<path d="M41.601,2.538 C45.255,6.441 38.446,18.774 26.362,30.111 C22.292,33.972 18.098,37.212 14.236,39.578 C16.852,37.71 19.51,35.467 22.167,32.976 C34.708,21.182 41.767,8.351 37.989,4.282 C36.411,2.621 33.255,2.704 29.227,4.157 C34.957,1.209 39.608,0.42 41.601,2.538" fill="#FFFFFF"/>
</g>
</svg>
@@ -0,0 +1,8 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="64" height="64" viewBox="0, 0, 64, 64">
<g id="Logo">
<path d="M12.172,58.502 C7.576,59.886 4.032,59.775 2.205,57.782 C-2.501,52.744 5.306,37.684 19.812,22.956 C7.465,37.352 1.209,51.747 5.583,56.841 C6.967,58.447 9.237,58.945 12.172,58.502" fill="#FFFFFF"/>
<path d="M35.426,62.211 C27.729,62.211 20.809,59.111 15.77,54.128 L21.417,48.536 C25.626,52.411 31.162,54.847 37.308,54.847 C50.264,54.847 60.784,44.051 60.784,30.763 C60.784,24.728 58.679,19.247 55.136,15.038 C60.064,20.022 63.164,26.943 63.164,34.528 C63.164,49.864 50.706,62.211 35.426,62.211" fill="#FFFFFF"/>
<path d="M7.742,34.278 C7.742,41.919 10.787,48.786 15.714,53.767 L15.714,53.767 C12.227,49.56 10.067,44.078 10.067,38.1 L10.067,38.1 C10.067,24.755 20.587,13.959 33.543,13.959 L33.543,13.959 C39.689,13.959 45.28,16.395 49.433,20.327 L49.433,20.327 L55.08,14.679 C50.042,9.641 43.121,6.54 35.481,6.54 L35.481,6.54 C20.144,6.54 7.742,18.998 7.742,34.278" fill="#FFFFFF"/>
<path d="M55.468,3.383 C60.34,8.588 51.261,25.032 35.149,40.148 C29.723,45.296 24.131,49.616 18.982,52.771 C22.469,50.28 26.013,47.289 29.556,43.967 C46.277,28.243 55.69,11.135 50.651,5.709 C48.548,3.494 44.34,3.605 38.969,5.543 C46.61,1.612 52.811,0.56 55.468,3.383" fill="#FFFFFF"/>
</g>
</svg>
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,104 @@
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="A front-end template that helps you build fast, modern mobile web apps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material Design Lite</title>
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Material Design Lite">
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#3372DF">
<!-- SEO: If your mobile URL is different from the desktop URL, add a canonical link to the desktop page https://developers.google.com/webmasters/smartphone-sites/feature-phones -->
<!--
<link rel="canonical" href="http://www.example.com/">
-->
<link href='//fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'
rel='stylesheet' type='text/css'>
<!--<link rel="stylesheet" href="packages/mdl/assets/styles/material.min.css">-->
<link rel="stylesheet" href="styles/demo.css">
</head>
<body class="mdl-typography mdl-base">
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Icon -->
<div class="mdl-layout-icon demo-app-icon"></div>
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Material Design Lite</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation. We hide it in small screens. -->
<nav class="mdl-navigation mdl-layout--large-screen-only">
<a class="mdl-navigation__link" href="#">Hello</a>
<a class="mdl-navigation__link" href="#">World.</a>
<a class="mdl-navigation__link" href="#">How</a>
<a class="mdl-navigation__link" href="#">Are</a>
<a class="mdl-navigation__link" href="#">You?</a>
</nav>
</div>
</header>
<div class="mdl-layout__drawer mdl-color--50">
<span class="mdl-layout-title mdl-color--primary mdl-color-text--white">Material Design Lite</span>
<nav class="mdl-navigation">
<a class="mdl-navigation__link mdl-color-text--primary" href="#">Hello</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#">World.</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#">How</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#">Are</a>
<a class="mdl-navigation__link mdl-color-text--primary" href="#">You?</a>
</nav>
</div>
<main class="mdl-layout__content">
<section>
<div class="mdl-panel mdl-panel--shadow">
<h3 class="mdl-color-text--primary">Material Design Lite</h3>
<p>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.</p>
<p>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.</p>
</div>
</section>
</main>
<footer class="mdl-sticky-mini-footer mdl-color--primary mdl-color-text--white">
<div class="mdl-mini-footer--left-section">
<div class="mdl-logo">
<strong>Material Design</strong> Lite
</div>
<ul class="mdl-mini-footer--link-list">
<li><a href="#">Help</a></li>
<li><a href="#">Privacy &amp; Terms</a></li>
</ul>
</div>
<div class="mdl-mini-footer--right-section">
<button class="mdl-mini-footer--social-btn"></button>
</div>
</footer>
</div>
<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>
</body>
</html>
@@ -0,0 +1,64 @@
import 'dart:html' as html;
import 'package:logging/logging.dart';
import 'package:console_log_handler/console_log_handler.dart';
import 'package:mdl/mdl.dart';
final Logger _logger = new Logger('layout-header-drawer-footer');
void main() {
configLogging();
scrollChecker();
registerMdl();
upgradeAllRegistered().then((_) {
});
}
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");
// .wsk-layout__content section hat overflow: scroll - kein scroll event
final html.HtmlElement content = html.querySelector(".wsk-layout__content section");
final html.HtmlElement shadow = html.querySelector(".addscrollshadow");
final html.ButtonElement button = html.querySelector("#totop");
_logger.info(button);
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;
print(top);
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 c42fc7b

Please sign in to comment.