UI improvements and bug fixes (2025-03-04)
- Add shortening function to username, if username is too long (max. 6 characters).
- Change 'doc' to 'doc_start' in help button.
- Remove help button from dropdown list and add it to navbar.
- Remove headerButtonGroup and add links directly to header.html.ep.
- Remove tooltip from help button.
- Fix sidebar appearance when user navigates to /settings.
- Fix content shift for pages (due to /settings modification).
- Change fixed value for hint positioning to dynamic value.
Change-Id: I7ee84bff170c4985494895cdacd1ed77d60320db
diff --git a/dev/js/src/init.js b/dev/js/src/init.js
index 25fb06b..bb61b57 100644
--- a/dev/js/src/init.js
+++ b/dev/js/src/init.js
@@ -143,6 +143,14 @@
// Responsive navbar: hide and show burger menu
const burgerIcon = document.querySelector('.burger-icon');
+ const navbarGroup = document.querySelector('.navbar-group');
+
+ if (burgerIcon && navbarGroup) {
+ if (navbarGroup.innerHTML.trim() !== '') {
+ burgerIcon.classList.add('show');
+ }
+ }
+
let isBurgerMenuOpen = false;
if (burgerIcon) {
@@ -322,9 +330,9 @@
document.body.removeChild(span);
let hintLeftPosition = inputWidth;
- // TODO: This shouldn't be a fixed position!
if (aside && aside.classList.contains('active') && !isSmallScreen) {
- hintLeftPosition += 230;
+ const asideWidth = aside.getBoundingClientRect().width;
+ hintLeftPosition += asideWidth;
}
hint.style.left = `${hintLeftPosition}px`;
@@ -342,7 +350,9 @@
if (mutation.type === 'childList') {
const hint = document.querySelector('#hint');
if (hint) {
- shiftContent();
+ if (window.location.pathname !== '/settings' && window.location.pathname !== '/settings/') {
+ shiftContent();
+ }
observer.disconnect();
KorAP.Hint.alert().show();
}
@@ -389,6 +399,18 @@
});
}
+ if (window.location.pathname === '/settings' || window.location.pathname === '/settings/') {
+ const header = document.querySelector('header');
+ const main = document.querySelector('main');
+ const footer = document.querySelector('footer');
+
+ aside.style.display = 'none';
+
+ if (header) header.style.setProperty('padding-left', '0', 'important');
+ if (main) main.style.setProperty('padding-left', '0', 'important');
+ if (footer) footer.style.setProperty('padding-left', '0', 'important');
+ }
+
// Replace QL select menus with KorAP menus
var qlField = d.getElementById('ql-field');
if (qlField !== null) {