CustomCategory: add a tip to the tutorial to the edit window

lang/en.json

@@ -9,6 +9,7 @@
     "closed": "closed",
     "default": "default",
     "apply": "Apply",
+    "tip-tutorial": "Check out the [Tutorial]",
     "customCategory:create": "Create custom category",
     "copied-clipboard": "Copied to clipboard",
     "edit": "edit",

src/customCategory.js

@@ -76,6 +76,14 @@ class CustomCategory {
     input.value = lang('apply')
     controls.appendChild(input)
 
+    const tutorial = document.createElement('span')
+    tutorial.className = 'tip-tutorial'
+    let text = lang('tip-tutorial')
+    text = text.replace('[', '<a target="_blank" href="https://github.com/plepe/OpenStreetBrowser/blob/master/doc/CategoryAsYAML.md">')
+    text = text.replace(']', '</a>')
+    tutorial.innerHTML = text
+    controls.appendChild(tutorial)
+
     input.onclick = () => {
       try {
         yaml.load(this.textarea.value)

style.css

@@ -665,6 +665,12 @@ ul.overpass-layer-list > li > a > .content > .details {
   flex-direction: column;
   align-content: stretch;
 }
+.tip-tutorial {
+  margin-left: 1em;
+}
+.tip-tutorial a {
+  text-decoration: underline;
+}
 
 /* Copy to clipboard */
 .share-button {