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~2051^2~1
X-Git-Url: https://git.openstreetmap.org/rails.git/commitdiff_plain/0c098c3a1d905046fa0531e51b5da5f2af982493

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;