chaos/NTP-Timeturner
1
0
Fork 0
mirror of https://github.com/cjfranko/NTP-Timeturner.git synced 2025-11-08 18:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

style: Resize status icons to 60x60px and adjust layout

Browse source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Chris Frankland-Wright 2025-08-08 00:02:43 +01:00
parent 26dca4fd18
commit fe9ac76942
2 changed files with 13 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

10
static/script.js
View file

@ -77,7 +77,7 @@ document.addEventListener('DOMContentLoaded', () => {
function updateStatus(data) { function updateStatus(data) {
const ltcStatus = data.ltc_status || 'UNKNOWN'; const ltcStatus = data.ltc_status || 'UNKNOWN';
const ltcIconSrc = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default; const ltcIconSrc = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default;
statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt=""> ${ltcStatus}`; statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt=""><span>${ltcStatus}</span>`;
statusElements.ltcStatus.className = ltcStatus.toLowerCase(); statusElements.ltcStatus.className = ltcStatus.toLowerCase();
statusElements.ltcTimecode.textContent = data.ltc_timecode; statusElements.ltcTimecode.textContent = data.ltc_timecode;
statusElements.frameRate.textContent = data.frame_rate; statusElements.frameRate.textContent = data.frame_rate;
@ -87,16 +87,16 @@ document.addEventListener('DOMContentLoaded', () => {
const ntpIconSrc = iconMap.ntpActive[data.ntp_active]; const ntpIconSrc = iconMap.ntpActive[data.ntp_active];
if (data.ntp_active) { if (data.ntp_active) {
statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""> Active`; statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Active</span>`;
statusElements.ntpActive.className = 'active'; statusElements.ntpActive.className = 'active';
} else { } else {
statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""> Inactive`; statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Inactive</span>`;
statusElements.ntpActive.className = 'inactive'; statusElements.ntpActive.className = 'inactive';
} }
const syncStatus = data.sync_status || 'UNKNOWN'; const syncStatus = data.sync_status || 'UNKNOWN';
const syncIconSrc = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default; const syncIconSrc = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default;
statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt=""> ${syncStatus}`; statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt=""><span>${syncStatus}</span>`;
statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase(); statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase();
statusElements.deltaMs.textContent = data.timecode_delta_ms; statusElements.deltaMs.textContent = data.timecode_delta_ms;
@ -104,7 +104,7 @@ document.addEventListener('DOMContentLoaded', () => {
const jitterStatus = data.jitter_status || 'UNKNOWN'; const jitterStatus = data.jitter_status || 'UNKNOWN';
const jitterIconSrc = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default; const jitterIconSrc = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;
statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt=""> ${jitterStatus}`; statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt=""><span>${jitterStatus}</span>`;
statusElements.jitterStatus.className = jitterStatus.toLowerCase(); statusElements.jitterStatus.className = jitterStatus.toLowerCase();
statusElements.interfaces.innerHTML = ''; statusElements.interfaces.innerHTML = '';

11
static/style.css
View file

@ -99,10 +99,15 @@ button:hover {
color: #555; color: #555;
} }
#ltc-status, #ntp-active, #sync-status, #jitter-status {
display: inline-flex;
align-items: center;
gap: 0.5em;
}
.status-icon { .status-icon {
height: 1em; width: 60px;
vertical-align: middle; height: 60px;
margin-right: 0.5em;
} }
/* Status-specific colors */ /* Status-specific colors */