fix: avoid layout shift due to ads

vuejs · Dec 5, 2020 · 618d97f · 618d97f
1 parent 9d64538
commit 618d97f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
@@ -37,7 +37,7 @@
       <template #top>
         <slot name="page-top-ads">
           <CarbonAds
-            v-if="theme.carbonAds"
+            v-if="theme.carbonAds && theme.carbonAds.carbon"
             :key="'carbon' + page.relativePath"
             :code="theme.carbonAds.carbon"
             :placement="theme.carbonAds.placement"

diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
@@ -26,14 +26,14 @@ 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);
 }
 
 .carbon-ads::after {
   clear: both;
   display: block;
-  content: "";
+  content: '';
 }
 
 @media (min-width: 420px) {
@@ -49,6 +49,13 @@ onMounted(() => {
   }
 }
 
+@media (max-width: 420px) {
+  .carbon-ads {
+    /* Avoid layout shift */
+    height: 105px;
+  }
+}
+
 @media (min-width: 1400px) {
   .carbon-ads {
     position: fixed;
@@ -62,7 +69,7 @@ onMounted(() => {
 
 .carbon-ads ::v-deep(.carbon-img) {
   float: left;
-  margin-right: .75rem;
+  margin-right: 0.75rem;
   max-width: 100px;
   border: 1px solid var(--c-divider);
 }