UI rework by Uyen

2024-11-18
- Delete unnecessary lines from .gitignore file.
- Fix sidebar to not be visible (on non-auth instances), if empty.
- Fix display/behaviour of annotation assistant bar to move correctly, when user types into the searchbar and clicks on the sidebar or anywhere else afterwards.
- Restore unlinted init.js file from patch 16 and add back changes for sidebar, top navbar, etc.

2024-10-30
- Fix overlap of documentation pop-up window.
- Change results area to not being shifted when sidebar is open.
- Add and adjust code for tour links (changed by Helge).
- Fix burger menu behaviour when clicking on tour link.
- Delete news and announcements template files from repository.
- Delete code snippets and files concerning news page.
- Change top navbar to non-sticky.
- Add and adjust code for top navbar items to be configurable (changed by Nils).

2024-10-09
- Add variables for element sizes and spacings.
- Remove static class for shifting the sidebar (fix position for annotation assistant bar on pages with the sidebar open by default).
- Fix shifted view on documentation page on small screens.
- Add check for burger icon existence.
- Add and style legend for login area.
- Delete commented-out code snippets on the go.
- Add new overall line-height.
- Add new logo addon styles back from patch set 12.
- Add back missing class attribute of hint-element.

2024-10-01
- Revise login area to be shown in a dropdown box on hovering the login icon.
- Fix login box focus, when user clicks on auto-completion.
- Add logout icon next to sign out text.
- Create new files for news and announcements (controller, templates) and fix news link.
- Fix visibility of news link for logged in and logged out users.
- Fix empty sidebar issue (make sidebar invisible, if empty).
- Fix animation issue, when the sidebar slides out (blank space, content shift).
- Fix relocation issue of annotation assistant bar.
- Fix navbar to not scroll up initially, when the user clicks on a hash link.
- Fix content display in tour window (title overlapped with text).
- Add tour link to the top navbar.
- Fix burger menu behaviour (lock navbar, when burger menu is active).
- Edit burger menu visibility, when the user clicks on tour link on small screens.
- Add media queries for navbar/dropdown.
- Fix small design issues.

2024-09-11
- Revise sidebar, searchbar, and content slide behaviour.
- Add and fix media queries for sidebar, content, and doc navigation.
- Fix news link and comments.
- Fix small design issues.

2024-08-05
- Fix sidebar visibility on starting page.
- Change slide-in state on start.

2024-07-15
- Improve appearance of title-addon on logo.
- Create and style new item on top navbar for 'News'.
- Change settings link in logout.html.ep to dynamic link.

2024-04-29
- Add an indicator for user login, and some minor design changes.
- Add back content_block headerButtonGroup due to backwards
  compatibility and modify header.html.ep to fit changes.
- Correct color of minimize button for snippets to
  nearly-white, and add media query for border-radius of
  the search bar.
- Delete helper class get_user_name and set user_handle
  instead to get the user name.
- Add scroll functionality for navbar: hide on scroll down,
  show on scroll up.
- Create burger menu and add responsive styles for navbar,
  optimize element positions in header.
- Add and style registration link to fit in login area,
  change navbar size and input fields, improve positionings of
  logo and icons, fix animation of navbar when scrolling on
  small devices.

Change-Id: Ie7803aeafb6683d18de51f8c918fb7b0dd308fcc

Changes

@@ -1,3 +1,24 @@
+0.59 2024-11-18
+        - Improve appearance of title-addon on logo. (uyen-nhu)
+        - Create and style new item on top navbar for 'News'. (uyen-nhu)
+        - Change settings link in logout.html.ep to dynamic link. (uyen-nhu)
+        - Add an indicator for user login, and some minor design changes. (uyen-nhu)
+        - Add back content_block headerButtonGroup due to backwards
+          compatibility and modify header.html.ep to fit changes. (uyen-nhu)
+        - Correct color of minimize button for snippets to
+          nearly-white, and add media query for border-radius of
+          the search bar. (uyen-nhu)
+        - Delete helper class get_user_name and set user_handle
+          instead to get the user name. (uyen-nhu)
+        - Add scroll functionality for navbar: hide on scroll down,
+          show on scroll up. (uyen-nhu)
+        - Create burger menu and add responsive styles for navbar,
+          optimize element positions in header. (uyen-nhu)
+        - Add and style registration link to fit in login area,
+          change navbar size and input fields, improve positionings of
+          logo and icons, fix animation of navbar when scrolling on
+          small devices. (uyen-nhu)
+
 0.58 2024-11-15
         - Cookie path is settable now (hebasta)
         - Fix meta table view for key value pairs (diewald)

