Permalink
Browse files

Add files via upload

Initial commit Responsive Frontend in Polymer
  • Loading branch information...
1 parent 696772a commit 42f13db54b8c12589418ea92b14ba0773a8e1a35 @Robin1337 Robin1337 committed on GitHub Dec 21, 2016
View
@@ -1,3 +1,39 @@
-# OpenRemote v3 - Frontend
+## LIVE DEMO ##
+http://blok61.stofloos.nl/
+
+- Add to Homescreen for optimal performance.
+
+
+## Polymer Instructions ##
+# Viewing the Application
+
+```
+$ polymer serve
+```
+
+# Building the Application
+
+```
+$ polymer build
+```
+
+This will create a `build/` folder with `bundled/` and `unbundled/` sub-folders
+containing a bundled (Vulcanized) and unbundled builds, both run through HTML,
+CSS, and JS optimizers.
+
+-Images folder needs to be included in the build folders.
+
+You can serve the built versions by giving `polymer serve` a folder to serve
+from:
+
+```
+$ polymer serve build/bundled
+```
+
+# Running Tests
+
+```
+$ polymer test
+```
+
-Development of 'Example Home' frontend code/UI.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -0,0 +1,209 @@
+@font-face {
+ font-family: 'robotoregular';
+ /* TODO webcomponent.js bug fixed in 0.6 */
+ src: url('Roboto-Regular-webfont.woff') format('woff'), url('panels/demo/Roboto-Regular-webfont.woff') format('woff');
+}
+
+@font-face {
+ font-family: 'robotoregular';
+ /* TODO webcomponent.js bug fixed in 0.6 */
+ src: url('Roboto-Bold-webfont.woff') format('woff'), url('panels/demo/Roboto-Bold-webfont.woff') format('woff');
+ font-weight: bold;
+}
+
+@font-face {
+ font-family: "robotocondensed";
+ /* TODO webcomponent.js bug fixed in 0.6 */
+ src: url("RobotoCondensed-Regular-webfont.woff") format("woff"), url("panels/demo/RobotoCondensed-Regular-webfont.woff") format("woff");
+}
+
+@font-face {
+ font-family: "robotocondensed";
+ /* TODO webcomponent.js bug fixed in 0.6 */
+ src: url("RobotoCondensed-Bold-webfont.woff") format("woff"), url("panels/demo/RobotoCondensed-Bold-webfont.woff") format("woff");
+ font-weight: bold;
+}
+
+or-console-frontend {
+ font-family: robotoregular, sans-serif;
+ background-color: white;
+ color: #333333;
+}
+
+or-console-frontend /deep/ core-drawer-panel core-header-panel {
+ background-color: #374C4F;
+ color: white;
+}
+
+or-console-frontend /deep/ core-drawer-panel core-toolbar {
+ font-family: robotocondensed, sans-serif;
+ background-color: #C0D62E;
+ color: #333333;
+}
+
+or-console-frontend /deep/ .menu .panelItem {
+}
+
+or-console-frontend /deep/ .menu .groupItem {
+}
+
+or-console-frontend /deep/ .menu .screenItem {
+}
+
+or-console-frontend /deep/ .menu .selected {
+ color: #C0D62E;
+ font-weight: bold;
+}
+
+or-console-frontend /deep/ paper-tabs {
+ font-family: robotoregular, sans-serif;
+ font-weight: bold;
+ background-color: #F2F2F2;
+ color: #666666;
+}
+
+or-console-frontend /deep/ paper-tabs::shadow #selectionBar {
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-tabs paper-tab::shadow #ink {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ .screens {
+ font-family: robotoregular, sans-serif;
+ background-color: white;
+ color: black;
+}
+
+or-console-frontend /deep/ .unfocused-underline {
+ background-color: #cccccc;
+ height: 2px;
+}
+
+or-console-frontend /deep/ .focused-underline {
+ background-color: #C0D62E;
+ height: 2px;
+}
+
+or-console-frontend /deep/ paper-ripple {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-slider::shadow #sliderBar::shadow #activeProgress {
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-slider::shadow #sliderKnobInner {
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-slider::shadow .ring > #sliderKnob > #sliderKnobInner {
+ border-color: #C0D62E;
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-slider::shadow #sliderKnobInner::before {
+ background-color: #333333;
+}
+
+or-console-frontend /deep/ paper-slider::shadow #sliderKnob > #sliderKnobInner::after {
+ color: white;
+}
+
+or-console-frontend /deep/ paper-slider::shadow #sliderBar::shadow #progressContainer {
+ background-color: #374C4F;
+}
+
+or-console-frontend /deep/ paper-slider::shadow paper-input::shadow paper-input-decorator {
+ padding: 0.5em 0;
+}
+
+or-console-frontend /deep/ paper-slider::shadow /deep/ .unfocused-underline {
+ display: none;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow .toggle-bar {
+ background-color: black;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow .toggle-button {
+ background-color: #666666;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow [checked] .toggle-bar {
+ background-color: black;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow [checked] .toggle-button {
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow .toggle-ink {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-toggle-button::shadow [checked] .toggle-ink {
+ color: #374C4F;
+}
+
+or-console-frontend /deep/ paper-radio-button::shadow #onRadio {
+ background-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-radio-button[checked]::shadow #offRadio {
+ border-color: #C0D62E;
+ background-color: white;
+}
+
+or-console-frontend /deep/ paper-radio-button::shadow #offRadio {
+ border-color: #333333;
+ background-color: white;
+}
+
+or-console-frontend /deep/ paper-radio-button::shadow #ink[checked] {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-radio-button::shadow #ink {
+ color: #374C4F;
+}
+
+or-console-frontend /deep/ paper-checkbox::shadow #ink[checked] {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-checkbox::shadow #checkbox.checked {
+ background-color: #C0D62E;
+ border-color: #C0D62E;
+}
+
+or-console-frontend /deep/ paper-checkbox::shadow #checkbox {
+ border-color: #333333;
+}
+
+or-console-frontend /deep/ paper-checkbox::shadow #ink {
+ color: #374C4F;
+}
+
+or-console-frontend /deep/ or-console-label::shadow .on {
+ color: #C0D62E;
+}
+
+or-console-frontend /deep/ or-console-label::shadow .off {
+ color: #374C4F;
+}
+
+or-console-frontend /deep/ .box {
+ height: 100%;
+}
+
+or-console-frontend /deep/ .box.border {
+ border: 1px solid #666666;
+}
+
+or-console-frontend /deep/ .box.solid {
+ background-color: #CCCCCC;
+}
+
+
View
@@ -0,0 +1,46 @@
+<!doctype html>
+
+<html>
+<head>
+
+ <title>Blok 61</title>
+
+ <meta charset="utf-8">
+ <meta name="apple-mobile-web-app-capable" content="yes">
+ <meta name="mobile-web-app-capable" content="yes">
+
+ <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+ <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+
+ <link rel="import" href="src/openremote-app.html">
+ <style>
+ html{
+ height:100%;
+ background: url(images/bg-image.jpeg) no-repeat center center fixed;
+ -webkit-background-size: cover;
+ -moz-background-size: cover;
+ -o-background-size: cover;
+ background-size: cover;
+ }
+ body {
+ height:100%;
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
+ }
+ input,
+ textarea,
+ button,
+ select,
+ a {
+ -webkit-tap-highlight-color: rgba(0,0,0,0);
+ }
+ .paper-toggle-button-0[checked]:not([disabled]) .toggle-bar.paper-toggle-button{
+ opacity: 1;
+ }
+ </style>
+
+</head>
+<body>
+ <openremote-app></openremote-app>
+</body>
+</html>
@@ -0,0 +1,6 @@
+{
+ "name": "Blok61",
+ "short_name": "Blok61",
+ "start_url": "/",
+ "display": "standalone"
+}
@@ -0,0 +1,85 @@
+
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../../bower_components/paper-radio-button/paper-radio-button.html">
+<link rel="import" href="../../bower_components/paper-radio-group/paper-radio-group.html">
+<dom-module id="input-switch-blok">
+ <template>
+ <style type="text/css">
+ paper-radio-group.square-group{
+ position:relative;
+ display:block;
+ height: 220px;
+ margin: 20px auto;
+ width:240px;
+ }
+ paper-radio-button{
+ position: relative;
+ width: 120px;
+ height: 120px;
+ float: left;
+ display: block;
+ padding: 0
+ }
+ paper-radio-group paper-radio-button.square > ::content #radioContainer{
+ width:100px;
+ height:100px;
+ margin:10px;
+ }
+ paper-radio-group paper-radio-button.square > ::content #radioContainer #offRadio{
+ background-color:#374c4f;
+ border:0;
+ }
+ paper-radio-group paper-radio-button.square > ::content #radioContainer #onRadio{
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ opacity: 0;
+ background-color:#c0d62e;
+
+ transition: opacity ease 0.28s;
+ }
+ paper-radio-group paper-radio-button.square[checked] > ::content #radioContainer #onRadio{
+ opacity: 1;
+ }
+ paper-radio-group paper-radio-button.square > ::content #radioContainer .paper-radio-button{
+ border-radius: 0;
+ }
+ paper-radio-group paper-radio-button.square.break{
+ clear:both;
+ }
+ paper-radio-group paper-radio-button.square > ::content #radioLabel.paper-radio-button{
+ color:#FFFFFF;
+ line-height: 100px;
+ text-align: center;
+ position: absolute;
+ left: 0;
+ top: 10px;
+ width: 100px;
+ }
+ </style>
+ <paper-radio-group selected="morning" class="square-group" allow-empty-selection>
+ <content>
+ <paper-radio-button class="square" name="morning">Morning</paper-radio-button>
+ <paper-radio-button class="square" name="away">Away</paper-radio-button>
+ <paper-radio-button class="square break" name="evening">Evening</paper-radio-button>
+ <paper-radio-button class="square" name="night">Night</paper-radio-button>
+ </content>
+ </paper-radio-group>
+ </template>
+
+ <script>
+
+ Polymer({
+ is: 'input-switch-blok'
+ });
+
+ </script>
+</dom-module>
Oops, something went wrong.

0 comments on commit 42f13db

Please sign in to comment.