Fixed minor layout issues with ads

elsiehupp · Jul 3, 2021 · 44d58d4 · 44d58d4
1 parent 115f969
commit 44d58d4
Show file tree

Hide file tree

Showing 15 changed files with 123 additions and 41 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
@@ -15,7 +15,7 @@
                 <p class="coral-Body--XS">
                     Sponsored by
                 </p>
-                <NativeAd :adId="'iconbar-js-h3'" :key="$route.fullPath + 'ad'"/>
+                <NativeAd :adPosition="'H3 Description Desktop'" :adId="'iconbar-js-h3'" :key="$route.fullPath + 'ad'"/>
             </div>
 
         </div>
@@ -34,7 +34,10 @@
                 <div v-else class="text-and-ad-wrapper">
                     <p class="coral-Body--XL" v-html="markItDown">
                     </p>
-                    <div @click="adClick" class="single-ad mobile-ad">
+                    <div
+                        @click="adClick({position: 'H3 Description Mobile', type: 'Native'})"
+                        class="single-ad mobile-ad"
+                    >
                         <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
                     </div>
                 </div>

diff --git a/website/macos-big-sur-icons/src/components/Hero.vue b/website/macos-big-sur-icons/src/components/Hero.vue
@@ -9,7 +9,7 @@
 
 
         <div class="ad-hero mobile-hidden">
-          <NativeAd :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
+          <NativeAd :adPosition="'Hero Top'" :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
         </div>
 
         <div class="desktop-hidden m-t-20"></div>

diff --git a/website/macos-big-sur-icons/src/components/Home.vue b/website/macos-big-sur-icons/src/components/Home.vue
@@ -143,7 +143,7 @@
 
       <!-- Loading error -->
       <div v-if="false" class="waiting-wrapper">
-        <NativeAd :adId="'iconbar-js-card-grid'" :key="$route.fullPath + 'ad'"/>
+        <NativeAd :adPosition="'Loading error'" :adId="'iconbar-js-card-grid'" :key="$route.fullPath + 'ad'"/>
         <h3 class="coral-Heading--M">
           The site is temporarily down for maintenance purposes.
           <br>
@@ -256,11 +256,18 @@
           <div style="min-height: 205px; max-height:226px" class="card-hover relative coral-card">
 
             <div style="z-index: 1; height: 100%; width: 100%" class="absolute carbon-card-ad">
-              <script @click="adClick" async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
+              <script
+              @click="adClick({position: 'Icon Grid Top', type: 'Carbon'})"
+              async
+              type="application/javascript"
+              src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom"
+              id="_carbonads_js"></script>
             </div>
 
             <div style="z-index: 2" class="absolute card-grid-nativeAd">
-              <div @click="adClick" id="card-ad">
+              <div
+                @click="adClick({position: 'Icon Grid Top', type: 'Native'})"
+                id="card-ad">
               </div>
             </div>
 

diff --git a/website/macos-big-sur-icons/src/components/NativeAd.vue b/website/macos-big-sur-icons/src/components/NativeAd.vue
@@ -3,11 +3,16 @@
     <p v-if="sponsored" class="coral-Detail coral-Detail--S coral-Detail--light opacity-50">
       Sponsored
     </p>
-    <div @click="adClick" class="native-ad-wrapper" :id="adId"> </div>
+    <div
+      @click="adClick({position: adPosition, type: 'Native'})"
+      class="native-ad-wrapper"
+      :id="adId">
+    </div>
   </div>
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 
 export default {
     name:"NativeAd",
@@ -16,6 +21,7 @@ export default {
       sponsored:'',
       fullWidth:'',
       adId: '',
+      adPosition: ''
     },
 
     components:{},
@@ -113,12 +119,7 @@ export default {
     },
 
     methods:{
-      adClick(){
-        let parent = this
-        window.plausible("adClick", {props: {
-          path: parent.$router.currentRoute.name, 
-        }})
-      }
+    ...mapActions(['adClick']),
     }
 }
 </script>

diff --git a/website/macos-big-sur-icons/src/components/StickyBanner.vue b/website/macos-big-sur-icons/src/components/StickyBanner.vue
@@ -10,7 +10,9 @@
         </svg>
 
           <div style="z-index: 2" class="card-grid-nativeAd">
