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) => {
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 560d04e..8cb8e0f 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -52,70 +52,6 @@
color: $nearly-white;
}
}
-
- // fieldset.fieldset-login {
- // display: flex;
- // flex-direction: column;
- // margin-right: 4rem;
- // padding: 0;
- // min-inline-size: unset;
- // border: unset;
-
- // form.login {
- // display: flex;
- // align-items: center;
-
- // input[type=text],
- // input[type=password] {
- // @include input-field;
- // margin-right: 8px;
- // height: 1.5rem;
- // }
-
- // button.btn-login {
- // // width: 3rem;
- // // height: 3rem;
- // // background-color: $dark-green;
- // background-color: unset;
- // color: $nearly-white;
- // // padding: .75rem 1rem;
- // font-size: 180%;
- // border: none;
- // border-color: unset;
- // border-radius: 0;
- // text-shadow: none;
- // font-weight: normal;
- // top: unset;
- // transition: all .2s ease-in-out;
- // -o-transition: all .2s ease-in-out;
- // -moz-transition: all .2s ease-in-out;
- // -webkit-transition: all .2s ease-in-out;
-
- // &::after {
- // content: $fa-login;
- // }
-
- // &:hover {
- // // background-color: $middle-green;
- // color: $dark-orange;
- // }
- // }
- // }
-
- // p {
- // margin: 0;
- // font-size: .7rem;
- // color: $nearly-white;
-
- // a {
- // color: $dark-orange;
-
- // &:hover {
- // color: $middle-orange;
- // }
- // }
- // }
- // }
}
.dropdown {
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index eaa309d..c6261e9 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -64,7 +64,6 @@
a.logo > h1 {
position: absolute;
margin: 0;
- // margin-left: 10pt;
margin-left: 3rem;
left: 0;
top: 50%;
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index 6ff91e7..ce23ee5 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -22,7 +22,6 @@
header {
padding-top: 3rem;
- // padding-right: 8px;
&.shifted {
padding-left: 0;
@@ -32,7 +31,6 @@
header form {
margin: 1.5rem 1rem;
padding-left: 0;
- // padding-top: 33px;
&#searchform {
margin: 2.5rem 1rem 0 1rem;
@@ -44,14 +42,8 @@
display: none;
}
- &-group {
- h3.nav-link {
- height: 2rem;
-
- a {
- padding: .75rem !important;
- }
- }
+ a.logo > h1 {
+ margin-left: 0;
}
.burger-icon {
@@ -120,42 +112,58 @@
}
}
}
+ }
- p {
- padding: 1rem 0 0;
-
- a {
- display: inline;
- }
+ h3.nav-link {
+ height: 2rem;
+
+ a {
+ padding: .75rem !important;
+ }
+ }
+
+ p {
+ padding: 1rem 0 0;
+
+ a {
+ display: inline;
}
}
}
+
+ .dropdown {
+ margin-right: 0 !important;
- @media (hover: none) and (pointer: coarse) {
- .dropdown {
- margin-right: 0 !important;
+ &-btn {
+ &.login {
+ display: none;
- &-btn {
- &.login {
- visibility: hidden;
+ & + .dropdown-content {
+ margin-top: 0;
}
}
- &-content {
- display: block !important;
- width: 100% !important;
-
- form.login {
- input[type=text],
- input[type=password] {
- width: 100%;
- }
+ &.profile {
+ & + .dropdown-content {
+ margin-top: 4rem;
}
+ }
+ }
- p {
- a {
- display: inline;
- }
+ &-content {
+ display: block !important;
+ width: 100% !important;
+
+ form.login {
+ input[type=text],
+ input[type=password] {
+ width: 100%;
+ }
+ }
+
+ p {
+ a {
+ display: inline;
}
}
}