Fixed ad issue

elrumo · May 24, 2021 · 9facb22 · 9facb22
1 parent 2dacaaf
commit 9facb22
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 28 deletions.
diff --git a/website/macos-big-sur-icons/src/components/H3_Description.vue b/website/macos-big-sur-icons/src/components/H3_Description.vue
@@ -18,7 +18,7 @@
                     Sponsored by
                 </p>
 
-                <NativeAd :key="$route.fullPath + 'ad'"/>
+                <NativeAd :adId="'iconbar-js-h3'" :key="$route.fullPath + 'ad'"/>
                 <!-- <div class="" id="iconbar-js"></div> -->
             </div>
             <!-- <div class="text-and-ad-wrapper">

diff --git a/website/macos-big-sur-icons/src/components/Hero.vue b/website/macos-big-sur-icons/src/components/Hero.vue
@@ -12,7 +12,7 @@
           <!-- <p class="coral-Body--XS">
             Sponsored by
           </p> -->
-          <NativeAd :key="$route.fullPath + 'ad'"/>
+          <NativeAd :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
         </div>
 
         <div class="desktop-hidden m-t-20"></div>
@@ -218,9 +218,11 @@ export default {
 }
 
 #iconbar-js{
+  height: 42px;
+  overflow: hidden;
   transition: 0.3s;
-  height: 40px;
 }
+
 #iconbar-js:hover{
   transform: translateY(-3px);
   opacity: 1;

diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -116,7 +116,7 @@
     <!-- Loading error -->
       <div v-if="loadingError" class="waiting-wrapper">
 
-        <NativeAd :key="$route.fullPath + 'ad'"/>
+        <NativeAd :adId="'iconbar-js-card-grid'" :key="$route.fullPath + 'ad'"/>
         <h3 class="coral-Heading--M">
           The site is temporarily down for maintenance purposes.
           <br>
@@ -142,10 +142,10 @@
 
     <!-- Icon list when no loading error-->
         <div v-if="!loadingError" class="icon-list-area p-t-20 p-b-50 content-wrapper-regular">
-          
-          <div style="overflow: visible" class="card-hover relative coral-card">
+
+          <div class="card-hover relative coral-card">
 
-            <div style="z-index: 1; height: 100%" class="absolute">
+            <div style="z-index: 1; height: 100%; width: 100%" class="absolute carbon-card-ad">
               <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
             </div>
 
@@ -182,9 +182,8 @@
             </a>
 
           </div>
-
-          <UserIconCard v-for="icon in search" :key="icon.icnsUrl" :icon="icon" :isAdmin="isAdmin" :isMacOs="isMacOs"/>
 
+          <UserIconCard v-for="icon in search" :key="icon.icnsUrl" :icon="icon" :isAdmin="isAdmin" :isMacOs="isMacOs"/>
         </div>
 
     </section>
@@ -210,8 +209,10 @@ import dotenv from 'dotenv'; // Used to access env varaibles
 dotenv.config()
 
 // TODO: remove credentials
-const VUE_APP_PARSE_APP_ID = process.env.VUE_APP_PARSE_APP_ID
-const VUE_APP_PARSE_JAVASCRIPT_KEY = process.env.VUE_APP_PARSE_JAVASCRIPT_KEY
+const VUE_APP_PARSE_APP_ID = "macOSicons"
+const VUE_APP_PARSE_JAVASCRIPT_KEY = "macOSicons"
+// const VUE_APP_PARSE_APP_ID = process.env.VUE_APP_PARSE_APP_ID
+// const VUE_APP_PARSE_JAVASCRIPT_KEY = process.env.VUE_APP_PARSE_JAVASCRIPT_KEY
 
 Parse.initialize(VUE_APP_PARSE_APP_ID, VUE_APP_PARSE_JAVASCRIPT_KEY)
 Parse.serverURL = 'https://media.macosicons.com/parse'

diff --git a/website/macos-big-sur-icons/src/components/NativeAd.vue b/website/macos-big-sur-icons/src/components/NativeAd.vue
@@ -1,10 +1,9 @@
 <template>
-  <div :class="{fullWidth: fullWidth, 'mobile-hidden': true,}">
+  <div :class="{fullWidth: fullWidth, 'mobile-hidden': true}">
     <p v-if="sponsored" class="coral-Detail coral-Detail--S coral-Detail--light opacity-50">
       Sponsored
     </p>
-    <div @click="adClick" class="" id="iconbar-js">
-    </div>
+    <div @click="adClick" class="native-ad-wrapper" :id="adId"> </div>
   </div>
 </template>
 
