Permalink
Browse files

feature: Added spinner as loading indicator

  • Loading branch information...
MikeMitterer committed Oct 30, 2015
1 parent a6c24b9 commit b81b3ec4607576f4869b233e88b0354c92d90454
View
@@ -5,19 +5,42 @@
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.pub" />
<excludeFolder url="file://$MODULE_DIR$/bin/packages" />
<excludeFolder url="file://$MODULE_DIR$/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/.pub" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_content/about/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_content/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_data/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_partials/category/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_partials/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/_templates/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/html/packages" />
<excludeFolder url="file://$MODULE_DIR$/example/simple/.sitegen/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/android/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/android/web/fonts/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/android/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/android/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/article/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/article/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/article/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/blog/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/blog/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/blog/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/web/assets/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/web/assets/svg/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/fixed-header/web/styles/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sample/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sample/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sticky-footer/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sticky-footer/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sticky-footer/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/sticky-footer/web/styles/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/text-only/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/text-only/web/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/build/web/packages/mdl/_templates/text-only/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/about/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/assets/images/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/assets/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/assets/styles/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/packages" />
<excludeFolder url="file://$MODULE_DIR$/packages" />
<excludeFolder url="file://$MODULE_DIR$/sample/simple/web/special/packages" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
@@ -1,62 +1,69 @@
/**
* Copyright 2015 Google Inc. 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
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
// ----------------------------------------------------------------------------
// Copyright (c) 2015, Michael Mitterer (office@mikemitterer.at),
// IT-Consulting and Development Limited.
//
// 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
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
margin: 0;
padding: 0;
font-family : 'Roboto', 'Helvetica', sans-serif;
margin : 0;
padding : 0;
}
body {
.loading {
color: white;
font-size: 24px;
z-index: 99;
display: none;
position: absolute;
opacity: 0.8;
// ----------------------------------------------------------------------------
// ---- Application specific part
// -
top: 0;
left: 0;
width: 100%;
height: 100%;
.main-section {
width : calc(100% - 112px);
margin : 24px 0 0 56px;
min-height : 480px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center; // ⇾
align-content: stretch; // ||
align-items: center; // ↓
.mdl-panel {
margin-bottom : 24px;
}
&.mdl-upgrading {
.loading { display: flex; }
.mdl-card {
.mdl-card__title { background-color : darkslateblue; }
&.demo-card-wide {
width : 600px;
.is-small-screen & {
width : auto;
}
}
}
}
// ----------------------------------------------------------------------------
// ---- Use simple form of tab-bar. MDL-Version is not necessary here
// -
.tab-bar {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start; // ⇾
align-content: stretch; // ||
align-items: flex-end; // ↓
display : flex;
flex-direction : row;
flex-wrap : wrap;
justify-content : flex-start; // ⇾
align-content : stretch; // ||
align-items : flex-end; // ↓
.is-small-screen & {
min-height: 56px;
min-height : 56px;
}
//min-height: 56px;
@@ -65,43 +72,19 @@ body {
//margin: 0 0 0 56px;
}
.main-section {
width: calc(100% - 112px);
margin: 24px 0 0 56px;
min-height: 480px;
.mdl-panel {
margin-bottom: 24px;
}
.mdl-card {
.mdl-card__title { background-color: darkslateblue; }
&.demo-card-wide {
width: 600px;
.is-small-screen & {
width: auto;
}
}
}
}
/**
Overwrites some essential MDL-Styles
This should go into the main MDL-Branch
*/
.mdl-card {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start; // ↓
align-content: space-between; // =
align-items: stretch; // ⇾
display : flex;
flex-direction : column;
flex-wrap : wrap;
justify-content : flex-start; // ↓
align-content : space-between; // =
align-items : stretch; // ⇾
.mdl-card__supporting-text {
flex-grow: 1;
flex-grow : 1;
}
}
@@ -51,9 +51,11 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="{{_page.relative_to_root}}assets/styles/styles.css">
<link rel="stylesheet" href="{{_page.relative_to_root}}packages/mdl/assets/styles/splashscreen/dots.css">
<link rel="stylesheet" href="{{_page.relative_to_root}}packages/mdl/assets/styles/material.min.css">
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base mdl-upgrading {{_page.pageindicator}}"><div class="loading mdl-color--primary">Loading...</div>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base mdl-upgrading {{_page.pageindicator}}">
<div class="mdl-splashscreen mdl-color--primary"><div class="spinner"><div class="dot1 mdl-color--white"></div><div class="dot2 mdl-color--accent"></div></div></div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-300">
<!-- Usage of "partials" -->
{{>header}}
@@ -13,6 +13,7 @@ dependencies:
browser: ^0.10.0
mdl: ^1.0.0
# path: /Volumes/Daten/DevLocal/DevDart/MaterialDesignLite
di: ^3.3.0
@@ -40,9 +40,11 @@
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../assets/styles/styles.css">
<link rel="stylesheet" href="../packages/mdl/assets/styles/splashscreen/dots.css">
<link rel="stylesheet" href="../packages/mdl/assets/styles/material.min.css">
</head>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base mdl-upgrading about_index"><div class="loading mdl-color--primary">Loading...</div>
<body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base mdl-upgrading about_index">
<div class="mdl-splashscreen mdl-color--primary"><div class="spinner"><div class="dot1 mdl-color--white"></div><div class="dot2 mdl-color--accent"></div></div></div>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-color--grey-300">
<!-- Usage of "partials" -->
<header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
@@ -1,59 +1,20 @@
/**
* Copyright 2015 Google Inc. 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
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html, body {
font-family: 'Roboto', 'Helvetica', sans-serif;
margin: 0;
padding: 0; }
body .loading {
color: white;
font-size: 24px;
z-index: 99;
display: none;
position: absolute;
opacity: 0.8;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
body.mdl-upgrading .loading {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex; }
.main-section {
width: calc(100% - 112px);
margin: 24px 0 0 56px;
min-height: 480px; }
.main-section .mdl-panel {
margin-bottom: 24px; }
.main-section .mdl-card .mdl-card__title {
background-color: darkslateblue; }
.main-section .mdl-card.demo-card-wide {
width: 600px; }
.is-small-screen .main-section .mdl-card.demo-card-wide {
width: auto; }
.tab-bar {
display: -webkit-box;
@@ -82,19 +43,6 @@ body.mdl-upgrading .loading {
.is-small-screen .tab-bar {
min-height: 56px; }
.main-section {
width: calc(100% - 112px);
margin: 24px 0 0 56px;
min-height: 480px; }
.main-section .mdl-panel {
margin-bottom: 24px; }
.main-section .mdl-card .mdl-card__title {
background-color: darkslateblue; }
.main-section .mdl-card.demo-card-wide {
width: 600px; }
.is-small-screen .main-section .mdl-card.demo-card-wide {
width: auto; }
/**
Overwrites some essential MDL-Styles
This should go into the main MDL-Branch
Oops, something went wrong.

0 comments on commit b81b3ec

Please sign in to comment.