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 React, { useEffect, useRef } from "react";
import { X } from "lucide-react";
const MobileAdBanner = () => { const MobileAdBanner = () => {
const [visible, setVisible] = useState(true);
const [closed, setClosed] = useState(false);
const iframeRef = useRef(null); const iframeRef = useRef(null);
useEffect(() => { useEffect(() => {
const wasClosed = sessionStorage.getItem("mobileAdClosed"); if (!iframeRef.current) return;
if (wasClosed === "true") {
setClosed(true);
setVisible(false);
}
}, []);
useEffect(() => {
if (!visible || closed || !iframeRef.current) return;
const timer = setTimeout(() => { const timer = setTimeout(() => {
if (!iframeRef.current) return; if (!iframeRef.current) return;
@@ -29,7 +18,7 @@ const MobileAdBanner = () => {
<html> <html>
<head> <head>
<style> <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> </style>
</head> </head>
<body> <body>
@@ -50,33 +39,21 @@ const MobileAdBanner = () => {
}, 500); }, 500);
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [visible, closed]); }, []);
const handleClose = () => {
setVisible(false);
setClosed(true);
sessionStorage.setItem("mobileAdClosed", "true");
};
if (!visible || closed) return null;
return ( 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"> <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">
<button <iframe
onClick={handleClose} ref={iframeRef}
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" style={{
aria-label="Close ad" width: "320px",
> height: "50px",
<X className="h-4 w-4" /> border: "none",
</button> display: "block",
<div className="flex justify-center items-center py-2"> }}
<iframe title="Mobile Advertisement"
ref={iframeRef} sandbox="allow-scripts allow-same-origin"
style={{ width: "320px", height: "50px", border: "none" }} />
title="Mobile Advertisement"
sandbox="allow-scripts allow-same-origin"
/>
</div>
</div> </div>
); );
}; };

4
src/pages/MarkdownEditor.js
View File

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

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

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