andrew/feedmill-recounter
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): jobs page — semantic cards, remove onclick, flat progress bar

Browse Source
This commit is contained in:
jetson committed 2026-09-17 16:19:51 +07:00
1 parent b1170f42a9
commit 20d523469d
2 files changed
+60 -13
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

templates/jobs.html
+20 -13
View File
@@ -190,7 +190,7 @@
.job-card-progress-fill {
height: 100%;
background: linear-gradient(90deg, var(--color-primary-500), var(--color-primary-400));
background: var(--color-primary-500);
border-radius: 2px;
transition: width 0.4s ease;
}
@@ -227,7 +227,7 @@
{% if jobs %}
<div class="jobs-grid">
{% for job in jobs %}
<div class="card job-card">
<article class="card job-card">
<div class="job-card-thumb">
<img src="/preview/thumb/{{ job.job_id }}" alt="Thumbnail for job {{ job.job_id }}" loading="lazy"
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
@@ -248,7 +248,7 @@
<div class="job-card-body">
<div class="job-card-header">
<span class="job-card-id" title="{{ job.job_id }}">{{ job.job_id[:12] }}{% if job.job_id|length > 12 %}&hellip;{% endif %}</span>
<button class="copy-btn" onclick="copyJobId(this, '{{ job.job_id }}')" title="Copy Job ID" aria-label="Copy Job ID">
<button class="copy-btn" data-job-id="{{ job.job_id }}" title="Copy Job ID" aria-label="Copy Job ID">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
</button>
</div>
@@ -267,7 +267,7 @@
<span class="job-card-time" data-timestamp="{{ job.created_at }}"></span>
<a href="/status/{{ job.job_id }}" class="job-card-link">View Details</a>
</div>
</div>
</article>
{% endfor %}
</div>
{% else %}
@@ -321,15 +321,22 @@
setInterval(updateTimes, 60000);
})();
function copyJobId(btn, id) {
navigator.clipboard.writeText(id).then(function() {
btn.classList.add('copied');
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
setTimeout(function() {
btn.classList.remove('copied');
btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
}, 1500);
var copySvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>';
var checkSvg = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>';
document.querySelectorAll('.copy-btn').forEach(function(btn) {
btn.addEventListener('click', function() {
var id = this.getAttribute('data-job-id');
var el = this;
navigator.clipboard.writeText(id).then(function() {
el.classList.add('copied');
el.innerHTML = checkSvg;
setTimeout(function() {
el.classList.remove('copied');
el.innerHTML = copySvg;
}, 1500);
});
});
}
});
</script>
{% endblock %}