From 67e80c97c1e4de046a115ec44a9a39aebedcbe6a Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Sat, 5 Dec 2020 17:35:44 +0100
Subject: [PATCH] refactor: keep carbon ads async

---
 src/client/theme-default/Layout.vue           | 45 ++++++++++++++++---
 .../theme-default/components/CarbonAds.vue    | 13 ------
 2 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index b049f91c0e9f..e0748d27de18 100644
--- a/src/client/theme-default/Layout.vue
+++ b/src/client/theme-default/Layout.vue
@@ -36,12 +36,16 @@
     <Page v-else>
       <template #top>
         <slot name="page-top-ads">
-          <CarbonAds
+          <div
+            id="ads-container"
             v-if="theme.carbonAds && theme.carbonAds.carbon"
-            :key="'carbon' + page.relativePath"
-            :code="theme.carbonAds.carbon"
-            :placement="theme.carbonAds.placement"
-          />
+          >
+            <CarbonAds
+              :key="'carbon' + page.relativePath"
+              :code="theme.carbonAds.carbon"
+              :placement="theme.carbonAds.placement"
+            />
+          </div>
         </slot>
         <slot name="page-top" />
       </template>
@@ -150,3 +154,34 @@ const pageClasses = computed(() => {
   ]
 })
 </script>
+
+<style>
+#ads-container {
+  margin: 0 auto;
+}
+
+@media (min-width: 420px) {
+  #ads-container {
+    position: relative;
+    right: 0;
+    float: right;
+    margin: -8px -8px 24px 24px;
+    width: 146px;
+  }
+}
+
+@media (max-width: 420px) {
+  #ads-container {
+    /* Avoid layout shift */
+    height: 105px;
+  }
+}
+
+@media (min-width: 1400px) {
+  #ads-container {
+    position: fixed;
+    right: 8px;
+    bottom: 8px;
+  }
+}
+</style>
diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
index 94814564c8e2..d841330ddc3b 100644
--- a/src/client/theme-default/components/CarbonAds.vue
+++ b/src/client/theme-default/components/CarbonAds.vue
@@ -38,30 +38,17 @@ onMounted(() => {
 
 @media (min-width: 420px) {
   .carbon-ads {
-    position: relative;
-    right: -8px;
     z-index: 1;
     float: right;
     margin: -8px -8px 24px 24px;
     padding: 8px;
     width: 146px;
-    max-width: 100%;
-  }
-}
-
-@media (max-width: 420px) {
-  .carbon-ads {
-    /* Avoid layout shift */
-    height: 105px;
   }
 }
 
 @media (min-width: 1400px) {
   .carbon-ads {
-    position: fixed;
-    top: auto;
     right: 8px;
-    bottom: 8px;
     float: none;
     margin: 0;
   }