Merge pull request #169 from nypublicradio/mwalsh/ad-class-names

Rename class name for htl ad divs so they can't affect htl's script
nypublicradio · Aug 2, 2021 · 9ab9908 · 9ab9908
2 parents ef39900 + c6f0330
commit 9ab9908
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/components/Article.vue b/components/Article.vue
@@ -126,7 +126,7 @@
         />
       </div>
 
-      <div v-if="!article.sensitiveContent" class="htlad-interior_midpage_2 htl-ad mod-break-margins mod-ad-disclosure" />
+      <div v-if="!article.sensitiveContent" class="htlad-interior_midpage_2 ad-div mod-break-margins mod-ad-disclosure" />
 
       <div
         v-if="!article.disableComments"
@@ -510,7 +510,7 @@ export default {
   },
   updated () {
     if (this.article && this.$refs['article-body'] && !this.article.sensitiveContent) {
-      insertAdDiv('insertedAd', this.$refs['article-body'].$el, { classNames: ['htlad-interior_midpage_1', 'htl-ad', 'mod-break-margins', 'mod-ad-disclosure'] })
+      insertAdDiv('insertedAd', this.$refs['article-body'].$el, { classNames: ['htlad-interior_midpage_1', 'ad-div', 'mod-break-margins', 'mod-ad-disclosure'] })
     }
   },
   async mounted () {

diff --git a/components/SectionPage.vue b/components/SectionPage.vue
@@ -91,8 +91,8 @@
               class="u-border-accent u-hide-until--m u-space--double--bottom"
               aria-hidden="true"
             >
-            <div v-if="nuggetIndex === 0" key="interior_midpage_1" class="htlad-interior_midpage_1 htl-ad mod-break-margins mod-ad-disclosure" />
-            <div v-else key="interior_midpage_repeating" class="htlad-interior_midpage_repeating htl-ad mod-break-margins mod-ad-disclosure" />
+            <div v-if="nuggetIndex === 0" key="interior_midpage_1" class="htlad-interior_midpage_1 ad-div mod-break-margins mod-ad-disclosure" />
+            <div v-else key="interior_midpage_repeating" class="htlad-interior_midpage_repeating ad-div mod-break-margins mod-ad-disclosure" />
             <hr
               class="u-border-accent u-hide-until--m u-space--double--top"
               aria-hidden="true"

diff --git a/components/TagPage.vue b/components/TagPage.vue
@@ -119,8 +119,8 @@
               class="u-border-accent u-hide-until--m u-space--double--bottom"
               aria-hidden="true"
             >
-            <div v-if="nuggetIndex === 0" key="interior_midpage_1" class="htlad-interior_midpage_1 htl-ad mod-break-margins mod-ad-disclosure" />
-            <div v-else key="interior_midpage_repeating" class="htlad-interior_midpage_repeating htl-ad mod-break-margins mod-ad-disclosure" />
+            <div v-if="nuggetIndex === 0" key="interior_midpage_1" class="htlad-interior_midpage_1 ad-div mod-break-margins mod-ad-disclosure" />
+            <div v-else key="interior_midpage_repeating" class="htlad-interior_midpage_repeating ad-div mod-break-margins mod-ad-disclosure" />
             <hr
               class="u-border-accent u-hide-until--m u-space--double--top"
               aria-hidden="true"

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -173,18 +173,18 @@ div:empty + .ad-label {
   display: none;
 }
 
-.htl-ad.mod-break-margins {
+.ad-div.mod-break-margins {
   position: relative;
   min-height: 270px;
 }
 
-.htl-ad.mod-break-margins > div {
+.ad-div.mod-break-margins > div {
   position: absolute;
   top: 0;
   width: max-content;
 }
 
-.htl-ad.mod-ad-disclosure > div > div > div::after {
+.ad-div.mod-ad-disclosure > div > div > div::after {
     content: "Advertisement";
     display: block;
     color: RGB(var(--color-text-muted));