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/Makefile.PL b/Makefile.PL
index 81814c6..e541b75 100644
--- a/Makefile.PL
+++ b/Makefile.PL
@@ -27,7 +27,7 @@
'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,
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 {
diff --git a/kalamar.dict b/kalamar.dict
index e0436c1..0c7349f 100644
--- a/kalamar.dict
+++ b/kalamar.dict
@@ -54,7 +54,8 @@
},
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 @@
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") %><% } %>',
diff --git a/lib/Kalamar/Plugin/Auth.pm b/lib/Kalamar/Plugin/Auth.pm
index 6453b9b..662a5f7 100644
--- a/lib/Kalamar/Plugin/Auth.pm
+++ b/lib/Kalamar/Plugin/Auth.pm
@@ -243,11 +243,11 @@
# 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
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
index a795aae..5ad8a94 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
+++ b/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:
diff --git a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
index 52606eb..1b7fd80 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
+++ b/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 %>">
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index e62256f..51f11de 100644
--- a/templates/de/intro.html.ep
+++ b/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>
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 05d30b9..2524682 100644
--- a/templates/intro.html.ep
+++ b/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>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 514f225..966401e 100644
--- a/templates/partial/header.html.ep
+++ b/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>