Merge pull request #62 from ok2/codex/fix-visibility-of-event-labels-and-line-thickness
This commit is contained in:
commit
2e6d870c0f
19
script.js
19
script.js
@ -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
24
style.css
@ -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 */
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user