nodebb-plugin-ezoic-infinite 1.8.30 → 1.8.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "1.8.30",
+  "version": "1.8.32",
   "description": "Production-ready Ezoic infinite ads integration for NodeBB 4.x",
   "main": "library.js",
   "license": "MIT",

package/public/style.css

@@ -1,5 +1,10 @@
 /*
- * NodeBB Ezoic Infinite Ads — style.css (v20.2)
+ * NodeBB Ezoic Infinite Ads — style.css (v20.5)
+ * Objectif:
+ * - comportement v50-like (pas de rognage involontaire)
+ * - neutraliser les wrappers Ezoic "adaptive/multi" (970px inline) sur mobile
+ * - éviter l'affichage multi-annonces (forcer 1 annonce / ligne)
+ * - garder anti-sticky + gestion .is-empty
  */
 
 /* ── Wrapper ──────────────────────────────────────────────────────────────── */
@@ -8,8 +13,12 @@
   width: 100%;
   margin: 0 !important;
   padding: 0 !important;
-  overflow: hidden;
-  contain: layout style;
+
+  /* Ne pas couper les ads rendues */
+  overflow: visible;
+
+  /* On évite les effets de layout imprévus avec certains thèmes */
+  contain: none;
 }
 
 /* Placeholder : 1px minimum pour rester visible par l'IntersectionObserver */
@@ -18,11 +27,12 @@
   margin: 0 !important;
   padding: 0 !important;
   min-height: 1px;
+  max-width: 100%;
 }
 
-/* ── Ciblage précis des nœuds Ezoic dans nos wraps ───────────────────────── */
+/* ── Ciblage précis des nœuds Ezoic / Google dans nos wraps ──────────────── */
 
-/* Supprime le gap "baseline" sous les iframes (via block + line-height/font-size) */
+/* Supprime le gap "baseline" sous les iframes */
 .nodebb-ezoic-wrap iframe,
 .nodebb-ezoic-wrap div[id$="__container__"] iframe {
   display: block !important;
@@ -30,21 +40,41 @@
   font-size: 0 !important;
 }
 
-.nodebb-ezoic-wrap div[id$="__container__"] {
+/* Container Google/Ezoic : surtout PAS overflow hidden (sinon rognage) */
+.nodebb-ezoic-wrap div[id$="__container__"],
+.nodebb-ezoic-wrap [id^="google_ads_iframe_"][id$="__container__"] {
   display: block !important;
   line-height: 0 !important;
   font-size: 0 !important;
+  overflow: visible !important;
+
+  margin-left: auto !important;
+  margin-right: auto !important;
+
+  box-sizing: border-box !important;
+  max-width: 100% !important;
 }
 
-/* Ne pas écraser la hauteur réelle calculée par Ezoic */
+/* Conteneur Ezoic : ne pas casser la hauteur, centrer */
 .nodebb-ezoic-wrap .ezoic-ad,
 .nodebb-ezoic-wrap span.ezoic-ad {
   display: block !important;
-  margin: 0 !important;
+  margin: 0 auto !important;
   padding: 0 !important;
+
   height: auto !important;
   min-height: unset !important;
   max-height: none !important;
+
+  box-sizing: border-box !important;
+  max-width: 100% !important;
+}
+
+/* Iframes : centrées, bornées */
+.nodebb-ezoic-wrap iframe {
+  margin-left: auto !important;
+  margin-right: auto !important;
+  max-width: 100% !important;
 }
 
 /* Reportline en absolu pour ne pas impacter le layout */
@@ -59,10 +89,6 @@
 }
 
 /* ── État vide ────────────────────────────────────────────────────────────── */
-/*
-  Ajouté après le délai d'empty-check si aucun fill détecté.
-  Collapse à 1px : réserve minimale, reste observable par l'IO.
-*/
 .nodebb-ezoic-wrap.is-empty {
   display: block !important;
   height: 1px !important;
@@ -73,8 +99,7 @@
   overflow: hidden !important;
 }
 
-/* Anti-faux-empty : si la pub est réellement là, on annule le collapse
-   (support moderne; si non supporté, le JS enlève .is-empty) */
+/* Anti-faux-empty : si une pub est là, on ne collapse pas */
 .nodebb-ezoic-wrap.is-empty:has(iframe),
 .nodebb-ezoic-wrap.is-empty:has([data-google-container-id]),
 .nodebb-ezoic-wrap.is-empty:has(div[id$="__container__"]) {
@@ -84,45 +109,63 @@
   overflow: visible !important;
 }
 
