Mass UI Updates

This commit is contained in:
2025-12-15 14:54:29 -06:00
parent cf1ffac9ee
commit 13bb6542bc
11 changed files with 3060 additions and 121 deletions
+43 -9
View File
@@ -208,7 +208,7 @@ function displayJobsCards(jobs) {
return `
<div
onclick="openJobModal('${job.id}')"
class="bg-white rounded-lg shadow border border-gray-200 p-6 hover:shadow-lg hover:border-indigo-300 cursor-pointer transition-all duration-200 hover:bg-indigo-50/30"
class="backdrop-blur-xl bg-white/60 rounded-2xl shadow-xl border border-white/30 p-6 hover:shadow-2xl hover:border-white/50 hover:bg-white/70 cursor-pointer transition-all duration-300 hover:scale-[1.02]"
>
<div class="mb-4">
<div class="flex items-center justify-between">
@@ -226,6 +226,7 @@ function displayJobsCards(jobs) {
<div>
<span class="text-xs text-gray-500 uppercase tracking-wide">Client</span>
<p class="text-sm font-medium text-gray-900 mt-1">${job.Company_Client || '-'}</p>
${job.Phone_Number ? `<a href="tel:${job.Phone_Number.replace(/[^\d+]/g, '')}" onclick="event.stopPropagation()" class="text-xs text-indigo-600 hover:text-indigo-800 mt-1 block hover:underline">${job.Phone_Number}</a>` : ''}
</div>
<div>
@@ -242,6 +243,31 @@ function displayJobsCards(jobs) {
</div>
</div>
${job.Job_Address ? `
<div>
<span class="text-xs text-gray-500 uppercase tracking-wide">Address</span>
<p class="text-sm font-medium text-gray-900 mt-1">${job.Job_Address}</p>
<div class="mt-2 flex flex-col gap-2">
<a
href="https://maps.apple.com/?q=${encodeURIComponent(job.Job_Address)}"
target="_blank"
onclick="event.stopPropagation()"
class="w-full px-3 py-1.5 backdrop-blur-sm bg-gray-900/90 text-white text-xs font-medium rounded-xl hover:bg-gray-800/90 transition-all shadow-lg hover:shadow-xl text-center"
>
Apple Maps
</a>
<a
href="https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(job.Job_Address)}"
target="_blank"
onclick="event.stopPropagation()"
class="w-full px-3 py-1.5 backdrop-blur-sm bg-blue-600/90 text-white text-xs font-medium rounded-xl hover:bg-blue-700/90 transition-all shadow-lg hover:shadow-xl text-center"
>
Google Maps
</a>
</div>
</div>
` : ''}
<div class="grid grid-cols-2 gap-4 sm:col-span-2 lg:col-span-1">
<div>
<span class="text-xs text-gray-500 uppercase tracking-wide">Type</span>
@@ -278,26 +304,34 @@ function updateViewDisplay() {
const cardViewBtn = document.getElementById('cardViewBtn');
if (currentView === 'table') {
// Show table, hide card
if (tableView) tableView.classList.remove('hidden');
if (cardView) cardView.classList.add('hidden');
// Table button: active (indigo with shadow)
if (tableViewBtn) {
tableViewBtn.classList.add('bg-indigo-600', 'text-white');
tableViewBtn.classList.remove('text-gray-700', 'hover:bg-gray-50');
tableViewBtn.classList.remove('text-gray-700', 'hover:bg-white/40');
tableViewBtn.classList.add('bg-indigo-600/90', 'text-white', 'shadow-lg', 'hover:bg-indigo-700/90');
}
// Card button: inactive (transparent)
if (cardViewBtn) {
cardViewBtn.classList.remove('bg-indigo-600', 'text-white');
cardViewBtn.classList.add('text-gray-700', 'hover:bg-gray-50');
cardViewBtn.classList.remove('bg-indigo-600/90', 'text-white', 'shadow-lg', 'hover:bg-indigo-700/90');
cardViewBtn.classList.add('text-gray-700', 'hover:bg-white/40');
}
} else {
// Show card, hide table
if (tableView) tableView.classList.add('hidden');
if (cardView) cardView.classList.remove('hidden');
// Table button: inactive (transparent)
if (tableViewBtn) {
tableViewBtn.classList.remove('bg-indigo-600', 'text-white');
tableViewBtn.classList.add('text-gray-700', 'hover:bg-gray-50');
tableViewBtn.classList.remove('bg-indigo-600/90', 'text-white', 'shadow-lg', 'hover:bg-indigo-700/90');
tableViewBtn.classList.add('text-gray-700', 'hover:bg-white/40');
}
// Card button: active (indigo with shadow)
if (cardViewBtn) {
cardViewBtn.classList.add('bg-indigo-600', 'text-white');
cardViewBtn.classList.remove('text-gray-700', 'hover:bg-gray-50');
cardViewBtn.classList.remove('text-gray-700', 'hover:bg-white/40');
cardViewBtn.classList.add('bg-indigo-600/90', 'text-white', 'shadow-lg', 'hover:bg-indigo-700/90');
}
}
}