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) {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index a785117..32b0812 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -41,6 +41,7 @@
-o-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
+ cursor: pointer;
&:hover {
background-color: $middle-green;
@@ -50,6 +51,7 @@
display: block;
padding: 1.5rem 1rem;
color: $nearly-white;
+ cursor: pointer;
}
}
}
@@ -72,6 +74,9 @@
}
&-btn {
+ display: flex;
+ align-items: center;
+ column-gap: $base-padding;
height: $standard-size-and-spacing;
padding: 1.25rem 1rem;
color: $nearly-white;
@@ -95,9 +100,12 @@
h3.user-name {
padding-right: 2px;
- // font-size: 85%;
font-size: 120%;
- display: inline;
+ display: inline-block;
+ max-width: 6ch;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
}
@@ -297,10 +305,10 @@
&.right {
float: right;
- display: inline-block;
- >.tutorial{
- margin-left: 10px;
- }
+ // display: inline-block;
+ // >.tutorial{
+ // margin-left: 10px;
+ // }
}
&.top {
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index ce23ee5..8201f8b 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -48,12 +48,16 @@
.burger-icon {
position: relative;
- display: block !important;
+ display: none;
width: $standard-size-and-spacing;
height: $standard-size-and-spacing;
font-size: 1.8rem;
color: $nearly-white;
+ &.show {
+ display: block;
+ }
+
&::after {
position: absolute;
top: 2rem;
@@ -145,9 +149,14 @@
&.profile {
& + .dropdown-content {
- margin-top: 4rem;
+ margin-top: 3.9rem;
}
}
+
+ h3.user-name {
+ max-width: unset;
+ overflow: unset;
+ }
}
&-content {