kaizenkodo/CoBiE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix detail view labels for small events

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 07:47:31 +02:00
parent 47d4a66b0f
commit 88c37b566a
2 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
script.js
View File

@ -745,18 +745,31 @@ function showEonstripDetail(index, startCob) {
const left = ev.col * width; const left = ev.col * width;
const displayStart = Math.max(0, ev.start); const displayStart = Math.max(0, ev.start);
const displayEnd = Math.min(1, ev.end); const displayEnd = Math.min(1, ev.end);
const elem = document.createElement(ev.end > ev.start ? 'div' : 'div'); const elem = document.createElement('div');
if (ev.end > ev.start) { if (ev.end > ev.start) {
elem.className = 'event-box'; elem.className = 'event-box';
const h = (displayEnd - displayStart) * 100; const h = (displayEnd - displayStart) * 100;
elem.style.height = (h > 0 ? h : 0) + '%'; if (h < 2) {
elem.classList.add('small-event');
elem.style.height = '4px';
} else {
elem.style.height = (h > 0 ? h : 0) + '%';
}
} else { } else {
elem.className = 'event-line'; elem.className = 'event-line';
} }
elem.style.top = (displayStart * 100) + '%'; elem.style.top = (displayStart * 100) + '%';
elem.style.left = left + '%'; elem.style.left = left + '%';
elem.style.width = `calc(${width}% - 2px)`; elem.style.width = `calc(${width}% - 2px)`;
elem.textContent = ev.label;
if (elem.classList.contains('small-event') || elem.className === 'event-line') {
const label = document.createElement('span');
label.className = 'event-label';
label.textContent = ev.label;
elem.appendChild(label);
} else {
elem.textContent = ev.label;
}
timeline.appendChild(elem); timeline.appendChild(elem);
}); });
} }

24
style.css
View File

@ -430,8 +430,30 @@
} }
.event-line { .event-line {
height: 2px; height: 4px;
padding: 0; padding: 0;
overflow: visible;
}
.event-box.small-event {
overflow: visible;
padding: 0;
}
.event-line .event-label,
.event-box.small-event .event-label {
position: absolute;
left: 100%;
top: 50%;
transform: translateY(-50%);
margin-left: 4px;
background: rgba(255,0,255,0.3);
border: 1px solid rgba(0,255,255,0.5);
border-radius: 4px;
padding: 2px 4px;
white-space: nowrap;
color: #fff;
font-size: 0.7em;
} }
/* Layout combining current time and analog clock */ /* Layout combining current time and analog clock */