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

Author: uyen-nhu

Makefile.PL

@@ -27,7 +27,7 @@ WriteMakefile(
     'Mojolicious::Plugin::CHI' => 0.20,
     'Mojolicious::Plugin::ClientIP' => 0.02,
     'Mojolicious::Plugin::AutoSecrets' => 0.006,
-    'Mojolicious::Plugin::TagHelpers::ContentBlock' => 0.11,
+    'Mojolicious::Plugin::TagHelpers::ContentBlock' => 0.12,
     'Cache::FastMmap' => 1.57,
     'DateTime' => 1.63,
 

dev/js/src/init.js

@@ -143,6 +143,14 @@ define([
 
     // 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 @@ define([
         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 @@ define([
         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 @@ define([
       });
     }
 
+    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) {

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 @@ header {
 
     &.right {
       float:   right;
-      display: inline-block;
-      >.tutorial{
-        margin-left: 10px;
-      }
+      // display: inline-block;
+      // >.tutorial{
+      //   margin-left: 10px;
+      // }
     }
 
     &.top {

dev/scss/media.scss

@@ -48,12 +48,16 @@ $standard-margin: 4px;
 
     .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 @@ $standard-margin: 4px;
 
         &.profile {
           & + .dropdown-content {
-            margin-top: 4rem;
+            margin-top: 3.9rem;
           }
         }
+
+        h3.user-name {
+          max-width: unset;
+          overflow: unset;
+        }
       }
 
       &-content {

kalamar.dict

@@ -54,7 +54,8 @@ my $THOUSAND_SEP_RE = qr/(
     },
     activateJS => 'Für den vollen Funktionsumfang aktivieren Sie bitte JavaScript!',
     faq => 'FAQ',
-    tutorial => 'Einführung',
+    tutorial => 'Hilfe',
+    tour => 'Tour',
     notAvailInCorpus => 'Im vorliegenden Korpus nicht verfügbar',
     pubOn => 'veröffentlicht am',
     matchCount => 'Treffer',
@@ -191,7 +192,8 @@ my $THOUSAND_SEP_RE = qr/(
     faq => 'FAQ',
     'oclock' => 'o\'clock',
     underConstruction => 'Under Construction!',
-    tutorial => 'Introduction',
+    tutorial => 'Help',
+    tour => 'Tour',
     korap => {
       -short => 'KorAP',
       label => '<%= loc "korap_short" %><% if (loc("title_addon")) { %>-<%= loc("title_addon") %><% } %>',

lib/Kalamar/Plugin/Auth.pm

@@ -243,11 +243,11 @@ sub register {
 
 
   # Add logout button to header button list
-  $app->content_block(
-    headerButtonGroup => {
-      template => 'partial/auth/logout'
-    }
-  );
+  # $app->content_block(
+  #   headerButtonGroup => {
+  #     template => 'partial/auth/logout'
+  #   }
+  # );
 
 
   # Add hook after search

lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep

@@ -1,5 +1,5 @@
 %# # user not logged in
-% if (!stash('documentation') && !$embedded && !$c->auth->token) {
+% if (!$embedded && !$c->auth->token) {
 %   if (flash('handle_or_email') && !param('handle_or_email')) {
 %     param(handle_or_email => flash('handle_or_email'));
 %#  Legacy-Support:

lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep

@@ -12,9 +12,6 @@
                 <span><%= $item->{title} %></span>
             </a>
          <% } %>
-         <a href="<%= url_for 'doc' %>" class="dropdown-item tutorial" id="view-tutorial" title="<%= loc 'tutorial' %>">
-            <span><%= loc 'tutorial' %></span>
-         </a>
          <a href="<%= url_for 'logout' %>"
          class="dropdown-item logout"
          title="<%= loc 'logout' %>: <%= user_handle %>">

templates/de/intro.html.ep

@@ -5,7 +5,7 @@
     <p><strong>KorAP</strong> ist eine neue Korpusanalyseplattform, optimiert für große, mehrfach annotierte Korpora und komplexe Suchmechanismen. Dabei versucht KorAP unabhängig von spezifischen Forschungsfragen zu sein.</p>
 
     <p><noscript>KorAP erwartet für einige Funktionen die Aktivierung von JavaScript.</noscript></p>
-    <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a class="link-guided-tour">Tour</a> oder lesen Sie unsere <%= doc_opener 'ql', begin %>Einführung<% end %>!</p>
+    <p><strong>Neu bei KorAP?</strong> Dann starten Sie doch mit unserer <a class="link-guided-tour">Tour</a> oder schauen Sie in unsere <%= doc_opener 'ql', begin %>Hilfe<% end %>!</p>
 
     <p>KorAP wird am <a href="http://www.ids-mannheim.de">Leibniz-Institut für Deutsche Sprache</a> in Mannheim entwickelt, Mitglied der <a href="http://www.leibniz-gemeinschaft.de">Leibniz Gemeinschaft</a>. Die einzelnen Module werden als Open Source auf <a href="http://github.com/KorAP">GitHub</a> veröffentlicht.</p>
   </div>

templates/intro.html.ep

@@ -6,7 +6,7 @@
 
     <p><noscript>KorAP expects activated JavaScript for some features.</noscript></p>
 
-    <p><strong>New to KorAP?</strong> Please check out our <a class="link-guided-tour">guided tour</a> or our <%= doc_opener 'ql', begin %>tutorial<% end %>!</p>
+    <p><strong>New to KorAP?</strong> Please check out our <a class="link-guided-tour">guided tour</a> or our <%= doc_opener 'ql', begin %>help<% end %>!</p>
 
     <p>KorAP is developed at the <a href="https://www.ids-mannheim.de">Leibniz Institute for the German Language</a>, member of the <a href="http://www.leibniz-gemeinschaft.de">Leibniz Association</a>. The separated modules are being published as open source at <a href="http://github.com/KorAP">GitHub</a>.</p>
   </div>

templates/partial/header.html.ep

@@ -1,8 +1,17 @@
+% content_block 'headerButtonGroup', { position => 50 }, begin
+  <h3 class="nav-link"><a class="link-guided-tour">Tour</a></h3>
+% end
+
+% content_block 'headerButtonGroup', { position => 100 }, begin
+  <h3 class="nav-link"><a href="<%= url_for 'doc_start' %>" class="tutorial" id="view-tutorial"><%= loc "tutorial" %></a></h3>
+% end
+
 <nav class="navbar">
   <%= link_to 'index', class => 'logo', begin %><h1><span><%= title() // loc('korap_desc') %></span><% if (loc('title_addon')) { %><div class="logoaddon"><%= loc('title_addon') %></div><% } %></h1><% end %>
 
   <div class="navbar-group">
     %= content_block 'headerButtonGroup'
+    %= include 'partial/auth/logout'
     %= include 'partial/auth/login'
   </div>