[logbook] fix scrolling on iOS (#4950)

* [logbook] fix scrolling on iOS * Update styling * Update ha-logbook.ts Co-authored-by: Bram Kragten <mail@bramkragten.nl>
home-assistant · Feb 24, 2020 · 028b370 · 028b370
1 parent 18abc6a
commit 028b370
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 61 deletions.
diff --git a/src/panels/logbook/ha-logbook.ts b/src/panels/logbook/ha-logbook.ts
@@ -15,7 +15,7 @@ import {
 } from "lit-element";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
-import "lit-virtualizer";
+import { scroll } from "lit-virtualizer";
 import { LogbookEntry } from "../../data/logbook";
 
 class HaLogbook extends LitElement {
@@ -44,19 +44,23 @@ class HaLogbook extends LitElement {
     }
 
     return html`
-      <lit-virtualizer
-        .items=${this.entries}
-        .renderItem=${(item: LogbookEntry, index: number) =>
-          this._renderLogbookItem(item, index)}
-        style="height: 100%;"
-      ></lit-virtualizer>
+      <div>
+        ${scroll({
+          items: this.entries,
+          renderItem: (item: LogbookEntry, index?: number) =>
+            this._renderLogbookItem(item, index),
+        })}
+      </div>
     `;
   }
 
   private _renderLogbookItem(
     item: LogbookEntry,
-    index: number
+    index?: number
   ): TemplateResult {
+    if (!index) {
+      return html``;
+    }
     const previous = this.entries[index - 1];
     const state = item.entity_id ? this.hass.states[item.entity_id] : undefined;
     return html`
@@ -149,6 +153,19 @@ class HaLogbook extends LitElement {
       a {
         color: var(--primary-color);
       }
+
+      .uni-virtualizer-host {
+        display: block;
+        position: relative;
+        contain: strict;
+        height: 100%;
+        overflow: auto;
+        padding: 0 16px;
+      }
+
+      .uni-virtualizer-host > * {
+        box-sizing: border-box;
+      }
     `;
   }
 }

diff --git a/src/panels/logbook/ha-panel-logbook.js b/src/panels/logbook/ha-panel-logbook.js
@@ -27,10 +27,6 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
   static get template() {
     return html`
       <style include="ha-style">
-        .content {
-          padding: 0 16px 0 16px;
-        }
-
         ha-logbook {
           height: calc(100vh - 136px);
         }
@@ -53,6 +49,7 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
         .filters {
           display: flex;
           align-items: flex-end;
+          padding: 0 16px;
         }
 
         :host([narrow]) .filters {
@@ -135,58 +132,53 @@ class HaPanelLogbook extends LocalizeMixin(PolymerElement) {
           </app-toolbar>
         </app-header>
 
-        <div class="content">
-          <paper-spinner
-            active="[[isLoading]]"
-            hidden$="[[!isLoading]]"
-            alt="[[localize('ui.common.loading')]]"
-          ></paper-spinner>
-
-          <div class="filters">
-            <vaadin-date-picker
-              id="picker"
-              value="{{_currentDate}}"
-              label="[[localize('ui.panel.logbook.showing_entries')]]"
-              disabled="[[isLoading]]"
-              required
-            ></vaadin-date-picker>
-
-            <paper-dropdown-menu
-              label-float
-              label="[[localize('ui.panel.logbook.period')]]"
-              disabled="[[isLoading]]"
-            >
-              <paper-listbox
-                slot="dropdown-content"
-                selected="{{_periodIndex}}"
+        <paper-spinner
+          active="[[isLoading]]"
+          hidden$="[[!isLoading]]"
+          alt="[[localize('ui.common.loading')]]"
+        ></paper-spinner>
+
+        <div class="filters">
+          <vaadin-date-picker
+            id="picker"
+            value="{{_currentDate}}"
+            label="[[localize('ui.panel.logbook.showing_entries')]]"
+            disabled="[[isLoading]]"
+            required
+          ></vaadin-date-picker>
+
+          <paper-dropdown-menu
+            label-float
+            label="[[localize('ui.panel.logbook.period')]]"
+            disabled="[[isLoading]]"
+          >
+            <paper-listbox slot="dropdown-content" selected="{{_periodIndex}}">
+              <paper-item
+                >[[localize('ui.duration.day', 'count', 1)]]</paper-item
               >
-                <paper-item
-                  >[[localize('ui.duration.day', 'count', 1)]]</paper-item
-                >
-                <paper-item
-                  >[[localize('ui.duration.day', 'count', 3)]]</paper-item
-                >
-                <paper-item
-                  >[[localize('ui.duration.week', 'count', 1)]]</paper-item
-                >
-              </paper-listbox>
-            </paper-dropdown-menu>
-
-            <ha-entity-picker
-              hass="[[hass]]"
-              value="{{_entityId}}"
-              label="[[localize('ui.components.entity.entity-picker.entity')]]"
-              disabled="[[isLoading]]"
-              on-change="_entityPicked"
-            ></ha-entity-picker>
-          </div>
-
-          <ha-logbook
+              <paper-item
+                >[[localize('ui.duration.day', 'count', 3)]]</paper-item
+              >
+              <paper-item
+                >[[localize('ui.duration.week', 'count', 1)]]</paper-item
+              >
+            </paper-listbox>
+          </paper-dropdown-menu>
+
+          <ha-entity-picker
             hass="[[hass]]"
-            entries="[[entries]]"
-            hidden$="[[isLoading]]"
-          ></ha-logbook>
+            value="{{_entityId}}"
+            label="[[localize('ui.components.entity.entity-picker.entity')]]"
+            disabled="[[isLoading]]"
+            on-change="_entityPicked"
+          ></ha-entity-picker>
         </div>
+
+        <ha-logbook
+          hass="[[hass]]"
+          entries="[[entries]]"
+          hidden$="[[isLoading]]"
+        ></ha-logbook>
       </app-header-layout>
     `;
   }