Reduce vertical spacing of items (and note on horizontal spacing as well....)

[Giovanni Castania]

I'm reposting here as it seems nobody reacts in the "Node-RED UI" google group:

Since I moved from contribui to dashboard I cannot control anymore the vertical spacing between different items/objects of the UI.
Did someone figure out how to do it? In my humble opinion the default vertical spacing is too much, and even simpler GUI are requiring vertical scrolling on a mobile device (while before I was able to fit all in one page!).

Then I would like to ask a similar request about horizontal placement; the new feature about "gadget size" is great, but I found it tedious to have to add "fake" nodes just to use them as "spacers".
I woudl say this shoudl be configurable on each UI node, at least this will simplify the flows...

[Dave C-J]

Hi, 

yes since we released node-red-dashboard this is the place to be.

do you have some screenshots you could share to indicate the issues you raise ?

Certainly the horizontal size should be adjustable per widget. 

Thanks

[Giovanni Castania]

here's the example screenshot; the wide vertical spacing is the default ones and previously I was able to reduce it with HTML coding but now it's not working anymore (I was using the code below).
I played with horizontal using the new features of gadget width but while on PC and Tablet it's fine, on my phones when I use more than "6" blocks of spacing the UI is not adapting and I've to scroll horizontally.

<style>
div {
    padding:0;
    margin:0;
}
p {
    padding:0;
    margin:0;
}
</style>

[Dave C-J]

currently we use 4 variables to control the sizes of various bits - they are defined as

var sizes = {

    sx: 50, // width of <1> grid square

    sy: 50, // height of <1> grid square

    gx: 7, // gap between groups

    gy: 7, // gap between groups

    cx: 6, // gap between components

    cy: 6, // gap between components

    px: 6, // padding of group's cards

    py: 6  // padding of group's cards

};

so in a template node you can play with (for example)

<script>

    sizes.sy = 30;

    sizes.py = 0;

</script>

and so on. 

[Giovanni Castania]

Thanks Dave, from a quick test it seems ok now I've control on those aspects of the GUI but it seems that those are "global" settings.
What I mean is that if I change one of those variables in just one template node, all Dashboard nodes are impacted :(
I thought as a workaround to setup to default on each node, but I can do it only on the "template" ones, while all the others are affected but I've no way to revert to the default.
e.g. if I change sy=30 in one template node all switches, gauges, etc nodes are affected and for those I cannot revert to default.

I believe such feature should be "node" related, in order to have more flexibility in building your own GUI; as well would be great to have kind of "preset" so I can define and use them for all nodes I need without "reinventing the wheel" every time (I hope I explained well myself)

[Dave C-J]

We'll look at that as part of expanding the theme-ing - but it won't be for a while yet.

[Thorsten von Eicken]

Is there a reason these various sizes are defined in javascript as opposed to CSS?

[Dave C-J]

Because they aren't CSS variables ?

[Nicholas O'Leary]

Right, they aren't CSS variables as the dashboard does a bunch of work to absolute position all the elements. I've never dug into that code, but I do know it means the ui isn't properly responsive. I would like to dig in to understand why it needs to be absolute positioned rather than done purely in CSS to enable responsiveness and make it easier to customise as part of the theme.

On Sun, 21 Aug 2016, 21:03 Dave C-J, <dce...@gmail.com> wrote:

Because they aren't CSS variables ?

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

[Giovanni Castania]

Thanks a lot for all the answers and feedbacks; indeed I agree the ideal would be to use pure CSS variables to layout the UI; that would make is for sure faster and easier to manage.
For the moment I'll play with the workaround even thou the limitation of the fact all modification are globals as explained :(