From 51a83069c40fb1f152fbcbfce0c4cf0c115a2242 Mon Sep 17 00:00:00 2001
From: Matt Baer <matt@write.as>
Date: Wed, 7 Apr 2021 14:58:09 -0400
Subject: [PATCH] Disable Ace editor on touchscreen devices

Ace doesn't work well with touchscreen devices, so instead we fall back to a
plain textarea.
---
 templates/user/collection.tmpl | 33 +++++++++++++++++++++------------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/templates/user/collection.tmpl b/templates/user/collection.tmpl
index 6c7b3a1..2bfa033 100644
--- a/templates/user/collection.tmpl
+++ b/templates/user/collection.tmpl
@@ -12,6 +12,12 @@ textarea.section.norm {
 	max-height: 20em;
 	resize: vertical;
 }
+@media (pointer: coarse) {
+	.codable {
+		font-size: 0.75em !important;
+		height: 17em !important;
+	}
+}
 </style>
 
 <div class="content-container snug">
@@ -258,18 +264,21 @@ var $customDomain = document.getElementById('domain-alias');
 var $customHandleEnv = document.getElementById('custom-handle-env');
 var $normalHandleEnv = document.getElementById('normal-handle-env');
 
-var opt = {
-	showLineNumbers: false,
-	showPrintMargin: 0,
-	minLines: 10,
-	maxLines: 40,
-};
-var theme = "ace/theme/chrome";
-var cssEditor = ace.edit("css-editor");
-cssEditor.setTheme(theme);
-cssEditor.session.setMode("ace/mode/css");
-cssEditor.setOptions(opt);
-cssEditor.resize(true);
+if (matchMedia('(pointer:fine)').matches) {
+	// Only initialize Ace editor on devices with a mouse
+	var opt = {
+		showLineNumbers: false,
+		showPrintMargin: 0,
+		minLines: 10,
+		maxLines: 40,
+	};
+	var theme = "ace/theme/chrome";
+	var cssEditor = ace.edit("css-editor");
+	cssEditor.setTheme(theme);
+	cssEditor.session.setMode("ace/mode/css");
+	cssEditor.setOptions(opt);
+	cssEditor.resize(true);
+}
 </script>
 
 {{template "footer" .}}