jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-14 12:56:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

Don't add space on the bottom when not showing tabs (#6913)

Browse Source
This commit is contained in:
Bram Kragten 2020-09-10 17:24:01 +02:00 committed by GitHub
parent 7bf0655dae
commit 7fa9f10c30
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/layouts/hass-tabs-subpage.ts
View File

@ -3,26 +3,26 @@ import {
css, css,
CSSResult, CSSResult,
customElement, customElement,
eventOptions,
html, html,
internalProperty,
LitElement, LitElement,
property, property,
internalProperty,
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
eventOptions,
} from "lit-element"; } from "lit-element";
import { classMap } from "lit-html/directives/class-map"; import { classMap } from "lit-html/directives/class-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../common/config/is_component_loaded"; import { isComponentLoaded } from "../common/config/is_component_loaded";
import { navigate } from "../common/navigate";
import "../components/ha-menu-button";
import "../components/ha-icon-button-arrow-prev";
import { HomeAssistant, Route } from "../types";
import "../components/ha-svg-icon";
import "../components/ha-icon";
import "../components/ha-tab";
import { restoreScroll } from "../common/decorators/restore-scroll"; import { restoreScroll } from "../common/decorators/restore-scroll";
import { navigate } from "../common/navigate";
import { computeRTL } from "../common/util/compute_rtl"; import { computeRTL } from "../common/util/compute_rtl";
import "../components/ha-icon";
import "../components/ha-icon-button-arrow-prev";
import "../components/ha-menu-button";
import "../components/ha-svg-icon";
import "../components/ha-tab";
import { HomeAssistant, Route } from "../types";
export interface PageNavigation { export interface PageNavigation {
path: string; path: string;
@ -132,7 +132,7 @@ class HassTabsSubpage extends LitElement {
this.hass.language, this.hass.language,
this.narrow this.narrow
); );
const showTabs = tabs.length > 1 || !this.narrow;
return html` return html`
<div class="toolbar"> <div class="toolbar">
${this.mainPage ${this.mainPage
@ -152,7 +152,7 @@ class HassTabsSubpage extends LitElement {
${this.narrow ${this.narrow
? html` <div class="main-title"><slot name="header"></slot></div> ` ? html` <div class="main-title"><slot name="header"></slot></div> `
: ""} : ""}
${tabs.length > 1 || !this.narrow ${showTabs
? html` ? html`
<div id="tabbar" class=${classMap({ "bottom-bar": this.narrow })}> <div id="tabbar" class=${classMap({ "bottom-bar": this.narrow })}>
${tabs} ${tabs}
@ -163,10 +163,15 @@ class HassTabsSubpage extends LitElement {
<slot name="toolbar-icon"></slot> <slot name="toolbar-icon"></slot>
</div> </div>
</div> </div>
<div class="content" @scroll=${this._saveScrollPos}> <div
class="content ${classMap({ tabs: showTabs })}"
@scroll=${this._saveScrollPos}
>
<slot></slot> <slot></slot>
</div> </div>
<div id="fab"><slot name="fab"></slot></div> <div id="fab" class="${classMap({ tabs: showTabs })}">
<slot name="fab"></slot>
</div>
`; `;
} }
@ -274,12 +279,13 @@ class HassTabsSubpage extends LitElement {
margin-left: env(safe-area-inset-left); margin-left: env(safe-area-inset-left);
margin-right: env(safe-area-inset-right); margin-right: env(safe-area-inset-right);
height: calc(100% - 65px); height: calc(100% - 65px);
height: calc(100% - 65px - env(safe-area-inset-bottom));
overflow-y: auto; overflow-y: auto;
overflow: auto; overflow: auto;
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
:host([narrow]) .content { :host([narrow]) .content.tabs {
height: calc(100% - 128px); height: calc(100% - 128px);
height: calc(100% - 128px - env(safe-area-inset-bottom)); height: calc(100% - 128px - env(safe-area-inset-bottom));
} }
@ -290,7 +296,7 @@ class HassTabsSubpage extends LitElement {
bottom: calc(16px + env(safe-area-inset-bottom)); bottom: calc(16px + env(safe-area-inset-bottom));
z-index: 1; z-index: 1;
} }
:host([narrow]) #fab { :host([narrow]) #fab.tabs {
bottom: calc(84px + env(safe-area-inset-bottom)); bottom: calc(84px + env(safe-area-inset-bottom));
} }
#fab[is-wide] { #fab[is-wide] {