wip: move importers css to a dedicated file and refactor

umap/static/umap/base.css

@@ -147,7 +147,13 @@ dt {
     margin-right: auto;
     float: none;
 }
-
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.grid-container > * {
+    text-align: center;
+}
 
 /* *********** */
 /*    forms    */
@@ -794,37 +800,6 @@ input[type=hidden].blur + [type="button"] {
 }
 
 
-/* *********** */
-/*  Importers  */
-/* *********** */
-#importers button {
-    background: none;
-    font-size: 1.2rem;
-    border: none;
-}
-#importers button:before {
-    background-image: url(./img/importers/random.svg);
-    background-repeat: no-repeat;
-    background-position: center;
-    content: '';
-    width: 100%;
-    height: 50px;
-    display: block;
-}
-#importers .geodatamine:before {
-    background-image: url(./img/importers/geodatamine.svg);
-}
-#importers .communesfr:before {
-    background-image: url(./img/importers/communesfr.svg);
-}
-#importers .overpass:before {
-    background-image: url(./img/importers/overpass.svg);
-}
-#importers .datasets:before {
-    background-image: url(./img/importers/datasets.svg);
-}
-
-
 /* *********** */
 /*   Various   */
 /* *********** */

umap/static/umap/css/importers.css

@@ -0,0 +1,44 @@
+.importers ul [type=button] {
+    background: none;
+    font-size: 1rem;
+    border: none;
+    width: initial;
+    display: inline-block;
+}
+.importer h3:before {
+    background-image: url(../img/importers/random.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    content: '';
+    width: 36px;
+    height: 36px;
+    display: inline-block;
+    margin-right: 10px;
+    background-size: 100%;
+    vertical-align: -10px;
+}
+.importers ul [type=button]:before {
+    background-image: url(../img/importers/random.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    content: '';
+    width: 100%;
+    height: 50px;
+    display: block;
+}
+.importer.geodatamine h3:before,
+.importers ul .geodatamine:before {
+    background-image: url(../img/importers/geodatamine.svg);
+}
+.importer.communesfr h3:before,
+.importers ul .communesfr:before {
+    background-image: url(../img/importers/communesfr.svg);
+}
+.importer.overpass h3:before,
+.importers ul .overpass:before {
+    background-image: url(../img/importers/overpass.svg);
+}
+.importer.datasets h3:before,
+.importers ul .datasets:before {
+    background-image: url(../img/importers/datasets.svg);
+}

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

@@ -14,8 +14,8 @@ const TEMPLATE = `
       <textarea onchange placeholder="${translate('Paste your data here')}"></textarea>
       <div class="importers">
         <h4>${translate('Import helpers:')}</h4>
-        <div class="button-bar by4" id="importers">
+        <ul class="grid-container">
-        </div>
+        </ul>
       </div>
     </fieldset>
     <fieldset class="formbox">
@@ -128,10 +128,11 @@ export default class Importer {
     this.container = DomUtil.create('div', 'umap-upload')
     this.container.innerHTML = TEMPLATE
     if (this.IMPORTERS.length) {
+      const parent = this.container.querySelector('.importers ul')
       for (const plugin of this.IMPORTERS.sort((a, b) => (a.id > b.id ? 1 : -1))) {
         L.DomUtil.createButton(
           plugin.id,
-          this.container.querySelector('#importers'),
+          DomUtil.element({tagName: 'li', parent}),
           plugin.name,
           () => plugin.open(this)
         )

umap/static/umap/js/modules/importers/communesfr.js

@@ -38,7 +38,7 @@ export class Importer {
 
     importer.dialog.open({
       content: container,
-      className: `${this.id} dark`,
+      className: `${this.id} importer dark`,
     })
   }
 }

umap/static/umap/js/modules/importers/datasets.js

@@ -35,7 +35,7 @@ export class Importer {
 
     importer.dialog.open({
       content: container,
-      className: `${this.id} dark`,
+      className: `${this.id} importer dark`,
     })
   }
 }

umap/static/umap/js/modules/importers/geodatamine.js

@@ -88,7 +88,7 @@ export class Importer {
 
     importer.dialog.open({
       content: container,
-      className: `${this.id} dark`,
+      className: `${this.id} importer dark`,
     })
   }
 }

umap/static/umap/js/modules/importers/overpass.js

@@ -79,7 +79,7 @@ export class Importer {
 
     importer.dialog.open({
       content: container,
-      className: `${this.id} dark`,
+      className: `${this.id} importer dark`,
     })
   }
 }

umap/static/umap/js/modules/ui/dialog.js

@@ -34,6 +34,8 @@ export default class Dialog {
     if (modal) this.container.showModal()
     else this.container.show()
     if (className) {
+      // Reset
+      this.container.className = 'umap-dialog'
       this.container.classList.add(...className.split(' '))
     }
     const buttonsContainer = DomUtil.create('ul', 'buttons', this.container)

umap/templates/umap/css.html

@@ -32,4 +32,5 @@
 <link rel="stylesheet" href="{% static 'umap/css/window.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/tooltip.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/css/dialog.css' %}" />
+<link rel="stylesheet" href="{% static 'umap/css/importers.css' %}" />
 <link rel="stylesheet" href="{% static 'umap/theme.css' %}" />