Adjust media queries, fix weird navigation behaviour on small screens, fix hint element shifting on small screens, small bugfixes
Change-Id: I98a4fff224093e2a9636abc0224682261a23000e
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 7f6dce6..25fb06b 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -267,6 +267,9 @@
});
};
});
+
+ // Media Query for adjusting dynamically added elements (e.g. hint)
+ const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
// Function to toggle the shifted class on elements
function shiftContent() {
@@ -277,7 +280,7 @@
const results = document.querySelector('.found');
const aside = document.querySelector('aside');
- if (aside && aside.classList.contains('active')) {
+ if (aside && aside.classList.contains('active') && !isSmallScreen) {
header.classList.add('shifted');
if (!results) {
main.classList.add('shifted');
@@ -296,11 +299,42 @@
// when user types into the searchbar and clicks the sidebar (or anywhere
// outside the searchbar) afterwards
function adjustHintPosition() {
- if (KorAP.Hint != undefined) {
- KorAP.Hint.inputField().reposition();
- KorAP.Hint.update();
- };
- };
+ const hint = document.querySelector('#hint');
+ const searchInput = document.querySelector('#q-field');
+ const aside = document.querySelector('aside');
+
+ if (hint && searchInput) {
+ // Create a temporary span to measure the exact text width
+ const span = document.createElement('span');
+ span.style.visibility = 'hidden';
+ span.style.position = 'absolute';
+ span.style.whiteSpace = 'pre';
+ // Copy the input's font properties
+ const inputStyle = window.getComputedStyle(searchInput);
+ span.style.font = inputStyle.font;
+ span.style.fontSize = inputStyle.fontSize;
+ span.style.fontFamily = inputStyle.fontFamily;
+ span.textContent = searchInput.value;
+ document.body.appendChild(span);
+
+ // Get the actual width of the text
+ const inputWidth = searchInput.value.length > 0 ? span.offsetWidth : 0;
+ document.body.removeChild(span);
+ let hintLeftPosition = inputWidth;
+
+ // TODO: This shouldn't be a fixed position!
+ if (aside && aside.classList.contains('active') && !isSmallScreen) {
+ hintLeftPosition += 230;
+ }
+
+ hint.style.left = `${hintLeftPosition}px`;
+ }
+ }
+ //Can be solved more elegant witch ES6 (see optional chaining operator)
+ let qlf = document.querySelector('#q-field');
+ if(qlf != null){
+ qlf.addEventListener('blur', adjustHintPosition);
+ }
// MutationObserver to detect when #hint is injected into the DOM
const observer = new MutationObserver((mutationsList, observer) => {