From 37fd80e4b9245a265f13beeb711a39be9a75a52b Mon Sep 17 00:00:00 2001 From: UncleCode Date: Wed, 23 Apr 2025 19:44:25 +0800 Subject: [PATCH] feat(docs): add mobile-friendly navigation menu Implements a responsive hamburger menu for mobile devices with the following changes: - Add new mobile_menu.js for handling mobile navigation - Update layout.css with mobile-specific styles and animations - Enhance README with updated geolocation example - Register mobile_menu.js in mkdocs.yml The mobile menu includes: - Hamburger button animation - Slide-out sidebar - Backdrop overlay - Touch-friendly navigation - Proper event handling --- README.md | 13 +++- docs/md_v2/assets/layout.css | 121 +++++++++++++++++++++++++++++-- docs/md_v2/assets/mobile_menu.js | 106 +++++++++++++++++++++++++++ mkdocs.yml | 3 +- 4 files changed, 234 insertions(+), 9 deletions(-) create mode 100644 docs/md_v2/assets/mobile_menu.js diff --git a/README.md b/README.md index 69a66d7a..7892a30e 100644 --- a/README.md +++ b/README.md @@ -509,9 +509,16 @@ async def test_news_crawl(): - **🌎 World-aware Crawling**: Set geolocation, language, and timezone for authentic locale-specific content: ```python - crawler_config = CrawlerRunConfig( - geo_locale={"city": "Tokyo", "lang": "ja", "timezone": "Asia/Tokyo"} - ) + crun_cfg = CrawlerRunConfig( + url="https://browserleaks.com/geo", # test page that shows your location + locale="en-US", # Accept-Language & UI locale + timezone_id="America/Los_Angeles", # JS Date()/Intl timezone + geolocation=GeolocationConfig( # override GPS coords + latitude=34.0522, + longitude=-118.2437, + accuracy=10.0, + ) + ) ``` - **📊 Table-to-DataFrame Extraction**: Extract HTML tables directly to CSV or pandas DataFrames: diff --git a/docs/md_v2/assets/layout.css b/docs/md_v2/assets/layout.css index f8dbedde..0da340fa 100644 --- a/docs/md_v2/assets/layout.css +++ b/docs/md_v2/assets/layout.css @@ -64,7 +64,7 @@ body { /* Apply side padding within the centered block */ padding-left: calc(var(--global-space) * 2); padding-right: calc(var(--global-space) * 2); - /* Add margin-left to clear the fixed sidebar */ + /* Add margin-left to clear the fixed sidebar - ONLY ON DESKTOP */ margin-left: var(--sidebar-width); } @@ -81,7 +81,7 @@ body { z-index: 900; padding: 1em calc(var(--global-space) * 2); padding-bottom: 2em; - /* transition: left var(--layout-transition-speed) ease-in-out; */ + transition: left var(--layout-transition-speed) ease-in-out; } /* --- 2. Main Content Area (Within Centered Grid) --- */ @@ -188,21 +188,133 @@ footer { } } +/* --- Mobile Menu Styles --- */ +.mobile-menu-toggle { + display: none; /* Hidden by default, shown in mobile */ + background: none; + border: none; + padding: 10px; + cursor: pointer; + z-index: 1200; + margin-right: 10px; + position: absolute; + left: 10px; + top: 50%; + transform: translateY(-50%); + /* Make sure it doesn't get moved */ + min-width: 30px; + min-height: 30px; +} + +.hamburger-line { + display: block; + width: 22px; + height: 2px; + margin: 5px 0; + background-color: var(--font-color); + transition: transform 0.3s, opacity 0.3s; +} + +/* Hamburger animation */ +.mobile-menu-toggle.is-active .hamburger-line:nth-child(1) { + transform: translateY(7px) rotate(45deg); +} + +.mobile-menu-toggle.is-active .hamburger-line:nth-child(2) { + opacity: 0; +} + +.mobile-menu-toggle.is-active .hamburger-line:nth-child(3) { + transform: translateY(-7px) rotate(-45deg); +} + +.mobile-menu-close { + display: none; /* Hidden by default, shown in mobile */ + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + color: var(--font-color); + font-size: 24px; + cursor: pointer; + z-index: 1200; + padding: 5px 10px; +} + +.mobile-menu-backdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.7); + z-index: 1050; +} + /* --- Small screens: Hide left sidebar, full width content & footer --- */ @media screen and (max-width: 768px) { + /* Hide the terminal-menu from theme */ + .terminal-menu { + display: none !important; + } + + /* Add padding to site name to prevent hamburger overlap */ + .terminal-mkdocs-site-name, + .terminal-logo a, + .terminal-nav .logo { + padding-left: 40px !important; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + + /* Show mobile menu toggle button */ + .mobile-menu-toggle { + display: block; + } + + /* Show mobile menu close button */ + .mobile-menu-close { + display: block; + } #terminal-mkdocs-side-panel { - left: calc(-1 * var(--sidebar-width)); + left: -100%; /* Hide completely off-screen */ z-index: 1100; box-shadow: 2px 0 10px rgba(0,0,0,0.3); + top: 0; /* Start from top edge */ + height: 100%; /* Full height */ + transition: left 0.3s ease-in-out; + padding-top: 50px; /* Space for close button */ + overflow-y: auto; + width: 85%; /* Wider on mobile */ + max-width: 320px; /* Maximum width */ + background-color: var(--background-color); /* Ensure solid background */ } + #terminal-mkdocs-side-panel.sidebar-visible { left: 0; } + + /* Make navigation links more touch-friendly */ + #terminal-mkdocs-side-panel a { + padding: 6px 15px; + display: block; + /* No border as requested */ + } + + #terminal-mkdocs-side-panel ul { + padding-left: 0; + } + + #terminal-mkdocs-side-panel ul ul a { + padding-left: 10px; + } .terminal-mkdocs-main-grid { /* Grid now takes full width (minus body padding) */ - margin-left: 0; /* Override sidebar margin */ + margin-left: 0 !important; /* Override sidebar margin with !important */ margin-right: 0; /* Override auto margin */ max-width: 100%; /* Allow full width */ padding-left: var(--global-space); /* Reduce padding */ @@ -224,7 +336,6 @@ footer { text-align: center; gap: 0.5em; } - /* Remember JS for toggle button & overlay */ } diff --git a/docs/md_v2/assets/mobile_menu.js b/docs/md_v2/assets/mobile_menu.js new file mode 100644 index 00000000..e529839e --- /dev/null +++ b/docs/md_v2/assets/mobile_menu.js @@ -0,0 +1,106 @@ +// mobile_menu.js - Hamburger menu for mobile view +document.addEventListener('DOMContentLoaded', () => { + // Get references to key elements + const sidePanel = document.getElementById('terminal-mkdocs-side-panel'); + const mainHeader = document.querySelector('.terminal .container:first-child'); + + if (!sidePanel || !mainHeader) { + console.warn('Mobile menu: Required elements not found'); + return; + } + + // Force hide sidebar on mobile + const checkMobile = () => { + if (window.innerWidth <= 768) { + // Force with !important-like priority + sidePanel.style.setProperty('left', '-100%', 'important'); + // Also hide terminal-menu from the theme + const terminalMenu = document.querySelector('.terminal-menu'); + if (terminalMenu) { + terminalMenu.style.setProperty('display', 'none', 'important'); + } + } else { + sidePanel.style.removeProperty('left'); + // Restore terminal-menu if it exists + const terminalMenu = document.querySelector('.terminal-menu'); + if (terminalMenu) { + terminalMenu.style.removeProperty('display'); + } + } + }; + + // Run on initial load + checkMobile(); + + // Also run on resize + window.addEventListener('resize', checkMobile); + + // Create hamburger button + const hamburgerBtn = document.createElement('button'); + hamburgerBtn.className = 'mobile-menu-toggle'; + hamburgerBtn.setAttribute('aria-label', 'Toggle navigation menu'); + hamburgerBtn.innerHTML = ` + + + + `; + + // Create backdrop overlay + const menuBackdrop = document.createElement('div'); + menuBackdrop.className = 'mobile-menu-backdrop'; + menuBackdrop.style.display = 'none'; + document.body.appendChild(menuBackdrop); + + // Make sure it's properly hidden on page load + if (window.innerWidth <= 768) { + menuBackdrop.style.display = 'none'; + } + + // Insert hamburger button into header + mainHeader.insertBefore(hamburgerBtn, mainHeader.firstChild); + + // Add menu close button to side panel + const closeBtn = document.createElement('button'); + closeBtn.className = 'mobile-menu-close'; + closeBtn.setAttribute('aria-label', 'Close navigation menu'); + closeBtn.innerHTML = `×`; + sidePanel.insertBefore(closeBtn, sidePanel.firstChild); + + // Toggle function + function toggleMobileMenu() { + const isOpen = sidePanel.classList.toggle('sidebar-visible'); + + // Toggle backdrop + menuBackdrop.style.display = isOpen ? 'block' : 'none'; + + // Toggle aria-expanded + hamburgerBtn.setAttribute('aria-expanded', isOpen ? 'true' : 'false'); + + // Toggle hamburger animation class + hamburgerBtn.classList.toggle('is-active'); + + // Force sidebar visibility setting + if (isOpen) { + sidePanel.style.setProperty('left', '0', 'important'); + } else { + sidePanel.style.setProperty('left', '-100%', 'important'); + } + + // Prevent body scrolling when menu is open + document.body.style.overflow = isOpen ? 'hidden' : ''; + } + + // Event listeners + hamburgerBtn.addEventListener('click', toggleMobileMenu); + closeBtn.addEventListener('click', toggleMobileMenu); + menuBackdrop.addEventListener('click', toggleMobileMenu); + + // Close menu on window resize to desktop + window.addEventListener('resize', () => { + if (window.innerWidth > 768 && sidePanel.classList.contains('sidebar-visible')) { + toggleMobileMenu(); + } + }); + + console.log('Mobile menu initialized'); +}); \ No newline at end of file diff --git a/mkdocs.yml b/mkdocs.yml index b7d44220..23f4ceda 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -91,4 +91,5 @@ extra_javascript: - assets/github_stats.js - assets/selection_ask_ai.js - assets/copy_code.js - - assets/floating_ask_ai_button.js \ No newline at end of file + - assets/floating_ask_ai_button.js + - assets/mobile_menu.js \ No newline at end of file