Adds IE popup for IE less than IE9 versions

app/assets/stylesheets/participacion.scss

@@ -262,6 +262,17 @@ h6 {
   border-top: rem-calc(6) solid $brand;
 }
 
+.ie-alert-box {
+  position: absolute;
+  top: 0;
+  width: 100%;
+
+  a.close {
+    font-size: 36px;
+    top: 20%;
+  }
+}
+
 // 04. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/views/layouts/application.html.erb

@@ -22,6 +22,23 @@
     <div class="wrapper">
       <%= render 'layouts/header' %>
 
+      <!--[if lt IE 9]>
+      <% if browser.ie? %>
+        <div data-alert class="alert-box info ie-alert-box">
+          <a href="#" class="close">&times;</a>
+          <h2><%= t("layouts.application.ie_title") %></h2>
+          <p>
+            <%= t("layouts.application.ie",
+            chrome: link_to(
+                    t("layouts.application.chrome"), t("layouts.application.chrome_url"), target: "_blank"),
+            firefox: link_to(
+                     t("layouts.application.firefox"), t("layouts.application.firefox_url"), target: "_blank")
+            ).html_safe %>
+          </p>
+        </div>
+      <% end %>
+      <![endif]-->
+
       <% if notice %>
       <div class="alert-messages">
         <div class="row">

config/locales/en.yml

@@ -48,6 +48,15 @@ en:
       privacy: "Privacy Policy"
       conditions: "Terms of use"
       more_info: "More information"
+    application:
+      ie_title: "This site is not optimized for your browser"
+      ie:
+        "You are using Internet Explorer.
+        For a better experience we recommend use %{chrome} or %{firefox}."
+      chrome: "Google Chrome"
+      chrome_url: "https://www.google.com/chrome/browser/desktop/"
+      firefox: "Firefox"
+      firefox_url: "https://www.mozilla.org/firefox"
   form:
       error: error
       errors: errors

config/locales/es.yml

@@ -48,6 +48,15 @@ es:
       privacy: "Política de privacidad"
       conditions: "Condiciones de uso"
       more_info: "Más información"
+    application:
+      ie_title: "Esta web no está optimizada para tu navegador"
+      ie:
+        "Hemos detectado que estás navegando desde Internet Explorer.
+        Para una mejor experiencia te recomendamos utilizar %{chrome} o %{firefox}."
+      chrome: "Google Chrome"
+      chrome_url: "https://www.google.com/chrome/browser/desktop/"
+      firefox: "Firefox"
+      firefox_url: "https://www.mozilla.org/firefox"
   form:
       error: error
       errors: errores