fix: avoid layout shift due to ads (#176)

vuejs · Jan 22, 2021 · 78b026c · 78b026c
1 parent 5190604
commit 78b026c
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 15 deletions.
diff --git 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
-            v-if="theme.carbonAds"
-            :key="'carbon' + page.relativePath"
-            :code="theme.carbonAds.carbon"
-            :placement="theme.carbonAds.placement"
-          />
+          <div
+            id="ads-container"
+            v-if="theme.carbonAds && theme.carbonAds.carbon"
+          >
+            <CarbonAds
+              :key="'carbon' + page.relativePath"
+              :code="theme.carbonAds.carbon"
+              :placement="theme.carbonAds.placement"
+            />
+          </div>
         </slot>
         <slot name="page-top" />
       </template>
@@ -154,3 +158,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
@@ -26,21 +26,19 @@ onMounted(() => {
   border-radius: 4px;
   margin: 0 auto;
   max-width: 280px;
-  font-size: .75rem;
-  background-color: rgba(255, 255, 255, .8);
+  font-size: 0.75rem;
+  background-color: rgba(255, 255, 255, 0.8);
   min-height: 105.38px; /* avoid layout shift on mobile */
 }
 
 .carbon-ads::after {
   clear: both;
   display: block;
-  content: "";
+  content: '';
 }
 
 @media (min-width: 420px) {
   .carbon-ads {
-    position: relative;
-    right: -8px;
     z-index: 1;
     float: right;
     margin: -8px -8px 24px 24px;
@@ -53,18 +51,15 @@ onMounted(() => {
 
 @media (min-width: 1400px) {
   .carbon-ads {
-    position: fixed;
-    top: auto;
     right: 8px;
-    bottom: 8px;
     float: none;
     margin: 0;
   }
 }
 
 .carbon-ads :deep(.carbon-img) {
   float: left;
-  margin-right: .75rem;
+  margin-right: 0.75rem;
   max-width: 100px;
   border: 1px solid var(--c-divider);
 }