wip: use dt/dd for import formats help box

umap/static/umap/base.css

@@ -69,6 +69,9 @@ ul {
     list-style-position:inside;
     list-style-type:none;
 }
+dt {
+    font-weight: bold;
+}
 
 /* ************************************************* */
 /* *********************** GRID ******************** */

umap/static/umap/js/modules/help.js

@@ -100,30 +100,33 @@ const ENTRIES = {
   browsable: translate(
     'Set it to false to hide this layer from the slideshow, the data browser, the popup navigation…'
   ),
+  importMode: translate(
+    'When providing an URL, uMap can copy the remote data in a layer, or add this URL as remote source of the layer. In that case, data will always be fetched from that URL, and thus be up to date, but it will not be possible to edit it inside uMap.'
+  ),
   importFormats: `
   <div>
-    <h3>GeoJSON</h3>
-    <p>${translate('All properties are imported.')}</p>
-    <h3>GPX</h3>
-    <p>${translate('Properties imported:')}name, desc</p>
-    <h3>KML</h3>
-    <p>${translate('Properties imported:')}name, description</p>
-    <h3>CSV</h3>
-    <p>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</p>
-    <h3>uMap</h3>
-    <p>${translate('Imports all umap data, including layers and settings.')}</p>
+    <dt>GeoJSON</dt>
+    <dd>${translate('All properties are imported.')}</dd>
+    <dt>GPX</dt>
+    <dd>${translate('Properties imported:')}name, desc</dd>
+    <dt>KML</dt>
+    <dd>${translate('Properties imported:')}name, description</dd>
+    <dt>CSV</dt>
+    <dd>${translate('Comma, tab or semi-colon separated values. SRS WGS84 is implied. Only Point geometries are imported. The import will look at the column headers for any mention of «lat» and «lon» at the begining of the header, case insensitive. All other column are imported as properties.')}</dd>
+    <dt>uMap</dt>
+    <dd>${translate('Imports all umap data, including layers and settings.')}</dd>
   </div>
   `,
   dynamicProperties: `
   <div>
-    <h3>${translate('Dynamic properties')}</h3>
+    <h4>${translate('Dynamic properties')}</h4>
     <p>${translate('Use placeholders with feature properties between brackets, eg. &#123;name&#125;, they will be dynamically replaced by the corresponding values.')}</p>
   </div>
   `,
 
   textFormatting: `
   <div>
-    <h3>${translate('Text formatting')}</h3>
+    <h4>${translate('Text formatting')}</h4>
     <ul>
       <li>${translate('*single star for italic*')}</li>
       <li>${translate('**double star for bold**')}</li>
@@ -170,6 +173,7 @@ export default class Help {
 
   show(entries) {
     const container = DomUtil.add('div')
+    DomUtil.createTitle(container, translate('Help'))
     // Special dynamic case. Do we still think this dialog is usefull ?
     if (entries == 'edit') {
       DomUtil.element({
@@ -209,9 +213,15 @@ export default class Help {
     return button
   }
 
+  parse(container) {
+    for (const element of container.querySelectorAll('[data-help]')) {
+      this.button(element, element.dataset.help.split(','))
+    }
+  }
+
   _buildEditEntry() {
     const container = DomUtil.create('div', '')
-    const title = DomUtil.create('h3', '', container)
+    const title = DomUtil.create('h4', '', container)
     const actionsContainer = DomUtil.create('ul', 'umap-edit-actions', container)
     const addAction = (action) => {
       const actionContainer = DomUtil.add('li', '', actionsContainer)

umap/static/umap/js/modules/importer.js

@@ -18,7 +18,7 @@ const TEMPLATE = `
       </div>
     </fieldset>
     <fieldset class="formbox">
-      <legend class="counter">${translate('Choose the data format')}</legend>
+      <legend class="counter" data-help="importFormats">${translate('Choose the data format')}</legend>
       <select name="format" onchange></select>
     </fieldset>
     <fieldset class="destination formbox">
@@ -30,7 +30,7 @@ const TEMPLATE = `
       </label>
     </fieldset>
     <fieldset class="import-mode formbox">
-      <legend class="counter">${translate('Choose import mode')}</legend>
+      <legend class="counter" data-help="importMode">${translate('Choose import mode')}</legend>
       <label>
         <input type="radio" name="action" value="copy" />
         ${translate('Copy into the layer')}
@@ -125,6 +125,7 @@ export default class Importer {
         textContent: type,
       })
     }
+    this.map.help.parse(this.container)
     DomEvent.on(this.qs('[name=submit]'), 'click', this.submit, this)
     DomEvent.on(this.qs('[type=file]'), 'change', this.onFileChange, this)
     for (const element of this.container.querySelectorAll('[onchange]')) {
@@ -134,7 +135,10 @@ export default class Importer {
 
   onChange() {
     this.qs('.destination').toggleAttribute('hidden', this.format === 'umap')
-    this.qs('.import-mode').toggleAttribute('hidden', this.format === 'umap' || !this.url)
+    this.qs('.import-mode').toggleAttribute(
+      'hidden',
+      this.format === 'umap' || !this.url
+    )
   }
 
   onFileChange(e) {

umap/static/umap/js/modules/utils.js

@@ -90,6 +90,8 @@ export function escapeHTML(s) {
       'source',
       'br',
       'span',
+      'dt',
+      'dd',
     ],
     ADD_ATTR: [
       'target',