Merge pull request #168 from tophf/toggle-issues

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

edit.html

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

edit.js

@@ -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();