Add gin-table-scroll-wrapper class to wrapper in table template (0f09f670) · Commits · project / gin

dist/css/base/gin.css

+4 −0

Original line number	Diff line number	Diff line
		@@ -3781,6 +3781,10 @@ tr.color-error:focus,
		box-shadow: none;
		}

		.block-system > form .gin-layer-wrapper {
		padding-bottom: 1px;
		}

		.compact-link {
		font-size: var(--gin-font-size-s);
		}

js/overrides/tableheader.js

+11 −5

Original line number	Diff line number	Diff line
		@@ -9,13 +9,18 @@
		init: function (context) {
		once('ginTableHeader', '.sticky-enabled', context).forEach(el => {
		// Watch sticky table header.
		const stickyOffsetTop = this.stickyPosition();
		const observer = new IntersectionObserver(
		([e]) => {
		if (context.querySelector('.gin-table-scroll-wrapper')) {
		context.querySelector('.gin-table-scroll-wrapper').classList.toggle('--is-sticky', e.intersectionRatio < 1 \|\| window.scrollY > context.querySelector('.gin-table-scroll-wrapper').offsetTop);
		if (!e.isIntersecting && e.rootBounds.top === stickyOffsetTop) {
		context.querySelector('.gin-table-scroll-wrapper').classList.add('--is-sticky');
		} else {
		context.querySelector('.gin-table-scroll-wrapper').classList.remove('--is-sticky');
		}
		}
		},
		{ threshold: [1], rootMargin: `-${this.stickyPosition()}px 0px 0px 0px` }
		{ threshold: 1.0, rootMargin: `-${stickyOffsetTop}px 0px 0px 0px` }
		);
		observer.observe(el.querySelector('thead'));

		@@ -33,14 +38,14 @@
		},
		stickyPosition: () => {
		let offsetTop = 0;
		if (!document.body.classList.contains('gin--classic-toolbar')) {
		if (document.body.classList.contains('gin--classic-toolbar')) {
		offsetTop = document.querySelector('#toolbar-bar').clientHeight;
		} else {
		const toolbar = document.querySelector('#gin-toolbar-bar');
		offsetTop = document.querySelector('.region-sticky').clientHeight;
		if (toolbar) {
		offsetTop += toolbar.clientHeight;
		}
		} else {
		offsetTop = document.querySelector('#toolbar-bar').clientHeight;
		}

		return offsetTop;
		@@ -74,6 +79,7 @@
		table.querySelector(`table.sticky-header`).style.width = `${el.parentNode.offsetWidth}px`;
		});
		},

		};

		})(Drupal, once);

styles/base/_update.scss

+5 −0

Original line number	Diff line number	Diff line
		@@ -131,6 +131,11 @@ tr.color-error,
		box-shadow: none;
		}

		// fix overflow issue in FF
		.block-system > form .gin-layer-wrapper {
		padding-bottom: 1px;
		}

		.compact-link {
		font-size: var(--gin-font-size-s);
		text-align: right;

templates/dataset/table.html.twig

+76 −74

Original line number	Diff line number	Diff line
		@@ -40,6 +40,7 @@
		*/
		#}
		<div class="layer-wrapper gin-layer-wrapper">
		<div class="gin-table-scroll-wrapper">
		<table{{ attributes }}>
		{% if caption %}
		<caption>{{ caption }}</caption>
		@@ -123,3 +124,4 @@
		{% endif %}
		</table>
		</div>
		</div>