Use more width rebased #2510

Merged
merged 24 commits into from Nov 30, 2015

Projects

None yet

7 participants

@Alucardfh

Hi,

This was PR #2461 which is not mergeable because of my bad rebase.

This is an attempt to allow the php code to size the graphs according the available width and height.
It uses an ajax call to populate the width and height of the browser.

To determine the size of each graph I divide the width by the number of graph to be drawn minus an arbitrary number of pixel to account for both side margins.

I have also decided to make graphs take the whole row if there is less than 800px available.

This is related to issue #2410.

Without modification :
normalwidth

With modification :

usemorewidth

Louis Bailleul added some commits Nov 19, 2015
Louis Bailleul Store browser height and width in session using ajax call
Modify html/includes/print-graphrow.inc.php to make use of the new Session variable
fc9f7ea
Louis Bailleul Divide the width by the number of graphs in a row reduced by an arbit…
…rary value to allow margins

Only display one graph per line if width is < 800px
6116f00
Louis Bailleul Update the session variables for browser width and height when browse…
…r is resized
bafdeaf
Louis Bailleul Correct code to match code standards 4731e86
Louis Bailleul Only update resolution if session variables don't exist
Tune print-graphrow.inc.php to avoid last graph going to a new line in certain cases
b1fd1b3
Louis Bailleul Make graph page use session variable to compute graph size 9ad6763
Louis Bailleul Fix syntax 12e37a2
Louis Bailleul Add media query to cahnge the size of the thumbnails
This prevent the scrollbar on graph.inc.php
Tweaked the graphs sizing to fit better on the screen
8f2ddb2
Louis Bailleul Use media query to reduce font and img size when width is < 960px
Avoid having horizontal scrollbars.
8961a5f
Louis Bailleul Divide the width by the number of graphs in a row reduced by an arbit…
…rary value to allow margins

Only display one graph per line if width is < 800px
6e1d234
Louis Bailleul Update the session variables for browser width and height when browse…
…r is resized
ce8e79c
Louis Bailleul Make graph page use session variable to compute graph size 961a9ff
Louis Bailleul Add media query to cahnge the size of the thumbnails
This prevent the scrollbar on graph.inc.php
Tweaked the graphs sizing to fit better on the screen
ccfc945
Louis Bailleul Use media query to reduce font and img size when width is < 960px
Avoid having horizontal scrollbars.
6bd84ee
Louis Bailleul Add more padding to accomodate row of graphs that have large y-axis text
Slightly reduced the height of rows of graphs
c4d774e
Louis Bailleul Round the width and height to prevent weird behavior 64b5fa3
Louis Bailleul Remove debug echo 8e271ac
Louis Bailleul Only remove the height tag from the lazy loaded images 66cf9df
Louis Bailleul Rework the padding and ratio to better fit the lazy loading a62067a
Louis Bailleul Add reload on resize event to regenerate the graphs correctly 4d6e194
Louis Bailleul Calculate the height as width/2.15 to respect the old aspect ratio
Only display two graphs per line for resolution with width between 700x and 1024px
3f25aa4
Louis Bailleul Fix infinite reload loop due to bad cherry pick
Fix code to respect coding standard
ef1c7a5
@Rosiak
Contributor
Rosiak commented Nov 26, 2015

Tested, no issues here 👍

@paulgear
Member

👍 from me too - larger graphs are nearly always a win, IMO.

@SaaldjorMike
Member

👍

@SaaldjorMike SaaldjorMike added the WebUI label Nov 26, 2015
@f0o
Member
f0o commented Nov 27, 2015

BLOCKER: on a smartphone with softkeyboard the page reloads infinitive times as the keyboards shows on input forms (login) and causes a window resize event which then reloads the website.

@Alucardfh

Oh, I didn't think about this.

I had the feeling that the reload would trigger weird things.

I'll look into this.

@f0o
Member
f0o commented Nov 27, 2015

@Alucardfh can't you use $('.selector').innerWidth() or so?

@Alucardfh

Yeah that's should do.

The thing is, I wanted to avoid resizing graphs on the client side because that might involve too much processing on low end device and it duplicates quite a lot of the code logic that handles how to determine the size of graphs.

Still I'll try to hack something that does it to see how it goes.

@f0o
Member
f0o commented Nov 27, 2015

just alter the width attribute of the image and as soon as 5m the page reloads anyways - that should be fine enough

@Alucardfh

It would only works for small resize. If you make a big changes the graphs might become really hard to read.

But if we count on the 5min reload to fix it anyway, that could still do it.

I'll push an example when I get 5min.

@f0o
Member
f0o commented Nov 27, 2015

Alternatively, can you measure the difference between the width and only reload if it's larger than say 200 px? That should be fine then as softkeyboards only alter height and not width and anything smaller than 200px could be streched/shrunk with the width attribute - or am I mistaken? (perhaps we can scrap the altering at all and only reload if the width changes?)

Louis Bailleul Replace the reload on browser resize by a graph width resize
094f7d5
@Alucardfh

I am actually quite surprised by the result of just changing the width.
It is not that awful even when doing large resize.

There is a few issues I have noticed : I need to add a container wrapper in the graphs images instead of directly selecting the class as the generate_lazy_tag is used at places were the resize is not working well (ex : device overview).

@f0o actually that not a bad idea at all, as we would have the benefit of not reloading for small and softkeyboard resize and at the same time all weird rendering due to javascript could be solved by the reload.

@f0o
Member
f0o commented Nov 27, 2015

@Alucardfh :) shout when I should give it another test

👍 for all the work

Louis Bailleul Only resize graphs if browser resize width is less than 200px, refres…
…h the page otherwise
8d0976d
@Alucardfh

I made the change so graphs are resized if the browser width change for less than 200px and the page is refresh if the change is bigger.

This should prevent the issue of infinite reload on smartphone when the softkeyboard is displayed.
This also avoid reloading the page for small changes that can be accommodated on the client side.

Could you give me feedback on this ?

I couldn't reproduced the issue on my phone, but I would be happy to hear it from others.

@f0o
Member
f0o commented Nov 30, 2015

👍 works like a charm. I'll be happy to merge it if @librenms/reviewers is happy too :)

@laf
Member
laf commented Nov 30, 2015

👍 from me so merging.

@laf laf merged commit 0deb98e into librenms:master Nov 30, 2015

2 checks passed

Auto-Deploy Build finished. No test results found.
Details
Scrutinizer 2 new issues
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment