From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 15 Jul 2020 17:10:59 +0000 (+0200)
Subject: Convert data feature warning to use bootstrap alert
X-Git-Tag: live~2742^2~1
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/0c098c3a1d905046fa0531e51b5da5f2af982493?hp=30122011609aa02c32cfef6a31d3f28c1d0207e4

Convert data feature warning to use bootstrap alert

Also rearrange dialog to fit with standard sidebar layouts, so that
the close icon and load buttons are not within the paragraph.

There may be a better way to construct this!
---

diff --git a/app/assets/javascripts/index/browse.js b/app/assets/javascripts/index/browse.js
index 630944411..07ad64def 100644
--- a/app/assets/javascripts/index/browse.js
+++ b/app/assets/javascripts/index/browse.js
@@ -49,15 +49,20 @@ OSM.initializeBrowse = function (map) {
 
   function displayFeatureWarning(count, limit, add, cancel) {
     $("#browse_status").html(
-      $("<p class='warning'></p>")
-        .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit }))
-        .prepend(
-          $("<span class='icon close'></span>")
-            .click(cancel))
+      $("<div>")
         .append(
-          $("<input type='submit'>")
-            .val(I18n.t("browse.start_rjs.load_data"))
-            .click(add)));
+          $("<h2>")
+            .text(I18n.t("browse.start_rjs.load_data"))
+            .prepend($("<span class='icon close'></span>").click(cancel)))
+        .append(
+          $("<div class='inner12'>")
+            .append(
+              $("<p class='alert alert-warning clearfix'></p>")
+                .text(I18n.t("browse.start_rjs.feature_warning", { num_features: count, max_features: limit })))
+            .append(
+              $("<input type='submit'>")
+                .val(I18n.t("browse.start_rjs.load_data"))
+                .click(add))));
   }
 
   var dataLoader;
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index e3b79c591..57c1d1617 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -699,10 +699,6 @@ body.compact {
 }
 
 #browse_status {
-  p {
-    padding: $lineheight;
-  }
-
   input {
     display: block;
     margin-left: auto;