dev/js/src/init.js

@@ -2,7 +2,7 @@
  * Initialize The JS frontend part and decorate
  * the static HTML data.
  *
- * @author Nils Diewald
+ * @author Nils Diewald, Helge Stallkamp
  *
  * TODO: Create lazy loading of objects including
  * - obj.hint()
@@ -13,6 +13,9 @@
  * - obj.matchCreate() (using webpack)
  * - obj.koral() (show result, parse for errors ...)
  * - obj.alignment() // toggle
+ * 
+ * TODO: After upgrading to ES 6
+ * - use optional chaining operator (for example see below)
  */
 
 "use strict";
@@ -96,14 +99,20 @@ define([
       for(let j = 0; j < gt.length; j++){
         gt[j].setAttribute('href', '#');
         gt[j].addEventListener('click', function(){
-        tourClass.gTstartSearch().start();
-      });
-    }
+          tourClass.gTstartSearch().start();
 
-    KorAP.tourshowR = function(){
-      tourClass.gTshowResults().start();
+          // Close the burger menu by simulating a click on the burger icon
+          const burgerIcon = document.querySelector('.burger-icon');
+          if (isBurgerMenuOpen) {
+            burgerIcon.click();
+          }
+        });
+      }
+
+      KorAP.tourshowR = function(){
+        tourClass.gTshowResults().start();
       };
-    };
+    }
 
     var obj = {};
 
@@ -129,6 +138,50 @@ define([
       }
     );
 
+    // Responsive navbar: hide and show burger menu
+    const burgerIcon = document.querySelector('.burger-icon');
+    let isBurgerMenuOpen = false;
+
+    if (burgerIcon) {
+      burgerIcon.addEventListener('click', function() {
+        const navbar = document.querySelector('.navbar');
+        navbar.classList.toggle('show');
+
+        isBurgerMenuOpen = !isBurgerMenuOpen;
+        if (isBurgerMenuOpen) {
+          navbar.style.top = '0';
+        }
+      });
+    }
+
+    // Fallback solution for login dropdown visibility (if :focus-within is not supported)
+    document.addEventListener('DOMContentLoaded', function() {
+      const dropdown = document.querySelector('.dropdown');
+      const dropdownContent = document.querySelector('.dropdown-content');
+
+      dropdown.addEventListener('mouseenter', function() {
+        dropdownContent.style.display = 'block';
+      });
+
+      dropdown.addEventListener('mouseleave', function() {
+        // If no input inside the form is focused, then close dropdown content
+        if (!dropdown.contains(document.activeElement)) {
+          dropdownContent.style.display = 'none';
+        }
+      });
+
+      dropdownContent.addEventListener('focusin', function() {
+        dropdownContent.style.display = 'block';
+      });
+
+      dropdownContent.addEventListener('focusout', function(e) {
+        // If focus moved outside the dropdown content, then close it
+        if (!dropdownContent.contains(e.relatedTarget)) {
+          dropdownContent.style.display = 'none';
+        }
+      });
+    });
+
     /**
      * Replace Virtual Corpus field
      */
@@ -212,41 +265,128 @@ define([
       };
     });
 
