github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Another fix for app-header-layout (#738)

This commit is contained in:
Andrey 2017-12-23 07:07:46 +02:00 committed by Paulus Schoutsen
parent f0f1a56537
commit 60ac82edc5
5 changed files with 39 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
panels/config/automation/ha-automation-editor.html
View File

@ -1,5 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@ -19,6 +18,7 @@
<link rel='import' href='../../../src/components/entity/ha-entity-picker.html'>
<link rel='import' href='../../../src/components/ha-combo-box.html'>
<link rel='import' href='../../../src/components/ha-service-picker.html'>
<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
@ -82,7 +82,7 @@
}
</style>
<app-header-layout has-scrolling-region>
<ha-app-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
@ -98,15 +98,15 @@
<div class='errors'>[[errors]]</div>
</template>
<div id='root'></div>
<paper-fab
is-wide$='[[isWide]]'
dirty$='[[dirty]]'
icon='mdi:content-save'
title='Save'
on-tap='saveAutomation'
></paper-fab>
</div>
</app-header-layout>
<paper-fab slot="fab"
is-wide$='[[isWide]]'
dirty$='[[dirty]]'
icon='mdi:content-save'
title='Save'
on-tap='saveAutomation'
></paper-fab>
</ha-app-layout>
</template>
</dom-module>

8
panels/config/automation/ha-automation-picker.html
View File

@ -1,5 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@ -8,6 +7,7 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
@ -44,7 +44,7 @@
}
</style>
<app-header-layout has-scrolling-region>
<ha-app-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
@ -82,13 +82,13 @@
</paper-card>
</ha-config-section>
<paper-fab
<paper-fab slot="fab"
is-wide$='[[isWide]]'
icon='mdi:plus'
title='Add Automation'
on-tap='addAutomation'
></paper-fab>
</app-header-layout>
</ha-app-layout>
</template>
</dom-module>

15
panels/config/script/ha-script-editor.html
View File

@ -91,20 +91,19 @@
<div main-title>Script [[name]]</div>
</app-toolbar>
</app-header>
<div class='content'>
<template is='dom-if' if='[[errors]]'>
<div class='errors'>[[errors]]</div>
</template>
<div id='root'></div>
<paper-fab
is-wide$='[[isWide]]'
dirty$='[[dirty]]'
icon='mdi:content-save'
title='Save'
on-tap='saveScript'
></paper-fab>
</div>
<paper-fab slot="fab"
is-wide$='[[isWide]]'
dirty$='[[dirty]]'
icon='mdi:content-save'
title='Save'
on-tap='saveScript'
></paper-fab>
</ha-app-layout>
</template>

8
panels/config/script/ha-script-picker.html
View File

@ -1,5 +1,4 @@
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../../../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../../../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../../../bower_components/paper-card/paper-card.html">
@ -8,6 +7,7 @@
<link rel="import" href="../../../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">
<link rel='import' href='../../../src/layouts/ha-app-layout.html'>
<link rel='import' href='../../../src/util/hass-mixins.html'>
<link rel="import" href="../ha-config-section.html">
@ -40,7 +40,7 @@
}
</style>
<app-header-layout has-scrolling-region>
<ha-app-layout has-scrolling-region>
<app-header slot="header" fixed>
<app-toolbar>
<paper-icon-button
@ -78,13 +78,13 @@
</paper-card>
</ha-config-section>
<paper-fab
<paper-fab slot="fab"
is-wide$='[[isWide]]'
icon='mdi:plus'
title='Add Script'
on-tap='addScript'
></paper-fab>
</app-header-layout>
</ha-app-layout>
</template>
</dom-module>

24
src/layouts/ha-app-layout.html
View File

@ -30,58 +30,62 @@ transform: translate(0) is added.
position: relative;
z-index: 0;
}
#wrapper ::slotted([slot=header]) {
@apply --layout-fixed-top;
z-index: 1;
}
#wrapper.initializing ::slotted([slot=header]) {
position: relative;
}
:host([has-scrolling-region]) {
height: 100%;
}
:host([has-scrolling-region]) #wrapper ::slotted([slot=header]) {
position: absolute;
}
:host([has-scrolling-region]) #wrapper.initializing ::slotted([slot=header]) {
position: relative;
}
:host([has-scrolling-region]) #wrapper #contentContainer {
@apply --layout-fit;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
:host([has-scrolling-region]) #wrapper.initializing #contentContainer {
position: relative;
}
#contentContainer {
/* Create a stacking context here so that all children appear below the header. */
position: relative;
z-index: 0;
}
.scroll-limiter {
/* Using 'transform' will cause 'position: fixed' elements to behave like
'position: absolute' relative to this element. */
transform: translate(0);
}
:host([has-scrolling-region]) .scroll-limiter {
overflow-y: auto;
height: 100%
}
@media print {
:host([has-scrolling-region]) .scroll-limiter {
:host([has-scrolling-region]) #wrapper #contentContainer {
overflow-y: visible;
}
}
</style>
<div id="wrapper" class="initializing">
<slot id="headerSlot" name="header"></slot>
<div id="contentContainer">
<div class="scroll-limiter">
<slot></slot>
</div>
<slot></slot>
</div>
<slot id="fab" name="fab"></slot>
</div>
</template>