Adds social icons on header

app/assets/stylesheets/participacion.scss

@@ -763,30 +763,6 @@ footer {
   opacity: .75;
   margin-top: rem-calc(24);
   padding-top: rem-calc(12);
-
-  .social {
-    margin-top: rem-calc(24);
-    text-align: center;
-
-    @media (min-width: $small-breakpoint) {
-      margin-top: 0;
-      text-align: right;
-    }
-
-    a {
-      font-size: rem-calc(24);
-      margin: 0 rem-calc(12);
-      text-decoration: none;
-
-      @media (min-width: $small-breakpoint) {
-        font-size: rem-calc(18);
-      }
-
-      &:last-child {
-        margin-right: 0;
-      }
-    }
-  }
 }
 
 // 06. Tags
@@ -1423,6 +1399,37 @@ table {
   }
 }
 
+.social {
+  margin-top: rem-calc(24);
+  text-align: center;
+
+  @media (min-width: $small-breakpoint) {
+    margin-top: 0;
+    text-align: right;
+  }
+
+  a {
+    font-size: rem-calc(24);
+    line-height: rem-calc(24);
+    margin: 0 rem-calc(12);
+    text-decoration: none;
+    vertical-align: middle;
+
+    &:hover {
+      opacity: .5;
+      text-decoration: none;
+    }
+
+    @media (min-width: $small-breakpoint) {
+      font-size: rem-calc(18);
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
 .share-supported {
 
   .social-share-button {

app/views/layouts/_footer.html.erb

@@ -51,13 +51,13 @@
       </div>
 
       <div class="small-12 medium-2 column social">
-        <%= link_to "https://twitter.com/abriendomadrid", target: "_blank", title: t("layouts.footer.twitter") do %>
+        <%= link_to "https://twitter.com/abriendomadrid", target: "_blank", title: t("social.twitter") do %>
           <i class="icon-twitter"></i>
         <% end %>
-        <%= link_to "https://www.facebook.com/Abriendo-Madrid-1475577616080350/", target: "_blank", title: t("layouts.footer.facebook") do %>
+        <%= link_to "https://www.facebook.com/Abriendo-Madrid-1475577616080350/", target: "_blank", title: t("social.facebook") do %>
           <i class="icon-facebook"></i>
         <% end %>
-        <%= link_to "http://diario.madrid.es/blog/category/gobiernoabierto/", target: "_blank", title: t("layouts.footer.blog") do %>
+        <%= link_to "http://diario.madrid.es/blog/category/gobiernoabierto/", target: "_blank", title: t("social.blog") do %>
           <i class="icon-blog"></i>
         <% end %>
       </div>

app/views/layouts/_header.html.erb

@@ -6,6 +6,18 @@
         <%= link_to t("layouts.header.participation"), root_path, class: ("selected" unless current_page?("/transparency") || current_page?("/opendata")) %>&nbsp;|
         <%= link_to t("layouts.header.external_link_transparency"), "/transparency", class: ("selected" if current_page?("/transparency")) %>&nbsp;|
         <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
+          &nbsp;|&nbsp;
+          <div class="social inline-block">
+            <%= link_to "https://twitter.com/abriendomadrid", target: "_blank", title: t("social.twitter") do %>
+              <i class="icon-twitter"></i>
+            <% end %>
+            <%= link_to "https://www.facebook.com/Abriendo-Madrid-1475577616080350/", target: "_blank", title: t("social.facebook") do %>
+              <i class="icon-facebook"></i>
+            <% end %>
+            <%= link_to "http://diario.madrid.es/blog/category/gobiernoabierto/", target: "_blank", title: t("social.blog") do %>
+              <i class="icon-blog"></i>
+            <% end %>
+          </div>
       </div>
     </div>
   </section>

config/locales/en.yml

@@ -49,9 +49,6 @@ en:
       conditions: "Terms of use"
       more_info: "More information"
       accessibility: "Accessibility"
-      twitter: "Twitter"
-      facebook: "Facebook"
-      blog: "Blog"
     application:
       ie_title: "This site is not optimized for your browser"
       ie:
@@ -59,6 +56,10 @@ en:
         For a better experience we recommend use %{chrome} or %{firefox}."
       chrome: "Google Chrome"
       firefox: "Firefox"
+  social:
+    twitter: "Twitter"
+    facebook: "Facebook"
+    blog: "Blog"
   form:
       error: error
       errors: errors

config/locales/es.yml

@@ -49,9 +49,6 @@ es:
       conditions: "Condiciones de uso"
       more_info: "Más información"
       accessibility: "Accesibilidad"
-      twitter: "Twitter"
-      facebook: "Facebook"
-      blog: "Blog"
     application:
       ie_title: "Esta web no está optimizada para tu navegador"
       ie:
@@ -59,6 +56,10 @@ es:
         Para una mejor experiencia te recomendamos utilizar %{chrome} o %{firefox}."
       chrome: "Google Chrome"
       firefox: "Firefox"
+  social:
+    twitter: "Twitter"
+    facebook: "Facebook"
+    blog: "Blog"
   form:
       error: error
       errors: errores