-/* ── Anti décalage horizontal sur desktop (largeurs fixes 970px, etc.) ───── */
-
-/* Les wraps/placeholder ne doivent jamais créer de largeur fantôme */
-.nodebb-ezoic-wrap,
-.nodebb-ezoic-wrap > [id^="ezoic-pub-ad-placeholder-"] {
-  width: 100% !important;
-  max-width: 100% !important;
-}
+/* ── Fix: Ezoic "adaptive/multi" qui force 970px & multi-annonces ────────── */
+/*
+  Certains placements "adaptive/multi" gardent des inline styles:
+  width/min-width: 970px + display:flex + plusieurs blocs 300x250.
+  Ce n'est pas souhaité -> on:
+  - neutralise les largeurs forcées
+  - empêche l'affichage multi en ne gardant que le 1er slot rendu
+  - force une mise en page "1 annonce centrée"
+*/
 
-/* Le conteneur Ezoic : centré, largeur auto, jamais > 100% */
-.nodebb-ezoic-wrap .ezoic-ad,
-.nodebb-ezoic-wrap span.ezoic-ad {
-  display: block !important;
+/* Neutralise les inline width/min-width (970px) sur ces wrappers */
+.nodebb-ezoic-wrap .ezoic-ad-adaptive,
+.nodebb-ezoic-wrap .adtester-container,
+.nodebb-ezoic-wrap [class*="Content-multi-"] {
   width: auto !important;
+  min-width: 0 !important;
   max-width: 100% !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
   box-sizing: border-box !important;
 }
 
-/* Containers Google (souvent inline-block avec width fixe) : on les laisse auto mais on borne */
-.nodebb-ezoic-wrap div[id$="__container__"],
-.nodebb-ezoic-wrap [id^="google_ads_iframe_"][id$="__container__"] {
+/* Ces wrappers sont souvent en flex -> on les remet en bloc centrable */
+.nodebb-ezoic-wrap .ezoic-ad-adaptive,
+.nodebb-ezoic-wrap .adtester-container {
   display: block !important;
-  width: auto !important;
-  max-width: 100% !important;
   margin-left: auto !important;
   margin-right: auto !important;
-  overflow: hidden !important; /* coupe ce qui dépasse sans décaler la page */
-  box-sizing: border-box !important;
 }
 
-/* Iframes : auto + max-width pour éviter le dépassement / décalage */
-.nodebb-ezoic-wrap iframe {
-  display: block !important;
-  width: auto !important;
-  max-width: 100% !important;
-  margin-left: auto !important;
-  margin-right: auto !important;
+/* Si Ezoic met plusieurs "Content-multi-XXX" dans le même placeholder:
+   on masque toutes les occurrences sauf la première. */
+.nodebb-ezoic-wrap [class*="Content-multi-"] ~ [class*="Content-multi-"] {
+  display: none !important;
+}
+
+/* Si plusieurs containers Google sont présents (multi slots), on masque tout sauf le premier */
+.nodebb-ezoic-wrap div[id$="__container__"] ~ div[id$="__container__"] {
+  display: none !important;
+}
+
+/* ── Mobile: éviter tout débordement horizontal ──────────────────────────── */
+@media (max-width: 767px) {
+  /* On s'assure que les wrappers ne gardent pas de min-width forcé */
+  .nodebb-ezoic-wrap .ezoic-ad,
+  .nodebb-ezoic-wrap span.ezoic-ad,
+  .nodebb-ezoic-wrap .ezoic-ad-adaptive,
+  .nodebb-ezoic-wrap .adtester-container,
+  .nodebb-ezoic-wrap [class*="Content-multi-"] {
+    min-width: 0 !important;
+    width: auto !important;
+    max-width: 100% !important;
+  }
+
+  /* Si un thème parent clippe encore, on préfère un scroll interne au rognage */
+  .nodebb-ezoic-wrap > [id^="ezoic-pub-ad-placeholder-"] {
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+  }
 }
 
 /* ── Ezoic global (hors de nos wraps) ────────────────────────────────────── */