FlowFuse / node-red-dashboard

https://dashboard.flowfuse.com
Apache License 2.0
159 stars 35 forks source link

Proposal: CSS quick&small fixes to make whole site more pleasant #1040

Closed hotNipi closed 23 hours ago

hotNipi commented 4 days ago

Description

Small CSS tweaks to adjust widgets appearance.

/* to make input type widgets repect row heights */
.nrdb-app .v-input--density-default {
    --v-input-control-height: 48px;
}
/* to fix the oval shape of press features for custom icon in switch widget */
.nrdb-switch button{
    aspect-ratio: 1;
}
/* to aligne slider perfectly to horizontal center. 
NB! supresses the gridarea for messages, but those are not in use*/
.nrdb-ui-slider .v-input--horizontal {
    grid-template-rows: auto 0;
}

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

arturv2000 commented 4 days ago

Thanks

Before: image

After: image

Small tweak.. but depending on the types of nodes and quantity has some visual effect

joepavitt commented 2 days ago

Please feel free to just open a PR for this kind of thing @hotNipi - no need to issue first. Contributions are always welcome

hotNipi commented 2 days ago

As it affects the layout a lot I just wanted to be sure that there will be plenty of options to "try before buy"

joepavitt commented 2 days ago

PR is still the best place for it as they're explicit code changes/recommendations. We can then pull your branch down and try it out live, rather than having to manually reproduce the changes locally.