Refactor/change ads (#2245)

* Refactor(ads): Change codefund with carbon ads

* Refactor(carbon ads): Add style for home page

* Refactor(docs): Add style for carbon ads

Author: rarestoma

docs/app/components/AdManager.vue

@@ -1,6 +1,6 @@
 <template>
   <md-content class="ad-manager" id="ad-manager" md-theme="docs-dark">
-    <div id="code-fund" class="code-fund"></div>
+    <div id="carbon-ads" class="carbon-ads"></div>
   </md-content>
 </template>
 
@@ -9,15 +9,15 @@
     name: 'AdManager',
     methods: {
       getSponsor () {
-        let sponsorUrl = 'https://api.codefund.app/properties/60/funder.html'
 
-        if (this.$route.name !== 'home') {
-          sponsorUrl += '?theme=light'
-        }
+        let carbonScript = document.createElement('script');
 
-        this.$http.get(sponsorUrl).then(({ data }) => {
-          document.getElementById('code-fund').innerHTML = data;
-        })
+        carbonScript.setAttribute('async', '');
+        carbonScript.setAttribute('type', 'text/javascript');
+        carbonScript.setAttribute('src', '//cdn.carbonads.com/carbon.js?serve=CKYIL2QW&placement=vuematerialio');
+        carbonScript.setAttribute('id', '_carbonads_js');
+
+        document.getElementById('carbon-ads').appendChild(carbonScript);
       }
     },
     mounted () {
@@ -51,23 +51,4 @@
     background: #303030;
   }
 
-  .code-fund {
-    max-width: 175px;
-    padding: 8px;
-    display: flex;
-    flex-direction: column;
-    float: right;
-    position: relative;
-    z-index: 10;
-    font-size: 12px;
-    line-height: 1.5em;
-
-    .splash-container & {
-      max-width: 530px;
-      min-height: 100px;
-      margin: 0px auto 8px;
-      float: none;
-      background: none !important;
-    }
-  }
 </style>

docs/app/components/PageContainer.vue

@@ -115,8 +115,12 @@
     position: fixed;
   }
 
+  .ad-manager .carbon-ads{
+    background: red;
+  }
+
   @media (min-width: $ad-responsive-big) {
-    .ad-manager >>> .code-fund {
+    .ad-manager >>> .carbon-ads {
       margin: 0;
       position: fixed;
       bottom: 0;
@@ -128,7 +132,7 @@
   @media(max-width: 960px){
     .ad-manager{
       position: relative;
-      >>>.code-fund{
+      >>>.carbon-ads{
         float: none;
         margin: 0;
         display: flex;
@@ -144,3 +148,69 @@
     }
   }
 </style>
+
+<style lang="scss">
+
+@media (min-width: 960px){
+  #carbonads{
+    margin-right: 30px;
+  }
+}
+
+#carbonads {
+  display: block;
+  overflow: hidden;
+  padding: 1em;
+  max-width: 170px;
+  background: #fff;
+  text-align: center;
+  font-size: 14px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+  line-height: 1.5;
+}
+
+#carbonads a {
+  color: inherit;
+  text-decoration: none;
+}
+
+#carbonads a:hover {
+  color: inherit;
+}
+
+#carbonads span {
+  display: block;
+  overflow: hidden;
+}
+
+.carbon-img {
+  display: block;
+  margin: 0 auto 8px;
+  line-height: 1;
+}
+
+.carbon-text {
+  display: block;
+  margin-bottom: 8px;
+}
+
+.carbon-poweredby {
+  display: block;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  font-size: 10px;
+  line-height: 1;
+}
+
+@media (max-width: 576px){
+  #carbonads{
+    margin: auto;
+    margin-top: 30px;
+  }
+
+  #carbonads .carbon-poweredby{
+    left: 143px;
+  }
+
+}
+</style>

docs/app/pages/Home/Home.vue

@@ -128,30 +128,14 @@
       @media (max-width: 1690px) {
         margin: 32px 0 0 0 !important;
 
-        .code-fund {
+        .carbon-ads {
           display: flex !important;
           align-items: center;
           flex-direction: row;
           max-width: none;
           margin: 8px auto 16px;
           float: none;
 
-          .code-fund-image {
-            max-width: 175px;
-          }
-
-          .code-fund-data {
-            margin-left: 8px;
-          }
-
-          #cf{
-            width: 300px !important;
-            img{
-              float: left;
-              margin-right: 10px;
-              border-radius: 2px;
-            }
-          }
           a {
             color: #fff !important;
           }
@@ -166,4 +150,76 @@
       color: #3a3a3a
     }
   }
+
+  #carbonads {
+    max-width: 300px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+
+  #carbonads > span {
+    position: relative;
+    display: block;
+    border-radius: 4px;
+    background-color: rgba(255,255,255,.1);
+  }
+
+   #carbonads > span {
+    margin-left: 0px;
+    margin-bottom: 35px;
+  }
+
+  #carbonads .carbon-wrap {
+    display: flex;
+    position: relative;
+  }
+
+  #carbonads .carbon-img {
+    margin-right: 10px;
+    line-height: 1;
+  }
+
+  #carbonads .carbon-text {
+    margin-bottom: 12px;
+    text-decoration: none;
+    font-size: 12px;
+    line-height: 1.45;
+    text-align: left;
+  }
+
+   #carbonads .carbon-text {
+    color: #2d3748;
+    margin-top: 8px;
+  }
+
+  #carbonads .carbon-poweredby {
+    position: absolute;
+    bottom: 10px;
+    left: 142px;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: .5px;
+    font-weight: 500;
+    font-size: 8px;
+    line-height: 1;
+  }
+
+  #carbonads .carbon-poweredby {
+    color: #2d3748;
+  }
+
+  #carbonads{
+    margin: auto;
+    margin-top: 15px;
+  }
+
+  @media (max-width: 576px){
+    #carbonads{
+      margin: auto;
+      margin-top: 30px;
+    }
+
+    #carbonads .carbon-poweredby{
+      left: 143px;
+    }
+  }
 </style>