Commit ffa21aa2 authored by arturo's avatar arturo

>>> continue

parent dfb0e173
...@@ -1159,7 +1159,7 @@ select.form-control { ...@@ -1159,7 +1159,7 @@ select.form-control {
grid-template-columns: repeat(15, 1fr); grid-template-columns: repeat(15, 1fr);
grid-template-rows: 2% 7% 7% auto 1%; grid-template-rows: 2% 7% 7% auto 1%;
grid-gap: 10px; grid-gap: 10px;
height: calc(100vh - 137px); height: calc(100vh - 0px);
color: #0d1824; color: #0d1824;
} }
......
...@@ -18,4 +18,6 @@ footer = R.createElement footerCpt ...@@ -18,4 +18,6 @@ footer = R.createElement footerCpt
footerCpt :: R.Component FooterProps footerCpt :: R.Component FooterProps
footerCpt = here.component "footer" cpt where footerCpt = here.component "footer" cpt where
cpt { } _ = do cpt { } _ = do
pure $ H.div { className: "container" } [ H.hr {}, H.footer {} [] ] -- (?) as the footer is empty for now, just output nothing
-- pure $ H.div { className: "container" } [ H.hr {}, H.footer {} [] ]
pure mempty
...@@ -341,7 +341,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -341,7 +341,7 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
d3.select('#phyloIsoLine').style("background","#EBE4DD"); d3.select('#phyloIsoLine').style("background","#EBE4DD");
var div0 = d3.select('#phyloIsoLine').node().getBoundingClientRect(), var div0 = getIsolineDOMElement(),
m0 = {t:5,r:5,b:5,l:5}, m0 = {t:5,r:5,b:5,l:5},
w0 = div0.width, w0 = div0.width,
h0 = div0.height; h0 = div0.height;
...@@ -364,6 +364,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -364,6 +364,10 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
.thresholds(Math.round(branches.length / 2)) .thresholds(Math.round(branches.length / 2))
(branches) (branches)
function getIsolineDOMElement() {
return d3.select('#phyloIsoLine').node().getBoundingClientRect();
}
/* shadows and lights */ /* shadows and lights */
svg0.append("g") svg0.append("g")
...@@ -1166,12 +1170,13 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) { ...@@ -1166,12 +1170,13 @@ function drawPhylo(branches, periods, groups, links, aLinks, bLinks, frame) {
} }
function peakOver (b,i) { function peakOver (b,i) {
var el = getIsolineDOMElement();
d3.select("#peak-" + i).classed("peak-focus",false); d3.select("#peak-" + i).classed("peak-focus",false);
d3.select("#peak-" + i).classed("peak-over",true); d3.select("#peak-" + i).classed("peak-over",true);
label.text(b.label.replace(/"/g,'')) label.text(b.label.replace(/"/g,''))
.style("visibility", "visible") .style("visibility", "visible")
.style("top", (yScale0(b.y) + div0.top - 18) + "px") .style("top", (yScale0(b.y) + el.top - 18) + "px")
.style("left",(xScale0(b.x1) + div0.left + 12) + "px"); .style("left",(xScale0(b.x1) + el.left + 12) + "px");
branchOver(b.bId); branchOver(b.bId);
} }
......
$height-screen-minus: 137px; // totally unworthy empirical value calculating the screen height taken by the topbar height and other main container element height (@TODO topbar height calculation, @TODO enhance "container" class element height management, @TODO provide route view content with no inner padding -> see "main-page__main-route" paddings")
/* fonts */ /* fonts */
@font-face { @font-face {
...@@ -27,11 +25,7 @@ $height-screen-minus: 137px; // totally unworthy empirical value calculating the ...@@ -27,11 +25,7 @@ $height-screen-minus: 137px; // totally unworthy empirical value calculating the
grid-template-columns: repeat(15, 1fr); grid-template-columns: repeat(15, 1fr);
grid-template-rows: 2% 7% 7% auto 1%; grid-template-rows: 2% 7% 7% auto 1%;
grid-gap: 10px; grid-gap: 10px;
// will stick the phylomemy height to the window screen height, as if it height: 100vh;
// was a fullpage / unscrollable content
// main purpose is to avoid any browser scroll, this will ease D3 zoom event
// management
height: calc(100vh - #{ $height-screen-minus });
color: #0d1824; color: #0d1824;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment