Added login form
diff --git a/Gruntfile.js b/Gruntfile.js
index 12dd48b..20f9b4e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -113,6 +113,7 @@
css: {
files: ['dev/scss/{util,base,fonts,kalamar,media}.scss',
'dev/scss/footer/footer.scss',
+ 'dev/scss/sidebar/sidebar.scss',
'dev/scss/header/{header,hint,menu,searchbar,vc,datepicker}.scss',
'dev/scss/main/{alertify,koralquery,highlight,kwic,logos,tagger,' +
'main,matchinfo,pagination,query,'+
diff --git a/dev/demo/all.html b/dev/demo/all.html
index a18b287..1d26423 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -18,7 +18,9 @@
<a href="/" class="logo" tabindex="-1"><h1><span>KorAP - Corpus Analysis Platform</span></h1></a>
<div class="button top">
+<!--
<a href="#" class="login" tabindex="-1"><span>Login</span></a>
+-->
</div>
<form autocomplete="off" action="/kalamar" id="searchform">
@@ -62,13 +64,24 @@
</form>
</header>
- <aside tabindex="0">
+ <aside tabindex="0" class="active">
+ <div>
+ <fieldset>
+ <form>
+ <legend><span>Login</span></legend>
+ <input type="text" name="handle_or_email" placeholder="Benutzername" />
+ <div>
+ <input type="password" name="pwd" placeholder="Passwort" />
+ <button type="submit"><span>Go</span></button>
+ </div>
+ </form>
+ </fieldset>
+ </div>
+
+<!--
<h2>Einstellungen</h2>
- <p>Anzahl Treffer pro Seite</p>
- <p>Kontext:</p>
- <p>200 Zeichen/Token - 200 Zeichen/Token</p>
- <p>1 Satz 1 Paragraph</p>
<a>Deutsch|Englisch</a>
+-->
</aside>
<main>
diff --git a/dev/scss/base.scss b/dev/scss/base.scss
index 2fe143d..1dabd82 100644
--- a/dev/scss/base.scss
+++ b/dev/scss/base.scss
@@ -1,6 +1,8 @@
@charset "utf-8";
@import "util";
+$border-size: 2px;
+
/**
* Basic global CSS rules for Kalamar
*/
@@ -30,6 +32,8 @@
position: relative;
min-height: 100%;
font-size: 12pt;
+ margin: 0;
+ padding: 0;
}
@@ -73,3 +77,50 @@
}
}
}
+
+button[type=submit] {
+ font-weight: normal;
+ @include choose-item;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ width: $button-width;
+ cursor:pointer;
+ > span:nth-of-type(1) {
+ @include blind;
+ }
+ &::after {
+ font-family: "FontAwesome";
+ }
+ border: {
+ width: $border-size;
+ style: solid;
+ color: $nearly-white;
+ }
+ &:hover, &:focus {
+ @include choose-hover;
+ }
+ &::-moz-focus-inner {
+ border: none;
+ }
+ &:active {
+ @include choose-active;
+ }
+ /**
+ * This is just for styling the last button,
+ * in case there are more than one buttons.
+ */
+ &:last-of-type {
+ // @include box-sizing-box();
+ border: {
+ right-width: $border-size;
+ right-style: solid;
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ }
+ }
+}
+
+button + button {
+ right: 0;
+}
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index b2b9d6c..9e9f89e 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -11,7 +11,7 @@
background-color: $light-green;
// @include light-noise;
@include box-sizing-box();
- padding: 8px;
+ padding: $base-padding;
padding-bottom: 0;
font-size: 10pt;
color: $nearly-white;
@@ -76,6 +76,10 @@
background-color: $dark-green;
text-align: center;
height: 100%;
+ z-index: 20;
+ > a:hover {
+ color: $nearly-white
+ }
}
color: $nearly-white;
line-height: 2em;
diff --git a/dev/scss/header/searchbar.scss b/dev/scss/header/searchbar.scss
index 4fee390..37d7d69 100644
--- a/dev/scss/header/searchbar.scss
+++ b/dev/scss/header/searchbar.scss
@@ -16,10 +16,7 @@
}
header input {
- outline: none;
- font-size: 11pt;
- border: $border-size solid $nearly-white;
- padding: 2px;
+ @include input-field;
}
#searchbar {
@@ -28,52 +25,10 @@
padding-right: $right-padding;
button[type=submit] {
position: absolute;
- font-weight: normal;
- @include choose-item;
- padding: 0;
- height: 100%;
- top: 0;
right: $right-distance;
- width: 30px;
- cursor:pointer;
- > span:nth-of-type(1) {
- @include blind;
- }
&::after {
- font-family: "FontAwesome";
content: $fa-search;
}
- border: {
- width: $border-size;
- style: solid;
- color: $nearly-white;
- }
- &:hover, &:focus {
- @include choose-hover;
- }
- &::-moz-focus-inner {
- border: none;
- }
- &:active {
- @include choose-active;
- }
-
- /**
- * This is just for styling the last button,
- * in case there are more than one buttons.
- */
- &:last-of-type {
- @include box-sizing-box();
- border: {
- right-width: $border-size;
- right-style: solid;
- top-right-radius: $standard-border-radius;
- bottom-right-radius: $standard-border-radius;
- }
- }
- }
- button + button {
- right: 0;
}
}
diff --git a/dev/scss/kalamar.scss b/dev/scss/kalamar.scss
index 18da240..d8a9272 100644
--- a/dev/scss/kalamar.scss
+++ b/dev/scss/kalamar.scss
@@ -5,9 +5,10 @@
*/
// Global variables and mixins
-@import "fonts"; // Font families
-@import "base"; // Base styles
-@import "main/main"; // Main frame styles
-@import "header/header"; // Top frame styles
-@import "footer/footer"; // Bottom frame styles
-@import "media"; // Media queries
+@import "fonts"; // Font families
+@import "base"; // Base styles
+@import "main/main"; // Main frame styles
+@import "header/header"; // Top frame styles
+@import "footer/footer"; // Bottom frame styles
+@import "sidebar/sidebar"; // Left frame styles
+@import "media"; // Media queries
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 8702e9d..9010c45 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -5,14 +5,12 @@
@import "pagination"; // Pagination
@import "query"; // View query
@import "resultinfo"; // Information on results
-@import "sidebar"; // Navigation on the left side
@import "tutorial"; // Embedded and non-embedded tutorial
@import "koralquery"; // KoralQuery
@import "tagger"; // Tagger
@import "alertify";
div.intro {
- width: 70%;
min-width: 600px;
// Visited links
@@ -21,6 +19,9 @@
}
}
+aside.active + main div.intro {
+ margin-left: $logo-left-distance - $standard-margin + $base-padding;
+}
main {
margin: {
diff --git a/dev/scss/main/sidebar.scss b/dev/scss/sidebar/sidebar.scss
similarity index 85%
rename from dev/scss/main/sidebar.scss
rename to dev/scss/sidebar/sidebar.scss
index ce267fa..ddcf811 100644
--- a/dev/scss/main/sidebar.scss
+++ b/dev/scss/sidebar/sidebar.scss
@@ -2,9 +2,11 @@
@import "../util";
$border-size: 2px;
+$right-padding: 60px;
aside {
outline: none;
+ font-size: 10pt;
display: block;
background-color: $dark-green;
position: fixed;
@@ -40,7 +42,7 @@
padding: 6pt;
border-top-right-radius: $standard-border-radius;
}
- h2 {
+ h2, legend {
font: {
size: 100%;
weight: bold;
@@ -129,6 +131,31 @@
nav > ul > li > a {
font-weight: bold;
}
+
+ fieldset {
+ position: relative;
+ border-width: 0;
+ input[type=text], input[type=password] {
+ @include input-field;
+ width: 100%;
+ }
+ > form > div {
+ position: relative;
+ width: 100%;
+ margin-top: 4px;
+ padding-right: $button-width
+ }
+
+ button {
+ position: absolute;
+ // height: 100%;
+ top: 0;
+ right: 0;
+ &::after {
+ content: $fa-login;
+ }
+ }
+ }
}
aside:focus {
diff --git a/dev/scss/util.scss b/dev/scss/util.scss
index b129e2e..4fdc06a 100644
--- a/dev/scss/util.scss
+++ b/dev/scss/util.scss
@@ -87,6 +87,8 @@
$choose-box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
$standard-border-radius: 6px;
$item-padding: 3pt 6pt;
+$button-width: 30px;
+$base-padding: 8px;
$total-results: $light-green;
@@ -171,6 +173,14 @@
transition: color 0.3s ease 0s;
}
+@mixin input-field {
+ outline: none;
+ font-size: 11pt;
+ border: $border-size solid $nearly-white;
+ padding: 2px;
+ margin: 0;
+}
+
/**
* Mixing for basic text padding
*/
diff --git a/kalamar.dict b/kalamar.dict
index e2f3f6b..d07d55c 100644
--- a/kalamar.dict
+++ b/kalamar.dict
@@ -28,6 +28,8 @@
go => 'Los!',
in => 'in',
by => 'von',
+ pwd => 'Passwort',
+ email => 'Email',
with => 'mit',
glimpse => {
-short => 'Stichprobe',
@@ -67,6 +69,8 @@
searchplaceholder => 'Find ...',
in => 'in',
by => 'by',
+ pwd => 'Password',
+ email => 'Email',
with => 'with',
pubOn => 'published on',
matchCount => '<%= num($found, "match", "matches") %>',
diff --git a/lib/Kalamar.pm b/lib/Kalamar.pm
index ee19cd7..580ccf3 100644
--- a/lib/Kalamar.pm
+++ b/lib/Kalamar.pm
@@ -124,6 +124,9 @@
my $match = $text->get('/:match_id');
$match->to('search#match_info')->name('match');
+ $r->post('/login')->to('User#login');
+ $r->post('/logout')->to('User#logout');
+
# Default user is called 'korap'
# $r->route('/user/:user/:collection')
};
diff --git a/lib/Kalamar/Controller/User.pm b/lib/Kalamar/Controller/User.pm
new file mode 100644
index 0000000..691d648
--- /dev/null
+++ b/lib/Kalamar/Controller/User.pm
@@ -0,0 +1,13 @@
+package Kalamar::Controller::User;
+use Mojo::Base 'Mojolicious::Controller';
+
+sub login {
+ my $c = shift;
+ $c->render(json => {
+ response => 'logged in'
+ });
+};
+
+sub logout {};
+
+1;
diff --git a/templates/de/intro.html.ep b/templates/de/intro.html.ep
index 088a108..f4134a0 100644
--- a/templates/de/intro.html.ep
+++ b/templates/de/intro.html.ep
@@ -1,4 +1,7 @@
% layout 'main';
+
+% stash(sidebar_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>
@@ -10,8 +13,6 @@
</div>
-<!-- form -->
-
<div id="logos">
<div>
<a href="http://www.ids-mannheim.de/" class="logo"><p id="ids-logo"><span>Entwickelt am Institut für Deutsche Sprache (IDS)</span></p></a>
diff --git a/templates/intro.html.ep b/templates/intro.html.ep
index 937bde3..ba9da37 100644
--- a/templates/intro.html.ep
+++ b/templates/intro.html.ep
@@ -1,4 +1,8 @@
% layout 'main';
+
+% stash(sidebar_active => 1);
+
+
<div class="intro">
<p><strong>KorAP</strong> is a new Corpus Analysis Platform, suited for large, multiple annotated corpora and complex search queries independent of particular research questions.</p>
<p>This is the new frontend for KorAP, <strong>Kalamar</strong>, with currently no access to restricted corpora. For full access, please visit the <a href="http://korap.ids-mannheim.de/app">first frontend</a>. <noscript>Kalamar expects activated JavaScript for some features.</noscript></p>
diff --git a/templates/layouts/main.html.ep b/templates/layouts/main.html.ep
index 7f6f811..af8feb4 100644
--- a/templates/layouts/main.html.ep
+++ b/templates/layouts/main.html.ep
@@ -23,6 +23,21 @@
%= include 'partial/header'
% }
+% if (1) { # user not logged in
+% content_for 'sidebar', begin
+<fieldset>
+ <form>
+ <legend><span><%= loc 'login' %></span></legend>
+ <input type="text" name="handle_or_email" placeholder="<%= loc 'email' %>" />
+ <div>
+ <input type="password" name="pwd" placeholder="<%= loc 'pwd' %>" />
+ <button type="submit"><span><%= loc 'go' %></span></button>
+ </div>
+ </form>
+</fieldset>
+% end
+% }
+
% my $aside = content_for('sidebar');
<aside tabindex="0" class="<% unless (length($aside) > 0) { %>off<% } elsif (stash('sidebar_active')) { %>active<% } %>">
<div>