mirror of
https://github.com/pcottle/learnGitBranching.git
synced 2025-07-05 20:24:28 +02:00
better padding for vis and stuff
This commit is contained in:
parent
e8dd24fa5c
commit
9b85b676df
8 changed files with 36 additions and 12 deletions
|
@ -15023,7 +15023,9 @@ GitVisuals.prototype.getScreenPadding = function() {
|
||||||
// for now we return the node radius subtracted from the walls
|
// for now we return the node radius subtracted from the walls
|
||||||
return {
|
return {
|
||||||
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
heightPadding: GRAPHICS.nodeRadius * 1.5
|
topHeightPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
|
// we pad the bottom a lot more so the branches wont go off screen
|
||||||
|
bottomHeightPadding: GRAPHICS.nodeRadius * 5
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -15037,9 +15039,13 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
|
||||||
return padding + frac * (total - padding * 2);
|
return padding + frac * (total - padding * 2);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
|
||||||
|
return paddingTop + frac * (total - paddingBelow - paddingTop);
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
||||||
y: shrink(pos.y, this.paper.height, padding.heightPadding)
|
y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -26461,7 +26467,9 @@ GitVisuals.prototype.getScreenPadding = function() {
|
||||||
// for now we return the node radius subtracted from the walls
|
// for now we return the node radius subtracted from the walls
|
||||||
return {
|
return {
|
||||||
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
heightPadding: GRAPHICS.nodeRadius * 1.5
|
topHeightPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
|
// we pad the bottom a lot more so the branches wont go off screen
|
||||||
|
bottomHeightPadding: GRAPHICS.nodeRadius * 5
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -26475,9 +26483,13 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
|
||||||
return padding + frac * (total - padding * 2);
|
return padding + frac * (total - padding * 2);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
|
||||||
|
return paddingTop + frac * (total - paddingBelow - paddingTop);
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
||||||
y: shrink(pos.y, this.paper.height, padding.heightPadding)
|
y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
1
build/bundle.min.0a3d07d9.js
Normal file
1
build/bundle.min.0a3d07d9.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2
build/bundle.min.js
vendored
2
build/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -253,11 +253,14 @@ div.canvasTerminalHolder > div.terminal-window-holder div.inside {
|
||||||
border-radius: 0 0 5px 5px;
|
border-radius: 0 0 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.canvasTerminalHolder > div.terminal-window-holder,
|
|
||||||
#controls {
|
#controls {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.canvasTerminalHolder > div.terminal-window-holder {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
#controls {
|
#controls {
|
||||||
background: #EEE;
|
background: #EEE;
|
||||||
}
|
}
|
|
@ -13,7 +13,7 @@
|
||||||
<meta property="og:image" content="http://pcottle.github.com/learnGitBranching/assets/learnGitBranching.png"/>
|
<meta property="og:image" content="http://pcottle.github.com/learnGitBranching/assets/learnGitBranching.png"/>
|
||||||
<meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
|
<meta property="og:description" content="A interactive Git visualization tool to educate and challenge!"/>
|
||||||
|
|
||||||
<link rel="stylesheet" href="build/main.42019824.css" type="text/css" charset="utf-8">
|
<link rel="stylesheet" href="build/main.ddc18834.css" type="text/css" charset="utf-8">
|
||||||
<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
|
<link rel="stylesheet" href="src/style/font-awesome.css" type="text/css" charset="utf-8">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
@ -409,7 +409,7 @@
|
||||||
For a much easier time perusing the source, see the individual files at:
|
For a much easier time perusing the source, see the individual files at:
|
||||||
https://github.com/pcottle/learnGitBranching
|
https://github.com/pcottle/learnGitBranching
|
||||||
-->
|
-->
|
||||||
<script src="build/bundle.min.ff85065c.js"></script>
|
<script src="build/bundle.min.0a3d07d9.js"></script>
|
||||||
|
|
||||||
<!-- The advantage of github pages: super-easy, simple, slick static hostic.
|
<!-- The advantage of github pages: super-easy, simple, slick static hostic.
|
||||||
The downside? No raw logs to parse for analytics, so I have to include
|
The downside? No raw logs to parse for analytics, so I have to include
|
||||||
|
|
|
@ -109,7 +109,9 @@ GitVisuals.prototype.getScreenPadding = function() {
|
||||||
// for now we return the node radius subtracted from the walls
|
// for now we return the node radius subtracted from the walls
|
||||||
return {
|
return {
|
||||||
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
widthPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
heightPadding: GRAPHICS.nodeRadius * 1.5
|
topHeightPadding: GRAPHICS.nodeRadius * 1.5,
|
||||||
|
// we pad the bottom a lot more so the branches wont go off screen
|
||||||
|
bottomHeightPadding: GRAPHICS.nodeRadius * 5
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -123,9 +125,13 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
|
||||||
return padding + frac * (total - padding * 2);
|
return padding + frac * (total - padding * 2);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
var asymShrink = function(frac, total, paddingTop, paddingBelow) {
|
||||||
|
return paddingTop + frac * (total - paddingBelow - paddingTop);
|
||||||
|
};
|
||||||
|
|
||||||
return {
|
return {
|
||||||
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
x: shrink(pos.x, this.paper.width, padding.widthPadding),
|
||||||
y: shrink(pos.y, this.paper.height, padding.heightPadding)
|
y: asymShrink(pos.y, this.paper.height, padding.topHeightPadding, padding.bottomHeightPadding)
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -253,11 +253,14 @@ div.canvasTerminalHolder > div.terminal-window-holder div.inside {
|
||||||
border-radius: 0 0 5px 5px;
|
border-radius: 0 0 5px 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.canvasTerminalHolder > div.terminal-window-holder,
|
|
||||||
#controls {
|
#controls {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
div.canvasTerminalHolder > div.terminal-window-holder {
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
#controls {
|
#controls {
|
||||||
background: #EEE;
|
background: #EEE;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue