jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add minimal size for badges and cards in edit mode (#22271)

Browse Source
This commit is contained in:
Paul Bottein 2024-10-07 17:33:47 +02:00 committed by Bram Kragten
parent a10a9916be
commit 04acecc832
2 changed files with 8 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/panels/lovelace/badges/hui-view-badges.ts
View File

@ -8,6 +8,7 @@ import {
PropertyValues, PropertyValues,
} from "lit"; } from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { repeat } from "lit/directives/repeat"; import { repeat } from "lit/directives/repeat";
import { fireEvent } from "../../../common/dom/fire_event"; import { fireEvent } from "../../../common/dom/fire_event";
import "../../../components/ha-sortable"; import "../../../components/ha-sortable";
@ -124,7 +125,7 @@ export class HuiViewBadges extends LitElement {
.options=${BADGE_SORTABLE_OPTIONS} .options=${BADGE_SORTABLE_OPTIONS}
invert-swap invert-swap
> >
<div class="badges"> <div class="badges ${classMap({ "edit-mode": editMode })}">
${repeat( ${repeat(
badges, badges,
(badge) => this._getBadgeKey(badge), (badge) => this._getBadgeKey(badge),
@ -185,6 +186,8 @@ export class HuiViewBadges extends LitElement {
hui-badge-edit-mode { hui-badge-edit-mode {
display: block; display: block;
position: relative; position: relative;
min-width: 36px;
min-height: 36px;
} }
.add { .add {

4
src/panels/lovelace/sections/hui-grid-section.ts
View File

@ -204,6 +204,10 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
grid-column: span min(var(--column-size, 1), var(--grid-column-count)); grid-column: span min(var(--column-size, 1), var(--grid-column-count));
} }
.container.edit-mode .card {
min-height: calc((var(--row-height) - var(--row-gap)) / 2);
}
.card.fit-rows { .card.fit-rows {
height: calc( height: calc(
(var(--row-size, 1) * (var(--row-height) + var(--row-gap))) - var( (var(--row-size, 1) * (var(--row-height) + var(--row-gap))) - var(