openwisp
[change] Add support for narrow screens #115
Current behavior:
It will work only when we resize from a larger screen to a smaller screen. If we view it directly on a smaller screen, it just doesn't work.
closes #115
I then open http://localhost:8080/examples/netjsongraph.html or http://localhost:8080/examples/netjsonmap.html narrow down the window, I don't see significant changes or improvements, actually it becomes worse.
You can see the size of the title 'NetJSONGraph' increase as we narrow down in graph and also the zoom will also get increased to 1.2 from 1. Like I said, the current change doesn't solve our problem. I was just testing out the echarts media queries. As I faced some problems, I didn't proceed further.
Can we please void showing the info box when clicking on elements on narrow screens?
How do we plan to show that info on narrow screens without clicking? Maybe we can have a single close button to close the overlay.
What do you think?
Yeah sounds good
What do you think of this?
I think I have already changed it to "Info". Are you talking about the class name?
Can we please void showing the info box when clicking on elements on narrow screens?
How do we plan to show that info on narrow screens without clicking? Maybe we can have a single close button to close the overlay.
I mean show the sidebar when the element is clicked, but only the node or link info, not the meta info of the topology, is it clearer now?
This could be configurable (showMetaOnNarrowScreens, defaulting to false, for example).
What do you think?
Yeah sounds good
What do you think of this?
I think I have already changed it to "Info". Are you talking about the class name?
Yes, the class name.
I mean show the sidebar when the element is clicked, but only the node or link info, not the meta info of the topology, is it clearer now? This could be configurable (
showMetaOnNarrowScreens, defaulting to false, for example).
Yes, it is clear.
I see only one minor issue remaining here: when the screen is narrow, the tooltip doesn't show on hover, which is irrelevant for mobile devices but I am not sure if this is on purpose or not?
Yeah I did it on purpose.
I think it doesn't hurt to have this work on narrow screens which support the hover event (say a pop up or topology/geo map embedded in a web page but in a small box).
Makes sense. I will revert it.
I tested on mobile and it's fine except that when tapping on a node or link the tooltip appears, which is redundant with the sliding overlay.
Can we avoid to show the tooltip on the tap event?
@nemesisdesign I tried using triggerOn: 'mousemove' to avoid showing tooltip on click. But it's not really working. Maybe we can dispatch an action to hide the tooltip when clicking as a workaround.