dwindown/dewedev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ads): adjust internal iframe styles to minimize bottom gap

Browse Source
This commit is contained in:
Dwindi Ramadhana
2026-06-14 15:43:42 +07:00
parent e4ccff4bbf
commit deb2bf0b8a
3 changed files with 21 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/MobileAdBanner.js
View File

@@ -1,21 +1,10 @@
import React, { useEffect, useRef, useState } from "react";
import { X } from "lucide-react";
import React, { useEffect, useRef } from "react";
const MobileAdBanner = () => {
const [visible, setVisible] = useState(true);
const [closed, setClosed] = useState(false);
const iframeRef = useRef(null);
useEffect(() => {
const wasClosed = sessionStorage.getItem("mobileAdClosed");
if (wasClosed === "true") {
setClosed(true);
setVisible(false);
}
}, []);
useEffect(() => {
if (!visible || closed || !iframeRef.current) return;
if (!iframeRef.current) return;
const timer = setTimeout(() => {
if (!iframeRef.current) return;
@@ -29,7 +18,7 @@ const MobileAdBanner = () => {
<html>
<head>
<style>
body { margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; }
body { margin: 0; padding: 0; display: block; background: transparent; overflow: hidden; height: 100vh; }
</style>
</head>
<body>
@@ -50,33 +39,21 @@ const MobileAdBanner = () => {
}, 500);
return () => clearTimeout(timer);
}, [visible, closed]);
const handleClose = () => {
setVisible(false);
setClosed(true);
sessionStorage.setItem("mobileAdClosed", "true");
};
if (!visible || closed) return null;
}, []);
return (
<div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-t border-gray-200 dark:border-gray-700">
<button
onClick={handleClose}
className="absolute -top-2 right-2 p-1 text-gray-600 hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-200 bg-white dark:bg-gray-800 rounded-full shadow-sm z-10"
aria-label="Close ad"
>
<X className="h-4 w-4" />
</button>
<div className="flex justify-center items-center py-2">
<iframe
ref={iframeRef}
style={{ width: "320px", height: "50px", border: "none" }}
title="Mobile Advertisement"
sandbox="allow-scripts allow-same-origin"
/>
</div>
<div className="lg:hidden fixed bottom-0 left-0 right-0 z-50 bg-white dark:bg-gray-900 shadow-lg border-t border-gray-200 dark:border-gray-700 h-[51px] flex justify-center items-end">
<iframe
ref={iframeRef}
style={{
width: "320px",
height: "50px",
border: "none",
display: "block",
}}
title="Mobile Advertisement"
sandbox="allow-scripts allow-same-origin"
/>
</div>
);
};

4
src/pages/MarkdownEditor.js
View File

@@ -20,6 +20,7 @@ import {
import ToolLayout from "../components/ToolLayout";
import RichMarkdownEditor from "../components/RichMarkdownEditor";
import CodeMirrorEditor from "../components/CodeMirrorEditor";
import FullscreenAdBanner from "../components/FullscreenAdBanner";
import SEO from "../components/SEO";
import RelatedTools from "../components/RelatedTools";
import hljs from "highlight.js";
@@ -1950,7 +1951,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
</div>
{/* Editor Content */}
<div className={`overflow-hidden min-w-0 w-full`}>
<div className={`overflow-hidden min-w-0 w-full relative`}>
{isFullscreen && <FullscreenAdBanner />}
<div className={`${isFullscreen ? "h-[calc(100vh-60px)]" : ""}`}>
{viewMode === "preview" ? (
<div

4
src/styles/markdown-preview.css
View File

@@ -464,7 +464,7 @@
}
.markdown-content-wrapper.is-fullscreen.is-read-mode > .prose {
padding-bottom: 4rem; /* 128px */
padding-bottom: 12rem; /* 192px (Accounts for 90px banner ad + spacing) */
}
.markdown-content-wrapper.is-normal.is-edit-mode > div {
@@ -472,5 +472,5 @@
}
.markdown-content-wrapper.is-fullscreen.is-edit-mode > div {
padding-bottom: 6rem; /* 128px */
padding-bottom: 12rem; /* 192px (Accounts for 90px banner ad + spacing) */
}