Cleanup popup notices.

Move HTML to view from controller, use same elements for other country
popup and everypage - partly so they don't display on top of each other
anymore. Don't position them over existing content, position them at the
top of the page. Use consistent styling, and keep the javascript
unobtrusive.

6 files changed, 57 insertions, 46 deletions

diff --git a/app/controllers/services_controller.rb b/app/controllers/services_controller.rb
index 11ed4ac8f..78c494dba 100644
--- a/app/controllers/services_controller.rb
+++ b/app/controllers/services_controller.rb
@@ -24,9 +24,6 @@ class ServicesController < ApplicationController
               FastGettext.locale = old_fgt_locale
             end
         end
-        if !text.empty?
-            text += ' <span class="close-button">X</span>'.html_safe
-        end
         render :text => text, :content_type => "text/plain"  # XXX workaround the HTML validation in test suite
     end
 
diff --git a/app/views/layouts/default.html.erb b/app/views/layouts/default.html.erb
index 63e22b004..07e1bb808 100644
--- a/app/views/layouts/default.html.erb
+++ b/app/views/layouts/default.html.erb
@@ -67,15 +67,23 @@
 <% if is_admin? %>
   <%= render :partial => 'admin_general/admin_navbar' %>
 <% end %>
-<% popup_banner = render(:partial => "general/popup_banner").strip %>
-<% if popup_banner.present? %>
-<div id="everypage" class="jshide">
-  <%= raw popup_banner %>
-  <p class="popup-close"><a href="#top" onclick="$.cookie('seen_foi2', 1, { expires: 7, path: '/' }); $('#everypage').hide('slow'); return false;"><%= _('Close') %></a></p>
-</div>
-<% end %>
 
 <div class="entirebody">
+    <% popup_banner = render(:partial => "general/popup_banner").strip %>
+    <% if popup_banner.present? and  ! @render_to_file %>
+    <div id="everypage" class="popup">
+      <span class="popup-content">
+      <%= raw popup_banner %>
+      </span>
+      <span class="popup-close"><a href="#top" ><%= _('Close') %></a></span>
+    </div>
+    <% end %>
+
+    <div id="other-country-notice" class="popup">
+      <span class="popup-content">
+      </span>
+      <span class="popup-close"><a href="#top" ><%= _('Close') %></a></span>
+    </div>
     <div id="banner">
       <div id="banner_inner">
         <div class="lang"><%= render :partial => 'general/locale_switcher' %></div>
@@ -132,7 +140,6 @@
     <%= render :partial => 'general/footer' %>
 
 </div>
-<div id="other-country-notice"></div>
 <div id="link_box"><span class="close-button">X</span>
 <%= _("Paste this link into emails, tweets, and anywhere else:") %>
 <br />
diff --git a/public/images/small-green-cross.png b/public/images/small-green-cross.png
new file mode 100644
index 000000000..5868f5775
--- /dev/null
+++ b/public/images/small-green-cross.png
diff --git a/public/javascripts/general.js b/public/javascripts/general.js
index 989907998..529bbeb04 100644
--- a/public/javascripts/general.js
+++ b/public/javascripts/general.js
@@ -7,7 +7,7 @@ $(document).ready(function() {
         dataType: 'html',
         success: function(country_message){
         if (country_message != ''){
-      $('#other-country-notice').html(country_message);
+      $('#other-country-notice .popup-content').html(country_message);
       $('body:not(.front) #other-country-notice').show()
         }
     }
@@ -16,10 +16,17 @@ $(document).ready(function() {
      }
  }
 
- $('#other-country-notice').click(function() {
-   $('#other-country-notice').hide();
+ // popup messages
+ $('#other-country-notice .popup-close').click(function() {
+   $('#other-country-notice').hide('slow');
    $.cookie('has_seen_country_message', 1, {expires: 365, path: '/'});
      });
+ $('#everypage .popup-close').click(function() {
+   $('#everypage').hide('slow');
+   $.cookie('seen_foi2', 1, { expires: 7, path: '/' });
+   return false;
+   });
+
  // "link to this" widget
      $('a.link_to_this').click(function() {
     var box = $('div#link_box');
diff --git a/public/stylesheets/main.css b/public/stylesheets/main.css
index 21d0735e0..789bb442f 100644
--- a/public/stylesheets/main.css
+++ b/public/stylesheets/main.css
@@ -8,7 +8,6 @@ padding:0;
 }
 
 #banner {
-position:absolute;
 top:0;
 background-color:#F3F3F3;
 left:0;
@@ -121,7 +120,6 @@ clear:both;
 top:0;
 text-align:left;
 overflow:visible;
-padding-top:160px;
 width:900px;
 margin:0 auto 1.2em;
 }
@@ -719,28 +717,45 @@ margin:60px 0 0;
 padding:0.5em 0;
 }
 
-#everypage {
-background-color:#fc9;
-border:solid 2px #f60;
-border-top:none;
-opacity:0.97;
-border-bottom-left-radius:10px;
-border-bottom-right-radius:10px;
-position:fixed;
-width:70%;
-left:15%;
+.popup {
+background-color:#D5FFD8;
+border:solid 3px #16C132;
 z-index:2000;
-max-height:95%;
 overflow:auto;
-padding:4px;
+text-align:center;
+margin-top:2px;
+}
+
+.popup .popup-content{
+margin:0.5em;
+width: 95%;
+float: left;
+}
+
+.popup p {
+margin: 0;
 }
 
 #everypage h2,#everypage h3 {
 margin:0.5em 0;
 }
 
-#everypage .popup-close {
-  text-align: right;
+
+.popup .popup-close {
+color:#FFF;
+text-decoration:none;
+display:inline-block;
+border-radius:2px;
+-moz-border-radius:2px;
+cursor:pointer;
+background: url('/images/small-green-cross.png') no-repeat 0;
+width:15px;
+height:15px;
+border:solid 0 #FFF;
+text-indent:-999px;
+overflow:hidden;
+float:right;
+padding:10px 0;
 }
 
 #game_sidebar {
@@ -1568,17 +1583,6 @@ cursor:pointer;
 opacity:1;
 }
 
-#other-country-notice {
-background:#222;
-color:#FFF;
-font-size:1.1em;
-width:100%;
-z-index:999;
-display:block;
-position:absolute;
-top:0;
-opacity:0.9;
-}
 
 p.public-body-name-prefix {
 color:#888;
@@ -1587,10 +1591,6 @@ margin-bottom:-15px;
 font-size: 1.2em;
 }
 
-#other-country-notice a {
-color:#FFF;
-}
-
 .close-button {
 color:#FFF;
 text-decoration:none;
diff --git a/spec/controllers/services_controller_spec.rb b/spec/controllers/services_controller_spec.rb
index 399f48acb..14731f090 100644
--- a/spec/controllers/services_controller_spec.rb
+++ b/spec/controllers/services_controller_spec.rb
@@ -58,7 +58,7 @@ describe ServicesController, "when returning a message for people in other count
             FakeWeb.register_uri(:get, %r|denmark.com|, :body => "DK")
             get :other_country_message
             response.should be_success
-            response.body.should == 'Hello! We have an  <a href="/help/alaveteli?country_name=Deutschland">important message</a> for visitors outside Deutschland <span class="close-button">X</span>'
+            response.body.should == 'Hello! We have an  <a href="/help/alaveteli?country_name=Deutschland">important message</a> for visitors outside Deutschland'
         end
         it "should default to no message if the country_from_ip domain doesn't exist" do
             AlaveteliConfiguration.stub!(:gaze_url).and_return('http://12123sdf14qsd.com')