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 6309444110a1206f7f22e57a2d54f02c3d5422ee..07ad64def19417bb117c5af89f5c03712cc4994d 100644 (file)
--- 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 e3b79c5913b5e24ccbe6d4f3ad12d1a3c8222706..57c1d16179c73a8b9ae759364ae394b000269b26 100644 (file)
--- 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;