-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Convert thermostat to round-slider #3734
Conversation
|
That's correct. I made them to look more like paper-slider than our old round sliders. Re: card size, there should really be a minimum supported card width. 200-300 px is definitely reasonable. |
@thomasloven thanks. Yeah, I like the handles as is. |
Closes home-assistant#3622 Closes home-assistant#2756
975427c
to
9e5df10
Compare
I think the card looks good down to ~300px |
🤔 looks fine on refresh though, right? |
Only the final state. There's still the problem with the name overlapping the circle at some sizes, and the circle being taller than the card in the single column. |
why did I sign up for something involving so much CSS... 🤦♂ |
@thomasloven I only get that behavior when doing what you were doing; moving the window size. On a refresh of the page it looks fine to me. Do I need to fire an iron-resize or something? This is the kind of stuff I'm quite ignorant on, still. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice! 👍
We should also remove jquery and roundslider from the deps, and remove the load scripts. |
We can do that in a separate PR |
Last commit helps with window resizing but still struggling with scaling at certain sizes |
I regret starting this... 😂 |
@iantrich even with these small issues, You version works and looks great 👏 |
@Misiu it will get there, just a chore at this point 👎 |
The light card doesn't scale... might be worth considering. |
Now if the name is greater than 10 characters, the title size is lowered from 23px to 18px. I think that's good for now and could possible be tweaked further in another PR. |
@bramkragten I think this is good to go now unless @thomasloven has anything to add. Thanks for both your help on this one. |
Did you perhaps forget to push that? |
I sure did, thanks! |
.max=${stateObj.attributes.max_temp} | ||
@value-changing=${this._dragEvent} | ||
@value-changed=${this._setTemperature} | ||
></round-slider> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actually, I think round-slider could handle this. If you give it both low, high and value, it will show one handle if low is undefined, and two otherwise.
May be a bit confusing, though...
...can this be done...? 🤣 I never want to look at this card again |
I will assign all issues with this card to you 😉 |
@iantrich congratulations 🎉 |
Closes #3622
Closes #2756
Closes #3711
Closes #3889
Closes #3891