jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Set 56px row height for new section button and title (#21456)

Browse Source
This commit is contained in:
Paul Bottein 2024-07-23 13:13:35 +02:00 committed by GitHub
parent 79618ce114
commit 6791e85625
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -246,7 +246,12 @@ export class GridSection extends LitElement implements LovelaceSectionElement {
text-align: var(--ha-view-sections-title-text-align, start); text-align: var(--ha-view-sections-title-text-align, start);
min-height: 32px; min-height: 32px;
display: block; display: block;
padding: 24px 10px 10px; height: var(--row-height);
box-sizing: border-box;
padding: 0 10px 10px;
display: flex;
flex-direction: column;
justify-content: flex-end;
} }
.title.placeholder { .title.placeholder {

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

@ -249,6 +249,7 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host { :host {
--row-height: var(--ha-view-sections-row-height, 56px);
--row-gap: var(--ha-view-sections-row-gap, 8px); --row-gap: var(--ha-view-sections-row-gap, 8px);
--column-gap: var(--ha-view-sections-column-gap, 32px); --column-gap: var(--ha-view-sections-column-gap, 32px);
--column-min-width: var(--ha-view-sections-column-min-width, 320px); --column-min-width: var(--ha-view-sections-column-min-width, 320px);
@ -327,14 +328,14 @@ export class SectionsView extends LitElement implements LovelaceViewElement {
} }
.create-section { .create-section {
margin-top: calc(66px + var(--row-gap)); margin-top: calc(var(--row-height) + var(--row-gap));
outline: none; outline: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
border-radius: var(--ha-card-border-radius, 12px); border-radius: var(--ha-card-border-radius, 12px);
border: 2px dashed var(--primary-color); border: 2px dashed var(--primary-color);
order: 1; order: 1;
height: calc(66px + 2 * (var(--row-gap) + 2px)); height: calc(var(--row-height) + 2 * (var(--row-gap) + 2px));
padding: 8px; padding: 8px;
box-sizing: border-box; box-sizing: border-box;
} }