carlos/lead-scraper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Mobile responsive: hamburger menu, stacked forms, card layout on mobile

Browse Source
This commit is contained in:
Mambo
2026-02-11 07:31:21 +01:00
parent 831d63b7e8
commit d7fe190132
5 changed files with 84 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
views/partials/head.ejs
View File

@@ -19,7 +19,7 @@
}
</script>
<style>
body { font-family: 'Inter', system-ui, sans-serif; }
html, body { font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: transparent; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }

32
views/partials/sidebar.ejs
View File

@@ -1,4 +1,34 @@
<aside class="w-56 bg-sidebar h-screen flex flex-col fixed left-0 top-0 z-40">
<!-- Mobile top bar -->
<div class="md:hidden fixed top-0 left-0 right-0 z-50 bg-sidebar border-b border-white/10 flex items-center justify-between px-4 py-3">
<h1 class="text-sm font-bold text-white flex items-center gap-2">
<svg class="w-4 h-4 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
Lead Scraper
</h1>
<button id="mobileMenuBtn" onclick="document.getElementById('mobileSidebar').classList.toggle('hidden')" class="text-gray-400 hover:text-white">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
</button>
</div>
<!-- Mobile nav overlay -->
<div id="mobileSidebar" class="hidden md:hidden fixed inset-0 z-50 bg-black/60" onclick="this.classList.add('hidden')">
<nav class="bg-sidebar w-56 h-full p-4 pt-16 space-y-1" onclick="event.stopPropagation()">
<a href="/" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors <%= typeof activePage !== 'undefined' && activePage === 'search' ? 'bg-accent/20 text-accent' : 'text-gray-400 hover:bg-white/5 hover:text-white' %>">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
Search
</a>
<a href="/history" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors <%= typeof activePage !== 'undefined' && activePage === 'history' ? 'bg-accent/20 text-accent' : 'text-gray-400 hover:bg-white/5 hover:text-white' %>">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
History
</a>
<a href="/leads" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm transition-colors <%= typeof activePage !== 'undefined' && activePage === 'leads' ? 'bg-accent/20 text-accent' : 'text-gray-400 hover:bg-white/5 hover:text-white' %>">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/></svg>
Leads
</a>
</nav>
</div>
<!-- Desktop sidebar -->
<aside class="hidden md:flex w-56 bg-sidebar h-screen flex-col fixed left-0 top-0 z-40">
<div class="p-5 border-b border-white/10">
<h1 class="text-lg font-bold text-white flex items-center gap-2">
<svg class="w-5 h-5 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/></svg>