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

27
views/leads.ejs
View File

@@ -5,7 +5,7 @@
<% const activePage = 'leads'; %>
<%- include('partials/sidebar') %>
<main class="flex-1 ml-56 p-6">
<main class="flex-1 md:ml-56 mt-14 md:mt-0 p-4 md:p-6">
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold">Saved Leads</h2>
<span class="text-xs text-gray-500"><%= leads.length %> leads</span>
@@ -19,7 +19,8 @@
<a href="/" class="mt-4 bg-accent hover:bg-accent-hover text-white px-4 py-2 rounded-lg text-sm transition-colors">Search Leads</a>
</div>
<% } else { %>
<div class="overflow-x-auto rounded-lg border border-white/5">
<!-- Desktop table -->
<div class="hidden md:block overflow-x-auto rounded-lg border border-white/5">
<table class="w-full text-sm">
<thead>
<tr class="bg-card text-gray-400 text-left text-xs uppercase tracking-wider">
@@ -63,6 +64,28 @@
</tbody>
</table>
</div>
<!-- Mobile cards -->
<div class="md:hidden space-y-2">
<% leads.forEach(l => { %>
<div class="bg-card border border-white/5 rounded-lg p-4" id="lead-mobile-<%= l.placeId %>">
<div class="flex items-start justify-between">
<div class="flex-1 min-w-0">
<p class="font-medium text-white text-sm truncate"><%= l.title %></p>
<p class="text-xs text-gray-500"><%= l.categoryName %></p>
</div>
<button onclick="removeLead('<%= l.placeId %>')" class="text-red-400 hover:text-red-300 ml-2 flex-shrink-0">
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
<div class="mt-2 space-y-1 text-xs text-gray-400">
<% if (l.phone) { %><p>📞 <a href="tel:<%= l.phone %>" class="text-accent"><%= l.phone %></a></p><% } %>
<% if (l.email) { %><p>✉️ <%= l.email %></p><% } %>
<% if (l.website) { %><p>🌐 <a href="<%= l.website %>" target="_blank" class="text-accent truncate block"><%= l.website.replace(/^https?:\/\//, '').replace(/\/$/, '') %></a></p><% } %>
<% if (l.totalScore) { %><p><span class="text-yellow-400">★</span> <%= l.totalScore.toFixed(1) %> (<%= l.reviewsCount %> reviews)</p><% } %>
</div>
</div>
<% }) %>
</div>
<% } %>
</main>