Polymer 1.0: style fixes

This commit is contained in:
Paulus Schoutsen 2015-05-27 23:30:22 -07:00
parent 2ce090e4b3
commit ab7536ffd7
4 changed files with 30 additions and 32 deletions

View File

@ -6,8 +6,6 @@
<style> <style>
:host { :host {
display: block; display: block;
width: 100%;
background-color: #E5E5E5;
} }
@media all and (min-width: 1020px) { @media all and (min-width: 1020px) {

View File

@ -7,6 +7,7 @@
<link rel='import' href='../bower_components/paper-menu/paper-menu.html'> <link rel='import' href='../bower_components/paper-menu/paper-menu.html'>
<link rel='import' href='../bower_components/iron-icon/iron-icon.html'> <link rel='import' href='../bower_components/iron-icon/iron-icon.html'>
<link rel='import' href='../bower_components/paper-item/paper-item.html'> <link rel='import' href='../bower_components/paper-item/paper-item.html'>
<link rel='import' href='../bower_components/paper-item/paper-icon-item.html'>
<link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'> <link rel='import' href='../bower_components/paper-icon-button/paper-icon-button.html'>
<link rel='import' href='../layouts/partial-states.html'> <link rel='import' href='../layouts/partial-states.html'>
@ -29,22 +30,15 @@
overflow: hidden; overflow: hidden;
} }
.sidenav paper-toolbar {
padding-left: 16px;
}
.sidenav paper-menu { .sidenav paper-menu {
--paper-menu-color: #757575; --paper-menu-color: var(--secondary-text-color);
--paper-menu-background-color: #fafafa;
} }
.sidenav paper-item[data-panel] { paper-icon-item {
cursor: pointer; cursor: pointer;
} }
.sidenav iron-icon {
margin-right: 24px;
}
.divider { .divider {
border-top: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0;
} }
@ -66,43 +60,45 @@
<paper-drawer-panel id='drawer' narrow='{{narrow}}'> <paper-drawer-panel id='drawer' narrow='{{narrow}}'>
<paper-header-panel mode='scroll' drawer class='sidenav fit'> <paper-header-panel mode='scroll' drawer class='sidenav fit'>
<paper-toolbar> <paper-toolbar>
Home Assistant <!-- forces paper toolbar to style title appropriate -->
<paper-icon-button hidden></paper-icon-button>
<div title>Home Assistant</div>
</paper-toolbar> </paper-toolbar>
<paper-menu id='menu' class='layout vertical fit' <paper-menu id='menu' class='layout vertical fit'
selectable='[data-panel]' attr-for-selected='data-panel' selectable='[data-panel]' attr-for-selected='data-panel'
on-iron-select='menuSelect' selected='[[selected]]'> on-iron-select='menuSelect' selected='[[selected]]'>
<paper-item data-panel='states'> <paper-icon-item data-panel='states'>
<iron-icon icon='apps'></iron-icon> States <iron-icon item-icon icon='apps'></iron-icon> States
</paper-item> </paper-icon-item>
<template is='dom-repeat' items='{{activeFilters}}'> <template is='dom-repeat' items='{{activeFilters}}'>
<paper-item data-panel$='[[filterType(item)]]'> <paper-icon-item data-panel$='[[filterType(item)]]'>
<iron-icon icon='[[filterIcon(item)]]'></iron-icon> <iron-icon item-icon icon='[[filterIcon(item)]]'></iron-icon>
<span>[[filterName(item)]]</span> <span>[[filterName(item)]]</span>
</paper-item> </paper-icon-item>
</template> </template>
<template is='dom-if' if='[[hasHistoryComponent]]'> <template is='dom-if' if='[[hasHistoryComponent]]'>
<paper-item data-panel='history'> <paper-icon-item data-panel='history'>
<iron-icon icon='assessment'></iron-icon> <iron-icon item-icon icon='assessment'></iron-icon>
History History
</paper-item> </paper-icon-item>
</template> </template>
<template is='dom-if' if='[[hasLogbookComponent]]'> <template is='dom-if' if='[[hasLogbookComponent]]'>
<paper-item data-panel='logbook'> <paper-icon-item data-panel='logbook'>
<iron-icon icon='list'></iron-icon> <iron-icon item-icon icon='list'></iron-icon>
Logbook Logbook
</paper-item> </paper-icon-item>
</template> </template>
<div class='flex'></div> <div class='flex'></div>
<paper-item data-panel='logout'> <paper-icon-item data-panel='logout'>
<iron-icon icon='exit-to-app'></iron-icon> <iron-icon item-icon icon='exit-to-app'></iron-icon>
Log Out Log Out
</paper-item> </paper-icon-item>
<paper-item class='divider horizontal layout justified'> <paper-item class='divider horizontal layout justified'>
<div>Streaming updates</div> <div>Streaming updates</div>
@ -178,7 +174,6 @@
narrow: { narrow: {
type: Boolean, type: Boolean,
value: false,
}, },
activeFilters: { activeFilters: {

View File

@ -10,13 +10,13 @@
<paper-scroll-header-panel class='fit'> <paper-scroll-header-panel class='fit'>
<paper-toolbar> <paper-toolbar>
<paper-icon-button icon='menu' hidden$='[[!narrow]]' on-click='toggleMenu'></paper-icon-button> <paper-icon-button icon='menu' hidden$='[[!narrow]]' on-click='toggleMenu'></paper-icon-button>
<div class='flex'> <div title>
<content select='[header-title]'></content> <content select='[header-title]'></content>
</div> </div>
<content select='[header-buttons]'></content> <content select='[header-buttons]'></content>
</paper-toolbar> </paper-toolbar>
<div class='fit'><content></content></div> <content></content>
</paper-scroll-header-panel> </paper-scroll-header-panel>
</template> </template>
</dom-module> </dom-module>

View File

@ -31,6 +31,11 @@
.listening paper-spinner { .listening paper-spinner {
float: right; float: right;
} }
state-cards {
height: 100%;
background-color: #E5E5E5;
}
</style> </style>
<template> <template>
@ -51,7 +56,7 @@
<paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner> <paper-spinner active$="[[isTransmitting]]" alt="Sending voice command to Home Assistant"></paper-spinner>
</div> </div>
<state-cards states="[[states]]" class='fit'> <state-cards states="[[states]]">
<h3>Hi there!</h3> <h3>Hi there!</h3>
<p> <p>
It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet. It looks like we have nothing to show you right now. It could be that we have not yet discovered all your devices but it is more likely that you have not configured Home Assistant yet.