@@ -15,7 +14,8 @@ export default {
 
     props:{
       sponsored:'',
-      fullWidth:''
+      fullWidth:'',
+      adId: '',
     },
 
     components:{},
@@ -28,15 +28,16 @@ export default {
     
     mounted: function(){
       let parent = this
+      var adId = parent.adId
 
       function getAd(el){
         try {
           if (typeof _bsa !== 'undefined' && !parent.isAd) {
             _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
             {
-              target: '#iconbar-js',
+              target: '#'+adId,
               template: `
-                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="customAd" class="bsa-link coral-card">
+                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="`+adId+`customAd" class="bsa-link coral-card">
                   <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
                   <div class="bsa-desc">##company## - ##tagline##</div>
                   </a>
@@ -48,12 +49,14 @@ export default {
         }
       }
       
+      getAd()
+
       var attempts = 0       
       function adExist(){
-        var adExists = document.getElementById("iconbar-js").children.length
+        var adExists = document.getElementById(adId).children.length
         console.log();
         setTimeout(() => {
-          if (attempts >= 4) return;
+          if (attempts >= 15) return;
           if (adExists == 0) {
             try {
               attempts++
@@ -67,10 +70,10 @@ export default {
             }
           } else return
 
-        }, 800);
+        }, 1500);
       }
 
-      let el = document.getElementById("customAd")
+      let el = document.getElementById(adId+"customAd")
 
       window.BSANativeCallback = (a) => {
         const total = a.ads.length;
@@ -80,8 +83,6 @@ export default {
         }
       }
 
-      // getAd(el)
-
       if (!parent.isAd) {
           // // console.log(parent.isAd);
           // setTimeout(() =>{
@@ -92,6 +93,23 @@ export default {
         adExist()
       }
 
+      setTimeout(() =>{
+        let nodeList = document.querySelector("#"+adId).children
+
+        nodeList.forEach((el)=> {
+          let newNodeList = document.querySelector("#"+adId).children
+
+          if(newNodeList.length > 1){
+            console.log(newNodeList.length);
+            el.parentNode.removeChild(el);
+          } else{
+            console.log(newNodeList.length);
+            return
+          }
+
+        });
+      }, 1200)
+
     },
 
     methods:{

diff --git a/website/macos-big-sur-icons/src/components/carbon.css b/website/macos-big-sur-icons/src/components/carbon.css
@@ -294,6 +294,11 @@
     overflow: hidden;
 }
 
+.native-ad-wrapper{
+    overflow: hidden;
+    height: 42px;
+}
+
 .icon-list-area .carbon-img img {
     width: auto;
     height: 100%;
@@ -316,7 +321,7 @@
     grid-template-rows: auto 19px;
     gap: 5px;
     margin: auto;
-    max-height: 180px;
+    max-height: 200px;
 }
 
 .icon-list-area #carbonads span {
@@ -343,6 +348,11 @@
 }
 
 
+.carbon-card-ad > div{
+    position: absolute;
+    top: 0px;
+}
+
 /* card-grid-nativeAd START */
 /* //////////////////////////////////// */
 

diff --git a/website/macos-big-sur-icons/src/views/BlogHome.vue b/website/macos-big-sur-icons/src/views/BlogHome.vue
@@ -6,7 +6,7 @@
 
         <section class="p-t-30 p-b-10">
 
-          <NativeAd class="width-fit m-auto" :sponsored="true" :key="$route.fullPath + 'ad'"/>
+          <NativeAd :adId="'iconbar-js-blogHome'" class="width-fit m-auto" :sponsored="true" :key="$route.fullPath + 'ad'"/>
 
           <H3-Description :text="subscribe"/>
 

diff --git a/website/macos-big-sur-icons/src/views/BlogPost.vue b/website/macos-big-sur-icons/src/views/BlogPost.vue
@@ -26,6 +26,7 @@
 
         <div class="single-ad mobile-ad p-b-10">
           <NativeAd
+            :adId="'iconbar-js-blogPost'"
             :sponsored="true"
             :fullWidth="false"
             :key="$route.fullPath + 'ad'"

diff --git a/website/macos-big-sur-icons/src/views/ResourceView.vue b/website/macos-big-sur-icons/src/views/ResourceView.vue
@@ -25,6 +25,7 @@
             <img :src="resourceItem.feature_image"/>
           </figure>
           <NativeAd
+            :adId="'iconbar-js-resourceItem'"
             class="m-t-20"
             sponsored="true"
             :key="$route.fullPath + 'ad'"

diff --git a/website/macos-big-sur-icons/src/views/UserProfile.vue b/website/macos-big-sur-icons/src/views/UserProfile.vue
@@ -154,7 +154,6 @@
 import IconUI from '@/components/IconUI.vue';
 import UserIconGrid from '@/components/UserIconGrid.vue';
 import UserIconCardLoading from '@/components/UserIconCardLoading.vue';
-import NativeAd from "@/components/NativeAd.vue";
 
 import Parse from 'parse'
 import { mapGetters, mapActions } from 'vuex'
@@ -166,8 +165,7 @@ export default {
   components: {
       IconUI,
       UserIconGrid,
-      UserIconCardLoading,
-      NativeAd
+      UserIconCardLoading
   },
 
   data(){