+    // Function to toggle the shifted class on elements
+    function shiftContent() {
+      // Get elements to perform content shift when sidebar is active
+      const header = document.querySelector('header');
+      const main = document.querySelector('main');
+      const footer = document.querySelector('footer');
+      const hint = document.querySelector('#hint');
+      const results = document.querySelector('.found');
+      const aside = document.querySelector('aside');
+
+      if (aside && aside.classList.contains('active')) {
+        header.classList.add('shifted');
+        if (!results) {
+          main.classList.add('shifted');
+        }
+        footer.classList.add('shifted');
+        if (hint) {
+          hint.classList.add('shifted');
+          adjustHintPosition();
+        }
+      } else {
+        header.classList.remove('shifted');
+        main.classList.remove('shifted');
+        footer.classList.remove('shifted');
+        if (hint) {
+          hint.classList.remove('shifted');
+          adjustHintPosition();
+        }
+      }
+    }
+
+    // Function to adjust the position of the annotation assistant bar (hint), when user types into the searchbar and clicks the sidebar (or anywhere outside the searchbar) afterwards
+    function adjustHintPosition() {
+      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')) {
+          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) => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          const hint = document.querySelector('#hint');
+          if (hint) {
+            shiftContent();
+            observer.disconnect();
+          }
+        }
+      }
+    });
+
+    observer.observe(document.body, { childList: true, subtree: true });
+
     // Add focus listener to aside
     var aside = d.getElementsByTagName('aside')[0];
 
     if (aside && aside.classList.contains('active') == false) {
 
       // Horrible lock to deal with sidebar clicks
       var asideClicked = false;
-
+
+      shiftContent();
+
       // Make aside active on focus
-      aside.addEventListener('focus', function(e) {
+      aside.addEventListener('focus', function (e) {
         this.classList.add('active');
+        shiftContent();
       });
 
       // Deactivate focus when clicking anywhere else
       var body = d.getElementsByTagName('body')[0];
       if (body !== null) {
-        body.addEventListener('click', function() {
+        body.addEventListener('click', function () {
           if (!asideClicked) {
             aside.classList.remove('active');
-          }
-          else {
+            shiftContent();
+          } else {
             asideClicked = false;
-          };
+          }
         });
-      };
+      }
 
       /* Stop click event on aside
        * (to not trickle down to body)
        */
-      aside.addEventListener('click', function(e) {
+      aside.addEventListener('click', function (e) {
         asideClicked = true;
       });
-    };
+    }
 
-
     // Replace QL select menus with KorAP menus
     var qlField = d.getElementById('ql-field');
     if (qlField !== null) {

dev/scss/base/base.scss

@@ -34,16 +34,17 @@ g > text {
   fill: $dark-grey;
 }
 
-html {
-  height: 100vh;
-}
+// html {
+//   height: 100vh;
+// }
 
 body {
-  position:   relative;
   min-height: 100vh;
   font-size:  12pt;
   margin:     0;
   padding:    0;
+  display:    flex;
+  flex-direction: column;
 }
 
 a {
@@ -99,6 +100,8 @@ blockquote {
   border-left:      5px solid $ids-blue-1;
   background-color: $ids-blue-2;
   color:            $ids-blue-1;
+  -webkit-mix-blend-mode: normal; // Safari
+  mix-blend-mode:   soft-light;
 
   &.bug,
   &.missing,

dev/scss/base/icons.scss

@@ -2,6 +2,7 @@
  * Font Awesome symbol table.
  */
 
+$fa-user:         "\f007";
 $fa-bars:         "\f0c9";
 $fa-extlink:      "\f08e";
 $fa-up:           "\f0d8";

dev/scss/base/lengths.scss

@@ -4,15 +4,16 @@
  * Defined lengths and sizes for the
  * Kalamar layout.
  */
-$standard-border-radius: 6px;
-$item-padding:           3pt 6pt;
-$button-width:           30px;
-$base-padding:           8px;
-$border-size:            2px;
-$result-border-size:     1px;
-$left-width:             176px;
-$border-size:            2px;
-$left-distance:          $left-width + ($border-size * 2);
+$standard-border-radius:    6px;
+$item-padding:              3pt 6pt;
+$button-width:              30px;
+$base-padding:              8px;
+$border-size:               2px;
+$result-border-size:        1px;
+$left-width:                176px;
+$border-size:               2px;
+$left-distance:             $left-width + ($border-size * 2);
+$standard-size-and-spacing: 4rem;
 
 /**
  * Margins

dev/scss/footer/footer.scss

@@ -7,9 +7,9 @@
  */
 footer {
   background-color: $dark-grey;
-  position:         absolute;
-
-  bottom:           0;
+  // position:         absolute;
+  // bottom:           0;
+  margin-top:       auto;
   padding-bottom:   2px;
   font-size:        70%;
   width:            100%;
@@ -19,6 +19,10 @@ footer {
   align-items: center;
   height: $footer-height;
 
+  &.shifted {
+    padding-left: $logo-left-distance;
+  }
+
   nav {
     margin-left: $button-width;
     padding: $item-padding;
@@ -94,6 +98,6 @@ footer {
 }
 
 aside.active:not(.off) ~ footer {
-  padding-left: $logo-left-distance;
+  // padding-left: $logo-left-distance;
   transition:  all .3s ease-in-out;
 }