aewing/Job-Info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI Improvements buttons, viewable area, exchanged folder link heading and url text and replaced with a button - states for if a folder exists and if one doesn't

Browse Source
This commit is contained in:
aewing
2025-12-12 18:20:58 +00:00
parent ae884e6519
commit 0a834417a9
2 changed files with 85 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+31 -14
View File
@@ -21,7 +21,7 @@
/* Search + filter toggle */
#searchBox{width:100%;padding:10px;border-radius:8px;border:1px solid #d1d5db;margin-bottom:8px;box-sizing:border-box;font-size: 18px;}
#searchBox::placeholder{color:#9ca3af;}
#filterToggle{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;border:none;cursor:pointer;margin-bottom:8px;display:inline-block;}
#filterToggle{background:var(--accent);color:#fff;padding:8px 10px;border-radius:8px;border:none;cursor:pointer;margin-bottom:8px;display:inline-block;max-width:110px;}
/* Filters panel */
#filtersPanel{display:none;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:10px;margin-bottom:10px;}
@@ -38,17 +38,19 @@
/* Modal */
#detailModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);align-items:flex-start;justify-content:center;padding-top:2vh;z-index:999;}
#detailBox{margin-block-start:0;margin-block-end:0;background:#fff;border-radius:10px;padding:2px 12px 6px 10px;max-width:380px;width:92%;max-height:84vh;overflow:auto;box-sizing:border-box;}
#detailBox{margin-block-start:0;margin-block-end:0;background:#fff;border-radius:10px;padding:2px 12px 6px 10px;max-width:380px;width:92%;max-height:96vh;overflow:auto;box-sizing:border-box;}
.h2{margin-top:0; margin-bottom:2px;margin-block-end:0;}
.detail-table{margin-top: 0;width:100%;border-collapse:collapse;margin-bottom:4px;}
.detail-table td{border:1px solid #eef2ff;padding:0px 6px 6px 6px;font-size:13px;vertical-align:top;}
.detail-table td.label{width:40%;background:#fbfdff;font-weight:700;color:#374151;}
#jobFolderLink{margin-bottom:10px;font-size:13px;}
#jobFolderLink a, #jobFolderLink span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#jobFolderBtn{width:100%;padding:10px 12px;border-radius:8px;border:none;color:#fff;cursor:pointer;font-size:17px;font-weight:700;margin-bottom:10px;transition:background 0.2s;}
#jobFolderBtn.active{background:var(--accent);}
#jobFolderBtn.active:hover{background:#0b5ed7;}
#jobFolderBtn:disabled{background:#4b5563;cursor:not-allowed;opacity:0.7;}
/* Notes */
#jobNotes{min-height:120px;max-height:200px;overflow:auto;padding:4px;border:1px solid #e6e9ef;border-radius:4px;font-size:11px;background:transparent;white-space:pre-wrap;word-wrap:break-word;}
#newNote{min-height:56px;max-height:120px;overflow:auto;padding:8px;border:1px solid #d7dbe3;border-radius:8px;font-size:16px;background:transparent;margin-top:6px;}
#jobNotes{min-height:120px;max-height:200px;overflow:auto;padding:4px;border:1px solid #4b5563;border-radius:4px;font-size:11px;background:transparent;white-space:pre-wrap;word-wrap:break-word;color:#4b5563;}
#newNote{min-height:56px;max-height:120px;overflow:auto;padding:8px;border:1px solid #4b5563;border-radius:8px;font-size:16px;background:transparent;margin-top:6px;}
.toolbar{display:flex;flex-wrap:wrap;margin-bottom:3px;margin-top:5px} /* small space below toolbar */
.toolbar button{
height:28px;
@@ -144,9 +146,9 @@
<table class="detail-table" id="detailTable"></table>
<div id="jobFolderLink"><strong>Job Folder Link</strong><div><span id="jobFolderAnchor">No Link Available</span></div></div>
<button id="jobFolderBtn" disabled>No Folder Available</button>
<h3 style="margin:8px 0 6px 0">Notes</h3>
<h3 style="margin:8px 0 6px 0;color:var(--accent)">Notes</h3>
<div id="jobNotes"></div>
<div class="toolbar" id="toolbar">
@@ -194,7 +196,7 @@
const detailModal = document.getElementById('detailModal');
const detailTable = document.getElementById('detailTable');
const jobFolderAnchor = document.getElementById('jobFolderAnchor');
const jobFolderBtn = document.getElementById('jobFolderBtn');
const jobNotes = document.getElementById('jobNotes');
const newNote = document.getElementById('newNote');
@@ -374,17 +376,32 @@
tr.appendChild(tdLabel); tr.appendChild(tdVal); detailTable.appendChild(tr);
}
// Job folder link
jobFolderAnchor.innerHTML = '';
// Job folder button
if(job.Job_Folder_Link && String(job.Job_Folder_Link).trim()!==''){
try{ const url=new URL(job.Job_Folder_Link); const a=document.createElement('a'); a.href=url.href; a.target='_blank'; a.rel='noopener noreferrer'; a.textContent=url.href; a.style.color='#0d6efd'; a.style.textDecoration='underline'; jobFolderAnchor.appendChild(a);
}catch(e){ jobFolderAnchor.textContent='No Link Available'; jobFolderAnchor.style.color='#374151'; jobFolderAnchor.style.textDecoration='none'; }
} else { jobFolderAnchor.textContent='No Link Available'; jobFolderAnchor.style.color='#374151'; jobFolderAnchor.style.textDecoration='none'; }
try{
const url=new URL(job.Job_Folder_Link);
jobFolderBtn.textContent='Show Job Folder';
jobFolderBtn.disabled=false;
jobFolderBtn.className='active';
jobFolderBtn.onclick=()=>window.open(url.href, '_blank', 'noopener,noreferrer');
}catch(e){
jobFolderBtn.textContent='No Folder Available';
jobFolderBtn.disabled=true;
jobFolderBtn.className='';
jobFolderBtn.onclick=null;
}
} else {
jobFolderBtn.textContent='No Folder Available';
jobFolderBtn.disabled=true;
jobFolderBtn.className='';
jobFolderBtn.onclick=null;
}
jobNotes.innerHTML = job.Notes || '';
newNote.innerHTML = '';
tbButtons.forEach(b=>b.classList.remove('active'));
detailModal.style.display='flex';
document.getElementById('detailBox').scrollTop = 0;
}
document.getElementById('btnClose').addEventListener('click',()=>{detailModal.style.display='none';});