Added Cookie alert component

data/cookies.yml

@@ -0,0 +1,4 @@
+message_es: Este sitio web utiliza cookies para ofrecerte la experiencia más relevante. El uso de este sitio web significa que estás de acuerdo con esto. Puede cambiar las cookies que se establecen en cualquier momento y obtener más información al respecto siguiendo este <a title="Privacy Policy" href="/privacy-cookies/">enlace</a>
+message_en: This website uses cookies to give you the most relevant experience. Using this website means you agree with this. You can change which cookies are set at any time and find out more about them by following this <a title="Privacy Policy" href="/privacy#cookies">link</a>.
+button_es: Entendido
+button_en: Understood

source/index.html.erb

@@ -27,6 +27,7 @@ body: home
 						<li><a href="/toolkit/">Toolkit</a></li>
 						<li><a href="/404/">404</a></li>
 						<li><a href="/maintenance/">Maintenance</a></li>
+						<li><a href="/whole-page-cookies/">Cookie box</a></li>
 					</ul>
 				</div>
 			</div>

source/javascripts/cookies.js

@@ -0,0 +1,15 @@
+(function () {
+  'use strict';
+
+  $(document).ready(function(){
+    if (!Cookies.get('mb_cookies_accepted')){
+      $('body').addClass('cookies-show');
+    }
+
+    $('#acceptCookies').click(function(){
+      Cookies.set('mb_cookies_accepted', 'true', { expires: 365 });
+      $('body').removeClass('cookies-show');
+    })
+  });
+
+})();

source/layouts/layout.erb

@@ -16,5 +16,8 @@
     <%= partial "partials/shapes" %>
     <%= yield %>
     <%= javascript_include_tag  :body %>
+
+    <%= partial "partials/cookies" %>
+
   </body>
 </html>

source/partials/_cookies.html.erb

@@ -0,0 +1,19 @@
+<section class="cookies-container">
+  <div class="overlay"></div>
+  <div class="cookies">
+    <div class="container">
+      <div class="icon">
+        <%= image_tag 'cookies-icon.svg', alt: 'Cookies icon', title: 'Cookies icon', class: 'center-block' %>
+      </div>
+      <div class="message">
+        <p><%= data.cookies.message_en %></p>
+      </div>
+      <div class="understood">
+        <a href="#" class="btn btn-primary btn-sm" title="Understood"
+          role="button" id="acceptCookies">
+          <%= data.cookies.button_en %>
+        </a>
+      </div>
+    </div>
+  </div>
+</section>

source/partials/_header.html.erb

@@ -4,7 +4,7 @@
       <span>menu</span>
     </button>
     <div class="header__logo">
-      <%= svg('marsman-template') %>
+      <a href="/"><%= svg('marsman-template') %></a>
     </div>
     <nav class="header__nav">
       <div class="header__lenguages">

source/stylesheets/application.css.scss

@@ -22,6 +22,7 @@
 @import 'blocks/box';
 @import 'blocks/btn-collapse';
 @import 'blocks/card-css';
+@import 'blocks/cookies';
 @import 'blocks/footer';
 @import 'blocks/header';
 @import 'blocks/hero';

source/stylesheets/blocks/_cookies.scss

@@ -0,0 +1,117 @@
+// Cookies frame
+
+.cookies-container {
+  display: none;
+
+  .cookies-show & {
+    display: block;
+  }
+}
+
+.cookies {
+  background-color: white;
+  padding: 15px 0px;
+  text-align: center;
+  position: fixed;
+  width: 90%;
+  max-width: 420px;
+  z-index: 1000;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: auto;
+  transform: none;
+  width: 100%;
+  max-width: 100%;
+  box-shadow: 0 0 6px 0 rgba(black, 0.1);
+
+  div {
+    @media (min-width: $screen-sm) {
+      display: inline-block;
+    }
+  }
+  .container {
+    margin: auto;
+    display: block;
+  }
+  .icon {
+    text-align: center;
+    margin-top: 25px;
+    display: none;
+    vertical-align: middle;
+    margin-bottom: 15px;
+
+    @media (min-width: $screen-sm) {
+      margin-top: auto;
+      margin-bottom: auto;
+      width: 10%;
+      display: inline-block;
+    }
+
+    @media (min-width: $screen-md) {
+      width: 7%;
+    }
+  }
+  img {
+    width: 60px;
+    height: auto;
+    display: inline-block;
+
+    @media (min-width: $screen-sm) {
+      width: 50px;
+    }
+  }
+  .message {
+    margin-bottom: 30px;
+    padding: 0 20px;
+    vertical-align: middle;
+
+    @media (min-width: $screen-sm) {
+      margin-bottom: auto;
+      padding: 0 1rem;
+      width: 70%;
+    }
+
+    @media (min-width: $screen-md) {
+      width: 73%;
+    }
+
+    p {
+      margin-bottom: 0px;
+      text-align: justify;
+    }
+  }
+  .understood {
+    text-align: center;
+    border-top: 1px solid #EEEEEE;
+
+    @media (min-width: $screen-sm) {
+      padding-top: 10px;
+      border-top: 0;
+      width: 19%;
+      text-align: right;
+    }
+
+    a {
+      margin: 10px auto;
+
+      @media (min-width: $screen-sm) {
+        margin: auto;
+      }
+    }
+  }
+}
+
+.btn-outline {
+  @media (min-width: $screen-sm) {
+    border: 2px solid $primary;
+    border-radius: 4px;
+  }
+}
+
+.btn-outline:hover {
+  @media (min-width: $screen-sm) {
+    color: white;
+    background: $primary;
+  }
+}

source/whole-page-cookies.html.erb

@@ -0,0 +1,45 @@
+---
+title: Welcome to marsman Template
+body: whole-page-cookies
+layout: basic
+---
+
+<div class="box">
+  <div class="box__header">
+    <hgroup>
+      <h1>Whole page text</h1>
+      <h4>Some information about MarsBased</h4>
+    </hgroup>
+  </div>
+  <div class="box__content">
+    <p><%= Faker::Lorem.paragraph(10) %></p>
+    <blockquote>
+    <%= Faker::Lorem.paragraph(2) %>
+    </blockquote>
+    <p><%= Faker::Lorem.paragraph(3) %></p>
+    <h2><%= Faker::ChuckNorris.fact %></h2>
+    <p><%= Faker::Lorem.paragraph(5) %></p>
+    <div class="row">
+      <div class="col-sm-6">
+        <h2><%= Faker::ChuckNorris.fact %></h2>
+        <p><%= Faker::Lorem.paragraph(5) %></p>
+        <p><%= Faker::Lorem.paragraph(2) %></p>
+        <h3></h3>
+        <ul>
+          <li><%= Faker::GameOfThrones.character %></li>
+          <li><%= Faker::GameOfThrones.character %></li>
+          <li><%= Faker::GameOfThrones.character %></li>
+        </ul>
+      </div>
+      <div class="col-sm-6">
+        <%= image_tag(Faker::LoremPixel.image("600x600", false, 'fashion')) %>
+      </div>
+    </div>
+  </div>
+</div>
+
+<style type="text/css">
+  .cookies-container {
+    display: inline;
+  }
+</style>