home_automation/ha-dashboards
2
0
Fork 0
Code Issues 2 Pull Requests Projects Activity

Switch some button cards on mobile dashboard to decluttering cards

Browse Source
This commit is contained in:
Tony Stork
2024-11-09 15:32:49 -05:00
parent c2eb1e413e
commit f1189f6f15
1 changed files with 106 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
mobile_dashboard.yaml
View File

@ -31,7 +31,7 @@ decluttering_templates:
}
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--background-color-2)'} !important;
background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
transition: background-color 1s !important;
}
.bubble-icon-container {
@ -72,6 +72,11 @@ decluttering_templates:
navigation_path: '[[navigation_path]]'
card_layout: large
columns: '[[columns]]'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
main_button_floors:
defaults:
name: ''
@ -386,107 +391,46 @@ views:
heading: Housewide
heading_style: title
icon: mdi:home-analytics
- type: custom:bubble-card
card_type: button
button_type: state
entity: binary_sensor.security_faults
name: Security
tap_action:
action: navigate
navigation_path: '#security'
double_tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: navigate
navigation_path: '#security'
double_tap_action:
action: none
styles: |-
.is-unavailable {
opacity: 0.5 !important;
}
.bubble-button-background {
opacity: 1 !important;
background-color: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
transition: background-color 1s !important;
}
.bubble-icon-container {
background: ${state === 'on' ? 'var(--error-color)' : 'var(--card-background-color)'} !important;
}
.bubble-icon-container::after {
opacity: ${state === 'on' ? 0.3 : 0} !important;
transition: all 1s !important;
}
.bubble-icon {
display: flex !important;
opacity: 0.5 !important;
}
.is-on .bubble-icon {
opacity: 1 !important;
}
show_state: false
columns: 2
card_layout: large
- type: custom:bubble-card
card_type: button
button_type: name
name: Global Scenes
icon: mdi:home-lightbulb-outline
columns: 2
card_layout: large
tap_action:
action: navigate
navigation_path: '#global-scenes'
button_action:
tap_action:
action: navigate
navigation_path: '#global-scenes'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Briefings
icon: mdi:text
columns: 2
card_layout: large
tap_action:
action: navigate
navigation_path: '#briefings'
button_action:
tap_action:
action: navigate
navigation_path: '#briefings'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Batteries
icon: mdi:battery-charging
tap_action:
action: navigate
navigation_path: '#batteries'
button_action:
tap_action:
action: navigate
navigation_path: '#batteries'
card_layout: large
columns: 2
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:decluttering-card
template: main_button_state_red
variables:
- name: Security
- entity: binary_sensor.security_faults
- navigation_path: '#security'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Global Scenes
- icon: mdi:home-lightbulb-outline
- navigation_path: '#global-scenes'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Briefings
- icon: mdi:text
- navigation_path: '#briefings'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Batteries
- icon: mdi:battery-charging
- navigation_path: '#batteries'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:bubble-card
card_type: button
button_type: name
@ -553,144 +497,77 @@ views:
.is-on .bubble-icon {
opacity: 1 !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Messaging
icon: mdi:bullhorn
columns: 2
card_layout: large
tap_action:
action: navigate
navigation_path: '#messaging'
button_action:
tap_action:
action: navigate
navigation_path: '#messaging'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Temp Graphs
tap_action:
action: navigate
navigation_path: '#roomtemps'
double_tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: navigate
navigation_path: '#roomtemps'
double_tap_action:
action: none
show_state: false
columns: 2
card_layout: large
icon: mdi:chart-areaspline
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Light Graphs
tap_action:
action: navigate
navigation_path: '#roomlux'
double_tap_action:
action: none
hold_action:
action: more-info
button_action:
tap_action:
action: navigate
navigation_path: '#roomlux'
double_tap_action:
action: none
show_state: false
columns: 2
card_layout: large
icon: mdi:chart-areaspline
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Running
icon: mdi:database-clock
card_layout: large
columns: 4
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Messaging
- icon: mdi:bullhorn
- navigation_path: '#messaging'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Temp Graphs
- icon: mdi:chart-areaspline
- navigation_path: '#roomtemps'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Light Graphs
- icon: mdi:chart-areaspline
- navigation_path: '#roomlux'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Running
- icon: mdi:database-clock
- navigation_path: '#running'
- columns: 4
grid_options:
columns: 12
rows: auto
visibility:
- condition: user
users:
- c3909d27048140729f002aaef0391775
button_action:
tap_action:
action: navigate
navigation_path: '#running'
tap_action:
action: navigate
navigation_path: '#running'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:bubble-card
card_type: button
button_type: name
name: Go to Main Dashboard
icon: mdi:navigation-variant
tap_action:
action: navigate
navigation_path: /lovelace/default_view
button_action:
tap_action:
action: navigate
navigation_path: /lovelace/default_view
card_layout: large
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Go to Main Dashboard
- icon: mdi:navigation-variant
- navigation_path: /lovelace/default_view
- columns: 4
grid_options:
columns: 12
rows: auto
visibility:
- condition: screen
media_query: '(min-width: 0px) and (max-width: 767px)'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: heading
heading: Outside Info
heading_style: title
icon: mdi:chart-areaspline
- type: custom:bubble-card
card_type: button
button_type: name
name: Gas Prices
icon: mdi:gas-station
columns: 2
card_layout: large
tap_action:
action: navigate
navigation_path: '#gas-prices'
button_action:
tap_action:
action: navigate
navigation_path: '#gas-prices'
styles: |-
.bubble-button-background {
opacity: 1 !important;
background-color: var(--card-background-color) !important;
}
- type: custom:decluttering-card
template: main_button_name
variables:
- name: Gas Prices
- icon: mdi:gas-station
- navigation_path: '#gas-prices'
- columns: 2
grid_options:
columns: 6
rows: auto
- type: grid
cards:
- type: heading