Mass UI Updates
This commit is contained in:
+43
-9
@@ -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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user