FaSTTUBe/ftracker
51
1
Fork 0
Code Issues 2 Pull Requests Releases 1 Wiki Activity

Improve scrolling behavior of headers

Browse Source 
This was way too much work -.-
This commit is contained in:
Oskar Winkels
2020-12-03 00:28:06 +01:00
committed by Oskar
parent 1c46c989d4
commit 3e09482239
1 changed files with 86 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
web/viewdata.html
View File

@ -16,55 +16,67 @@
} }
main { main {
height: calc(100% - 42px); height: calc(100% - 42px);
overflow-Y: scroll;
vertical-align: top; vertical-align: top;
} }
main > section { main > section {
height: 100%; height: calc(100% - 32px);
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
} }
main > section.names { main > .viewheader {
width: 127px;
border-right: 1px solid gray;
}
main > section.timewrap {
width: calc(100% - 128px);
overflow-X: scroll;
}
.times {
overflow-X: hidden;
}
.row {
position: relative;
height: 2em;
background-size: 60px 100%;
}
.names .row:nth-child(odd) { background: #ddd; }
.names .row:nth-child(even) { background: #eee; }
.times .row:nth-child(odd) {
background-image: linear-gradient(to right, #bbb 1px, #ddd 1px);
}
.times .row:nth-child(even) {
background-image: linear-gradient(to right, #bbb 1px, #eee 1px);
}
.row > span {
padding: 7px;
display: inline-block; display: inline-block;
vertical-align: top;
} }
.names { main > section.names, #nameheader {
width: 127px;
overflow: hidden;
border-right: 1px solid gray;
font-weight: bold; font-weight: bold;
text-transform: capitalize; text-transform: capitalize;
} }
.times span { main #names {
padding-bottom: 32px;
}
main > section.times, #timeheader {
width: calc(100% - 128px);
overflow: hidden;
}
.scroll {
height: 100%;
width: 100%;
overflow: scroll;
}
.row, .row #timelabels {
position: relative;
height: 32px;
background-size: 60px 100%;
}
.names .row:nth-child(even) { background: #ddd; }
.names .row:nth-child(odd) { background: #eee; }
.times .row:nth-child(even) {
background-image: linear-gradient(to right, #bbb 1px, #ddd 1px);
}
.times .row:nth-child(odd) {
background-image: linear-gradient(to right, #bbb 1px, #eee 1px);
}
.row span {
padding: 7px;
display: inline-block;
}
.times span, #timeheader span {
position: absolute; position: absolute;
background: #c50e1f; background: #c50e1f;
color: #ddd; color: #ddd;
margin-right: 16px; margin-right: 16px;
} }
#timeheader span { .viewheader.row {
background: none; height: 31px;
color: #444; background: #ddd !important;
border-bottom: 1px solid gray;
}
.viewheader span {
background: none !important;
color: #444 !important;
padding-left: 4px; padding-left: 4px;
} }
</style> </style>
@ -76,10 +88,27 @@
Raum: <input type="text" id="room" placeholder=".* (regex)" onchange="renderData()"> Raum: <input type="text" id="room" placeholder=".* (regex)" onchange="renderData()">
</header> </header>
<main> <main>
<section class="names"></section><section class="timewrap"><div class="times"></div></section> <div class="row viewheader" id="nameheader">
<span><b>Names</b></span>
</div><!--
--><div class="row viewheader" id="timeheader">
<div id="timelabels"></div>
</div>
<section class="names">
<div id="names"></div>
</section><!--
--><section class="times">
<div class="scroll">
<div id="times"></div>
</div>
</section>
</main> </main>
<script> <script>
var data = null; var data = null;
var names = document.querySelector('main #names')
var times = document.querySelector('main #times')
function renderData() { function renderData() {
if (data == null) { if (data == null) {
@ -87,11 +116,11 @@
return return
} }
var names = document.querySelector('main .names') names = document.querySelector('main #names')
var times = document.querySelector('main .times') times = document.querySelector('main #times')
names.innerHTML = '<div class="row"><span>Names</span></div>' names.innerHTML = ''
times.innerHTML = '<div class="row" id="timeheader"></div>' times.innerHTML = ''
var startInput = document.querySelector('input#start') var startInput = document.querySelector('input#start')
var endInput = document.querySelector('input#end') var endInput = document.querySelector('input#end')
@ -112,10 +141,14 @@
content += '<span style="left:'+left+'px;">'+t+'</span>' content += '<span style="left:'+left+'px;">'+t+'</span>'
tc.setTime(tc.getTime() + (60*60*1000)); tc.setTime(tc.getTime() + (60*60*1000));
} }
var timeheader = document.getElementById('timeheader') var timeheader = document.getElementById('timelabels')
timeheader.innerHTML = content timeheader.innerHTML = content
times.style.width = ((endDate - startDate) / (1000 * 60)) + 'px' var viewwidth = ((endDate - startDate) / (1000 * 60))
timeheader.style.width = viewwidth + 'px'
times.style.width = viewwidth + 'px'
var rowCount = 0
for (var [name, list] of Object.entries(data)) { for (var [name, list] of Object.entries(data)) {
@ -151,13 +184,16 @@
if (rowHasRoom) { if (rowHasRoom) {
var vname = name.replace('-', ' ') var vname = name.replace('-', ' ')
names.innerHTML += '<div class="row"><span>'+vname+'</span></div>' names.innerHTML += '<div class="row"><span>'+vname+'</span></div>'
times.appendChild(row) times.appendChild(row)
rowCount += 12
} }
} }
var tw = document.querySelector('main .timewrap') //var viewheight = rowCount * 32;
//times.style.height = viewheight + 'px'
var tw = document.querySelector('main .scroll')
tw.scrollLeft = tw.scrollWidth tw.scrollLeft = tw.scrollWidth
} }
@ -198,6 +234,14 @@
document.querySelector('input#end').value = document.querySelector('input#end').value =
localISODate.split(':').slice(0,2).join(':') localISODate.split(':').slice(0,2).join(':')
var scrollbox = document.querySelector('.scroll')
var timehead = document.querySelector('#timeheader')
var namebox = document.querySelector('section.names')
scrollbox.onscroll = function() {
timehead.scrollLeft = scrollbox.scrollLeft
namebox.scrollTop = scrollbox.scrollTop
}
loadData() loadData()
</script> </script>
</body> </body>