{"action":"created","issue":{"url":"https://api.github.com/repos/munin-monitoring/munin/issues/641","labels_url":"https://api.github.com/repos/munin-monitoring/munin/issues/641/labels{/name}","comments_url":"https://api.github.com/repos/munin-monitoring/munin/issues/641/comments","events_url":"https://api.github.com/repos/munin-monitoring/munin/issues/641/events","html_url":"https://github.com/munin-monitoring/munin/pull/641","id":127516133,"number":641,"title":"Allow graphs to stretch infinitely","user":{"login":"shapirus","id":725402,"avatar_url":"https://avatars.githubusercontent.com/u/725402?v=3","gravatar_id":"","url":"https://api.github.com/users/shapirus","html_url":"https://github.com/shapirus","followers_url":"https://api.github.com/users/shapirus/followers","following_url":"https://api.github.com/users/shapirus/following{/other_user}","gists_url":"https://api.github.com/users/shapirus/gists{/gist_id}","starred_url":"https://api.github.com/users/shapirus/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/shapirus/subscriptions","organizations_url":"https://api.github.com/users/shapirus/orgs","repos_url":"https://api.github.com/users/shapirus/repos","events_url":"https://api.github.com/users/shapirus/events{/privacy}","received_events_url":"https://api.github.com/users/shapirus/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/munin-monitoring/munin/labels/[component]%20web%20interface","name":"[component] web interface","color":"c7def8"}],"state":"open","locked":false,"assignee":{"login":"chteuchteu","id":1551971,"avatar_url":"https://avatars.githubusercontent.com/u/1551971?v=3","gravatar_id":"","url":"https://api.github.com/users/chteuchteu","html_url":"https://github.com/chteuchteu","followers_url":"https://api.github.com/users/chteuchteu/followers","following_url":"https://api.github.com/users/chteuchteu/following{/other_user}","gists_url":"https://api.github.com/users/chteuchteu/gists{/gist_id}","starred_url":"https://api.github.com/users/chteuchteu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chteuchteu/subscriptions","organizations_url":"https://api.github.com/users/chteuchteu/orgs","repos_url":"https://api.github.com/users/chteuchteu/repos","events_url":"https://api.github.com/users/chteuchteu/events{/privacy}","received_events_url":"https://api.github.com/users/chteuchteu/received_events","type":"User","site_admin":false},"milestone":null,"comments":3,"created_at":"2016-01-19T19:10:28Z","updated_at":"2016-01-20T14:26:54Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/munin-monitoring/munin/pulls/641","html_url":"https://github.com/munin-monitoring/munin/pull/641","diff_url":"https://github.com/munin-monitoring/munin/pull/641.diff","patch_url":"https://github.com/munin-monitoring/munin/pull/641.patch"},"body":"This change is intended to allow the graphs to stretch and occupy all available horizontal space. This way their dimensions adjust themselves dynamically according to the actual browser window size.\r\n\r\nWorks in both node view and category/comparison view. The latter now becomes limited to two graphs in a row. It can be fixed (which is important for very wide screens with a high width-to-height aspect ratio) by adding a max-width property to the \".categoryview .node, .comparison .node\" classes with a fixed value (i.e., not in percent), but it has to be specified in at least \"em\" values to take the screen's DPI into account, and \"px\" unit is unsuitable because of that.\r\n\r\nThe original 500px fixed width doesn't work well with high-DPI screens, and fixed pixel widths should be generally considered evil these days anyway.\r\n\r\nFurther thoughts:\r\n\r\n- this is good for SVG, but what about PNG? We will probably need separate CSS classes for them (which will require support on the munin-httpd part) with dynamic width for SVG and static for PNG.\r\n\r\n- I don't exactly like the \"48%\" thing in \".categoryview .node, .comparison .node\". I have no idea where the extra space comes from, but with 50% and zero margin, padding and border the next graph still wraps onto the next line. I only found experimentally that it works for me (in seamonkey and chromium, fwiw).\r\n\r\n- some min-width setting may or may not be desirable. If present, it will cause the right-hand graph to wrap onto the next line when the browser window is too narrow. If absent, the graphs will shrink indefinitely, but still stay two in each row.\r\n\r\n- the time-range pop-up navigation blocks are now misaligned. I failed to find a solution for them, hopefully someone who is better at CSS can solve that easily."},"comment":{"url":"https://api.github.com/repos/munin-monitoring/munin/issues/comments/173220050","html_url":"https://github.com/munin-monitoring/munin/pull/641#issuecomment-173220050","issue_url":"https://api.github.com/repos/munin-monitoring/munin/issues/641","id":173220050,"user":{"login":"chteuchteu","id":1551971,"avatar_url":"https://avatars.githubusercontent.com/u/1551971?v=3","gravatar_id":"","url":"https://api.github.com/users/chteuchteu","html_url":"https://github.com/chteuchteu","followers_url":"https://api.github.com/users/chteuchteu/followers","following_url":"https://api.github.com/users/chteuchteu/following{/other_user}","gists_url":"https://api.github.com/users/chteuchteu/gists{/gist_id}","starred_url":"https://api.github.com/users/chteuchteu/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chteuchteu/subscriptions","organizations_url":"https://api.github.com/users/chteuchteu/orgs","repos_url":"https://api.github.com/users/chteuchteu/repos","events_url":"https://api.github.com/users/chteuchteu/events{/privacy}","received_events_url":"https://api.github.com/users/chteuchteu/received_events","type":"User","site_admin":false},"created_at":"2016-01-20T14:26:54Z","updated_at":"2016-01-20T14:26:54Z","body":"As talked on IRC, using centimeters isn't the way to go.\r\n\r\nI think that playing with media-queries is the way to go: we could create rules depending on the available width (window width - navigation bar width):\r\n\r\n| < 800 px (mobiles)  | < 1275 px (small desktops) | < 1750 px                  | else                       |\r\n|---------------------|----------------------------|----------------------------|----------------------------|\r\n| 1 graph, 100% width | 2 graphs, 100% width       | 2 graphs, 600px width each | 2 graphs, 800px width each |\r\n\r\n\r\nWe may also add rules for png files:\r\n\r\n- png: `max-width: 500px`\r\n- pngx2: `max-width: 1000px`\r\n- pngx3: `max-width: 1500px`... (yes, that's allowed)\r\n\r\nDo you own a retina or hi-resolution display screen? Could you tell us what is its resolution?"}}