search

jcooper-korg / AlarmPanel

27 stars 6 forks source link

Code input text font size #14

Closed jusmop closed 1 month ago

jusmop commented 1 month ago

This is not a bug report - just a request for assistance.

I have customised the UI of this alarm panel more-or-less successfully but there is one change I'm struggling with. I'm trying to make the code input box text larger and also have the text "Code" be on the same line as the hidden password. I have made the box itself wider.

Adding a font-size value to the ha-textfield css string (around line 575) does not have any effect. Does anyone know how to enlarge the font?

Thanks for sharing the card, i've found it very useful - particularly the timer.

jcooper-korg commented 1 month ago

I'm not sure how to style this. I've experimented with it too, without much luck. I'm using the same password code field as the standard HA password field:

https://github.com/home-assistant/frontend/blob/811c34b489f25ba54cb1cef29b6d2b1d40365803/src/panels/lovelace/cards/hui-alarm-panel-card.ts#L280-L287

https://github.com/home-assistant/frontend/blob/811c34b489f25ba54cb1cef29b6d2b1d40365803/src/panels/lovelace/cards/hui-alarm-panel-card.ts#L401-L406

if you figure out any improvement, please let me know!

jusmop commented 1 month ago

Thanks for the links. Material Design Components? What are they? (rhetorical question - I'm well out of my depth here). I'll persevere for a bit... If I get anywhere I'll let you know.

jcooper-korg commented 1 month ago

There's some info here: https://design.home-assistant.io/#concepts/home may be able to ask on the ux dev discord.

jusmop commented 1 month ago

I found a possible solution to the input text field font size:

Insert a new line before line 460: --mdc-typography-subtitle1-font-size: 24px;

I found the variable using the Chrome style inspector for a dashboard page with the custom alarm card on it. I have no idea if it has unwanted side effects (ideally it only applies to that card), but it changes the font size for me.

jcooper-korg commented 1 month ago

Good find! Thanks!
Rather than putting that in the ha-card section of the css, how about constraining it to be just in the ha-textfield section: https://github.com/jcooper-korg/AlarmPanel/blob/18a92d882c3eb9dab3fdb3869b46bced307821bb/alarm_control_panel-card.js#L572-L577

I tried adding it there, and it works! Thanks again

jcooper-korg commented 1 month ago

thanks again @jusmop - I added that change in ceeffdb