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
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index c90d387..e62256f 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -1,13 +1,14 @@
% layout 'main', login_active => 1;
-<div class="intro">
- <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>
+<div class="intro-container">
+ <div class="intro">
+ <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><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>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>
+
%= include 'announcement', lang => 'de'
-
- <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>
+</div>
\ No newline at end of file
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index f0f0896..05d30b9 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -1,15 +1,15 @@
% layout 'main', login_active => 1;
+<div class="intro-container">
+ <div class="intro">
+ <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiply annotated corpora and complex search queries independent of particular research questions.</p>
-<div class="intro">
- <p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiply annotated corpora and complex search queries independent of particular research questions.</p>
+ <p><noscript>KorAP expects activated JavaScript for some features.</noscript></p>
- <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 %>tutorial<% 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>
+
%= include 'announcement', lang => 'en'
-
- <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>
+</div>
\ No newline at end of file
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 5622d32..ac6f344 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,8 +1,15 @@
-<header>
+<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="button top">
+
+ <div class="navbar-group">
%= content_block 'headerButtonGroup'
+ %= include 'partial/auth/login'
</div>
+
+ <div class="burger-icon"></div>
+</nav>
+
+<header>
<form autocomplete="off" action="<%= url_for 'index' %>" id="searchform">
<div id="searchbar">
%= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => loc('searchplaceholder'), spellcheck => 'false', autocomplete => 'off', autocorrect => 'off', autocapitalize => 'off'
diff --git a/templates/partial/side.html.ep b/templates/partial/side.html.ep
index c64e275..f8d81f0 100644
--- a/templates/partial/side.html.ep
+++ b/templates/partial/side.html.ep
@@ -1,7 +1,7 @@
% my $side_bar = content_block 'sidebar';
% my $classes = '';
-%
+
% if (length($side_bar) == 0) {
% if (my $nav = navigation('settings')) {
% $side_bar = b('<nav>' . $nav . '</nav>');
@@ -9,15 +9,22 @@
% };
% }
+% my $is_empty_sidebar = $side_bar =~ /^\s*(<div[^>]*>\s*<\/div>\s*)*$/i;
+
+% if ($is_empty_sidebar) {
+% $classes .= ' invisible';
+% };
+
% if (length($side_bar) == 0 || stash('sidebar_off')) {
% $classes .= ' off';
% } elsif (stash('sidebar_active')) {
% $classes .= ' active';
% } elsif (stash('login_active') && !$classes) {
-% $classes .= ' active';
+% $classes .= ' invisible';
+% } elsif (!stash('login_active') && $side_bar =~ /<form.*class=".*login.*".*>/i) {
+% $classes .= ' invisible';
% };
-
<aside tabindex="0" class="<%= $classes %>">
<div>
%= $side_bar