I guess my problem on the swipe-card temperature is the same.
it’s mostly about the reponsive on the phone version of the home assistant app
1 Like
Hi guys,
i update all Features from Mattias.
One Problem at my View 2.
before:
now:
How can I slide left more to the right?
I am bit confused on this Lovelace UI. How do you get the left side clock and stuff? Is that the dashboard in HA or some type of HA Dashboard? Like the clean layout.
Hi everyone. I cannot solve this problem. The images it shows of people are deformed. It only happens on a miniipad. I imagine it is safary compatibility since it is an old version. But maybe you can modify something in the css that only on the tablet does something different.
This is possible?
If I remove this style on android and pc it doesn’t change. But on the ipad the shape of the image is corrected but it looks square.
#- display: flex
It is part of this specific dashboard
It is not part of Home Assistant by default
You could try adding -webkit- in front of flex for -webkit-flex
Depending on the safari version this might help
Could also try using -webkit-flexbox instead of flex
If the images look square you can try the same
add -webkit- in front of clip-path: circle() so it says: - -webkit-clip-path: circle()
ok, problem solved. it was really a simple one. i needed a dummy button card at the top. because
Note: extra_styles MUST NOT be used on the first button-card of the current view, else it will be applied to all the cards in all Lovelace. It is not possible to fix this behaviour.
now i have a different problem. 
bottom icons are in at the bottom. i guess the following code is responsible to put it at bottom
but the path to this block is different i think in my case. If i set the alignment in following place, then it moves to end. if i right click and copy selector it is “#root > hui-grid-card:nth-child(3)”. how can i fix this?
1 Like
Oh! So how do you get this form of dashboard instead of the default one?
Should read the first post in this thread
So, the out of the box experience should work for everyone
Meaning, if it doesn’t work for you (as with the problems you have) it’s most likely because you are using a different setup, or haven’t merged all the updated files with your files correctly
It’s very hard to help someone troubleshoot their own code, especially when you only see tine snippets of it
So I would advise you to use Matthiases work as your base, and copy over specific parts of your own configuration, testing between edits
That way you start from a working situation and can see when something you change breaks something
You are now doing it the other way around, taking bits and pieces from matthias to replace parts of your existing (working) code, and breaking stuff along the way, it’s much harder to see why/where things go wrong that way
What I’m trying to say is: if you go down this path, you will face error after error after error, when you solve one you will find the next, or might even create more errors with quick patches you apply to solve a previous error.
You might want to try working from the working situation that Matthias created, and go from there
2 Likes
Hello, can you share the motion icon code in the light button? As I understand it, it changes color when moving in the light button to blue? Thanks in advance!
Having a really weird issue, adding some more icons on the sidebar bottom, for some reason they come out all messed up and huge, if I click on one it goes back to normal, but about 20 seconds later on its own they become big and messed up again, here are images when OK and when messed up - any idea. Here is code:
views:
- type: custom:grid-layout
path: 0
layout:
grid-gap: var(--custom-layout-card-padding)
grid-template-columns: 0 repeat(4, 1fr)
grid-template-rows: 0fr repeat(2, fit-content(100%)) 0
grid-direction: rtl
grid-template-areas: |
". . . . sidebar"
". kitchen familyroom mainfloor sidebar"
". media home home sidebar"
". footer footer footer sidebar"
cards:
- type: custom:button-card #extra_styles fix
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar_template
- type: grid
cards:
- type: button
icon: custom:beginner
tap_action:
action: none
hold_action:
action: none
- type: button
icon: custom:advanced
tap_action:
action: navigate
navigation_path: /lovelace
hold_action:
action: none
- type: button
icon: custom:expert
tap_action:
action: navigate
navigation_path: /lovelace
hold_action:
action: none
- type: button
icon: custom:roborock-vacuum
tap_action:
!include popup/sidebar_vacuum.yaml
hold_action:
action: none
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action:
!include popup/sidebar_update.yaml
hold_action:
action: none
sure, here you go.
this is for one motion sensor (kitchen in this case). for a second motion sensor light button, change ‘- light_motion_kitchen’ to something else. and change ‘base_motion_kitchen’ accordingly.
- type: custom:button-card
entity: light.kitchen_main
name: Kitchen Top
template:
- light_motion_kitchen
- icon_hue
button_card_template.yaml (additional code to original)
light_motion_kitchen:
template:
- base_motion_kitchen
- motion
- hold_action_light
motion:
custom_fields:
motion: >
[[[
return `<ha-icon
icon="mdi:motion-sensor"
style="width: 20px; height: 20px;">
</ha-icon>`
]]]
base_motion_kitchen:
variables:
motion_timeout: >
[[[ return states['input_number.motion_timeout'].state; ]]]
motion_state: >
[[[ return states['binary_sensor.kitchen_motion_sensor'].state; ]]]
template:
- base_motion
styles:
custom_fields:
motion:
- color: >
[[[
if (states['binary_sensor.kitchen_motion_sensor'].state === 'on')
return 'var(--primary-color)';
return "grey";
]]]
base_motion:
variables:
state: >
[[[ return entity === undefined || entity.state; ]]]
timeout: >
[[[ return entity === undefined || Date.now() - Date.parse(entity.last_changed); ]]]
light_color: >
[[[ return entity === undefined || entity.state === 'unavailable' ? 'var(--state-icon-color)' : 'var(--button-card-light-color-no-temperature)'; ]]]
aspect_ratio: 1/1
show_state: true
show_icon: false
state_display: >
[[[ if (variables.state === true) return 'Okänd'; ]]]
tap_action:
ui_sound_tablet: |
[[[
const screensaver = states['switch.galaxy_tab_a_screensaver'] === undefined ||
states['switch.galaxy_tab_a_screensaver'].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.galaxy_tab_a',
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state === 'on' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: 'media_player.galaxy_tab_a',
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
animation_card: |
[[[
const animation_speed_ms = 900;
const animation = `card_bounce ${animation_speed_ms}ms cubic-bezier(0.22, 1, 0.36, 1)`;
this.shadowRoot.getElementById("card").style.animation = animation;
window.setTimeout(() => {
this.shadowRoot.getElementById("card").style.animation = "none";
}, animation_speed_ms)
]]]
action: toggle
haptic: medium
styles:
grid:
- grid-template-areas: |
"icon motion"
"n n"
"s s"
- grid-template-columns: repeat(2, 1fr)
- grid-template-rows: auto repeat(2, min-content)
- gap: 2%
- align-items: start
name:
- justify-self: start
- line-height: 115%
state:
- justify-self: start
- line-height: 115%
card:
- font-family: Sf Display
- border-radius: var(--custom-button-card-border-radius)
- -webkit-tap-highlight-color: rgba(0,0,0,0)
- transition: none
- padding: 10%
- --mdc-ripple-color: >
[[[
return (variables.state === 'on' || variables.state === 'home') ?
'rgb(0, 0, 0)' :
'rgba(255, 255, 255, 0.3)';
]]]
- color: >
[[[
return (variables.state === 'on' || variables.state === 'home') ?
'rgba(0, 0, 0, 0.6)' :
'rgba(255, 255, 255, 0.3)';
]]]
- background-color: >
[[[
return (variables.state === 'on' || variables.state === 'home') ?
'rgba(255, 255, 255, 0.8)' :
'rgba(115, 115, 115, 0.2)';
]]]
extra_styles: |
#name, #state {
font-size: 1.34vw;
letter-spacing: 0.05vw;
}
/* portrait */
@media screen and (max-width: 1200px) {
#name, #state {
font-size: 2vw;
letter-spacing: 0.05vw;
}
}
/* phone */
@media screen and (max-width: 800px) {
#name, #state {
font-size: 3.1vw;
letter-spacing: 0.12vw;
}
}
@keyframes card_bounce {
0% {
transform: scale(1);
}
15% {
transform: scale(0.9);
}
25% {
transform: scale(1);
}
30% {
transform: scale(0.98);
}
100% {
transform: scale(1);
}
}
Thanks friend. Today I try it and then I’ll tell you
To enlarge the font size, I would have to change the font size attribute, right?
Or in themes.yaml file --sidebar-time-font-size
.time {
font-family: SF Text;
font-size: var(--sidebar-time-font-size);
font-weight: 200;
line-height: var(--sidebar-time-line-height);
letter-spacing: -0.05vw;
margin-left: -0.3vw;
color: rgba(255, 255, 255, 0.8);
}` font-size: var(--sidebar-time-font-size);
The --sidebar-time-font-size part is a variable that’s given a value somewhere else
specifcally in the themes.yaml file somwhere around line 43:
sidebar-time-font-size: 5vw
You should change the value there to keep the files consistent
Could it be the same problem/solution described here: A different take on designing a Lovelace UI - #1633 by wjbridge
Thanks a lot. I figured out most of the code, did not figure out what ‘input_number.motion_timeout’ and ‘hold_action_light’.
Hi @Giblet with -display: -webkit-flexbox make it not stretch but even with -webkit-clip-path: circle () the images look square
I put 20vw in and it doesn’t change the font size. I don’t realize what the problem may be.
sidebar-time-font-size: 20vw
font-size: var(--sidebar-time-font-size);