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

48
views/index.ejs
View File

@@ -5,35 +5,39 @@
<% const activePage = 'search'; %>
<%- include('partials/sidebar') %>
<main class="flex-1 ml-56">
<main class="flex-1 md:ml-56 mt-14 md:mt-0">
<!-- Search Bar -->
<div class="bg-sidebar/50 border-b border-white/5 p-4">
<form id="searchForm" class="flex items-end gap-3 max-w-5xl">
<div class="bg-sidebar/50 border-b border-white/5 p-3 md:p-4">
<form id="searchForm" class="flex flex-col md:flex-row md:items-end gap-2 md:gap-3 max-w-5xl">
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">Keyword</label>
<input type="text" name="keyword" placeholder="e.g. Restaurants, Plumbers..."
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent" required>
</div>
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">City</label>
<input type="text" name="city" placeholder="e.g. Austin"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent" required>
<div class="flex gap-2 flex-1">
<div class="flex-1">
<label class="block text-xs text-gray-500 mb-1">City</label>
<input type="text" name="city" placeholder="e.g. Austin"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent" required>
</div>
<div class="flex-1 md:w-40 md:flex-none">
<label class="block text-xs text-gray-500 mb-1">State</label>
<input type="text" name="state" placeholder="e.g. Texas"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent">
</div>
</div>
<div class="w-40">
<label class="block text-xs text-gray-500 mb-1">State</label>
<input type="text" name="state" placeholder="e.g. Texas"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white placeholder-gray-500 focus:outline-none focus:border-accent">
<div class="flex gap-2">
<div class="w-20 md:w-24">
<label class="block text-xs text-gray-500 mb-1">Max</label>
<input type="number" name="maxResults" value="20" min="1" max="100"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-accent">
</div>
<button type="submit" id="searchBtn"
class="bg-accent hover:bg-accent-hover text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 self-end flex-1 md:flex-none justify-center">
<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
</button>
</div>
<div class="w-24">
<label class="block text-xs text-gray-500 mb-1">Max</label>
<input type="number" name="maxResults" value="20" min="1" max="100"
class="w-full bg-card border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-accent">
</div>
<button type="submit" id="searchBtn"
class="bg-accent hover:bg-accent-hover text-white px-5 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2">
<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
</button>
</form>
</div>
@@ -95,7 +99,7 @@
</div>
<!-- Detail Panel -->
<div id="detailPanel" class="fixed top-0 right-0 w-96 h-full bg-sidebar border-l border-white/10 z-50 hidden overflow-y-auto scrollbar-thin">
<div id="detailPanel" class="fixed top-0 right-0 w-full md:w-96 h-full bg-sidebar border-l border-white/10 z-50 hidden overflow-y-auto scrollbar-thin">
</div>
</div>