Removed top ad on home page and added ad to sticky banner

website/macos-big-sur-icons/src/components/Hero.vue

@@ -8,9 +8,9 @@
     <div class="hero-text-area" v-if="iconsEmpty">    
 
 
-        <div class="ad-hero mobile-hidden">
+        <!-- <div class="ad-hero mobile-hidden">
           <NativeAd :adId="'iconbar-js-hero'" :key="$route.fullPath + 'ad'"/>
-        </div>
+        </div> -->
 
         <div class="desktop-hidden m-t-20"></div>
 

website/macos-big-sur-icons/src/components/StickyBanner.vue

@@ -4,45 +4,43 @@
 
       <div class="lgbt-wrapper">
 
-        <svg @click="closeBanner" class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" height="12" viewBox="0 0 12 12" width="12">
+        <svg @click="closeBanner" style="z-index: 9; width: 12px; height: 12px" class="icon icon-absolute" xmlns="http://www.w3.org/2000/svg" height="12" width="12" viewBox="0 0 12 12">
           <title>CrossLarge</title>
           <rect id="ToDelete" fill="#ff13dc" opacity="0" width="12" height="12" /><path d="M11.69673,10.28266,7.41406,6l4.28267-4.28266A.9999.9999,0,1,0,10.28266.30327L6,4.58594,1.71734.30327A.9999.9999,0,1,0,.30327,1.71734L4.58594,6,.30327,10.28266a.9999.9999,0,1,0,1.41407,1.41407L6,7.41406l4.28266,4.28267a.9999.9999,0,1,0,1.41407-1.41407Z" />
         </svg>
-
-        <a @click="addClickCount({id:'4KlGUMi162', appName: 'Pride'})" href="https://media.macosicons.com/parse/files/macOSicons/69812d83d48551a9287933774347fe7a_Pride.icns">
-          <img class="lgbt-img" :src="imgs.lgbt" alt="">
-        </a>
 
-        <div class="lgbt-text">
-
-          <!-- <h2 class="coral-Heading--S m-5">
-            Support
-          </h2> -->
-
-          <p class="coral-Body--M">
-            50% of the ad revenue and donations this month will be donated to
-            <a rel="noopener"
-              class="coral-Link"
-              href="https://www.stonewall.org.uk/"
-              target="_blank"
-            > 
-              Stonewall.
-            </a>
-          </p>
-
-          <a rel="noopener"
-            class="coral-Link"
-            href="https://www.paypal.com/donate?hosted_button_id=5PMNX4DPW83KN"
+          <div style="z-index: 2" class="card-grid-nativeAd">
+            <div @click="adClick" id="card-ad2">
+            </div>
+          </div>
+
+          <a
+            class="card-no-ad relative"
+            href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+            rel="noopener"
             target="_blank"
-
+            style="width: 100%; left: 0;"
+            @click="logDonation('support-message')"
           >
-            <button @click="adClick" is="coral-button" variant="CTA">
-                Donate now
-            </button>
+            <div class="support-page">
+              <h3 class="coral-Heading--S m-0">
+                Support this page
+              </h3>
+              <p class="coral-Body--S m-0">
+                Please consider disabling your ad blocker or making a
+                <a  
+                  rel="noopener"
+                  class="coral-Link"
+                  target="_blank"
+                  href="https://www.paypal.com/donate/?hosted_button_id=5PMNX4DPW83KN"
+                >
+                  donation 
+                </a>
+                to support this project.
+              </p>
+            </div>
           </a>
 
-        </div>
-
       </div>
 
     </div>
@@ -73,11 +71,36 @@ export default {
     
     mounted: function(){
       let parent = this
+      parent.getAd()
     },
 
     methods:{
       ...mapActions(['showEl', 'setSelectedIcon', 'addClickCount']),
 
+      getAd(el){
+        try {
+          if (typeof _bsa !== 'undefined') {
+            _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
+            {
+              target: '#card-ad2',
+              template: `
+                  <a href="##statlink##" target="_blank" rel="noopener sponsored" id="customAd" class="bsa-link">
+                  <div class="bsa-img-wrapper" style="background-color: ##backgroundColor##;">
+                    <div class="bsa-icon" style="background-image: url(##logo##);"></div>
+                  </div>
+                  <div class="text-ad-wrapper">
+                    <img style="background: ##backgroundColor##" src="##image##">
+                    <div class="bsa-desc">##description##</div>
+                  </div>
+                  </a>
+                `
+              }
+            );
+          }
+        } catch (error) {
+        }
+      },
+
       closeBanner(){
         document.getElementById("stickyBanner").remove()
       },
@@ -143,7 +166,8 @@ export default {
     width: 100%;
     max-width: 430px !important;
     max-height: 180px !important;
-    padding: 15px 10px 20px 10px;
+    padding: 5px;
+    /* padding: 15px 10px 20px 10px; */
     bottom: 20px;
     right: 20px;
     z-index: 9;

website/macos-big-sur-icons/src/components/app.less

@@ -957,7 +957,7 @@ coral-buttongroup button{
 }
 
 .card-no-ad{
-    position: absolute;
+    position: relative;
     top: 0px;
     height: 100%
 }

website/macos-big-sur-icons/src/components/carbon.css

@@ -383,7 +383,7 @@ height: -moz-fit-content;
 .card-grid-nativeAd .bsa-link{
     padding: 10px 0px;
     height: fit-content;
-height: -moz-fit-content;
+    height: -moz-fit-content;
     height: -moz-fit-content;
     display: grid;
     grid-template-rows: 88px auto;
@@ -395,6 +395,22 @@ height: -moz-fit-content;
     gap: 10px;
 }
 
+#stickyBanner .card-grid-nativeAd .bsa-link{
+    padding: 10px 20px;
+    height: fit-content;
+    height: -moz-fit-content;
+    height: -moz-fit-content;
+    display: flex;
+    grid-template-rows: 88px auto;
+    background-color: var(--coral-dark-card);
+    border: 0px;
+    font-size: 13px;
+    gap: 10px;
+    position: absolute;
+    width: calc(100% - 60px);
+    /* transform: translateY(0px); */
+}
+
 .coral--dark .card-grid-nativeAd .bsa-link{
     color: white;
 }