added back content_block headerButtonGroup due to backwards compatibility and modified header.html.ep to fit changes
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index cfe10b5..7750665 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -34,16 +34,17 @@
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 @@
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,
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
index 1937e53..01e2246 100644
--- a/dev/scss/base/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -110,6 +110,7 @@
&.minimize::after {
content: $fa-minimize;
+ color: $dark-grey;
}
&.plugin::after {
diff --git a/dev/scss/base/icons.scss b/dev/scss/base/icons.scss
index ae4974a..3d758c0 100644
--- a/dev/scss/base/icons.scss
+++ b/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";
diff --git a/dev/scss/footer/footer.scss b/dev/scss/footer/footer.scss
index 97cfce8..59ad731 100644
--- a/dev/scss/footer/footer.scss
+++ b/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%;
@@ -80,6 +80,6 @@
}
aside.active ~ footer {
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
transition: all .3s ease-in-out;
}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 10d1256..b640531 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -15,10 +15,176 @@
@include box-sizing-box();
position: relative;
background-color: $light-green;
- padding: $base-padding 0 0 $base-padding;
+ // padding: $base-padding 0 0 $base-padding;
+ padding-top: 4rem;
font-size: 10pt;
color: $nearly-white;
+ .navbar {
+ width: 100%;
+ height: 3rem;
+ background-color: $dark-green;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: end;
+ // overflow: hidden;
+ position: fixed;
+ top: 0;
+ z-index: 999;
+
+ &-group {
+
+ & fieldset.fieldset-login {
+ display: inline;
+ margin-right: 0;
+ padding: 0;
+ min-inline-size: unset;
+ border: unset;
+
+ & form.login {
+ display: flex;
+ align-items: center;
+
+ & input[type=text],
+ & input[type=password] {
+ @include input-field;
+ margin-right: 8px;
+ height: 2rem;
+ }
+
+ & button.btn-login {
+ width: 3rem;
+ height: 3rem;
+ background-color: $dark-green;
+ color: $nearly-white;
+ // padding: .75rem 1rem;
+ font-size: 180%;
+ border: none;
+ border-color: unset;
+ border-radius: 0;
+ text-shadow: none;
+ font-weight: normal;
+ top: unset;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+
+ &::after {
+ content: $fa-login;
+ }
+ }
+ & button.btn-login:hover {
+ background-color: $middle-green;
+ }
+ }
+ }
+ }
+
+ .dropdown {
+ display: flex;
+ align-items: center;
+ margin-right: 4rem;
+ position: relative;
+
+ &:hover .dropdown-content {
+ display: block;
+ }
+
+ &:hover .dropdown-btn {
+ background-color: $middle-green;
+ }
+
+ &-btn {
+ height: 3rem;
+ padding: .6rem .9rem;
+ font-size: 180% !important;
+ color: $nearly-white;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+ cursor: pointer;
+
+ &.profile::before {
+ @include icon-font;
+ content: $fa-user;
+ }
+
+ h3.user-name {
+ padding-right: 2px;
+ font-size: 85%;
+ display: inline;
+ }
+ }
+
+ &-content {
+ display: none;
+ width: 100%;
+ margin-top: 3rem;
+ padding: 0;
+ background-color: $middle-green;
+ list-style: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 999;
+ }
+
+ &-item {
+ display: block;
+ padding: .75rem;
+ font-size: 120%;
+ // font-weight: bold;
+ color: $nearly-white;
+ transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -webkit-transition: all .2s ease-in-out;
+
+ &:hover {
+ background-color: $light-green;
+ }
+ }
+ }
+
+ // &-item {
+ // height: 3rem;
+ // padding: .6rem .9rem;
+ // font-size: 180% !important;
+ // transition: all .2s ease-in-out;
+ // -o-transition: all .2s ease-in-out;
+ // -moz-transition: all .2s ease-in-out;
+ // -webkit-transition: all .2s ease-in-out;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+
+ // &.profile {
+ // width: 3rem;
+ // height: 3rem;
+ // padding: .6rem .9rem;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+ // }
+
+ // &.logout {
+ // width: 3rem;
+ // height: 3rem;
+ // margin-left: 1rem;
+ // padding: .6rem .9rem;
+
+ // &:hover {
+ // background-color: $middle-green;
+ // }
+ // }
+ // }
+ }
+
span.select {
display: inline-block;
cursor: pointer;
@@ -63,9 +229,9 @@
form {
position: relative;
display: block;
- padding-left: $logo-left-distance;
+ // padding-left: $logo-left-distance;
min-height: 2.7em;
- margin: 0px;
+ margin: 0 4rem;
}
input {
@@ -91,7 +257,8 @@
top: 0;
right: 0;
margin-right: 0;
- width: math.div($standard-margin,2);
+ width: 20px;
+ // width: math.div($standard-margin,2);
background-color: $dark-green;
text-align: center;
height: 100%;
@@ -117,7 +284,6 @@
@include icon-font;
}
- // Icons for buttons
> a.tutorial::after {
content: $fa-tutorial;
}
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index b082050..48f8bc5 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -10,6 +10,7 @@
margin-bottom: 3px;
width: 100%;
margin: 0;
+ border-radius: 6px;
&::-webkit-search-cancel-button {
display: none;
@@ -28,13 +29,14 @@
position: relative;
width: 100%;
padding: 0;
- padding-right: $right-distance + $button-width;
+ // padding-right: $right-distance + $button-width;
margin-top: 7pt;
button[type=submit] {
position: absolute;
padding: 0;
- right: $right-distance;
+ // right: $right-distance;
+ right: 0;
&:not(.loading)::after {
content: $fa-search;
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index 8f83175..80130f0 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -5,6 +5,12 @@
*/
div.intro {
+ &-container {
+ margin-top: 3rem;
+ display: flex;
+ gap: 4rem;
+ }
+
// Visited links
a:visited {
color: $darkest-orange
@@ -20,6 +26,6 @@
}
}
-aside.active ~ main div.intro {
- margin-left: $logo-left-distance - $standard-margin + $base-padding;
-}
\ No newline at end of file
+// aside.active ~ main div.intro {
+// margin-left: $logo-left-distance - $standard-margin + $base-padding;
+// }
\ No newline at end of file
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index 8388160..3a63c24 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -40,7 +40,8 @@
h1 {
position: absolute;
margin: 0;
- margin-left: 10pt;
+ // margin-left: 10pt;
+ margin-left: 3rem;
left: 0;
top: 0;
width: 7.8em;
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index e8c062d..910cd0a 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -23,12 +23,13 @@
main {
+ padding: 0 4rem;
padding-bottom: $footer-height + math.div($standard-margin,2);
- margin: {
- left: $standard-margin;
- right: math.div($standard-margin,2);
- }
+ // margin: {
+ // left: $standard-margin;
+ // right: math.div($standard-margin,2);
+ // }
&.embedded {
margin: {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index 41b5b44..7cdb669 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -3,12 +3,13 @@
section#news {
background-color: $ids-green-2;
- -webkit-mix-blend-mode: normal; // Safari
mix-blend-mode: soft-light;
padding: 1em;
padding-right: 2em;
border-radius: $standard-border-radius;
border-left: 5px solid $ids-green-1;
+ height: 20rem;
+ overflow-y: scroll;
dt {
float: left;
@@ -51,4 +52,4 @@
margin-left: 1em;
}
}
-}
\ No newline at end of file
+}
diff --git a/dev/scss/sidebar/sidebar.scss b/dev/scss/sidebar/sidebar.scss
index da6541f..9e52ab2 100644
--- a/dev/scss/sidebar/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -3,11 +3,12 @@
@import "../util";
aside {
+ display: none;
background-color: $dark-green;
color: $nearly-white;
width: $logo-left-distance;
position: fixed;
- display: block;
+ // display: block;
transition: all .3s ease-in-out;
outline: none;
font-size: 10pt;
@@ -152,6 +153,7 @@
width: 100%;
}
+ // search form
> form > div {
position: relative;
width: 100%;
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 9d6d535..34692c9 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/login.html.ep
@@ -6,9 +6,9 @@
% } elsif (flash('handle') && !param('handle')) {
% param(handle_or_email => flash('handle'));
% };
- <fieldset>
+ <fieldset class="fieldset-login">
%= form_for 'login', 'accept-charset' => 'utf-8', class => 'login', begin
- <legend><span><%= loc 'login' %></span></legend>
+ <!-- <legend><span><%= loc 'login' %></span></legend> -->
%= csrf_field
%= text_field 'handle_or_email', placeholder => loc('userormail')
%= hidden_field fwd => $c->url_with
@@ -19,10 +19,10 @@
%= hidden_field 'scope' => stash('scope')
%= hidden_field 'redirect_uri' => stash('close_redirect_uri')
% };
- <div>
+ <!-- <div> -->
%= password_field 'pwd', placeholder => loc('pwd')
- <button type="submit"><span><%= loc 'go' %></span></button>
- </div>
+ <button type="submit" class="btn-login"><span><%= loc 'go' %></span></button>
+ <!-- </div> -->
% end
%= content_block 'loginInfo', separator => '<hr />'
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 5464664..d35df3f 100644
--- a/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
+++ b/lib/Kalamar/Plugin/Auth/templates/partial/auth/logout.html.ep
@@ -1,6 +1,26 @@
% if ($c->auth->token) {
%# TODO: CSRF protection
- <a href="<%= url_for 'logout' %>"
- class="logout"
- title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span></a>
+ <div class="dropdown">
+ <div class="dropdown-btn profile">
+ <h3 class="user-name">
+ <%= get_user_name %>
+ </h3>
+ </div>
+ <ul class="dropdown-content">
+ <li>
+ <a class="dropdown-item" href="/settings/oauth#page-top">OAuth</a>
+ </li>
+ <li>
+ <a href="<%= url_for 'logout' %>"
+ class="dropdown-item logout"
+ title="<%= loc 'logout' %>: <%= user_handle %>">
+ <span><%= loc 'logout' %></span>
+ </a>
+ </li>
+ </ul>
+ <!-- <a href="<%= url_for 'logout' %>"
+ class="navbar-item logout"
+ title="<%= loc 'logout' %>: <%= user_handle %>"><span><%= loc 'logout' %></span>
+ </a> -->
+ </div>
% };
diff --git a/lib/Kalamar/Plugin/KalamarUser.pm b/lib/Kalamar/Plugin/KalamarUser.pm
index 3963fec..400e003 100644
--- a/lib/Kalamar/Plugin/KalamarUser.pm
+++ b/lib/Kalamar/Plugin/KalamarUser.pm
@@ -54,7 +54,7 @@
$c->stash(user => $user);
return $user;
};
-
+
return 'not_logged_in';
}
);
@@ -101,6 +101,28 @@
)->param(@_);
}
);
+
+
+ $mojo->helper(
+ 'get_user_name' => sub {
+ my $c = shift;
+
+ # Get from stash
+ my $user = $c->stash('user');
+ return $user if $user;
+
+ # Get from session
+ $user = $c->session('user');
+
+ # Set in stash
+ if ($user) {
+ $c->stash(user => $user);
+ return $user;
+ };
+
+ $c->render(template => '/templates/partial/header', user => $user);
+ }
+ );
};
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..756a6fe 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,8 +1,13 @@
<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>
+ </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'