jimeh/commonflow.org
1
0
Fork 0
mirror of https://github.com/jimeh/commonflow.org.git synced 2026-02-19 05:46:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove mobile tooltip from copy button on markdown page

Browse Source 
The tooltip is no longer needed since the button is fully visible on
mobile, including its "Copy"/"Copied!" text label which provides
sufficient feedback.
This commit is contained in:
Claude
2026-01-16 18:17:35 +00:00
parent 8465487155
commit bd5963d454
1 changed files with 12 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/pages/spec/[version]/md.astro
View File

@@ -210,31 +210,18 @@ const previewHtml = await unified()
<!-- Copy and Download buttons --> <!-- Copy and Download buttons -->
<div class="flex items-center gap-3 order-1 sm:order-3"> <div class="flex items-center gap-3 order-1 sm:order-3">
<!-- Copy button --> <!-- Copy button -->
<div class="relative"> <button
<button id="copy-btn"
id="copy-btn" type="button"
type="button" class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm
class="inline-flex items-center gap-1.5 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors cursor-pointer
font-medium rounded-lg transition-colors cursor-pointer text-gray-600 dark:text-neutral-400
text-gray-600 dark:text-neutral-400 hover:bg-gray-100 hover:text-gray-950
hover:bg-gray-100 hover:text-gray-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50"
dark:hover:bg-neutral-800 dark:hover:text-neutral-50" >
> <Icon name="heroicons:clipboard-document" class="w-4 h-4" />
<Icon name="heroicons:clipboard-document" class="w-4 h-4" /> <span data-copy-text>Copy</span>
<span data-copy-text>Copy</span> </button>
</button>
<!-- Mobile tooltip -->
<div
id="copy-tooltip"
class="sm:hidden absolute left-1/2 -translate-x-1/2 top-full
mt-2 px-2 py-1 text-xs font-medium whitespace-nowrap
rounded-md shadow-sm bg-gray-900 text-white
dark:bg-white dark:text-gray-900 opacity-0
pointer-events-none transition-opacity duration-200"
>
Copied!
</div>
</div>
<!-- Raw button --> <!-- Raw button -->
<a <a
@@ -390,7 +377,6 @@ const previewHtml = await unified()
const downloadBtn = document.getElementById("download-btn"); const downloadBtn = document.getElementById("download-btn");
const rawContent = document.getElementById("markdown-raw"); const rawContent = document.getElementById("markdown-raw");
const copyText = copyBtn?.querySelector("[data-copy-text]"); const copyText = copyBtn?.querySelector("[data-copy-text]");
const copyTooltip = document.getElementById("copy-tooltip");
const toggleContainer = document.getElementById("toggle-container"); const toggleContainer = document.getElementById("toggle-container");
const toggleCode = document.getElementById("toggle-code"); const toggleCode = document.getElementById("toggle-code");
@@ -493,22 +479,12 @@ const previewHtml = await unified()
togglePreview?.addEventListener("click", () => setActiveToggle(false)); togglePreview?.addEventListener("click", () => setActiveToggle(false));
function showCopiedFeedback() { function showCopiedFeedback() {
// Desktop: change button text
if (copyText) { if (copyText) {
copyText.textContent = "Copied!"; copyText.textContent = "Copied!";
setTimeout(() => { setTimeout(() => {
copyText.textContent = "Copy"; copyText.textContent = "Copy";
}, 2000); }, 2000);
} }
// Mobile: show tooltip
if (copyTooltip) {
copyTooltip.classList.remove("opacity-0");
copyTooltip.classList.add("opacity-100");
setTimeout(() => {
copyTooltip.classList.remove("opacity-100");
copyTooltip.classList.add("opacity-0");
}, 2000);
}
} }
// Copy button // Copy button