Narrow-width editor on touchscreens: toggle lint report via click

This commit is contained in:
tophf 2016-02-01 17:09:31 +02:00
parent ddb6f400e7
commit 08e35c6990
2 changed files with 12 additions and 0 deletions

View File

@ -455,6 +455,9 @@
#lint > div {
max-height: 0;
}
#lint.collapsed > div {
display: none;
}
#lint:hover > div {
margin-top: 1em;
max-height: 30vh;

View File

@ -979,6 +979,10 @@ function gotoLintIssue(event) {
});
}
function toggleLintReport() {
document.getElementById("lint").classList.toggle("collapsed");
}
function beautify(event) {
if (exports.css_beautify) { // thanks to csslint's definition of 'exports'
doBeautify();
@ -1135,6 +1139,11 @@ function initHooks() {
document.getElementById("lint").addEventListener("click", gotoLintIssue);
window.addEventListener("resize", resizeLintReport);
// touch devices don't have onHover events so the element we'll be toggled via clicking (touching)
if ("ontouchstart" in document.body) {
document.querySelector("#lint h2").addEventListener("click", toggleLintReport);
}
setupGlobalSearch();
setCleanGlobal();
updateTitle();