Merge pull request #91 from Jorgeural/feat/88

Feat/88

Author: baumannzone

src/assets/style/base/base.styl

@@ -13,3 +13,14 @@ html
 
 body 
   box-sizing: border-box;
+
+  &::-webkit-scrollbar
+    width: 10px;
+
+  &::-webkit-scrollbar-track
+    background: rgba(0, 0, 0, 0.2)
+
+  &::-webkit-scrollbar-thumb
+    border-radius: 10px
+    background: rgba(0, 0, 0, 0.5)
+

src/components/CookieConsent/Index.vue

@@ -0,0 +1,77 @@
+<template>
+  <div
+    v-show="!cookiesConsent"
+    class="cookie-consent">
+    <div class="cookie-consent__text-box">
+      <span>This website uses cookies to ensure you get the best experience on our website.
+        <a
+          class="cookie-consent__link"
+          href="https://cookiesandyou.com/"
+          target="_blank">Learn More
+        </a>
+      </span>
+    </div>
+    <div class="cookie-consent__btn-box">
+      <button 
+        class="cookie-consent__btn"
+        @click="consentCookies()">Got It
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      cookiesConsent: true
+    };
+  },
+  created () {
+    // Este if previene que se ejecute en server render para poder tener acceso al objeto window del browser
+    if (process.browser) {
+      this.checkLogalStorage()
+    }
+  },
+   methods: {
+    consentCookies() {
+      localStorage.setItem("cookiesConsent", true);
+      this.checkLogalStorage()
+    },
+    checkLogalStorage() {
+      this.cookiesConsent = localStorage.cookiesConsent ? true : false
+    }
+  }
+};
+</script>
+
+<style lang="stylus" scoped>
+.cookie-consent 
+    position: fixed;
+    width: 100%;
+    height: 10%;
+    top: 90%;
+    color: #fff;
+    background-color: #003ea5;
+    z-index: 90;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    &__link
+      text-decoration none
+      color #fff
+      font-weight 600
+
+      &:hover
+        text-decoration underline
+
+    &__btn
+      padding: 10px 25px
+      font-size 16px
+      border: 1px solid #fff
+      transition all 0.5s
+
+      &:hover
+        cursor pointer
+</style>

src/components/HomeGuilds/HomeGuildsCard.vue

@@ -9,7 +9,8 @@
 
       <v-card-title primary-title>
         <div>
-          <h3 class="headline mb-0">{{ title }}</h3>
+          <h3 class="headline mb-0 text-sm-center">{{ title }}</h3>
+          <hr class="mb-2">
           <div> {{ description }}</div>
         </div>
       </v-card-title>
@@ -55,6 +56,7 @@ export default {
 
 
 <style lang="stylus" scoped>
+
 .guilds-card
   height 95%
   background-color rgba(#fff, 0.75)
@@ -68,5 +70,6 @@ export default {
 
   &__img
     min-height 200px
+    box-shadow 0px 5px 15px rgba(0,0,0, .25)
 
 </style>

src/components/HomeTeam/HomeTeamCard.vue

@@ -11,10 +11,12 @@
       <a
         v-if="github"
         :href="github"
+        title="github"
         target="_blank"> <i class="fab fa-github team-card__icon" /></a>
       <a
         v-if="twitter"
         :href="twitter"
+        title="twitter"
         target="_blank"><i class="fab fa-twitter team-card__icon" /></a>
     </div>
   </div>

src/layouts/default.vue

@@ -1,5 +1,6 @@
 <template>
   <v-app id="app">
+    <cookie-consent />
     <v-navigation-drawer
       :clipped="clipped"
       v-model="drawer"
@@ -73,11 +74,13 @@
 <script>
 import HomeHeader from "~/components/HomeHeader/Index.vue";
 import HomeFooter from "~/components/HomeFooter/Index.vue";
+import CookieConsent from "~/components/CookieConsent/Index.vue";
 
 export default {
   components: {
     HomeHeader,
-    HomeFooter
+    HomeFooter,
+    CookieConsent
   },
   data() {
     return {
@@ -97,32 +100,8 @@ export default {
     }
   },
   created() {
-    this.cookies();
   },
   methods: {
-    cookies() {
-      // Este if previene que se ejecute en server render para poder tener acceso al objeto window del browser
-      if (process.browser) {
-        window.cookieconsent.initialise({
-        container: document.getElementById("app"),
-        palette: {
-          popup: { background: "#003ea5" },
-          button: { background: "transparent", border: "#fff", text: "#fff", padding: '5px 40px' }
-        },
-        revokable: true,
-        onStatusChange: function(status) {
-          console.log(
-            this.hasConsented() ? "enable cookies" : "disable cookies"
-          );
-        },
-        law: {
-          regionalLaw: false
-        },
-        location: true
-      });
-      }
-      
-    }
   }
 };
 </script>

src/nuxt.config.js

@@ -17,10 +17,8 @@ module.exports = {
       { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
       { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' },
       { rel: 'stylesheet', href: "https://use.fontawesome.com/releases/v5.4.1/css/all.css", integrity: "sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz", crossorigin: "anonymous" },
-      { rel: 'stylesheet', href: "https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" }
     ],
     script: [
-      { src: 'https://cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js', async: true }
     ]
   },