UI rework by Uyen (issues #137, #174, #188)
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 e15c9a2..d4f0dc5 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -1,13 +1,16 @@
% 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 id="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 id="link-guided-tour">Tour</a> oder lesen Sie unsere <%= doc_opener 'ql', begin %>Einführung<% end %>!</p>
+
+ <!-- %= 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>
+
%= 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 1ecab62..1a5febc 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -1,15 +1,17 @@
% 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 id="link-guided-tour">guided tour</a> or our <%= doc_opener 'ql', begin %>tutorial<% end %>!</p>
+
+ <!-- %= include 'announcement', lang => 'en' -->
- <p><strong>New to KorAP?</strong> Please check out our <a id="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..f35fdc6 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,8 +1,20 @@
<header>
- <%= 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">
- %= content_block 'headerButtonGroup'
- </div>
+ <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">
+ %= include 'partial/auth/login'
+ %= content_block 'headerButtonGroup'
+ </div>
+
+ <div class="burger-icon"></div>
+
+ <!-- <a href="javascript:void(0);" class="burger-icon" onclick="toggleNavBar()"></a> -->
+
+ <!-- <input type="checkbox" class="burger-icon" id="burger-menu" />
+ <label for="burger-menu" class="burger-icon"></label> -->
+ </nav>
+
<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 a8deb0e..365635a 100644
--- a/templates/partial/side.html.ep
+++ b/templates/partial/side.html.ep
@@ -13,8 +13,8 @@
% $classes .= ' off';
% } elsif (stash('sidebar_active')) {
% $classes .= ' active';
-% } elsif (stash('login_active') && !$classes) {
-% $classes .= ' active';
+#% } elsif (stash('login_active') && !$classes) {
+#% $classes .= ' active';
% };