feat: open importers in a dialog instead of in the form (#2327)

![image](https://github.com/user-attachments/assets/bdc8d7ef-874a-419c-9f02-47aff06081f3)

cf #2302

docs-users/fr/tutorials/6-one-click-data-import.md

@@ -47,7 +47,7 @@ Voici un bref passage en revu des différents imports proposés et pour finir l
 
 ## 1. Importer le contour d’une commune
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « Communes France » et sélectionnez la commune souhaitée dans une liste déroulante. Une fois la commune sélectionnée, le format est reconnu automatiquement (geojson) puis le type de calque (cliquer sur « ? » pour savoir quel choix opérer)
 
@@ -64,15 +64,15 @@ Une fois cet import réalisé, tout est réglable : couleur de contour, de fond,
 
 ## 2. Importer les contours des départements ou des régions
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « Contours nationaux » puis soit départements, soit régions et enfin le type de calque (voir supra l’explication). Tous les départements sont importés :
 
 ![Une carte avec le dessin de chaque département importé](../../static/tutoriels/importer-departements.png)
 
 ## 3. Importer un point d’intérêt issu de GeoDataMine
 
-Cliquez sur l’outil d’importation en bas de la barre de droite, puis descendez jusqu’au cadre « Assistants d’import ».
+Cliquez sur l’outil d’importation en bas de la barre de droite, puis cliquez sur le lien « Assistants d’import ».
 
 Cliquez sur « GeoDataMine (thèmes OSM) » et sélectionnez les informations souhaitées, routes, bâtiments, commerces, services publics, …
 Par exemple, en sélectionnant les points d’eau potable de la CA du Grand Avignon, puis « Copier dans un calque »

umap/static/umap/base.css

@@ -157,6 +157,9 @@ dt {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
 }
+.grid-container.by4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+}
 .grid-container > * {
     text-align: center;
 }

umap/static/umap/css/form.css

@@ -78,8 +78,7 @@ input[type="submit"] {
     border-radius: 2px;
     font-weight: normal;
     cursor: pointer;
-    padding: 7px;
-    width: 100%;
+    padding: 7px 14px;
     min-height: 32px;
     line-height: 32px;
     border: none;
@@ -92,6 +91,12 @@ input[type="submit"] {
     color: var(--text-color);
     border: 1px solid #1b1f20;
 }
+.dark .button.primary:not([disabled]),
+.dark [type="button"].primary:not([disabled]) {
+    background-color: var(--color-brightCyan);
+    color: var(--color-dark);
+    border: 1px solid #1b1f20;
+}
 .dark .button:hover,
 .dark [type="button"]:hover,
 .dark input[type="submit"]:hover {
@@ -100,6 +105,11 @@ input[type="submit"] {
 .dark a {
     color: var(--text-color);
 }
+.dark [type="button"][disabled],
+.dark input[type="submit"][disabled] {
+    background-color: var(--color-mediumGray);
+    cursor: not-allowed;
+}
 button.flat,
 [type="button"].flat,
 .dark [type="button"].flat {
@@ -602,3 +612,6 @@ input[type=hidden].blur + [type="button"] {
 input.highlightable:not(:placeholder-shown) {
     border: 1px solid var(--color-brightCyan);
 }
+.umap-upload [type=url] {
+    margin-bottom: 0;
+}

umap/static/umap/css/icon.css

@@ -110,6 +110,9 @@ html[dir="rtl"] .icon {
 .icon-list {
     background-position: var(--tile) calc(var(--tile) * 4);
 }
+.icon-magic {
+    background-position: calc(var(--tile) * 7) 0;
+}
 .icon-marker {
     background-position: calc(var(--tile) * 3) calc(var(--tile) * 5);
 }