diff options
| author | Adam Spiers <git@adamspiers.org> | 2015-01-09 16:44:01 +0000 |
|---|---|---|
| committer | Adam Spiers <git@adamspiers.org> | 2015-01-09 17:28:46 +0000 |
| commit | 4f488d75a49982949de3a5bf294870e64ef2609b (patch) | |
| tree | 520bed0ea5ebf422fbbe56b52f6bc337f7ca0f11 /html | |
| parent | 4dabd89e5f6b60f03e1b7c6f33e4009a314b191d (diff) | |
| download | git-deps-4f488d75a49982949de3a5bf294870e64ef2609b.tar.gz | |
make layout responsive (closes #10)
Diffstat (limited to 'html')
| -rw-r--r-- | html/css/git-deps.css | 18 | ||||
| -rw-r--r-- | html/git-deps.html | 44 | ||||
| -rw-r--r-- | html/js/git-deps-graph.js | 60 |
3 files changed, 90 insertions, 32 deletions
diff --git a/html/css/git-deps.css b/html/css/git-deps.css index 50a62f1..ec944ae 100644 --- a/html/css/git-deps.css +++ b/html/css/git-deps.css @@ -1,5 +1,23 @@ body { font-family: Helvetica, arial, freesans, clean, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; + width: 100vw; + height: 100vh; + margin: 0px; +} + +#page { + margin: 8px; + display: flex; /* use the flex model */ + flex-direction: column; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} + +#svg-container { + flex: 1; } rect.background { diff --git a/html/git-deps.html b/html/git-deps.html index 8f0b567..c74026a 100644 --- a/html/git-deps.html +++ b/html/git-deps.html @@ -21,24 +21,30 @@ </head> <body> - <h1>git commit dependency graph</h1> - - <p> - Use mouse-wheel to zoom. - Drag background to pan. - Hover over a commit for more information. - </p> - - <form class="commitish" action="#"> - Detect dependencies for commit: - <input type="text" name="commitish" size="20" - value="master" autofocus /> - <button>Submit</button> - </form> - - <p> - <button onclick="fullScreen(svg[0][0], full_screen_cancel); zoom_to_fit()">Full screen</button> - <button onclick="zoom_to_fit()">Zoom to fit (or double click)</button> - </p> + <div id="page"> + <div id="top"> + <h1>git commit dependency graph</h1> + + <p> + Use mouse-wheel to zoom. + Drag background to pan. + Hover over a commit for more information. + </p> + + <form class="commitish" action="#"> + Detect dependencies for commit: + <input type="text" name="commitish" size="20" + value="master" autofocus /> + <button>Submit</button> + </form> + + <p> + <button onclick="full_screen_click()">Full screen</button> + <button onclick="zoom_to_fit()">Zoom to fit (or double click)</button> + </p> + </div> + + <div id="svg-container" /> + </div> </body> </html> diff --git a/html/js/git-deps-graph.js b/html/js/git-deps-graph.js index 21cde9e..3c15735 100644 --- a/html/js/git-deps-graph.js +++ b/html/js/git-deps-graph.js @@ -1,14 +1,15 @@ -var WIDTH = 960, - HEIGHT = 800, +var SVG_MARGIN = 0, // space around <svg> RECT_MARGIN = 14, // space in between <rects> - PADDING = 5, // space in between <text> label and <rect> border + PADDING = 5, // space in between <text> label and <rect> border EDGE_ROUTING_MARGIN = 3; +var svg_width = 960, old_svg_width, + svg_height = 800, old_svg_height; + var color = d3.scale.category20(); var d3cola = cola.d3adaptor() - .avoidOverlaps(true) - .size([WIDTH, HEIGHT]); + .avoidOverlaps(true); var cola_initialized = false; @@ -30,7 +31,7 @@ var node_index = {}; var deps = {}; // d3 visualization elements. Kept global to aid in-browser debugging. -var svg, fg, node, path, tip, tip_template; +var container, svg, fg, node, path, tip, tip_template; var zoom; // Options will be retrieved from web server @@ -70,6 +71,13 @@ function setup_default_form_values() { }); } +function resize_window() { + calculate_svg_size_from_container(); + console.log("new size: " + svg_width + "x" + svg_height); + fit_svg_to_container(); + redraw(true); +} + function redraw(transition) { // if mouse down then we are dragging not panning // if (nodeMouseDown) @@ -94,9 +102,23 @@ function graph_bounds() { return { x: x, X: X, y: y, Y: Y }; } +function fit_svg_to_container() { + svg.attr("width", svg_width).attr("height", svg_height); +} + function full_screen_cancel() { - svg.attr("width", WIDTH).attr("height", HEIGHT); - zoom_to_fit(); + svg_width = old_svg_width; + svg_height = old_svg_height; + fit_svg_to_container(); + //zoom_to_fit(); + resize_window(); +} + +function full_screen_click() { + fullScreen(container[0][0], full_screen_cancel); + fit_svg_to_container(); + resize_window(); + //zoom_to_fit(); } function zoom_to_fit() { @@ -104,8 +126,8 @@ function zoom_to_fit() { var w = b.X - b.x, h = b.Y - b.y; var cw = svg.attr("width"), ch = svg.attr("height"); var s = Math.min(cw / w, ch / h); - var tx = (-b.x * s + (cw / s - w) * s / 2), - ty = (-b.y * s + (ch / s - h) * s / 2); + var tx = -b.x * s + (cw/s - w) * s/2, + ty = -b.y * s + (ch/s - h) * s/2; zoom.translate([tx, ty]).scale(s); redraw(true); } @@ -193,10 +215,22 @@ function add_commitish(commitish) { draw_graph(commitish); } +function calculate_svg_size_from_container() { + old_svg_width = svg_width; + old_svg_height = svg_height; + svg_width = container[0][0].offsetWidth - SVG_MARGIN; + svg_height = container[0][0].offsetHeight - SVG_MARGIN; +} + function init_svg() { - svg = d3.select("body").append("svg") - .attr("width", WIDTH) - .attr("height", HEIGHT); + container = d3.select('#svg-container'); + calculate_svg_size_from_container(); + svg = container.append('svg') + .attr('width', svg_width) + .attr('height', svg_height); + d3cola.size([svg_width, svg_height]); + + d3.select(window).on('resize', resize_window); zoom = d3.behavior.zoom(); |