Fix mobile dialog styles (#520)

hacs · Nov 6, 2021 · 519f37a · 519f37a
1 parent 1032d52
commit 519f37a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 73 deletions.
diff --git a/src/components/dialogs/hacs-dialog.ts b/src/components/dialogs/hacs-dialog.ts
@@ -1,4 +1,4 @@
-import { css, html, TemplateResult } from "lit";
+import { html, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { createCloseHeading } from "../../../homeassistant-frontend/src/components/ha-dialog";
 import { HacsStyles } from "../../styles/hacs-common-style";
@@ -22,7 +22,7 @@ export class HacsDialog extends HacsDialogBase {
       return html``;
     }
 
-    return html` <ha-dialog
+    return html`<ha-dialog
       ?open=${this.active}
       ?scrimClickAction=${this.scrimClickAction}
       ?escapeKeyAction=${this.escapeKeyAction}
@@ -49,32 +49,6 @@ export class HacsDialog extends HacsDialogBase {
   }
 
   static get styles() {
-    return [
-      hacsStyleDialog,
-      scrollBarStyle,
-      HacsStyles,
-      css`
-        ha-dialog {
-          --mdc-dialog-max-width: var(--hacs-dialog-max-width, calc(100vw - 16px));
-          --mdc-dialog-min-width: var(--hacs-dialog-min-width, 280px);
-        }
-        .primary {
-          margin-left: 52px;
-        }
-
-        @media only screen and (min-width: 1280px) {
-          ha-dialog {
-            --mdc-dialog-max-width: var(--hacs-dialog-max-width, 990px);
-          }
-        }
-
-        @media only screen and (max-width: 990px) {
-          ha-dialog {
-            --mdc-dialog-max-width: var(--hacs-dialog-max-width, 100vw);
-            --mdc-dialog-min-width: var(--hacs-dialog-min-width, 100vw);
-          }
-        }
-      `,
-    ];
+    return [hacsStyleDialog, scrollBarStyle, HacsStyles];
   }
 }
diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts
@@ -22,7 +22,7 @@ import "../components/hacs-repository-card";
 import { Repository } from "../data/common";
 import { Hacs } from "../data/hacs";
 import { settingsClearAllNewRepositories } from "../data/websocket";
-import { fabStyles, hassTabsSubpage, scrollBarStyle, searchStyles } from "../styles/element-styles";
+import { hassTabsSubpage, scrollBarStyle, searchStyles } from "../styles/element-styles";
 import { HacsStyles } from "../styles/hacs-common-style";
 import { filterRepositoriesByInput } from "../tools/filter-repositories-by-input";
 import { activePanel } from "./hacs-sections";
@@ -316,7 +316,6 @@ export class HacsStorePanel extends LitElement {
     return [
       HacsStyles,
       hassTabsSubpage,
-      fabStyles,
       searchStyles,
       scrollBarStyle,
       css`

diff --git a/src/styles/element-styles.ts b/src/styles/element-styles.ts
@@ -8,12 +8,6 @@ export const hacsLinkStyle = css`
   }
 `;
 
-export const hacsButtonStyle = css`
-  mwc-button[raised] {
-    border-radius: 10px;
-  }
-`;
-
 export const hacsIconStyle = css`
   paper-menu-button,
   ha-svg-icon {
@@ -31,39 +25,6 @@ export const hassTabsSubpage = css`
   }
 `;
 
-export const fabStyles = css`
-  mwc-fab {
-    position: fixed;
-    bottom: 100px;
-    right: 24px;
-    z-index: 1;
-    margin-bottom: -80px;
-    transition: margin-bottom 0.3s;
-  }
-
-  mwc-fab[is-wide] {
-    bottom: 100px;
-    right: 24px;
-  }
-  mwc-fab[narrow] {
-    bottom: 152px;
-  }
-  mwc-fab[dirty] {
-    margin-bottom: 0;
-  }
-
-  mwc-fab.rtl {
-    right: auto;
-    right: 24px;
-  }
-
-  mwc-fab[is-wide].rtl {
-    bottom: 100px;
-    right: auto;
-    left: 24px;
-  }
-`;
-
 export const searchStyles = css`
   search-input.header {
     display: block;
@@ -110,4 +71,12 @@ export const scrollBarStyle = css`
     scrollbar-width: thin;
   }
 `;
-export const hacsStyleDialog = [haStyleDialog, css``];
+
+export const hacsStyleDialog = [
+  haStyleDialog,
+  css`
+    .primary {
+      margin-left: 52px;
+    }
+  `,
+];
diff --git a/src/styles/hacs-common-style.ts b/src/styles/hacs-common-style.ts
@@ -1,5 +1,5 @@
 import { css, CSSResultGroup } from "lit";
-import { hacsIconStyle, hacsButtonStyle, hacsLinkStyle } from "./element-styles";
+import { hacsIconStyle, hacsLinkStyle } from "./element-styles";
 import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
 
 export const hacsCommonClasses = css`
@@ -25,7 +25,6 @@ export const hacsCommonClasses = css`
 export const HacsStyles: CSSResultGroup = [
   haStyle,
   hacsIconStyle,
-  hacsButtonStyle,
   hacsCommonClasses,
   hacsLinkStyle,
 ];