Improve styling of alert boxes to match new sidebar styling

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index 45656f953afd38606404b042ce850f0a0de74d54..fe0e074b9fc35a522af3cfcdbfff1a40a76218e9 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -100,16 +100,19 @@ h2 {
  * undergoing maintenance.
  */
 
-#alert {
-  width: 170px;
-  margin: 5px;
-  padding: 5px;
-  border: 1px solid #ccc;
-  background: #d00;
-  line-height: 1.2em;
-  font-size: 14px;
-  border-radius: 5px;
-  -moz-border-radius: 5px;
+.sidebar-alert {
+  padding: 0px 5px 0.1px 5px;
+  border-top: 1px solid #ccc;
+  margin-top: 4px;
+  margin-bottom: -4px;
+  background: #e00;
+  font-size: 13px;
+  font-weight: bold;
+  line-height: 17px;
+
+  p {
+    margin: 5px;
+  }
 }
 
 /*

diff --git a/app/assets/stylesheets/ltr.css.scss b/app/assets/stylesheets/ltr.css.scss
index 5eba8ddb9f798d38a3fda13a3246d08eff0d87d2..5d9b9aa6ed7394778246ddccf23b223007a89002 100644 (file)
--- a/app/assets/stylesheets/ltr.css.scss
+++ b/app/assets/stylesheets/ltr.css.scss
@@ -6,16 +6,6 @@ html body {
   text-align: left;
 }
 
-/*
- * Rules for alert boxes shown in the left sidebar when important
- * information needs to be conveyed such as when the site is
- * undergoing maintenance.
- */
-
-#alert {
-  text-align: left;
-}
-
 /*
  * Rules for notice boxes shown in the left sidebar when important, but
  * non-critical information needs to be conveyed such as notices about

diff --git a/app/assets/stylesheets/rtl.css.scss b/app/assets/stylesheets/rtl.css.scss
index b9223e5228e8f729a7b2af6cfbdbdfb40757a994..f044cf1f40c541aada509fdaf23fb2c2e3bae1fc 100644 (file)
--- a/app/assets/stylesheets/rtl.css.scss
+++ b/app/assets/stylesheets/rtl.css.scss
@@ -6,16 +6,6 @@ html body {
   text-align: right;
 }
 
-/*
- * Rules for alert boxes shown in the left sidebar when important
- * information needs to be conveyed such as when the site is
- * undergoing maintenance.
- */
-
-#alert {
-  text-align: right;
-}
-
 /*
  * Rules for notice boxes shown in the left sidebar when important, but
  * non-critical information needs to be conveyed such as notices about

diff --git a/app/views/layouts/site.html.erb b/app/views/layouts/site.html.erb
index 33e95f6a2ff3d6b82bf456db13b5e8721042c1ef..58376d857d5ffd11e57d3b3166aa21883a1c1adf 100644 (file)
--- a/app/views/layouts/site.html.erb
+++ b/app/views/layouts/site.html.erb
@@ -86,12 +86,12 @@
       <% end %>
 
       <% if STATUS == :database_offline or STATUS == :api_offline %>
-      <div id="alert">
-        <%= t 'layouts.osm_offline' %>
+      <div class="sidebar-alert">
+        <p><%= t 'layouts.osm_offline' %></p>
       </div>
       <% elsif STATUS == :database_readonly or STATUS == :api_readonly %>
-      <div id="alert">
-        <%= t 'layouts.osm_read_only' %>
+      <div id="sidebar-alert">
+        <p><%= t 'layouts.osm_read_only' %></p>
       </div>
       <% end %>