Disable Ace editor on touchscreen devices

Ace doesn't work well with touchscreen devices, so instead we fall back to a
plain textarea.
This commit is contained in:
Matt Baer 2021-04-07 14:58:09 -04:00
parent ac7583eadb
commit 51a83069c4
1 changed files with 21 additions and 12 deletions

View File

@ -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" .}}