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,10 +1114,24 @@ 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
+            ? until(
+                (async () => {
+                  await this._loadCameras();
+                  // Don't reset messages as errors may have been generated
+                  // during the camera load.
+                  this._changeView({ resetMessage: false });
+                  return this._render();
+                })(),
+                renderProgressIndicator(),
+              )
+            : // Always want to call render even if there's a message, to
+              // ensure live preload is always present (even if not displayed).
+              this._render()}
           ${this._getConfig().elements
             ? // Always show elements to allow for custom menu items (etc.) to
-                // be present even if a particular view has an error.
+              // be present even if a particular view has an error. Elements
+              // need to render after the main views so it can render 'on top'.
               html` <frigate-card-elements
                 .hass=${this._hass}
                 .elements=${this._getConfig().elements}
@@ -1139,20 +1148,6 @@ export class FrigateCard extends LitElement {
               >
               </frigate-card-elements>`
             : ``}
-            ${this._cameras === undefined
-              ? until(
-                  (async () => {
-                    await this._loadCameras();
-                    // Don't reset messages as errors may have been generated
-                    // during the camera load.
-                    this._changeView({ resetMessage: false });
-                    return this._render();
-                  })(),
-                  renderProgressIndicator(),
-                )
-              : // Always want to call render even if there's a message, to
-                // ensure live preload is always present (even if not displayed).
-                this._render()}
           ${
             // Keep message rendering to last to show messages that may have
             // been generated during the render.
@@ -1160,7 +1155,6 @@ export class FrigateCard extends LitElement {
           }
         </div>
       </div>
-      </div>
       ${this._getConfig().menu.mode != 'above' ? this._renderMenu() : ''}
     </ha-card>`;
   }

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;