Merge pull request #271 from dermotduffy/elements-hidden

Render picture elements on top of the camera carousel

src/card.ts

@@ -1096,11 +1096,6 @@ export class FrigateCard extends LitElement {
       absolute: padding != null,
     };
 
-    const pictureElementsClasses = {
-      'picture-elements': true,
-      gallery: !!this._view?.isGalleryView(),
-    };
-
     const actions = this._getMergedActions();
 
     return html` <ha-card
@@ -1119,46 +1114,45 @@ export class FrigateCard extends LitElement {
       ${this._getConfig().menu.mode == 'above' ? this._renderMenu() : ''}
       <div class="container outer" style="${styleMap(outerStyle)}">
         <div class="${classMap(contentClasses)}">
-          <div class="${classMap(pictureElementsClasses)}">
+          ${this._cameras === undefined
-            ${this._getConfig().elements
+            ? until(
-              ? // Always show elements to allow for custom menu items (etc.) to
+                (async () => {
-                // be present even if a particular view has an error.
+                  await this._loadCameras();
-                html` <frigate-card-elements
+                  // Don't reset messages as errors may have been generated
-                  .hass=${this._hass}
+                  // during the camera load.
-                  .elements=${this._getConfig().elements}
+                  this._changeView({ resetMessage: false });
-                  .conditionState=${this._conditionState}
+                  return this._render();
-                  @frigate-card:menu-add=${(e) => {
+                })(),
-                    this._addDynamicMenuButton(e.detail);
+                renderProgressIndicator(),
-                  }}
+              )
-                  @frigate-card:menu-remove=${(e) => {
+            : // Always want to call render even if there's a message, to
-                    this._removeDynamicMenuButton(e.detail);
+              // ensure live preload is always present (even if not displayed).
-                  }}
+              this._render()}
-                  @frigate-card:condition-state-request=${(ev) => {
+          ${this._getConfig().elements
-                    conditionStateRequestHandler(ev, this._conditionState);
+            ? // Always show elements to allow for custom menu items (etc.) to
-                  }}
+              // be present even if a particular view has an error. Elements
-                >
+              // need to render after the main views so it can render 'on top'.
-                </frigate-card-elements>`
+              html` <frigate-card-elements
-              : ``}
+                .hass=${this._hass}
-            ${this._cameras === undefined
+                .elements=${this._getConfig().elements}
-              ? until(
+                .conditionState=${this._conditionState}
-                  (async () => {
+                @frigate-card:menu-add=${(e) => {
-                    await this._loadCameras();
+                  this._addDynamicMenuButton(e.detail);
-                    // Don't reset messages as errors may have been generated
+                }}
-                    // during the camera load.
+                @frigate-card:menu-remove=${(e) => {
-                    this._changeView({ resetMessage: false });
+                  this._removeDynamicMenuButton(e.detail);
-                    return this._render();
+                }}
-                  })(),
+                @frigate-card:condition-state-request=${(ev) => {
-                  renderProgressIndicator(),
+                  conditionStateRequestHandler(ev, this._conditionState);
-                )
+                }}
-              : // Always want to call render even if there's a message, to
+              >
-                // ensure live preload is always present (even if not displayed).
+              </frigate-card-elements>`
-                this._render()}
+            : ``}
-            ${
+          ${
-              // Keep message rendering to last to show messages that may have
+            // Keep message rendering to last to show messages that may have
-              // been generated during the render.
+            // been generated during the render.
-              this._message ? renderMessage(this._message) : ''
+            this._message ? renderMessage(this._message) : ''
-            }
+          }
-          </div>
         </div>
       </div>
       ${this._getConfig().menu.mode != 'above' ? this._renderMenu() : ''}

src/scss/card.scss

@@ -44,18 +44,6 @@
 .outer:hover + .hover-menu, .hover-menu:hover {
   opacity: 0.9;
 }
-/* A relative div to place absolute picture elements onto */
-.picture-elements {
-  position: relative;
-  width: 100%;
-  height: 100%;
-}
-
-/* Enforce picture elements to only be the size of the card/fullscreen (and not
-larger) when in gallery mode so that the picture elements do not scroll. */
-.picture-elements.gallery {
-  height: 100%;
-}
 
 ha-card {
   display: flex;