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

Adjust detail timeline layout and event label positions

Browse Source
This commit is contained in:
Kiyomichi Kosaka 2025-06-20 08:27:23 +02:00
parent d671e64c85
commit 441eec4e0c
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
script.js
View File

@ -783,6 +783,9 @@ function showEonstripDetail(index, startCob) {
if (elem.classList.contains('small-event') || elem.className === 'event-line') { if (elem.classList.contains('small-event') || elem.className === 'event-line') {
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'event-label'; label.className = 'event-label';
if (displayStart < 0.05) {
label.classList.add('below');
}
label.textContent = ev.label; label.textContent = ev.label;
elem.appendChild(label); elem.appendChild(label);
} else { } else {

23
style.css
View File

@ -402,17 +402,17 @@
position: relative; position: relative;
height: 400px; height: 400px;
border-left: 3px solid #00ffff; border-left: 3px solid #00ffff;
margin-left: 40px; margin-right: 40px;
overflow-x: visible; margin-left: 0;
overflow-y: hidden; overflow: visible;
} }
.timeline-block { .timeline-block {
position: absolute; position: absolute;
left: -40px; left: 0;
width: calc(100% + 40px); width: calc(100% + 40px);
text-align: right; text-align: left;
padding-right: 4px; padding-left: 4px;
border-top: 1px dashed rgba(0,255,255,0.5); border-top: 1px dashed rgba(0,255,255,0.5);
color: #00ffff; color: #00ffff;
font-size: 0.9em; font-size: 0.9em;
@ -425,7 +425,7 @@
.current-time-line { .current-time-line {
position: absolute; position: absolute;
left: -40px; left: 0;
width: calc(100% + 40px); width: calc(100% + 40px);
border-top: 2px solid #ff00ff; border-top: 2px solid #ff00ff;
color: #ff00ff; color: #ff00ff;
@ -481,6 +481,15 @@
z-index: 4; z-index: 4;
} }
.event-line .event-label.below,
.event-box.small-event .event-label.below {
bottom: auto;
top: 100%;
transform: translate(-50%, 2px);
margin-bottom: 0;
margin-top: 2px;
}
.event-box:hover .tooltip, .event-box:hover .tooltip,
.event-line:hover .tooltip { .event-line:hover .tooltip {
opacity: 1; opacity: 1;