refactor: keep carbon ads async

vuejs · Dec 5, 2020 · 178d76e · 178d76e
1 parent 026896a
commit 178d76e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 20 deletions.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -34,12 +34,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>
@@ -75,8 +79,9 @@ import NavBar from './components/NavBar.vue'
 import Home from './components/Home.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
-// could be async but that would cause layout shifts
-import CarbonAds from './components/CarbonAds.vue'
+const CarbonAds = defineAsyncComponent(
+  () => import('./components/CarbonAds.vue')
+)
 const BuySellAds = defineAsyncComponent(
   () => import('./components/BuySellAds.vue')
 )
@@ -145,3 +150,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
@@ -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;
   }