Jacks-editor-app-expanded fails to load reliably

[MarshallBrinn]

jacks-editor-app-expanded (the 'Expand' button from the slice-add-resources-jacks page) fails to load reliably. Tom, Aaron and I tried on all three browser types (Chrome, FF and Safari) and had different results. The results are consistent per person and browser but different per person:

Marshall : All three succeeded
Tom: Only FF succeeded
Aaron: Only FF and Safari succeeded.

Imported from trac ticket #1311, created by mbrinn on 02-18-2015 at 09:59, last modified: 03-31-2015 at 10:24

[ahelsing]

The issue here appears to be that the Jacks topo container calculates its size in some way that is inconsistent with what we're doing around it. Minimum size seems to be about 350px.

It appears we need to have the page use reactive programming to adjust the height: If the overall window is big enough, set the height on the jacks-editor-pane to 95% of height (as the code says now). But if the overall height is not big enough (around 790px seems the right number), then set the jacks-editor-pane to a minimum of 350px.

.jacks-editor-pane {
    width: 100%;
    height: 95%;
}

@media (max-height: 790px) {
    .jacks-editor-pane { height: 350px; }
}

And then maybe we also need in javascript:

var mql = window.matchMedia("(max-height: 790px)");
if (mql.matches) {
  var pane = $("#jacks-editor-pane")[0];
  pane.style.height = "350px";
} else {
  var pane = $("#jacks-editor-pane")[0]; pane.style.height = "95%";
}

There is also a viewport meta tag on the HTML that may be relevant.

See:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Testing_media_queries
http://www.sitepoint.com/5-uses-vertical-media-queries/
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
http://webdesign.tutsplus.com/tutorials/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972

Here's one that shows different CSS blocks depending on the width of the page:
http://css-tricks.com/css-media-queries/

Some other nice tutorials, complete with simple examples:
http://webdesignerwall.com/tutorials/css3-media-queries

Trac comment by ahelsing on 02-26-2015 at 09:13

[ahelsing]

Note that with the latest changes to make the jacks-editor-app-expanded look like the slice-add-resources-jacks page, the height no longer seems to be expanding for anyone. This is strange, as I thought it was working. Will this media-queries thing fix that? Or is there something else we need to do with the CSS load order or something?

Trac comment by ahelsing on 02-26-2015 at 09:14