-            <div @click="adClick" id="card-ad2">
+            <div
+              @click="adClick({position: 'Bottom Sticky Banner', type: 'Native'})"
+              id="card-ad2">
             </div>
           </div>
 
@@ -75,7 +77,7 @@ export default {
     },
 
     methods:{
-      ...mapActions(['showEl', 'setSelectedIcon', 'addClickCount']),
+      ...mapActions(['showEl', 'setSelectedIcon', 'addClickCount', 'adClick']),
 
       getAd(el){
         try {
@@ -105,13 +107,13 @@ export default {
         document.getElementById("stickyBanner").remove()
       },
 
-      adClick(){
-        let parent = this
-        window.plausible("adClick", {props: {
-          path: parent.$router.currentRoute.name,
-          position: "Bottom Sticky Banner"
-        }})
-      }
+      // adClick(){
+      //   let parent = this
+      //   window.plausible("adClick", {props: {
+      //     path: parent.$router.currentRoute.name,
+      //     position: "Bottom Sticky Banner"
+      //   }})
+      // }
     }
 }
 </script>

diff --git a/website/macos-big-sur-icons/src/components/UserIconGrid.vue b/website/macos-big-sur-icons/src/components/UserIconGrid.vue
@@ -5,12 +5,20 @@
 
       <div class="card-wrapper card-hover coral-card">
 
-        <div @click="adClick" class="absolute card-grid-nativeAd" style="z-index: 2; height: 100%">
+        <div 
+          @click="adClick({position: 'User Icon Grid', type: 'Native'})" 
+          class="absolute card-grid-nativeAd"
+          style="z-index: 2; height: 100%"
+        >
           <div id="card-ad">
           </div>
         </div>
 
-        <div @click="adClick"  class="absolute" style="z-index: 1; height: 100%">
+        <div 
+          @click="adClick({position: 'User Icon Grid', type: 'Carbon'})"  
+          class="absolute" 
+          style="z-index: 1; height: 100%"
+        >
           <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
         </div>
 

diff --git a/website/macos-big-sur-icons/src/components/app.less b/website/macos-big-sur-icons/src/components/app.less
@@ -182,8 +182,14 @@ select{
     height: fit-content !important;
 }
 
+.lgbt-wrapper .card-no-ad{
+    position: relative;
+    top: 0px;
+    height: fit-content;
+}
+
 .lgbt-wrapper .support-page{
-    transform: translateX(-50%);
+    transform: translate(-50%, 0%);
 }
 
 .coral--dark .instructions-item{
@@ -984,12 +990,6 @@ coral-buttongroup button{
     color: var( --coral-dark-border);
 }
 
-.card-no-ad{
-    position: relative;
-    top: 0px;
-    height: fit-content;
-}
-
 .card-hover{
     transition: 0.2s;
 }

diff --git a/website/macos-big-sur-icons/src/components/carbon.css b/website/macos-big-sur-icons/src/components/carbon.css
@@ -157,9 +157,17 @@ height: -moz-fit-content;
 .resources-card-ad{
     height: 100%;
     min-width: calc(100vw / 3 - 18vw);
+    min-height: 140px;
     /* max-width: 320px; */
 }
 
+.resources-card-ad .card-no-ad{
+        width: 100%;
+    left: 0px;
+    top: 50%;
+    position: absolute;
+}
+
 .resources-card-ad .carbon-text{
     padding: 0px
 }

diff --git a/website/macos-big-sur-icons/src/store/store.js b/website/macos-big-sur-icons/src/store/store.js
@@ -537,10 +537,13 @@ export default new Vuex.Store({
       store.commit('pushUserData',  userProps)
     },
 
-    adClick(store){
+    adClick(store, data){
       let parent = this
+      console.log(data);
       window.plausible("adClick", {props: {
         path: globalThis.router.currentRoute.name,
+        position: data.adPosition,
+        type: data.adType
       }})
     },
 

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,13 @@
 
         <section class="p-t-30 p-b-10">
 
-          <NativeAd :adId="'iconbar-js-blogHome'" class="width-fit m-auto" :sponsored="true" :key="$route.fullPath + 'ad'"/>
+          <NativeAd
+            :adPosition="'Hero Top'"
+            :adId="'iconbar-js-blogHome'"
+            class="width-fit m-auto"
+            :sponsored="true"
+            :key="$route.fullPath + 'ad'"
+          />
 
           <H3-Description :text="subscribe"/>
 
@@ -36,8 +42,15 @@
           </router-link>
         </div>
 
-        <div class="single-ad m-b-20 p-b-50 p-t-30">
-          <script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
+        <div
+          @click="adClick({position: 'Bottom Page', type: 'Carbon'})"
+          class="single-ad m-b-20 p-b-50 p-t-30"
+        >
+          <script
+            async="async"
+            type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
+            id="_carbonads_js">
+          </script>
         </div>
 
       </div>

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
+            :adPosition="'Blog post top desktop'"
             :adId="'iconbar-js-blogPost'"
             :sponsored="true"
             :fullWidth="false"
@@ -43,7 +44,12 @@
 
 
         <div class="single-ad p-b-20 p-t-30">
-          <script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
+          <script
+            @click="adClick({position: 'Bottom Page', type: 'Carbon'})"
+            async="async"
+            type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
+            id="_carbonads_js">
+          </script>
         </div>
 
 

diff --git a/website/macos-big-sur-icons/src/views/Dashboard.vue b/website/macos-big-sur-icons/src/views/Dashboard.vue
@@ -126,6 +126,18 @@
 
                 <div class="p-t-15 p-b-15">
                   <button @click="approveIcon(icon)" class="coral-btn coral-btn-primary">Approve</button>
+
+                   <coral-splitbutton>
+                    <button class="coral-btn coral-btn-primary" is="coral-button" coral-splitbutton-action="">Action</button>
+                    <button id="target1" type="button" is="coral-button" icon="ChevronDown" coral-splitbutton-trigger=""></button>
+                  </coral-splitbutton>
+                  <coral-popover target="#target1" placement="bottom">
+                    <coral-buttonlist>
+                      <button is="coral-buttonlist-item">Second Action</button>
+                      <button is="coral-buttonlist-item">Third Action</button>
+                    </coral-buttonlist>
+                  </coral-popover>
+
                 </div>
 
               </div>
@@ -159,7 +171,7 @@ const currentUser = Parse.User.current(); // Check if user is currently logged i
 
 let lastVisible
 
-const docLimit = 500
+const docLimit = 200
 
 export default {
   

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
+            :adPosition="'Under image Desktop'"
             :adId="'iconbar-js-resourceItem'"
             class="m-t-20"
             sponsored="true"
@@ -71,7 +72,13 @@
           </div>
 
           <div class="card-hover relative coral-card resources-card-ad">            
-              <script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
+              <script
+                @click="adClick({position: 'Icon Grid Top', type: 'Carbon'})"
+                async="async"
+                type="application/javascript"
+                src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
+                id="_carbonads_js">
+              </script>
             <div class="card-no-ad">
               <p class="coral-Body--M">
                 Support for .icns is on my (long) todo list.

diff --git a/website/macos-big-sur-icons/src/views/Resources.vue b/website/macos-big-sur-icons/src/views/Resources.vue
@@ -18,8 +18,15 @@
           :step='resource'
         />
 
-        <div class="card-hover relative coral-card resources-card-ad">            
-            <script @click="adClick" async="async" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom" id="_carbonads_js"></script>
+        <div
+          class="card-hover relative coral-card resources-card-ad"
+          @click="adClick({position: 'Icon Grid Bottom', type: 'Carbon'})"
+        >
+            <script
+              async="async"
+              type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&amp;placement=macosiconscom"
+              id="_carbonads_js">
+            </script>
           <a
               class="card-no-ad relative"
               href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"

diff --git a/website/macos-big-sur-icons/src/views/UserProfile.vue b/website/macos-big-sur-icons/src/views/UserProfile.vue
@@ -139,7 +139,12 @@
         v-else
       >
         <div style="z-index: 2; height: 100%; min-height: 210px" class="card-wrapper card-hover coral-card">
-          <script @click="adClick" type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js2"></script>
+          <script
+            @click="adClick({position: 'Icon Grid Top', type: 'Native'})"
+            type="application/javascript"
+            src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom"
+            id="_carbonads_js2">
+          </script>
         </div>
         <UserIconCardLoading v-for="num in placeholderCount" :key="num+Math.floor(Math.random() * 10000000 + 1)" :icon="iconsCount"/>
       </div>