iger
/
engelsystem
9
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

replace sticky-headers javascript impl with css

This commit is contained in:
Thomas Rupprecht 2022-12-29 02:38:45 +01:00 committed by Igor Scheller
parent 3412ed2924
commit 733586dfd5
4 changed files with 13 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
includes/view/ShiftCalendarRenderer.php
View File

@ -212,22 +212,23 @@ class ShiftCalendarRenderer
*/ */
private function renderTick($time, $label = false) private function renderTick($time, $label = false)
{ {
$class = $label ? 'tick bg-' . theme_type() : 'tick ';
if ($time % (24 * 60 * 60) == 23 * 60 * 60) { if ($time % (24 * 60 * 60) == 23 * 60 * 60) {
if (!$label) { if (!$label) {
return div('tick day'); return div($class . ' day');
} }
return div('tick day', [ return div($class . ' day', [
date(__('m-d'), $time) . '<br>' . date(__('H:i'), $time) date(__('m-d'), $time) . '<br>' . date(__('H:i'), $time)
]); ]);
} elseif ($time % (60 * 60) == 0) { } elseif ($time % (60 * 60) == 0) {
if (!$label) { if (!$label) {
return div('tick hour'); return div($class . ' hour');
} }
return div('tick hour', [ return div($class . ' hour', [
date(__('m-d'), $time) . '<br>' . date(__('H:i'), $time) date(__('m-d'), $time) . '<br>' . date(__('H:i'), $time)
]); ]);
} }
return div('tick'); return div($class);
} }
/** /**
@ -237,10 +238,7 @@ class ShiftCalendarRenderer
*/ */
private function renderTimeLane() private function renderTimeLane()
{ {
$bg = ''; $bg = 'bg-' . theme_type();
if (theme_type() === 'light') {
$bg = 'bg-light';
}
$time_slot = [ $time_slot = [
div('header ' . $bg, [ div('header ' . $bg, [

41
resources/assets/js/sticky-headers.js
View File

@ -1,41 +0,0 @@
import { ready } from './ready';
/**
* @param {NodeList} elements
* @param {string} prop
* @param {*} value
*/
const applyStyle = (elements, prop, value) => {
elements.forEach((element) => {
element.style[prop] = value;
});
};
/**
* Enables the fixed headers and time lane for the shift-calendar and datatables
*/
ready(() => {
if (!document.querySelector('.shift-calendar')) return;
const headers = document.querySelectorAll('.shift-calendar .header');
const timeLane = document.querySelector('.shift-calendar .time');
const topReference = document.querySelector('.container-fluid .row');
if (!headers.length || !timeLane || !topReference) return;
timeLane.style.position = 'relative';
timeLane.style.zIndex = 999;
applyStyle(headers, 'position', 'relative');
applyStyle(headers, 'zIndex', 900);
window.addEventListener('scroll', () => {
const top = headers.item(0).parentNode.getBoundingClientRect().top;
const left = Math.max(0, window.scrollX - 15);
timeLane.style.left = `${left}px`;
const headersTop = Math.max(0, window.scrollY - top - 13 + topReference.getBoundingClientRect().top);
applyStyle(headers, 'top', `${headersTop}px`);
});
});

1
resources/assets/js/vendor.js
View File

@ -1,6 +1,5 @@
import 'core-js/stable'; import 'core-js/stable';
window.bootstrap = require('bootstrap'); window.bootstrap = require('bootstrap');
import './forms'; import './forms';
import './sticky-headers';
import './countdown'; import './countdown';
import './dashboard'; import './dashboard';

6
resources/assets/themes/base.scss
View File

@ -191,6 +191,9 @@ table a > .icon-icon_angel {
flex-shrink: 1; flex-shrink: 1;
.header { .header {
position: sticky;
top: calc(40px + $navbar-padding-y * 2 + var(--#{$prefix}border-width));
z-index: $zindex-sticky;
border-bottom: 1px solid $table-border-color; border-bottom: 1px solid $table-border-color;
height: 30px; height: 30px;
padding: 5px 5px 5px 16px; padding: 5px 5px 5px 16px;
@ -215,6 +218,9 @@ table a > .icon-icon_angel {
} }
.lane.time { .lane.time {
position: sticky;
left: 0;
z-index: $zindex-sticky + 1;
border-right: 1px solid $table-border-color; border-right: 1px solid $table-border-color;
flex-grow: 0; flex-grow: 0;
min-width: 50px; min-width: 50px;