Update to API v0.1
diff --git a/Changes b/Changes
index 7b27252..171e46b 100755
--- a/Changes
+++ b/Changes
@@ -1,3 +1,10 @@
+0.04 2014-07-08
+ - Fixed template view
+ - Preliminary match view
+ - Switched to asset pipeline wth sass
+ - Added syntax highlighting to JSON
+ - Update to Api 0.1.
+
0.03 2014-06-20
- Added preliminary autocompletion support (freetime project)
diff --git a/Makefile.PL b/Makefile.PL
index 1945f11..16a3cb0 100644
--- a/Makefile.PL
+++ b/Makefile.PL
@@ -23,7 +23,8 @@
'JSON::XS' => 0.0,
'Mojolicious::Plugin::AssetPack' => 0.14,
'JavaScript::Minifier::XS' => 0.09,
- 'CSS::Minifier::XS' => 0.09
+ 'CSS::Minifier::XS' => 0.09,
+ 'CSS::Sass' => '0.8.1'
# 'Mojolicious::Plugin::Search' => 0.01,
},
test => {
diff --git a/korap.conf b/korap.conf
index 7a3a73b..e1fb78f 100644
--- a/korap.conf
+++ b/korap.conf
@@ -1,6 +1,7 @@
{
KorAP => {
- api => 'http://10.0.10.13:8070/api/v1/'
+ 'api' => 'http://10.0.10.13:8070/api/v1/',
+ 'api-0.1' => 'http://10.0.10.13:8888/api/v0.1/'
},
Notifications => {
Alertify => 1,
diff --git a/lib/Korap.pm b/lib/Korap.pm
index 04f0014..f0115ae 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -1,12 +1,17 @@
package Korap;
use Mojo::Base 'Mojolicious';
-our $VERSION = '0.03';
+our $VERSION = '0.04';
+
+# Start dev with
+# morbo -w lib -w templates -w public/sass -w public/js script/korap
# Start the application and register all routes and plugins
sub startup {
my $self = shift;
+ $self->defaults(layout => 'default');
+
# Set secret for signed cookies
$self->secrets(['fmhsfjgfchgsdbfgshfxztsbt32477eb45veu4vubrghfgghbtv']);
@@ -21,20 +26,41 @@
Number::Commify
KorapSearch
KorapInfo
- KorapTagHelpers/) {
- # AssetPack
+ KorapTagHelpers
+ /) {
$self->plugin($_);
};
-# $self->asset(
-# 'korap.css' => (
-# 'style.css',
-# 'sass/hint.scss',
-# 'table.css',
-# 'sass/kwic-4.0.scss',
-# 'fontawesome/font-awesome.min.css'
-# )
-# );
+ $self->plugin(AssetPack => {
+ minify => 1
+ });
+
+ $self->plugin('AssetPack::LibSass');
+
+ $self->asset(
+ 'korap.css' => (
+ '/sass/style.scss',
+ '/sass/sidebar.scss',
+ '/sass/tutorial.scss',
+ '/sass/hint.scss',
+ '/sass/query.scss',
+ '/sass/table.scss',
+ '/sass/pagination.scss',
+ '/sass/kwic-4.0.scss',
+ '/css/media.css',
+ '/css/font-awesome.min.css',
+ '/css/highlight.css'
+ )
+ );
+
+ $self->asset(
+ 'korap.js' => (
+ '/js/jquery-2.0.0.min.js',
+ '/js/translateTable.js',
+ '/js/hint.js',
+ '/js/highlight.pack.js'
+ )
+ );
$self->helper(
date_format => sub {
@@ -54,20 +80,30 @@
->to('tutorial#page')->name('tutorial');
# Collection data
- my $collection = $r->route('/collection');
- $collection->to('search#info');
- $collection->search;
+ my $collection = $r->bridge('/collection');
+ $collection->to('info#about_collection');
+ my $collection_id = $collection->bridge('/:collection_id');
+ # stats
+ # $collection_id->;
+ $collection_id->search;
# Corpus data
- my $corpus = $r->route('/corpus');
- $corpus->search;
- $corpus->route('/:corpus_id')->search;
- $corpus->route('/:corpus_id/#doc_id')->search;
- $corpus->route('/:corpus_id/#doc_id/:match_id')
- ->to('info#about_match')->name('match');
+ my $corpus_res = $r->route('/corpus');
+ my $corpus = $corpus_res->route('/:corpus_id');
+ # Todo: Stats
+ $corpus->search->name('search_corpus');
+ my $doc = $corpus->route('/#doc_id');
+ $doc->search->name('search_document');
+
+ # Match data
+ my $match = $doc->route('/:match_id');
+ $match->route->to('info#about_match')->name('match');
+ my $match_layer = $match->route('/:layer');
+ $match_layer->route->to('info#about_match');
+ $match_layer->route('/:foundry')->to('info#about_match');
# Utilities
- $r->get('/util/query')->to('search#query');
+ # $r->get('/util/query')->to('search#query');
};
diff --git a/lib/Korap/Info.pm b/lib/Korap/Info.pm
index 50396bf..b4c5d91 100644
--- a/lib/Korap/Info.pm
+++ b/lib/Korap/Info.pm
@@ -8,20 +8,49 @@
my $doc_id = $c->stash('doc_id');
my $match_id = $c->stash('match_id');
+ my $foundry = '*';
+ my %query = (foundry => '*');
+ if ($c->stash('foundry')) {
+ $query{foundry} = $c->stash('foundry');
+ if ($c->stash('layer')) {
+ $query{layer} = $c->stash('layer');
+ };
+ };
+
return $c->respond_to(
json => sub {
- $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id)))
+ $c->render(json => $c->notifications(json => $c->match_info($corpus_id, $doc_id, $match_id, %query)))
},
html => sub {
+ my $match = $c->match_info($corpus_id, $doc_id, $match_id);
+ if ($match->{error}) {
+ $c->notify(error => $match->{error});
+ return $c->render_exception('error');
+ };
+
$c->render(
layout => 'default',
template => 'match_info',
- match => $c->match_info($corpus_id, $doc_id, $match_id, foundry => '')
+ match => $match
)
}
);
};
+# Todo: Return info for all collections
+sub about_collection {
+ my $c = shift;
+ my $api = $c->config('KorAP')->{'api0.1'};
+ my $src = $c->stash('collection_id');
+ if ($src) {
+ $c->render(
+ json => $c->notifications(
+ json => $c->info_on($src)
+ )
+ );
+ };
+};
+
1;
__END__
diff --git a/lib/Korap/Plugin/KorapInfo.pm b/lib/Korap/Plugin/KorapInfo.pm
index 4ee8612..946c997 100644
--- a/lib/Korap/Plugin/KorapInfo.pm
+++ b/lib/Korap/Plugin/KorapInfo.pm
@@ -68,23 +68,29 @@
match_info => sub {
my $c = shift;
- return map_match($json->{matchInfo2}) if $c->app->mode eq 'test';
-
my $corpus = shift;
my $doc = shift;
my $match = shift;
+ my %param = @_;
+
+ if ($c->app->mode eq 'test') {
+ return map_match($json->{treeInfo}) if $param{spans};
+ return map_match($json->{matchInfo2});
+ };
# Build url
- my $temp_api = 'http://10.0.10.13:8070/api/v0.1/';
- my $url = Mojo::URL->new($temp_api)->path('matchInfo');
+ my $temp_api = $c->config('KorAP')->{'api-0.1'};
+ my $url = Mojo::URL->new($temp_api)->path(
+ join('/', 'corpus', $corpus, $doc, $match, 'matchInfo')
+ );
# Build match id
- $match = 'match-' . $corpus . '!' . $corpus . '_' . $doc . '-' . $match;
+ # $match = 'match-' . $corpus . '!' . $corpus . '_' . $doc . '-' . $match;
- my %param = @_;
- my %query = ( id => $match );
- $query{foundry} = $param{foundry} // '*';
- $query{layer} = $param{layer} if defined $param{layer};
+ my %query;
+ $query{foundry} = $param{foundry} if defined $param{foundry};
+ $query{layer} = $param{layer} if defined $param{layer};
+ $query{spans} = $param{spans} ? 'true' : 'false';
# Add query
$url->query(\%query);
@@ -94,6 +100,7 @@
if (my $response = $c->ua->get($url)->success) {
return map_match($response->json);
};
+
$c->notify(error => 'Unable to retrieve resource');
return {};
}
@@ -105,6 +112,25 @@
__DATA__
{
+ "treeInfo": {
+ "author":"Filzstift,Alexander Sommer,TheK",
+ "textClass":"freizeit-unterhaltung reisen",
+ "corpusID":"WPD",
+ "title":"Neuseeland",
+ "foundries":"xip xip/morpho xip/constituency xip/dependency corenlp corenlp/namedentities corenlp/namedentities/ne_dewac_175m_600 corenlp/namedentities corenlp/namedentities/ne_hgc_175m_600 mate mate/morpho mate/dependency connexor connexor/morpho connexor/syntax connexor/phrase treetagger treetagger/morpho base base/sentences base/paragraphs opennlp opennlp/morpho",
+ "tokenization":"opennlp#tokens",
+ "field":"tokens",
+ "startMore":false,
+ "endMore":false,
+ "docID":"WPD_NNN.02848",
+ "snippet" : "<span class=\"context-left\"><span class=\"more\"></span></span><span class=\"match\"><span title=\"xip/c:VERB\">enthält</span>, <span title=\"xip/c:CONJ\">aber</span> <span title=\"xip/c:PTCL\">an</span> <span title=\"xip/c:CONJ\">und</span> <span title=\"xip/c:PP\"><span title=\"xip/c:PREP\">für</span> <span title=\"xip/c:NP\"><span title=\"xip/c:PRON\">sich</span></span></span> <span title=\"xip/c:NP\"><span title=\"xip/c:DET\">keinen</span> <span title=\"xip/c:NPA\"><span title=\"xip/c:AP\"><span title=\"xip/c:ADJ\">weiteren</span></span> <span title=\"xip/c:NOUN\">Sinn</span></span></span> <span title=\"xip/c:VERB\">enthält</span></span><span class=\"context-right\"><span class=\"more\"></span></span>",
+ "ID":"match-WPD!WPD_NNN.02848-p1213-1224",
+ "pubDate":"2005-03-28",
+ "context":{
+ "left":["token",0],
+ "right":["token",0]
+ }
+ },
"matchInfo": {
"author":"Filzstift,Alexander Sommer,TheK",
"textClass":"freizeit-unterhaltung reisen",
diff --git a/lib/Korap/Plugin/KorapSearch.pm b/lib/Korap/Plugin/KorapSearch.pm
index 0940cf0..a2c22bd 100644
--- a/lib/Korap/Plugin/KorapSearch.pm
+++ b/lib/Korap/Plugin/KorapSearch.pm
@@ -8,13 +8,12 @@
# TODO: Write search snippet
sub map_matches {
- my $matches = shift;
[
map {
$_->{ID} =~ s/^match\-[^!]+![^-]+-//;
$_->{docID} =~ s/^[^_]+_//;
$_;
- } @$matches
+ } @{ shift() }
];
};
@@ -27,12 +26,13 @@
$param = { %$param, %$config_param };
};
- my $api = $param->{api};
+ my $api = $param->{'api-0.1'};
# Create search endpoint
$mojo->routes->add_shortcut(
search => sub {
- shift->route('/search')->to('search#remote')
+ # Todo: Support TRACE
+ return shift->route('/search')->to('search#remote')
}
);
@@ -55,7 +55,7 @@
$c->stash('search.bm.hit' => 20);
$c->stash('search.bm.result' => 10);
$c->stash('search.query' => $json->{request}->{query});
- $c->stash('search.hits' => $json->{matches});
+ $c->stash('search.hits' => map_matches $json->{matches});
return $cb->();
};
@@ -85,7 +85,17 @@
};
my $url = Mojo::URL->new($api);
- $url->path('resource/search');
+
+ if ($c->stash('corpus_id')) {
+ $url->path('corpus/' . $c->stash('corpus_id') . '/search');
+ }
+ elsif ($c->stash('collection_id')) {
+ $url->path('virtualcollection/' . $c->stash('collection_id') . '/search');
+ }
+ else {
+ $url->path('search');
+ };
+
#if ($c->stash('resource')) {
#$url->path($c->stash('resource'));
#if ($c->stash('cid')) {
@@ -100,7 +110,7 @@
$url->query(\%query);
my $cache_url = $url->to_string;
- $url->query({ctx => 'paragraph'});
+ $url->query({context => 'paragraph'});
# Check cache for total results
my $total_results = $c->chi->get('total-' . $cache_url);
@@ -108,7 +118,6 @@
$c->stash('search.totalResults' => $total_results);
$c->app->log->warn('Get total result from cache');
$url->query({cutoff => 'true'});
- $url->query({cutOff => 'true'});
}
else {
$c->stash('search.totalResults' => 0);
@@ -118,10 +127,9 @@
$c->stash('search.itemsPerPage' => $count);
- my $ua = Mojo::UserAgent->new($url);
$c->app->log->debug($url->to_string);
- $c->app->log->debug("Start tx");
+ my $ua = Mojo::UserAgent->new($url);
# Blocking request
# TODO: Make non-blocking
@@ -139,10 +147,10 @@
# Reformat benchmark counter
my $b_hit = $json->{benchmarkHitCounter};
my $b_search = $json->{benchmarkSearchResults};
- if ($b_hit =~ s/\s+(m)?s$//) {
+ if ($b_hit & $b_hit =~ s/\s+(m)?s$//) {
$b_hit = sprintf("%.2f", $b_hit) . ($1 ? $1 : '') . 's';
};
- if ($b_search =~ s/\s+(m)?s$//) {
+ if ($b_search && $b_search =~ s/\s+(m)?s$//) {
$b_search = sprintf("%.2f", $b_search) . ($1 ? $1 : '') . 's';
};
diff --git a/lib/Korap/Plugin/KorapTagHelpers.pm b/lib/Korap/Plugin/KorapTagHelpers.pm
index b54161c..b2b9a4e 100644
--- a/lib/Korap/Plugin/KorapTagHelpers.pm
+++ b/lib/Korap/Plugin/KorapTagHelpers.pm
@@ -10,9 +10,9 @@
korap_tut_query => sub {
my ($c, $ql, $q) = @_;
$q = xml_escape $q;
- b('<code class="query tutorial" onclick="top.useQuery(this)" ' .
- qq!data-query="$q" data-query-language="$ql"><pre>! .
- $q . '</pre></code>');
+ b('<pre class="query tutorial" onclick="top.useQuery(this)" ' .
+ qq!data-query="$q" data-query-language="$ql"><code>! .
+ $q . '</code></pre>');
}
);
};
diff --git a/lib/Korap/Search.pm b/lib/Korap/Search.pm
index 9166130..a656635 100644
--- a/lib/Korap/Search.pm
+++ b/lib/Korap/Search.pm
@@ -7,24 +7,28 @@
$c->layout('default');
$c->title('KorAP');
+ my $api = $c->config('KorAP')->{'api-0.1'};
+
+ # Todo: Support query building directly
+
$c->stash(test_port => (
$c->req->url->to_abs->port == 6666 ||
- $c->app->mode eq 'development') ? 1 : 0);
+ $c->app->mode =~ m/^development|test$/) ? 1 : 0);
if ((scalar $c->param('action') // '') eq 'inspect') {
- my $api = $c->config('KorAP')->{api};
- my $url = Mojo::URL->new($api)->path('resource/query');
+ my $url = Mojo::URL->new($api)->path('search');
$url->query({
q => scalar $c->param('q') // '',
ql => scalar $c->param('ql') // 'poliqarp'
});
- if (my $response = $c->ua->get($url)->success) {
+ my $tx = $c->ua->build_tx(TRACE => $url);
+ if (my $response = $c->ua->start($tx)->success) {
$c->stash('search.query' => $response->json);
}
else {
- $c->notify(error => 'Unable to retrieve serialized query');
+ $c->notify(error => 'Unable to trace query');
};
$c->param(cutoff => 1);
@@ -38,13 +42,6 @@
$c->render(template => 'search');
};
-sub info {
- my $c = shift;
- my $api = $c->config('KorAP')->{api};
- my $src = $c->stash('resource');
- $c->render(json => $c->notifications(json => $c->info_on($src)));
-};
-
1;
@@ -54,9 +51,6 @@
[{"shared":false,"id":1,"managed":true,"created":1401193381119,"stats":{"documents":196510,"tokens":51545081,"sentences":4116282,"paragraphs":2034752},"query":[{"@type":"korap:meta-filter","@value":{"@type":"korap:term","@field":"korap:field#corpusID","@value":"WPD"}}],"description":"Die freie Enzyklopädie","name":"Wikipedia","foundries":"base;corenlp;mate;mpt;opennlp;tt;xip"}]
-
-
-
http://10.0.10.13:8070/api/v1/resource/matchInfo?id=match-WPD!WPD_NNN.02848-p1223-1224&f=mate&l=
{"author":"Filzstift,Alexander Sommer,TheK","textClass":"freizeit-unterhaltung reisen","corpusID":"WPD","title":"Neuseeland","foundries":"xip xip/morpho xip/constituency xip/dependency corenlp corenlp/namedentities corenlp/namedentities/ne_dewac_175m_600 corenlp/namedentities corenlp/namedentities/ne_hgc_175m_600 mate mate/morpho mate/dependency connexor connexor/morpho connexor/syntax connexor/phrase treetagger treetagger/morpho base base/sentences base/paragraphs opennlp opennlp/morpho","tokenization":"opennlp#tokens","field":"tokens","startMore":false,"endMore":false,"docID":"WPD_NNN.02848","snippet":"<span class=\"context-left\"></span><span class=\"match\"><span title=\"mate/l:besonders\"><span title=\"mate/p:ADV\">Besonders</span></span> <span title=\"mate/l:auffällig\"><span title=\"mate/m:degree:pos\"><span title=\"mate/p:ADJD\">auffällig</span></span></span> <span title=\"mate/l:sein\"><span title=\"mate/m:mood:ind\"><span title=\"mate/m:number:pl\"><span title=\"mate/m:person:3\"><span title=\"mate/m:tense:pres\"><span title=\"mate/p:VAFIN\">sind</span></span></span></span></span></span> <span title=\"mate/l:schließlich\"><span title=\"mate/p:ADV\">schließlich</span></span> <span title=\"mate/l:noch\"><span title=\"mate/p:ADV\">noch</span></span> <span title=\"mate/l:der\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:ART\">der</span></span></span></span></span> <span title=\"mate/l:pohutukawa\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\">Pohutukawa</span></span></span></span></span> <span title=\"mate/l:und\"><span title=\"mate/p:KON\">und</span></span> <span title=\"mate/l:der\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:ART\">der</span></span></span></span></span> <span title=\"mate/l:cabbage\"><span title=\"mate/m:case:nom\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\">Cabbage</span></span></span></span></span> <span title=\"mate/l:tree\"><span title=\"mate/m:gender:masc\"><span title=\"mate/m:number:sg\"><span title=\"mate/p:NE\"><span title=\"mate/m:case:nom\">Tree</span></span></span></span></span></span><span class=\"context-right\"></span>","ID":"match-WPD!WPD_NNN.02848-p1213-1224","pubDate":"2005-03-28","context":{"left":["token",0],"right":["token",0]}}
diff --git a/lib/Mojolicious/Plugin/AssetPack/LibSass.pm b/lib/Mojolicious/Plugin/AssetPack/LibSass.pm
new file mode 100644
index 0000000..6a082a4
--- /dev/null
+++ b/lib/Mojolicious/Plugin/AssetPack/LibSass.pm
@@ -0,0 +1,27 @@
+package Mojolicious::Plugin::AssetPack::LibSass;
+use Mojo::Base 'Mojolicious::Plugin';
+use CSS::Sass;
+use CSS::Minifier::XS;
+
+sub register {
+ my ($plugin, $mojo) = @_;
+
+ my $sass = CSS::Sass->new;
+
+ # Todo: Check if AssetPack is loaded
+ # Todo: Only minify if necessary
+
+ my $proc = $mojo->asset->preprocessors;
+
+ $proc->remove('scss');
+ $proc->add(
+ scss => sub {
+ my ($as, $text, $file) = @_;
+ $$text = CSS::Minifier::XS::minify($sass->compile($$text));
+ });
+ $proc->map_type(scss => 'css');
+};
+
+1;
+
+__END__
diff --git a/public/fontawesome/font-awesome.min.css b/public/css/font-awesome.min.css
similarity index 100%
rename from public/fontawesome/font-awesome.min.css
rename to public/css/font-awesome.min.css
diff --git a/public/css/highlight.css b/public/css/highlight.css
new file mode 100644
index 0000000..1e61e83
--- /dev/null
+++ b/public/css/highlight.css
@@ -0,0 +1,124 @@
+/*
+
+Based on github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+ display: block;
+ padding: 0.5em;
+}
+
+.hljs-comment,
+.hljs-template_comment,
+.diff .hljs-header,
+.hljs-javadoc {
+ color: #998;
+ font-style: italic
+}
+
+.hljs-keyword,
+.css .rule .hljs-keyword,
+.hljs-winutils,
+.javascript .hljs-title,
+.nginx .hljs-title,
+.hljs-subst,
+.hljs-request,
+.hljs-status {
+ color: #333;
+ font-weight: bold
+}
+
+.hljs-number,
+.hljs-hexcolor,
+.ruby .hljs-constant {
+ color: #099;
+}
+
+.hljs-string,
+.hljs-tag .hljs-value,
+.hljs-phpdoc,
+.tex .hljs-formula {
+ color: #d14
+}
+
+.hljs-title,
+.hljs-id,
+.coffeescript .hljs-params,
+.scss .hljs-preprocessor {
+ color: #900;
+ font-weight: bold
+}
+
+.javascript .hljs-title,
+.lisp .hljs-title,
+.clojure .hljs-title,
+.hljs-subst {
+ font-weight: normal
+}
+
+.hljs-class .hljs-title,
+.haskell .hljs-type,
+.vhdl .hljs-literal,
+.tex .hljs-command {
+ color: #458;
+ font-weight: bold
+}
+
+.hljs-tag,
+.hljs-tag .hljs-title,
+.hljs-rules .hljs-property,
+.django .hljs-tag .hljs-keyword {
+ color: #000080;
+ font-weight: normal
+}
+
+.hljs-attribute,
+.hljs-variable,
+.lisp .hljs-body {
+ color: #008080
+}
+
+.hljs-regexp {
+ color: #009926
+}
+
+.hljs-symbol,
+.ruby .hljs-symbol .hljs-string,
+.lisp .hljs-keyword,
+.tex .hljs-special,
+.hljs-prompt {
+ color: #990073
+}
+
+.hljs-built_in,
+.lisp .hljs-title,
+.clojure .hljs-built_in {
+ color: #0086b3
+}
+
+.hljs-preprocessor,
+.hljs-pragma,
+.hljs-pi,
+.hljs-doctype,
+.hljs-shebang,
+.hljs-cdata {
+ color: #999;
+ font-weight: bold
+}
+
+.hljs-deletion {
+ background: #fdd
+}
+
+.hljs-addition {
+ background: #dfd
+}
+
+.diff .hljs-change {
+ background: #0086b3
+}
+
+.hljs-chunk {
+ color: #aaa
+}
diff --git a/public/css/media.css b/public/css/media.css
new file mode 100644
index 0000000..6eb7283
--- /dev/null
+++ b/public/css/media.css
@@ -0,0 +1,34 @@
+@media (orientation: portrait), (max-width: 42.5em) {
+ #sidebar {
+ margin-left: -230px;
+ }
+ h1 {
+ margin-left: 3px;
+ width: 4em;
+ height: 1.8em;
+ background-size: 90%;
+ z-index: 300;
+ }
+ main {
+ margin-left: 14px;
+ }
+ #top form {
+ padding-left: 0px;
+ padding-top: 2.9em;
+ }
+ #sidebar {
+ padding-top: 22px;
+ }
+ #tutorial {
+ border-radius: 0;
+ border-width: 0;
+ right: 0;
+ left: 0;
+ bottom: 0;
+ top: 0;
+ padding: 0;
+ }
+ #tutorial iframe {
+ border-radius: 0;
+ }
+}
\ No newline at end of file
diff --git a/public/hint.css b/public/hint.css
deleted file mode 100644
index b323523..0000000
--- a/public/hint.css
+++ /dev/null
@@ -1,57 +0,0 @@
-#searchMirror {
- position: absolute;
- height: 0px;
- margin-top: 1px;
- white-space:nowrap;
- overflow: show;
-}
-
-#searchMirror > span {
- opacity: 0;
- white-space:nowrap;
- overflow: hidden;
-}
-
-#searchMirror > ul {
- color: white;
- margin: 0;
- text-indent: 0;
- display: inline-block;
- background-color: #496000;
- opacity: 0;
- padding: 0;
- padding-top: 5px;
- padding-bottom: 10px;
- border-bottom-left-radius: 10px;
- border-bottom-right-radius: 10px;
-}
-
-#searchMirror > ul > li {
- list-style-type: none;
- list-style-position: outside;
- padding: 3pt 10pt;
- text-shadow: none;
-}
-
-#searchMirror > ul > li {
- white-space: normal;
-}
-
-#searchMirror > ul > li > span {
- float: right;
- margin-left: 30pt;
- text-align: right;
- font-style: italic;
- color: #7ba400;
-}
-
-/* like sidebar ul li.active */
-#searchMirror > ul > li.active {
- background-color: #7ba400;
- text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-#searchMirror > ul > li.active > span {
- color: #496000;
- text-shadow: none;
-}
\ No newline at end of file
diff --git a/public/img/korap-logo-solo.svg b/public/img/korap-logo-solo.svg
index 0478e5a..73b7c58 100644
--- a/public/img/korap-logo-solo.svg
+++ b/public/img/korap-logo-solo.svg
@@ -8,8 +8,8 @@
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
- width="292.90839"
- height="104.8784"
+ width="297"
+ height="108"
id="svg2">
<defs
id="defs4" />
diff --git a/public/js/highlight.pack.js b/public/js/highlight.pack.js
new file mode 100644
index 0000000..6c71f03
--- /dev/null
+++ b/public/js/highlight.pack.js
@@ -0,0 +1 @@
+var hljs=new function(){function k(v){return v.replace(/&/gm,"&").replace(/</gm,"<").replace(/>/gm,">")}function t(v){return v.nodeName.toLowerCase()}function i(w,x){var v=w&&w.exec(x);return v&&v.index==0}function d(v){return Array.prototype.map.call(v.childNodes,function(w){if(w.nodeType==3){return b.useBR?w.nodeValue.replace(/\n/g,""):w.nodeValue}if(t(w)=="br"){return"\n"}return d(w)}).join("")}function r(w){var v=(w.className+" "+(w.parentNode?w.parentNode.className:"")).split(/\s+/);v=v.map(function(x){return x.replace(/^language-/,"")});return v.filter(function(x){return j(x)||x=="no-highlight"})[0]}function o(x,y){var v={};for(var w in x){v[w]=x[w]}if(y){for(var w in y){v[w]=y[w]}}return v}function u(x){var v=[];(function w(y,z){for(var A=y.firstChild;A;A=A.nextSibling){if(A.nodeType==3){z+=A.nodeValue.length}else{if(t(A)=="br"){z+=1}else{if(A.nodeType==1){v.push({event:"start",offset:z,node:A});z=w(A,z);v.push({event:"stop",offset:z,node:A})}}}}return z})(x,0);return v}function q(w,y,C){var x=0;var F="";var z=[];function B(){if(!w.length||!y.length){return w.length?w:y}if(w[0].offset!=y[0].offset){return(w[0].offset<y[0].offset)?w:y}return y[0].event=="start"?w:y}function A(H){function G(I){return" "+I.nodeName+'="'+k(I.value)+'"'}F+="<"+t(H)+Array.prototype.map.call(H.attributes,G).join("")+">"}function E(G){F+="</"+t(G)+">"}function v(G){(G.event=="start"?A:E)(G.node)}while(w.length||y.length){var D=B();F+=k(C.substr(x,D[0].offset-x));x=D[0].offset;if(D==w){z.reverse().forEach(E);do{v(D.splice(0,1)[0]);D=B()}while(D==w&&D.length&&D[0].offset==x);z.reverse().forEach(A)}else{if(D[0].event=="start"){z.push(D[0].node)}else{z.pop()}v(D.splice(0,1)[0])}}return F+k(C.substr(x))}function m(y){function v(z){return(z&&z.source)||z}function w(A,z){return RegExp(v(A),"m"+(y.cI?"i":"")+(z?"g":""))}function x(D,C){if(D.compiled){return}D.compiled=true;D.k=D.k||D.bK;if(D.k){var z={};function E(G,F){if(y.cI){F=F.toLowerCase()}F.split(" ").forEach(function(H){var I=H.split("|");z[I[0]]=[G,I[1]?Number(I[1]):1]})}if(typeof D.k=="string"){E("keyword",D.k)}else{Object.keys(D.k).forEach(function(F){E(F,D.k[F])})}D.k=z}D.lR=w(D.l||/\b[A-Za-z0-9_]+\b/,true);if(C){if(D.bK){D.b=D.bK.split(" ").join("|")}if(!D.b){D.b=/\B|\b/}D.bR=w(D.b);if(!D.e&&!D.eW){D.e=/\B|\b/}if(D.e){D.eR=w(D.e)}D.tE=v(D.e)||"";if(D.eW&&C.tE){D.tE+=(D.e?"|":"")+C.tE}}if(D.i){D.iR=w(D.i)}if(D.r===undefined){D.r=1}if(!D.c){D.c=[]}var B=[];D.c.forEach(function(F){if(F.v){F.v.forEach(function(G){B.push(o(F,G))})}else{B.push(F=="self"?D:F)}});D.c=B;D.c.forEach(function(F){x(F,D)});if(D.starts){x(D.starts,C)}var A=D.c.map(function(F){return F.bK?"\\.?\\b("+F.b+")\\b\\.?":F.b}).concat([D.tE]).concat([D.i]).map(v).filter(Boolean);D.t=A.length?w(A.join("|"),true):{exec:function(F){return null}};D.continuation={}}x(y)}function c(S,L,J,R){function v(U,V){for(var T=0;T<V.c.length;T++){if(i(V.c[T].bR,U)){return V.c[T]}}}function z(U,T){if(i(U.eR,T)){return U}if(U.eW){return z(U.parent,T)}}function A(T,U){return !J&&i(U.iR,T)}function E(V,T){var U=M.cI?T[0].toLowerCase():T[0];return V.k.hasOwnProperty(U)&&V.k[U]}function w(Z,X,W,V){var T=V?"":b.classPrefix,U='<span class="'+T,Y=W?"":"</span>";U+=Z+'">';return U+X+Y}function N(){var U=k(C);if(!I.k){return U}var T="";var X=0;I.lR.lastIndex=0;var V=I.lR.exec(U);while(V){T+=U.substr(X,V.index-X);var W=E(I,V);if(W){H+=W[1];T+=w(W[0],V[0])}else{T+=V[0]}X=I.lR.lastIndex;V=I.lR.exec(U)}return T+U.substr(X)}function F(){if(I.sL&&!f[I.sL]){return k(C)}var T=I.sL?c(I.sL,C,true,I.continuation.top):g(C);if(I.r>0){H+=T.r}if(I.subLanguageMode=="continuous"){I.continuation.top=T.top}return w(T.language,T.value,false,true)}function Q(){return I.sL!==undefined?F():N()}function P(V,U){var T=V.cN?w(V.cN,"",true):"";if(V.rB){D+=T;C=""}else{if(V.eB){D+=k(U)+T;C=""}else{D+=T;C=U}}I=Object.create(V,{parent:{value:I}})}function G(T,X){C+=T;if(X===undefined){D+=Q();return 0}var V=v(X,I);if(V){D+=Q();P(V,X);return V.rB?0:X.length}var W=z(I,X);if(W){var U=I;if(!(U.rE||U.eE)){C+=X}D+=Q();do{if(I.cN){D+="</span>"}H+=I.r;I=I.parent}while(I!=W.parent);if(U.eE){D+=k(X)}C="";if(W.starts){P(W.starts,"")}return U.rE?0:X.length}if(A(X,I)){throw new Error('Illegal lexeme "'+X+'" for mode "'+(I.cN||"<unnamed>")+'"')}C+=X;return X.length||1}var M=j(S);if(!M){throw new Error('Unknown language: "'+S+'"')}m(M);var I=R||M;var D="";for(var K=I;K!=M;K=K.parent){if(K.cN){D=w(K.cN,D,true)}}var C="";var H=0;try{var B,y,x=0;while(true){I.t.lastIndex=x;B=I.t.exec(L);if(!B){break}y=G(L.substr(x,B.index-x),B[0]);x=B.index+y}G(L.substr(x));for(var K=I;K.parent;K=K.parent){if(K.cN){D+="</span>"}}return{r:H,value:D,language:S,top:I}}catch(O){if(O.message.indexOf("Illegal")!=-1){return{r:0,value:k(L)}}else{throw O}}}function g(y,x){x=x||b.languages||Object.keys(f);var v={r:0,value:k(y)};var w=v;x.forEach(function(z){if(!j(z)){return}var A=c(z,y,false);A.language=z;if(A.r>w.r){w=A}if(A.r>v.r){w=v;v=A}});if(w.language){v.second_best=w}return v}function h(v){if(b.tabReplace){v=v.replace(/^((<[^>]+>|\t)+)/gm,function(w,z,y,x){return z.replace(/\t/g,b.tabReplace)})}if(b.useBR){v=v.replace(/\n/g,"<br>")}return v}function p(z){var y=d(z);var A=r(z);if(A=="no-highlight"){return}var v=A?c(A,y,true):g(y);var w=u(z);if(w.length){var x=document.createElementNS("http://www.w3.org/1999/xhtml","pre");x.innerHTML=v.value;v.value=q(w,u(x),y)}v.value=h(v.value);z.innerHTML=v.value;z.className+=" hljs "+(!A&&v.language||"");z.result={language:v.language,re:v.r};if(v.second_best){z.second_best={language:v.second_best.language,re:v.second_best.r}}}var b={classPrefix:"hljs-",tabReplace:null,useBR:false,languages:undefined};function s(v){b=o(b,v)}function l(){if(l.called){return}l.called=true;var v=document.querySelectorAll("pre code");Array.prototype.forEach.call(v,p)}function a(){addEventListener("DOMContentLoaded",l,false);addEventListener("load",l,false)}var f={};var n={};function e(v,x){var w=f[v]=x(this);if(w.aliases){w.aliases.forEach(function(y){n[y]=v})}}function j(v){return f[v]||f[n[v]]}this.highlight=c;this.highlightAuto=g;this.fixMarkup=h;this.highlightBlock=p;this.configure=s;this.initHighlighting=l;this.initHighlightingOnLoad=a;this.registerLanguage=e;this.getLanguage=j;this.inherit=o;this.IR="[a-zA-Z][a-zA-Z0-9_]*";this.UIR="[a-zA-Z_][a-zA-Z0-9_]*";this.NR="\\b\\d+(\\.\\d+)?";this.CNR="(\\b0[xX][a-fA-F0-9]+|(\\b\\d+(\\.\\d*)?|\\.\\d+)([eE][-+]?\\d+)?)";this.BNR="\\b(0b[01]+)";this.RSR="!|!=|!==|%|%=|&|&&|&=|\\*|\\*=|\\+|\\+=|,|-|-=|/=|/|:|;|<<|<<=|<=|<|===|==|=|>>>=|>>=|>=|>>>|>>|>|\\?|\\[|\\{|\\(|\\^|\\^=|\\||\\|=|\\|\\||~";this.BE={b:"\\\\[\\s\\S]",r:0};this.ASM={cN:"string",b:"'",e:"'",i:"\\n",c:[this.BE]};this.QSM={cN:"string",b:'"',e:'"',i:"\\n",c:[this.BE]};this.CLCM={cN:"comment",b:"//",e:"$"};this.CBLCLM={cN:"comment",b:"/\\*",e:"\\*/"};this.HCM={cN:"comment",b:"#",e:"$"};this.NM={cN:"number",b:this.NR,r:0};this.CNM={cN:"number",b:this.CNR,r:0};this.BNM={cN:"number",b:this.BNR,r:0};this.REGEXP_MODE={cN:"regexp",b:/\//,e:/\/[gim]*/,i:/\n/,c:[this.BE,{b:/\[/,e:/\]/,r:0,c:[this.BE]}]};this.TM={cN:"title",b:this.IR,r:0};this.UTM={cN:"title",b:this.UIR,r:0}}();hljs.registerLanguage("xml",function(a){var c="[A-Za-z0-9\\._:-]+";var d={b:/<\?(php)?(?!\w)/,e:/\?>/,sL:"php",subLanguageMode:"continuous"};var b={eW:true,i:/</,r:0,c:[d,{cN:"attribute",b:c,r:0},{b:"=",r:0,c:[{cN:"value",v:[{b:/"/,e:/"/},{b:/'/,e:/'/},{b:/[^\s\/>]+/}]}]}]};return{aliases:["html"],cI:true,c:[{cN:"doctype",b:"<!DOCTYPE",e:">",r:10,c:[{b:"\\[",e:"\\]"}]},{cN:"comment",b:"<!--",e:"-->",r:10},{cN:"cdata",b:"<\\!\\[CDATA\\[",e:"\\]\\]>",r:10},{cN:"tag",b:"<style(?=\\s|>|$)",e:">",k:{title:"style"},c:[b],starts:{e:"</style>",rE:true,sL:"css"}},{cN:"tag",b:"<script(?=\\s|>|$)",e:">",k:{title:"script"},c:[b],starts:{e:"<\/script>",rE:true,sL:"javascript"}},{b:"<%",e:"%>",sL:"vbscript"},d,{cN:"pi",b:/<\?\w+/,e:/\?>/,r:10},{cN:"tag",b:"</?",e:"/?>",c:[{cN:"title",b:"[^ /><]+",r:0},b]}]}});hljs.registerLanguage("markdown",function(a){return{c:[{cN:"header",v:[{b:"^#{1,6}",e:"$"},{b:"^.+?\\n[=-]{2,}$"}]},{b:"<",e:">",sL:"xml",r:0},{cN:"bullet",b:"^([*+-]|(\\d+\\.))\\s+"},{cN:"strong",b:"[*_]{2}.+?[*_]{2}"},{cN:"emphasis",v:[{b:"\\*.+?\\*"},{b:"_.+?_",r:0}]},{cN:"blockquote",b:"^>\\s+",e:"$"},{cN:"code",v:[{b:"`.+?`"},{b:"^( {4}|\t)",e:"$",r:0}]},{cN:"horizontal_rule",b:"^[-\\*]{3,}",e:"$"},{b:"\\[.+?\\][\\(\\[].+?[\\)\\]]",rB:true,c:[{cN:"link_label",b:"\\[",e:"\\]",eB:true,rE:true,r:0},{cN:"link_url",b:"\\]\\(",e:"\\)",eB:true,eE:true},{cN:"link_reference",b:"\\]\\[",e:"\\]",eB:true,eE:true,}],r:10},{b:"^\\[.+\\]:",e:"$",rB:true,c:[{cN:"link_reference",b:"\\[",e:"\\]",eB:true,eE:true},{cN:"link_url",b:"\\s",e:"$"}]}]}});hljs.registerLanguage("css",function(a){var b="[a-zA-Z-][a-zA-Z0-9_-]*";var c={cN:"function",b:b+"\\(",e:"\\)",c:["self",a.NM,a.ASM,a.QSM]};return{cI:true,i:"[=/|']",c:[a.CBLCLM,{cN:"id",b:"\\#[A-Za-z0-9_-]+"},{cN:"class",b:"\\.[A-Za-z0-9_-]+",r:0},{cN:"attr_selector",b:"\\[",e:"\\]",i:"$"},{cN:"pseudo",b:":(:)?[a-zA-Z0-9\\_\\-\\+\\(\\)\\\"\\']+"},{cN:"at_rule",b:"@(font-face|page)",l:"[a-z-]+",k:"font-face page"},{cN:"at_rule",b:"@",e:"[{;]",c:[{cN:"keyword",b:/\S+/},{b:/\s/,eW:true,eE:true,r:0,c:[c,a.ASM,a.QSM,a.NM]}]},{cN:"tag",b:b,r:0},{cN:"rules",b:"{",e:"}",i:"[^\\s]",r:0,c:[a.CBLCLM,{cN:"rule",b:"[^\\s]",rB:true,e:";",eW:true,c:[{cN:"attribute",b:"[A-Z\\_\\.\\-]+",e:":",eE:true,i:"[^\\s]",starts:{cN:"value",eW:true,eE:true,c:[c,a.NM,a.QSM,a.ASM,a.CBLCLM,{cN:"hexcolor",b:"#[0-9A-Fa-f]+"},{cN:"important",b:"!important"}]}}]}]}]}});hljs.registerLanguage("json",function(a){var e={literal:"true false null"};var d=[a.QSM,a.CNM];var c={cN:"value",e:",",eW:true,eE:true,c:d,k:e};var b={b:"{",e:"}",c:[{cN:"attribute",b:'\\s*"',e:'"\\s*:\\s*',eB:true,eE:true,c:[a.BE],i:"\\n",starts:c}],i:"\\S"};var f={b:"\\[",e:"\\]",c:[a.inherit(c,{cN:null})],i:"\\S"};d.splice(d.length,0,b,f);return{c:d,k:e,i:"\\S"}});
\ No newline at end of file
diff --git a/public/hint.js b/public/js/hint.js
similarity index 96%
rename from public/hint.js
rename to public/js/hint.js
index a6beda6..4324c1e 100644
--- a/public/hint.js
+++ b/public/js/hint.js
@@ -22,8 +22,7 @@
mirror.setAttribute("id", "searchMirror");
mirror.appendChild(document.createElement("span"));
mirror.appendChild(hint);
- search.parentNode.insertBefore(mirror, search);
-
+ document.getElementsByTagName("body")[0].appendChild(mirror);
// Default active state
this.active = -2;
@@ -103,7 +102,8 @@
// Choose next item in list
this.next = function () {
if (this.active === -2)
- return;
+ return false;
+
var lis = hint.getElementsByTagName("li");
if (this.active === -1) {
lis[0].setAttribute("class", "active");
@@ -118,6 +118,8 @@
lis[this.active].removeAttribute("class");
lis[++this.active].setAttribute("class", "active");
};
+
+ return true;
};
// Choose previous item in list
@@ -163,6 +165,8 @@
if (foundryRegex.exec(begin + action))
this.show(RegExp.$1 + (RegExp.$2 ? '/' + RegExp.$2 : ''));
+
+ return true;
};
function changed (e) {
@@ -199,17 +203,17 @@
if (that.active === -2)
return;
if (e.key === 'Down') {
- that.next();
+ return that.next();
}
else if (e.key === 'Up') {
- that.previous();
+ return that.previous();
}
- else if (e.key === 'Enter') {
- that.choose();
+ else if (e.key === 'Enter' && that.choose()) {
e.stopPropagation();
e.preventDefault();
return false;
- }
+ };
+ that.hide();
};
function qlSelect () {
diff --git a/public/jquery-2.0.0.min.js b/public/js/jquery-2.0.0.min.js
similarity index 100%
rename from public/jquery-2.0.0.min.js
rename to public/js/jquery-2.0.0.min.js
diff --git a/public/translateTable.js b/public/js/translateTable.js
similarity index 100%
rename from public/translateTable.js
rename to public/js/translateTable.js
diff --git a/public/translateTree.js b/public/js/translateTree.js
similarity index 100%
rename from public/translateTree.js
rename to public/js/translateTree.js
diff --git a/public/kwic-3.0.css b/public/kwic-3.0.css
deleted file mode 100644
index 0aac61e..0000000
--- a/public/kwic-3.0.css
+++ /dev/null
@@ -1,220 +0,0 @@
-@charset "utf-8";
-
-/*
- light orange: #f4eebb;
- dark orange: #ffa500;
- dark green: #496000;
- light green: #7ba400;
-
- Search for: [orth=erstens]
-*/
-
-ol {
- width: auto;
- overflow: hidden;
- list-style-type: none;
- font-size: 10pt;
- margin: 0;
- padding: 0;
- text-indent: 0;
- border: 1px solid #ccc;
- font-family: verdana, tahoma, arial;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
- border-style: solid;
- border-color: #ffa500;
- border-width: 0;
-}
-
-ol > li:not(.active) {
- width: 999999%;
- margin-left: -499999.5%;
- background-color: #f5f5f5;
- overflow: hidden;
- white-space: no-wrap;
- cursor: pointer;
- padding: 10px 0;
- text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
- background-color: #ddd;
-}
-
-ol > li > div.snippet > span,
-ol > li > div.snippet > span > span {
- white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div.snippet > span.left {
- display: inline-block;
- text-align: right;
- width: 50.0046%;
-}
-
-ol.free-aligned > li:not(.active) > div.snippet > span.separator {
- width: 0px;
- height: 1em;
- margin-bottom: -2px;
- display: inline-block;
- line-height: 100%;
- border: 1px solid #009EE0;
- margin-left: 2px;
- margin-right: 2px;
-}
-
-ol.free-aligned > li > div.snippet > span.right {
- text-align: left;
-}
-
-ol.left-aligned > li > div.snippet > span.context-left {
- display: inline-block;
- text-align: right;
- width: 50.001%;
-}
-
-ol.right-aligned {
- text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div.snippet > span.context-right {
- display: inline-block;
- text-align: left;
- width: 49.9915%;
-}
-
-li > div.snippet > span {
- color: #666;
-}
-
-.match {
- font-weight: bold;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
- color: #111;
- padding-left: 4pt;
- padding-right: 2pt;
-}
-
-em, em.level-0 {
- border-bottom-width: 2px;
- border-bottom-style: solid;
- padding-bottom: 0px;
- font-style: normal;
-}
-
-em > em, em.level-1 {
- padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
- padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
- content: "…";
- padding-left: 2pt;
- padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
- text-align: left;
- width: auto;
- cursor: normal;
- white-space: wrap;
- height: auto;
- border-width: 2px;
- background-color: #f4eebb;
- position: relative;
- min-height: 68pt;
-}
-
-ol > li.active > div.snippet {
- margin: 5pt 10pt;
- margin-right: 3em;
- margin-bottom: 24pt;
-}
-
-ol > li.active > div.snippet > span {
- line-height: 1.4em;
- width: auto;
-}
-
-ol > li.active > div.snippet > span.context-left {
- margin-left: 0;
- display: inline;
- overflow: visible;
- text-align: left;
- width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
- display: none;
-}
-
-ol > li ul.action li {
- cursor: pointer;
- color: white;
- text-decoration: none;
-}
-
-ol > li.active ul.action {
- background-color: #ffa500;
- font-size: 12pt;
- color: white;
- text-shadow: none;
- display: block;
- margin: 0;
- padding: 0;
- z-index: 4;
- text-indent: 0;
- list-style-type: none;
- list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
- position: absolute;
- right: 0;
- bottom: 0;
- height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
- float: left;
- padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
- position: absolute;
- float: right;
- text-align: center;
- padding: 0pt 3pt;
- height: 100%;
- width: 1.2em;;
- right: 0;
- top: 0;
-}
-
-ol > li:not(.active) p {
- display: none;
-}
-
-ol > li.active p {
- background-color: #ffa500;
- color: white;
- text-shadow: none;
- padding: 3pt 10pt;
- margin: 5pt 0pt 0pt 0pt;
- position: absolute;
- width: 100%;
- bottom: 0;
-}
\ No newline at end of file
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
deleted file mode 100644
index bad538c..0000000
--- a/public/kwic-4.0.css
+++ /dev/null
@@ -1,221 +0,0 @@
-@charset "utf-8";
-/*
- light orange: #f4eebb;
- dark orange: #ffa500;
- dark green: #496000;
- light green: #7ba400;
-
- Search for: [orth=erstens]
-*/
-
-ol {
- width: auto;
- overflow: hidden;
- list-style-type: none;
- font-size: 10pt;
- margin: 0;
- padding: 0;
- text-indent: 0;
- border: 1px solid #ccc;
- font-family: verdana, tahoma, arial;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
-}
-
-ol > li {
- border-style: solid;
- border-color: #ffa500;
- border-width: 0;
-}
-
-ol > li:not(.active) {
- width: 99999%;
- margin-left: -49999.5%;
- background-color: #f5f5f5;
- overflow: hidden;
- white-space: no-wrap;
- cursor: pointer;
- padding: 5pt 0 6pt 0;
- text-indent: 0;
-}
-
-ol > li:nth-of-type(even) {
- background-color: #ddd;
-}
-
-ol > li > div > div.snippet > span,
-ol > li > div > div.snippet > span > span {
- white-space: no-wrap !important;
-}
-
-ol.free-aligned > li:not(.active) > div > div.snippet > span.left {
- display: inline-block;
- text-align: right;
- width: 50.046%;
-}
-
-ol.free-aligned > li:not(.active) > div > div.snippet > span.separator {
- width: 0px;
- height: 1em;
- margin-bottom: -2px;
- display: inline-block;
- line-height: 100%;
- border: 1px solid #009EE0;
- margin-left: 2px;
- margin-right: 2px;
-}
-
-ol.free-aligned > li > div > div.snippet > span.right {
- text-align: left;
-}
-
-ol.left-aligned > li > div > div.snippet > span.context-left {
- display: inline-block;
- text-align: right;
- width: 50.01%;
-}
-
-ol.right-aligned {
- text-align: right;
-}
-
-ol.right-aligned > li:not(.active) > div > div.snippet > span.context-right {
- display: inline-block;
- text-align: left;
- width: 49.915%;
-}
-
-li > div > div.snippet > span {
- color: #666;
-}
-
-.match {
- font-weight: bold;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
- color: #111;
- padding-left: 4pt;
- padding-right: 2pt;
-}
-
-em, em.level-0 {
- border-bottom-width: 2px;
- border-bottom-style: solid;
- padding-bottom: 0px;
- font-style: normal;
-}
-
-em > em, em.level-1 {
- padding-bottom: 3px;
-}
-
-em > em > em, em.level-2 {
- padding-bottom: 6px;
-}
-
-.class-0 { border-color: #c1002b; }
-.class-1 { border-color: #009ee0; }
-.class-2 { border-color: #f29400; }
-
-span.more:before {
- content: "…";
- padding-left: 2pt;
- padding-right: 2pt;
-}
-
-/* active view */
-ol > li.active {
- text-align: left;
- width: auto;
- cursor: normal;
- white-space: wrap;
- height: auto;
- border-width: 2px;
- background-color: #f4eebb;
- position: relative;
-}
-
-ol > li.active > div > div.snippet {
- margin: 5pt 10pt;
- margin-right: 3em;
-}
-
-ol > li.active > div {
- min-height: 42pt;
-}
-
-ol > li.active > div > div.snippet > span {
- line-height: 1.4em;
- width: auto;
-}
-
-ol > li.active > div > div.snippet > span.context-left {
- margin-left: 0;
- display: inline;
- overflow: visible;
- text-align: left;
- width: auto;
-}
-
-/* Korap-Actions: */
-ol > li ul.action {
- display: none;
-}
-
-ol > li ul.action li {
- cursor: pointer;
- color: white;
- text-decoration: none;
-}
-
-ol > li.active ul.action {
- background-color: #ffa500;
- font-size: 12pt;
- color: white;
- text-shadow: none;
- display: block;
- margin: 0;
- padding: 0;
- z-index: 4;
- text-indent: 0;
- list-style-type: none;
- list-style-position: inline;
-}
-
-/*
-ol > li.active ul.action.right {
- position: absolute;
- right: 0;
- bottom: 0;
- height: 1.2em;
-}
-
-ol > li.active ul.action.right li {
- float: left;
- padding-left: 1em;
-}
-*/
-
-ol > li.active ul.action.right {
- position: absolute;
- float: right;
- text-align: center;
- padding: 0pt 3pt;
- height: 100%;
- width: 1.2em;;
- right: 0;
- top: 0;
-}
-
-ol > li:not(.active) p {
- display: none;
-}
-
-ol > li.active p {
- background-color: #ffa500;
- color: white;
- text-shadow: none;
- padding: 3pt 10pt;
- margin: 0pt;
- width: 100%;
- bottom: 0;
- z-index: 300;
-}
\ No newline at end of file
diff --git a/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
new file mode 100644
index 0000000..6c2e1c5
--- /dev/null
+++ b/public/sass/.sass-cache/600d657f6ac2358f30ba6bc0ab4cd7ffb6194ced/flymake10181orG.rbc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
new file mode 100644
index 0000000..da6a64a
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
Binary files differ
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
new file mode 100644
index 0000000..a3aab1f
--- /dev/null
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/kwic-4.0.scssc
Binary files differ
diff --git a/public/sass/colors.scss b/public/sass/colors.scss
new file mode 100644
index 0000000..bee457c
--- /dev/null
+++ b/public/sass/colors.scss
@@ -0,0 +1,23 @@
+$light-orange: #f4eebb;
+$dark-orange: #ffa500;
+$darker-orange: #ff8000;
+$darkest-orange: darken($dark-orange, 20%);
+$dark-green: #496000;
+$light-green: #7ba400;
+$total-results: $light-green; // #c1002b;
+
+$light-shadow: 1px 1px rgba(255, 255, 255, 0.9);
+
+$kwic-border: #999;
+$kwic-line-noneven: #f5f5f5;
+$kwic-line-even: #ddd;
+$kwic-match-color: #333;
+$kwic-match-shadow: $light-shadow;
+
+$kwic-highlight-0: #c1002b;
+$kwic-highlight-1: #009ee0;
+$kwic-highlight-2: #f29400;
+
+$pagination-bg: #ddd;
+$pagination-border: $kwic-border;
+$pagination-box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
\ No newline at end of file
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
new file mode 100644
index 0000000..c19b508
--- /dev/null
+++ b/public/sass/hint.scss
@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+@import "colors";
+
+#searchMirror {
+ position: absolute;
+ margin-top: 1px;
+ white-space: nowrap;
+ overflow: show;
+ height: 0;
+ > span {
+ opacity: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+ > ul {
+ color: white;
+ margin: 0;
+ text-indent: 0;
+ display: inline-block;
+ background-color: $dark-green;
+ opacity: 0;
+ padding: 0;
+ padding-top: 5px;
+ padding-bottom: 10px;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ > li {
+ list-style-type: none;
+ list-style-position: outside;
+ padding: 3pt 10pt;
+ text-shadow: none;
+ white-space: normal;
+ > span {
+ float: right;
+ margin-left: 30pt;
+ text-align: right;
+ font-style: italic;
+ color: #7ba400;
+ }
+ /* like sidebar ul li.active */
+ &.active {
+ background-color: #7ba400;
+ text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+ > span {
+ color: #496000;
+ text-shadow: none;
+ }
+ }
+ }
+ }
+}
diff --git a/public/sass/kwic-4.0.scss b/public/sass/kwic-4.0.scss
new file mode 100644
index 0000000..8a16289
--- /dev/null
+++ b/public/sass/kwic-4.0.scss
@@ -0,0 +1,220 @@
+@charset "utf-8";
+
+$fonts: verdana, tahoma, arial;
+
+@import "colors";
+
+@mixin box-sizing-box() {
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
+}
+
+
+/*
+ Search for: [orth=erstens]
+*/
+
+ol {
+ width: auto;
+ overflow: hidden;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-indent: 0;
+ border: 1px solid $kwic-border;
+ font: {
+ family: $fonts;
+ size: 10pt;
+ }
+ text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+ > li {
+ border: {
+ style: solid;
+ color: #ffa500;
+ width: 0;
+ }
+ &:not(.active):not(:target) {
+ width: 99999%;
+ margin-left: -49999.5%;
+ background-color: $kwic-line-noneven;
+ overflow: hidden;
+ white-space: no-wrap;
+ cursor: pointer;
+ padding: 5pt 0 6pt 0;
+ text-indent: 0;
+ &:nth-of-type(even) {
+ background-color: $kwic-line-even;
+ }
+ }
+ > div {
+ > div.snippet > span {
+ white-space: no-wrap !important;
+ > span {
+ white-space: no-wrap !important;
+ }
+ color: #666;
+ &.match {
+ font-weight: bold;
+ text-shadow: $kwic-match-shadow;
+ color: $kwic-match-color;
+ padding-left: 4pt;
+ padding-right: 2pt;
+ }
+ }
+ }
+ }
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.left {
+ display: inline-block;
+ text-align: right;
+ width: 50.046%;
+}
+
+ol.free-aligned > li:not(.active):not(:target) > div > div.snippet > span.separator {
+ width: 0px;
+ height: 1em;
+ margin-bottom: -2px;
+ display: inline-block;
+ line-height: 100%;
+ border: 1px solid #009EE0;
+ margin-left: 2px;
+ margin-right: 2px;
+}
+
+ol.free-aligned > li > div > div.snippet > span.right {
+ text-align: left;
+}
+
+ol.left-aligned > li > div > div.snippet > span.context-left {
+ display: inline-block;
+ text-align: right;
+ width: 50.01%;
+}
+
+ol.right-aligned {
+ text-align: right;
+ > li:not(.active):not(:target) > div > div.snippet > span.context-right {
+ display: inline-block;
+ text-align: left;
+ width: 49.915%;
+ }
+}
+
+/* Highlights */
+em, em.level-0 {
+ border-bottom-width: 2px;
+ border-bottom-style: solid;
+ padding-bottom: 0px;
+ font-style: normal;
+}
+
+em > em, em.level-1 {
+ padding-bottom: 3px;
+}
+
+em > em > em, em.level-2 {
+ padding-bottom: 6px;
+}
+
+.class-0 { border-color: $kwic-highlight-0; }
+.class-1 { border-color: $kwic-highlight-1; }
+.class-2 { border-color: $kwic-highlight-2; }
+
+
+span.more:before {
+ content: "…";
+ padding-left: 2pt;
+ padding-right: 2pt;
+}
+
+/* active view */
+ol > li.active,
+ol > li:target {
+ text-align: left;
+ width: auto;
+ cursor: normal;
+ white-space: wrap;
+ height: auto;
+ border-width: 2px;
+ background-color: $light-orange;
+ position: relative;
+ > div {
+ min-height: 42pt;
+ > div.snippet {
+ margin: 5pt 10pt;
+ margin-right: 3em;
+ > span {
+ line-height: 1.4em;
+ width: auto;
+ &.context-left {
+ margin-left: 0;
+ display: inline;
+ overflow: visible;
+ text-align: left;
+ width: auto;
+ }
+ }
+ }
+ }
+}
+
+/* Actions */
+ol > li {
+ ul.action {
+ display: none;
+ > li {
+ cursor: pointer;
+ color: white;
+ text-decoration: none;
+ }
+ }
+ /* active actions */
+ &.active, &:target {
+ ul.action {
+ background-color: $dark-orange;
+ font-size: 12pt;
+ color: white;
+ text: {
+ shadow: none;
+ indent: 0;
+ }
+ display: block;
+ margin: 0;
+ padding: 0;
+ z-index: 4;
+ list-style: {
+ type: none;
+ position: inline;
+ }
+ &.right {
+ position: absolute;
+ float: right;
+ text-align: center;
+ padding: 0pt 3pt;
+ height: 100%;
+ width: 1.2em;;
+ right: 0;
+ top: 0;
+ }
+ }
+ }
+ &:not(.active):not(:target) p {
+ display: none;
+ }
+ &.active p, &:target p {
+ @include box-sizing-box();
+ padding-right: 2em;
+ background-color: $dark-orange;
+ color: white;
+ text-shadow: none;
+ padding: 3pt 10pt;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 300;
+ }
+}
+
+
diff --git a/public/sass/pagination.scss b/public/sass/pagination.scss
new file mode 100644
index 0000000..d847f6f
--- /dev/null
+++ b/public/sass/pagination.scss
@@ -0,0 +1,78 @@
+@import "colors";
+
+/*
+<div id="pagination">
+ <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
+ <a rel="self"><span>1</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=2"><span>2</span></a>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=3"><span>3</span></a>
+ <span><i class="fa fa-ellipsis-h"></i></span>
+ <a href="/?ql=poliqarp&q=test&action=ok&p=67"><span>67</span></a>
+ <a rel="next" href="/?ql=poliqarp&q=test&action=ok&p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+
+#pagination {
+ position: fixed;
+ right: 20px;
+ bottom: 10px;
+ z-index: 400;
+ span {
+ display: inline-block;
+ background-color: $pagination-bg;
+ height: 1.5em;
+ line-height: 1.5em;
+ padding: {
+ left: .4em;
+ right: .4em;
+ }
+ text-align: center;
+ border: {
+ top-width: 2px;
+ top-style: solid;
+ bottom-width: 2px;
+ bottom-style: solid;
+ color: $pagination-border;
+ }
+ box-shadow: $pagination-box-shadow;
+ }
+ a {
+ text-shadow: $light-shadow;
+ &[rel=self] span {
+ border: {
+ color: $dark-orange;
+ left-style: solid;
+ right-style: solid;
+ left-width: 2px;
+ right-width: 2px;
+ }
+ background-color: $light-orange;
+ color: $darkest-orange;
+ }
+ &[rel=next] span {
+ border: {
+ right-width: 2px;
+ right-style: solid;
+ top-right-radius: 12px;
+ bottom-right-radius: 12px;
+ }
+ }
+ &[rel=prev] span {
+ border: {
+ left-width: 2px;
+ left-style: solid;
+ top-left-radius: 12px;
+ bottom-left-radius: 12px;
+ }
+ }
+ &[href] {
+ color: $light-green;
+ span:hover {
+ background-color: $light-green;
+ border-color: $dark-green;
+ color: $dark-green;
+ text-shadow: none;
+ }
+ }
+ }
+}
diff --git a/public/sass/query.scss b/public/sass/query.scss
new file mode 100644
index 0000000..591f458
--- /dev/null
+++ b/public/sass/query.scss
@@ -0,0 +1,48 @@
+@charset "utf-8";
+
+@import "colors";
+
+/* code data - clickable */
+pre.query {
+ overflow-x: hidden;
+ background-color: $light-orange;
+ white-space: normal;
+ cursor: pointer;
+ display: block;
+ font: {
+ size: 11pt;
+ weight: bold;
+ }
+ padding: 2pt;
+ margin: 0;
+ margin-bottom: 5pt;
+ color: $darkest-orange;
+ text-shadow: $light-shadow;
+ border: {
+ color: $dark-orange;
+ style: solid;
+ width: 3px;
+ radius: 6px;
+ }
+ code {
+ white-space: pre;
+ display: block;
+ padding: 2px 5px;
+ margin: 0;
+ }
+ &.serial {
+ overflow-x: auto;
+ &:not(.active) {
+ overflow-x: hidden;
+ > span {
+ padding: 2pt;
+ }
+ code {
+ display: none;
+ }
+ }
+ &.active > span {
+ display: none;
+ }
+ }
+}
diff --git a/public/responsive.css b/public/sass/responsive.scss
similarity index 67%
rename from public/responsive.css
rename to public/sass/responsive.scss
index 65096d3..ee5b4fc 100644
--- a/public/responsive.css
+++ b/public/sass/responsive.scss
@@ -18,22 +18,24 @@
border-width: 0;
padding: 0;
font-size: 9pt;
-}
-
-#tutorial > iframe {
- border-radius: 0;
+ > iframe {
+ border-radius: 0;
+ }
}
#top {
padding: 0 0 0 0;
height: 80px;
-}
-
-#top h1 {
- margin: 5px;
- height: 30px;
- width: 80px;
- background-size: 98% auto;
+ h1 {
+ margin: 5px;
+ height: 30px;
+ width: 80px;
+ background-size: 98% auto;
+ }
+ /* Temporary */
+ form button {
+ display: none;
+ }
}
#sidebar {
@@ -41,8 +43,10 @@
}
#search {
- margin-left: 0;
- margin-right: 0;
+ margin {
+ left: 0;
+ right: 0;
+ }
}
form {
@@ -64,21 +68,14 @@
right: 7px;
}
-/* Temporary */
-#top form button {
- display: none;
-}
-
#search > ol > li {
font-size: 9pt;
-}
-
-#search > ol > li:not(.active) {
- padding: 4pt 0 5pt 0;
-}
-
-#search > ol > li.active {
- padding: 0 0 0 0;
+ &:not(.active) {
+ padding: 4pt 0 5pt 0;
+ }
+ &.active {
+ padding: 0 0 0 0;
+ }
}
code.query.serial {
diff --git a/public/sass/sidebar.scss b/public/sass/sidebar.scss
new file mode 100644
index 0000000..05aa942
--- /dev/null
+++ b/public/sass/sidebar.scss
@@ -0,0 +1,99 @@
+@import "colors";
+
+#sidebar {
+ color: #fff;
+ text-shadow: none;
+ transition: all .3s ease-in-out;
+ position: fixed;
+ z-index: 500;
+ height: 105%;
+ margin-top: -10px;
+ background-color: #496000;
+ width: 230px;
+ margin-left: -215px;
+ padding-top: 80px;
+ left: 0;
+ top: 0;
+ &.active {
+ box-shadow: 2px 2px 5px darken($dark-green, 15%);
+ margin-left: 0px;
+ left: 0;
+ top: 0;
+ }
+ > * {
+ opacity: 0;
+// TODO
+ transition: {
+ property: opacity;
+ duration: .3s;
+ }
+ }
+ &.active {
+ > * {
+ opacity: 1;
+ }
+ > i.fa-bars {
+ opacity: 0;
+ }
+ }
+ &:not(.active) > i.fa-bars {
+ opacity: 1;
+ cursor: pointer;
+ background-color: #496000;
+ position: fixed;
+ font-size: 16pt;
+ width: 16pt;
+ height: 17pt;
+ padding: 6pt;
+ bottom: 0;
+ left: 0;
+ border-top-right-radius: 5pt;
+ }
+ h2 {
+ font: {
+ size: 100%;
+ weight: bold;
+ }
+ text-align: center;
+ padding: 0;
+ margin: 0 0 5pt 0;
+ }
+ ul {
+ list-style-type: none;
+ margin: 0;
+ font-size: 10pt;
+ text-indent: 0;
+ padding: 0;
+ li {
+ padding: 4pt 10pt;
+ h3 {
+ font: {
+ weight: bold;
+ size: 100%;
+ }
+ padding: 0;
+ margin: 0;
+ }
+ &.active {
+ background-color: $light-green;
+ text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
+ h3 {
+ margin-bottom: 2pt;
+ padding-bottom: 2pt;
+ border-bottom: 1px solid black;
+ }
+ }
+ }
+ }
+ dl.info {
+ font-size: 9pt;
+ padding: 0 10pt;
+ > dt {
+ font-weight: bold;
+ float: left;
+ }
+ > dd {
+ text-align: right;
+ }
+ }
+}
diff --git a/public/sass/style.scss b/public/sass/style.scss
new file mode 100644
index 0000000..f42070a
--- /dev/null
+++ b/public/sass/style.scss
@@ -0,0 +1,289 @@
+@charset "utf-8";
+
+@import "colors";
+
+@mixin box-sizing-box() {
+ -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
+ -moz-box-sizing: border-box; /* Firefox, other Gecko */
+ box-sizing: border-box; /* Opera/IE 8+ */
+}
+
+@mixin no-appearance() {
+ -webkit-appearance:none;
+ -moz-appearance:none;
+ appearance:none;
+}
+
+body, html, select {
+ color: #666;
+ font-family: verdana, tahoma, arial;
+ margin: 0;
+}
+
+body, html, #searchbar button {
+ text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
+}
+
+a {
+ color: inherit;
+ text-decoration: none;
+}
+
+#top {
+ background-color: #7ba400;
+ @include box-sizing-box();
+ padding: 8px;
+ padding-bottom: 0;
+ position: relative;
+ font-size: 10pt;
+ color: white;
+ text-shadow: none;
+ button {
+ color: $light-green;
+ background-color: transparent;
+ border-width: 0;
+ font-weight: normal;
+ margin: 0;
+ padding: 0;
+ }
+ form {
+ display: block;
+ padding-left: 230px;
+ margin: 0px;
+ position: relative;
+ > div.select, > span.location {
+ line-height: 1.8em;
+ border: {
+ width: 0;
+ bottom-width: 3px;
+ style: solid;
+ color: transparent;
+ }
+ display: inline-block;
+ &:hover {
+ border-color: $dark-green;
+ }
+ }
+ > span.location {
+ padding: 0 2px;
+ cursor:pointer;
+ }
+ > div.select {
+ position: relative;
+ padding: 0;
+ margin: 0;
+ &:after {
+ content: "";
+ font-family: FontAwesome;
+ font-style: normal;
+ font-weight: normal;
+ right: 0px;
+ top: 0px;
+ width: 18px;
+ text-align: center;
+ position: absolute;
+ pointer-events: none;
+ background-color: $light-green;
+ }
+ > * {
+ cursor: pointer;
+ padding: 0pt;
+ line-height: 1.8em;
+ outline: none;
+ }
+ }
+ }
+}
+
+
+
+/*
+http://cssdeck.com/labs/styling-select-box-with-css3
+*/
+
+#ql-field {
+ margin: 0;
+ outline: none;
+ border: none;
+ display: inline-block;
+ position: relative;
+ color: white;
+ background-color: transparent;
+ -webkit-appearance: none;
+ border-width: 0;
+ border-radius: 0;
+ @include no-appearance();
+ &:checked {
+ outline: none;
+ }
+ > option {
+ padding: 0pt 2pt;
+ outline: none;
+ }
+}
+
+/* funny hack */
+#ql-field:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 white;
+}
+
+
+#searchbar {
+ position: relative;
+ @include box-sizing-box();
+ width: 100%;
+ padding-right: 60px;
+ button {
+ position: absolute;
+ font-weight: normal;
+ background-color: $pagination-bg;
+ padding: 0;
+ height: 100%;
+ top: 0;
+ right: 30px;
+ width: 30px;
+ border: {
+ top-width: 2px;
+ top-style: solid;
+ bottom-width: 2px;
+ bottom-style: solid;
+ color: white;
+ }
+ &:hover {
+ cursor:pointer;
+ color: white;
+ }
+ &:first-of-type {
+ border: {
+ left-width: 1px;
+ left-style: solid;
+ left-color: $pagination-border;
+ }
+ }
+ &:last-of-type {
+ @include box-sizing-box();
+ border: {
+ right-width: 2px;
+ right-style: solid;
+ top-right-radius: 12px;
+ bottom-right-radius: 12px;
+ }
+ }
+ &:hover {
+ background-color: $light-green;
+ border-color: $dark-green;
+ color: $dark-green;
+ text-shadow: none;
+ }
+ }
+ button + button {
+ right: 0;
+ }
+}
+
+#q-field {
+ border: 2px solid white;
+ padding: 3px;
+ font-size: 11pt;
+ width: 100%;
+ margin: 0;
+ @include box-sizing-box();
+ display: block;
+}
+
+#button-right {
+ display: inline-block;
+ float: right;
+ color: white;
+ line-height: 2em;
+ > button {
+ border-bottom: 3px solid transparent;
+ font-size: 120%;
+ cursor: pointer;
+ color: white;
+ line-height: 14pt;
+ padding: 0;
+ &:hover {
+ border-bottom-color: $dark-green;
+ }
+ }
+}
+/*
+#button-right {
+ position: absolute;
+ @include box-sizing-box();
+ right: 0px;
+ bottom: 0px;
+ height: 2em;
+ width: 6em;
+ > button {
+ cursor: pointer;
+ color: white;
+ right: 5px;
+ width: 2em;
+ bottom: 0;
+ &:hover {
+ border-bottom: 2px solid green;
+ }
+ &[name=alignment] {
+ }
+ &[name=tutorial] {
+ }
+ }
+}
+*/
+
+p.found {
+ font-size: 10pt;
+ padding: 0;
+ margin: 0;
+ text-align: right;
+}
+
+#total-results {
+ color: $total-results;
+ font-weight: bold;
+}
+
+/* KorAP header logo */
+h1 {
+ margin: 0;
+ margin-left:15px;
+ left: 0;
+ top: 0;
+ position: absolute;
+ width: 7.8em;
+ height: 2.6em;
+ z-index: 999;
+ background: {
+ repeat: no-repeat;
+ position: center center;
+ size: 65%;
+ image: url('/img/korap-logo-solo.svg');
+ }
+ span {
+ margin-left: -3000px;
+ }
+}
+
+#search {
+ margin-bottom: 44px;
+ &.match {
+ margin-top: 14pt;
+ }
+}
+
+main {
+ margin: {
+ left: 30px;
+ right: 14px;
+ }
+ &.embedded {
+ margin: {
+ left: 14px;
+ right: 14px;
+ }
+ }
+}
+
diff --git a/public/sass/table.scss b/public/sass/table.scss
new file mode 100644
index 0000000..48f1799
--- /dev/null
+++ b/public/sass/table.scss
@@ -0,0 +1,64 @@
+@charset "utf-8";
+
+ol > li:not(.active) .tokenInfo {
+ display: none;
+}
+
+.tokenInfo {
+ display: none;
+ background-color: #ffa500;
+ margin-right: 26px;
+ overflow: auto;
+ &.active {
+ display: block;
+ }
+ table {
+ font-size: 10pt;
+ padding: 3pt 10pt; /* wie in ol > li.active p */
+ /* All cells */
+ > tr {
+ > * {
+ padding: 1pt 6pt;
+ vertical-align: top;
+ }
+ > td {
+ text-align: center;
+ background-color: #f4eebb;
+ }
+ /* header */
+ > th{
+ &:not([rowspan]) {
+ color: white;
+ text-shadow: none;
+ }
+ &[rowspan]:first-child {
+ background-color: #f4eebb;
+ }
+ span.switchSort {
+ cursor: pointer;
+ position: absolute;
+ display: inline-block;
+ right: 0;
+ margin-right: -11pt;
+ width: 20pt;
+ }
+ }
+ &:first-child th {
+ text-align: center;
+ background-color: #ff8000;
+ /* first column header */
+ &:first-child {
+ position: relative;
+ padding-right: 20pt;
+ padding-left: 5pt;
+ }
+ /* second column header */
+ &:nth-child(2) {
+ text-align: left;
+ padding-left: 20pt;
+ padding-right: 5pt;
+ }
+ }
+ }
+ }
+}
diff --git a/public/sass/tutorial.scss b/public/sass/tutorial.scss
new file mode 100644
index 0000000..80e92a1
--- /dev/null
+++ b/public/sass/tutorial.scss
@@ -0,0 +1,49 @@
+@import "colors";
+
+#tutorial {
+ position: fixed;
+ display: block;
+ z-index: 9999;
+ background-color: $dark-green;
+ border-radius: 15px;
+ padding: 5px;
+ top: 2%;
+ bottom: 2%;
+ left: 5%;
+ right: 5%;
+ &:not(.active) {
+ display: none;
+ }
+ &.active {
+ display: block;
+ }
+ > i,
+ > a > i {
+ font-size: 20pt;
+ color: $dark-green;
+ position: absolute;
+ z-index: 100;
+ top: 10pt;
+ right: 20pt;
+ cursor: pointer;
+ }
+ > a > i {
+ right: 40pt;
+ }
+ iframe {
+ width: 100%;
+ min-height: 100%;
+ border: {
+ width: 0;
+ radius: 10px;
+ }
+ background: {
+ image: url('img/crab.svg');
+ size: 10%;
+ repeat: no-repeat;
+ position: center center;
+ color: white;
+ }
+ }
+}
+
diff --git a/public/style.css b/public/style.css
deleted file mode 100644
index 3964bbb..0000000
--- a/public/style.css
+++ /dev/null
@@ -1,329 +0,0 @@
-@charset "utf-8";
-
-body, html {
- color: #666;
- font-family: verdana, tahoma, arial;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.4);
- margin: 0;
-}
-
-a {
- color: inherit;
-}
-
-#top {
- background-color: #7ba400;
- -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
- -moz-box-sizing: border-box; /* Firefox, other Gecko */
- box-sizing: border-box; /* Opera/IE 8+ */
- padding: 0pt;
- padding-top: 5px;
- position: relative;
- height: 70px;
- padding-left: 30px;
-}
-
-#q-field {
- -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
- -moz-box-sizing: border-box; /* Firefox, other Gecko */
- box-sizing: border-box; /* Opera/IE 8+ */
-}
-
-#button-right {
- position: absolute;
- right: 15px;
- top: 15px;
-}
-
-input, button {
- border: 2px solid white;
- padding: 3px;
- font-size: 11pt;
-}
-
-form {
- margin-left: 235px;
- margin-top:0px
-}
-
-form input[type=search] {
- width: 50%;
-}
-
-a {
- text-decoration: none;
-}
-
-p.found {
- font-size: 10pt;
- padding: 0;
- margin: 0;
-}
-
-p.found {
- text-align: right;
-}
-
-#pagination {
- position: fixed;
- right: 20px;
- bottom: 10px;
- z-index: 800;
-}
-
-#pagination span {
- display: inline-block;
- background-color: #ddd;
- margin: 2pt;
- height: 1.5em;
- padding-left: .5em;
- padding-right: .5em;
- line-height: 1.5em;
- text-align: center;
- border-width: 2px;
- border-style: solid;
- border-color: #999;
- box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
-}
-
-#pagination a {
- text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
-}
-
-#pagination a[rel=self] span {
- border-color: #ffa500;
- background-color: #f4eebb;
- color: #ff8000;
-}
-
-#pagination a[href] {
- color: #7ba400;
-}
-
-#pagination a[href] span:hover {
- background-color: #7ba400;
- border-color: #496000;
- color: #496000;
- text-shadow: none;
-}
-
-#total-results {
- color: #c1002b;
-}
-
-code.query {
- background-color: #f4eebb;
- display: block;
- border-style: solid;
- border-color: #ffa500;
- font-size: 12pt;
- padding: 2pt;
- color: #ff8000;
- text-shadow: 1px 1px rgba(255, 255, 255, 0.9);
- border-width: 2px;
- margin: 0;
- margin-bottom: 5pt;
- cursor: pointer;
-}
-
-code.query.serial:not(.active) span {
- padding: 2pt;
-}
-
-code.query pre {
- display: block;
- padding: 2px 5px;
- margin: 0;
-}
-
-code.query.serial:not(.active) pre {
- display: none;
-}
-
-code.query.serial.active span {
- display: none;
-}
-
-#sidebar.active {
- margin-left: 0px;
- left: 0;
- top: 0;
-}
-
-#sidebar {
- color: #fff;
- text-shadow: none;
- transition: all .3s ease-in-out;
- position: fixed;
- z-index: 500;
- height: 100%;
- background-color: #496000;
- width: 260px;
- margin-left: -245px;
- left: 0;
- top: 0;
-}
-
-#sidebar > * {
- opacity: 0;
- transition-property: opacity;
- transition-duration: .3s;
-}
-
-#sidebar:not(.active) > i.fa-bars {
- opacity: 1;
- cursor: pointer;
- background-color: #496000;
- position: fixed;
- font-size: 16pt;
- width: 16pt;
- height: 17pt;
- padding: 6pt;
- bottom: 0;
- left: 0;
- border-top-right-radius: 5pt;
-}
-
-#sidebar.active > * {
- opacity: 1;
-}
-
-#sidebar.active > i.fa-bars {
- opacity: 0;
-}
-
-#sidebar h2 {
- font-size: 100%;
- font-weight: bold;
- text-align: center;
- padding: 0;
- margin: 0 0 5pt 0;
-}
-
-#sidebar ul {
- list-style-type: none;
- margin: 0;
- font-size: 10pt;
- text-indent: 0;
- padding: 0;
-}
-
-#sidebar ul li {
- padding: 4pt 10pt;
-}
-
-#sidebar ul li h3 {
- font-weight: bold;
- font-size: 100%;
- padding: 0;
- margin: 0;
-}
-
-#sidebar ul li.active h3 {
- margin-bottom: 2pt;
- padding-bottom: 2pt;
- border-bottom: 1px solid black;
-}
-
-#sidebar ul li.active {
- background-color: #7ba400;
- text-shadow: 1px 1px rgba(0, 0, 0, 0.4);
-}
-
-dl.info {
- font-size: 9pt;
- padding: 0 10pt;
-}
-
-dl.info dt {
- font-weight: bold;
- float: left;
-}
-
-dl.info dd {
- text-align: right;
-}
-
-#tutorial {
- position: fixed;
- display: block;
- z-index: 9999;
- background-color: #496000;
- border-radius: 15px;
- padding: 5px;
- top: 2%;
- bottom: 2%;
- left: 5%;
- right: 5%;
-}
-
-#tutorial:not(.active) {
- display: none;
-}
-
-#tutorial.active {
- display: block;
-}
-
-#tutorial > i,
-#tutorial > a > i {
- font-size: 20pt;
- color: #496000;
- position: absolute;
- z-index: 100;
- top: 10pt;
- right: 20pt;
- cursor: pointer;
-}
-
-#tutorial > a > i {
- right: 40pt;
-}
-
-#tutorial iframe {
- width: 100%;
- min-height: 100%;
- border-width: 0;
- border-radius: 10px;
- background-image: url('img/crab.svg');
- background-size: 10%;
- background-repeat: no-repeat;
- background-position: center center;
- background-color: white;
-}
-
-h1 {
- margin: 0;
- left: 0;
- top: 0;
- background-image: url('/img/korap-logo-solo.svg');
- position: absolute;
- width: 260px; /* like sidebars*/
- height: 68px; /* like #top */
- z-index: 999;
- background-repeat: no-repeat;
- background-position: center center;
- background-size: 65%;
-}
-
-h1 span {
- margin-left: -3000px;
-}
-
-#search {
- margin-bottom: 44px;
-}
-
-#search.match {
- margin-top: 14pt;
-}
-
-main {
- margin-left: 30px;
- margin-right: 14px;
-}
-
-main.embedded {
- margin-left: 14px;
- margin-right: 14px;
-}
\ No newline at end of file
diff --git a/public/table.css b/public/table.css
deleted file mode 100644
index 4a4ac27..0000000
--- a/public/table.css
+++ /dev/null
@@ -1,77 +0,0 @@
-@charset "utf-8";
-
-ol > li:not(.active) .tokenInfo {
- display: none;
-}
-
-.tokenInfo {
- display: none;
-}
-
-.tokenInfo.active {
- display: block;
-}
-
-.tokenInfo {
- background-color: #ffa500;
- margin-right: 26px;
- overflow: auto;
-}
-
-.tokenInfo table {
- font-size: 10pt;
- padding: 3pt 10pt; /* wie in ol > li.active p */
-}
-
-.tokenInfo table tr {
-}
-
-/* All cells */
-.tokenInfo table tr > * {
- padding: 1pt 6pt;
- vertical-align: top;
-}
-
-.tokenInfo table tr td {
- text-align: center;
- background-color: #f4eebb;
-}
-
-/* header */
-.tokenInfo table tr th:not([rowspan]) {
- color: white;
- text-shadow: none;
-}
-
-.tokenInfo table tr:first-child th {
- text-align: center;
- background-color: #ff8000;
-}
-
-/* first column header */
-.tokenInfo table tr:first-child th:first-child {
- position: relative;
- padding-right: 20pt;
- padding-left: 5pt;
-}
-
-/* second column header */
-.tokenInfo table tr:first-child th:nth-child(2) {
- text-align: left;
- padding-left: 20pt;
- padding-right: 5pt;
-}
-
-.tokenInfo th[rowspan]:first-child {
- background-color: #f4eebb;
-}
-
-.tokenInfo table th span.switchSort {
- cursor: pointer;
- position: absolute;
- display: inline-block;
- right: 0;
- margin-right: -11pt;
- width: 20pt;
-};
-
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 36db1fb..492acdf 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -3,7 +3,8 @@
%= include 'partial/header'
<body>
-% my $search_route = url_for;
+% my $location;
+% my $search_route;
% unless (current_route 'tutorial') {
<div id="tutorial">
% my $tut_page = url_for(session('tutorial') || 'tutorial');
@@ -16,6 +17,22 @@
<iframe src="about:blank"
data-src="<%= $tut_page->query([embedded => 1]) %>"></iframe>
</div>
+% if (current_route eq 'match') {
+% $search_route = url_for('search_corpus');
+% $location = 'in corpus <span class="location">' . stash('corpus_id') . '</span>';
+% }
+% else {
+% $search_route = url_for;
+% if (stash('doc_id')) {
+% $location = ' in document <span class="location">' . stash('corpus_id') . '/' . stash('doc_id') . '</span>';
+% }
+% elsif (stash('corpus_id')) {
+% $location = ' in corpus <span class="location">' . stash('corpus_id') . '</span>';
+% }
+% elsif (stash('collection_id')) {
+% $location = ' in collection <span class="location">' . stash('collection_id') . '</span>';
+% };
+% }
% }
% else {
% $search_route = url_for('index');
@@ -25,28 +42,35 @@
<a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
%= form_for $search_route => begin
-%= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
-<br />
-%= search_field 'q', id => 'q-field', autofocus => 'autofocus'
-<button type="submit" name="action" value="ok"><i class="fa fa-search"></i></button>
+ <div id="searchbar">
+%= search_field 'q', id => 'q-field', autofocus => 'autofocus', placeholder => 'Find ...'
+ <button type="submit"><i class="fa fa-search"></i></button>
% if (stash('test_port')) {
-<button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
+ <button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
% };
-% end
+ </div>
+ <% if ($location) { %><%== $location %><% } %>
+ with
+ <div class="select">
+ %= select_field ql => [[Poliqarp => 'poliqarp'], ['Cosmas II' => 'cosmas2']], id => 'ql-field'
+ </div>
+
<div id="button-right">
-% if (param('q')) {
-<button type="button" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
-% }
% unless (current_route 'tutorial') {
-<button type="button" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
+<button type="button" title="Tutorial" onclick="openTutorial()"><i class="fa fa-graduation-cap"></i></button>
% };
+% if (param('q')) {
+<button type="button" title="Alignment" onclick="$('#search > ol').toggleClass('left-aligned right-aligned'); $(this).children('i').toggleClass('fa-align-right fa-align-left')"><i class="fa fa-align-right"></i></button>
+% }
</div>
+% end
+
</div>
%= content 'sidebar' => begin
-<div id="sidebar" style="padding-top: 90px">
+<div id="sidebar">
%= include 'collections'
<i class="fa fa-bars"></i>
</div>
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 2ec5a44..d85eeee 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -2,6 +2,7 @@
<li data-corpus-id="<%= $match->{corpusID} %>"
data-doc-id="<%= $match->{docID} %>"
data-match-id="<%= $match->{ID} %>"
+ id="<%= $match->{ID} %>"
<% if (current_route eq 'match') { %>class="active"<% } %>
>
<div>
@@ -16,8 +17,10 @@
</p>
<ul class="action right">
% if (current_route ne 'match') {
- <li class="close" title="Close"><i class="fa fa-toggle-up"></i></li>
+ <li class="close" title="Close"><a href="#"><i class="fa fa-toggle-up"></a></i></li>
%# <li class="open" title="Open in new tab"><%= link_to 'match', { corpus_id => $match->{corpusID}, doc_id => $match->{docID}, match_id => $match->{ID} }, target => '_blank', begin %><i class="fa fa-external-link-square"></i><% end %></li>
+ <li class="open" title="Open in new tab"><a href="#<%= $match->{ID} %>" target="_blank"><i class="fa fa-external-link-square"></i></a></li>
+
% }
<li onclick="showTable(this)" title="Annotations"><i class="fa fa-info-circle"></i></li>
%# <li title="Tree Visualizations"><i class="fa fa-sitemap"></i></li>
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index 542ef30..850e77b 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -1,14 +1,7 @@
<head>
<title><%= title %></title>
-%#= asset 'korap.css'
-%= stylesheet '/style.css'
-%= stylesheet '/hint.css'
-%= stylesheet '/table.css'
-%= stylesheet '/kwic-4.0.css'
-%= stylesheet '/fontawesome/font-awesome.min.css'
-%= stylesheet '/responsive.css', media => '(orientation: portrait) and (max-device-width: 800px)'
-%= javascript '/jquery-2.0.0.min.js'
-%= javascript '/translateTable.js'
-%= javascript '/hint.js'
+%= asset 'korap.css'
+%= asset 'korap.js'
<meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width;initial-scale=1.0;" />
</head>
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index 3c44167..81c7519 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -81,8 +81,12 @@
closeTutorial();
};
-$("code.query.serial, #sidebar").on("click", function () {
+$("#sidebar").on("click", function () {
$(this).toggleClass('active');
});
+$("span.location").on("click", function () {
+ $("#sidebar").toggleClass('active');
+});
+
% end
diff --git a/templates/query.html.ep b/templates/query.html.ep
index c6c17d5..0eebd0c 100644
--- a/templates/query.html.ep
+++ b/templates/query.html.ep
@@ -1,11 +1,23 @@
% use JSON::XS;
% if (stash('search.query') && stash('test_port')) {
-% state $json = JSON::XS->new->allow_blessed->pretty;
-<code class="query serial<% if (param('action') eq 'inspect') { %> active<% } %>">
+% my $action;
+% if (param('action') && param('action') eq 'inspect') {
+% $action = ' active" style="cursor: default';
+% };
+% state $json = JSON::XS->new->allow_blessed->pretty->canonical(1);
+<pre class="query serial<%== $action // '' %>">
<span>JSON-LD Serialization for <%= param 'q' %> (<%= param 'ql' %>)</span>
- <pre>
+ <code>
<%= $json->encode(stash('search.query')) =%>
- </pre>
-</code>
+ </code>
+</pre>
+%= javascript begin
+hljs.initHighlightingOnLoad();
+% unless ($action) {
+$("pre.query.serial").on("click", function () {
+ $(this).toggleClass('active');
+});
+% };
+% end
% };
diff --git a/templates/query_info.html.ep b/templates/query_info.html.ep
index c9a5167..02710ce 100644
--- a/templates/query_info.html.ep
+++ b/templates/query_info.html.ep
@@ -1,3 +1,4 @@
% content main => begin
+<p class="found"> </p>
%= include 'query'
% end
diff --git a/templates/search.html.ep b/templates/search.html.ep
index 92aadce..0cc4a90 100644
--- a/templates/search.html.ep
+++ b/templates/search.html.ep
@@ -15,6 +15,7 @@
%= include 'query'
% };
+% unless (stash('search.totalResults') == 0) {
<div id="search">
<ol class="left-aligned">
%= search_hits begin
@@ -22,6 +23,7 @@
% end
</ol>
</div>
+% };
% end
% end
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index b7d280e..c2f7c8a 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -13,26 +13,33 @@
<li>How to use Poliqarp+ QL?</li>
<li>How to use Cosmas-II QL?</li>
<li>How to use CQL?</li>
+ <li>API</li>
+ <li>Search</li>
</ul>
-->
-<section id="intro">
-<h3>Introduction</h3>
-<p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and
-has some nice features - like embedded example queries - just click on the queries below:</p>
+<section name="intro">
+<h3>Example Queries</h3>
+%# <p>This is a Tutorial to KorAP. It may be maintained separately (as a Wiki?) and has some nice features - like embedded example queries - just click on the queries below:</p>
+<p><strong>Poliqarp</strong>: Find all occurrences of the lemma "baum" as annotated by the default foundry.</p>
%= korap_tut_query poliqarp => '[base=baum]'
+<p><strong>Cosmas-II</strong>: Find all occurrences of the words "der" and "Baum", in case they are in a maximum distance of 5 tokens. The order is not relevant.</p>
%= korap_tut_query cosmas2 => 'der /w5 Baum'
-%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=KOUS])'
+<p><strong>Poliqarp+</strong>: Find all nominal phrases as annotated using Connexor, that contain an adverb as annotated by OpenNLP.</p>
+%= korap_tut_query poliqarp => 'contains(<cnx/c=np>,[opennlp/p=ADV])'
+
+<p><strong>Poliqarp+</strong>: Find all sentences as annotated by the base foundry that start with a sequence of one token in present tense as annotated by Connexor and the lemma "der" annotated by the default foundry. Highlight both terms of the sequence.</p>
%= korap_tut_query poliqarp => 'startswith(<s>, {1:[cnx/m=PRES]}{2:[base=der]})'
-<p>And here is a short cheat sheet for foundries and layers</p>
+
+%# <p>And here is a short cheat sheet for foundries and layers</p>
</section>
-<section id="cheatsheet">
+<section name="cheatsheet">
<h3>Cheatsheet</h3>
<ul>
<li><strong>base</strong>
diff --git a/templates/tutorial/foundries.html.ep b/templates/tutorial/foundries.html.ep
new file mode 100644
index 0000000..8e2b5cc
--- /dev/null
+++ b/templates/tutorial/foundries.html.ep
@@ -0,0 +1 @@
+default foundries
diff --git a/templates/tutorial/poliqarp-plus.html.ep b/templates/tutorial/poliqarp-plus.html.ep
new file mode 100644
index 0000000..e310769
--- /dev/null
+++ b/templates/tutorial/poliqarp-plus.html.ep
@@ -0,0 +1,152 @@
+% content main => begin
+
+<h2>KorAP-Tutorial: Poliqarp+</h2>
+
+<section name="segments">
+<h3>Simple Segments</h3>
+
+<p>The atomic elements of Poliqarp queries are segments. Most of the time segments represent words and can be simply queried:</p>
+%# footnote: In the polish national corpus, Poliqarp can join multiple segments when identifying a single word.
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Sequences of simple segments are expressed using a space delimiter:</p>
+
+%= korap_tut_query poliqarp => 'der Baum'
+
+<p>Simple segments always refer to the surface form of a word. To search for surface forms without case sensitivity, you can use the <code>/i</code> flag.</p>
+
+%= korap_tut_query poliqarp => 'laufen/i'
+
+<p>The query above will find all occurrences of <code>laufen</code> irrespective of the capitalization of letters, so <code>wir laufen</code> will be find as well as <code>das Laufen</code> and even <code>"GEH LAUFEN!"</code>.
+</section>
+
+<section name="regexp">
+ <h3>Regular Expressions</h3>
+
+<p>Segments can also be queried using <%= link_to 'tut-regex', 'regular expressions' %> - by surrounding the segment with double quotes.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"'
+
+<p>Regular expression segments will always match the whole segment, meaning the above query will find words starting with <code>l</code> and ending with <code>n</code>. To support subqueries, you can use the <code>/x</code> flag.
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/x', cutoff => 1
+
+<p>The <code>/x</code> will search for all segments that contain a sequence of characters the regular expression matches. That means the above query is equivalent to:</p>
+
+%= korap_tut_query poliqarp => '.*?"l(au|ie)fen.*?"', cutoff => 1
+
+<p>The <code>/x</code> flag can also be used in conjuntion with strict expressions to search for substrings:</p>
+
+%= korap_tut_query poliqarp => 'trenn/xi', cutoff => 1
+
+<p>The above query will find all occurrences of segments including the string <code>trenn</code> case insensitive, like "Trennung", "unzertrennlich", or "Wettrennen".</p>
+
+<blockquote>
+ <p>These kinds of queries are extremely slow!</p>
+</blockquote>
+
+<p>You can again apply the <code>/i</code> flag to search case insensitive.</p>
+
+%= korap_tut_query poliqarp => '"l(au|ie)fen"/xi', cutoff => 1
+
+</section>
+
+<section name="complex">
+ <h3>Complex Segments</h3>
+
+<p>Complex segments are expressed in square brackets and contain additional information on the resource of the term under scrutiny by prividing key/value pairs, separated by a <code>=</code> symbol.</p>
+
+<p>The KorAP implementation of Poliqarp provides three special segment keys: <code>orth</code> for surface forms, <code>base</code> for lemmata, and <code>pos</code> for Part-of-Speech. The following complex query finds all surface forms of <code>Baum</code>.</p>
+
+%# There are more special keys in Poliqarp, but KorAP doesn't provide them.
+
+%= korap_tut_query poliqarp => '[orth=Baum]'
+
+<p>The query is thus equivalent to:</p>
+
+%= korap_tut_query poliqarp => 'Baum'
+
+<p>Complex segments expect simple expressions as a values, meaning that the following expression is valid as well:</p>
+
+%= korap_tut_query poliqarp => '[orth="l(au|ie)fen"/xi]', cutoff => 1
+
+<p>Another special key is <code>base</code>, refering to the lemma annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all occurrences of segments annotated as the lemma <code>Baum</code> by the default foundry.</p>
+
+%= korap_tut_query poliqarp => '[base=Baum]'
+
+<p>The third special key is <code>pos</code>, refering to the part-of-speech annotation of the <%= link_to 'tut-foundries', 'default foundry' %>. The following query finds all attributive adjectives:</p>
+
+%= korap_tut_query poliqarp => '[pos=ADJA]'
+
+<p>Complex segments requesting further token annotations can have keys following the <code>foundry/layer</code> notation. For example to find all occurrences of <span style="color: red">plural words in the mate foundry, you can search using the following query:</span></p>
+
+%= korap_tut_query poliqarp => '[mate/m=number:pl]'
+
+</section>
+
+<section name="spans">
+<h3>Span Segments</h3>
+
+%= korap_tut_query poliqarp => '<s>'
+
+</section>
+
+<section name="paradigmatic-operators">
+<h3>Paradigmatic Operators</h3>
+%= korap_tut_query poliqarp => '[orth=bäume & base=bäumen]'
+
+%= korap_tut_query poliqarp => '[orth=bäume & base!=bäumen]'
+
+<p>The following query is equivalent</p>
+
+%= korap_tut_query poliqarp => '[orth=bäume & !base=bäumen]'
+
+%= korap_tut_query poliqarp => '[base=laufen | base=gehen]'
+
+%= korap_tut_query poliqarp => '[(base=laufen | base=gehen) & tt/pos=VVFIN]'
+
+%= korap_tut_query poliqarp => '[]'
+
+</section>
+
+<section name="syntagmatic-operators">
+<h3>Syntagmatic Operators</h3>
+
+<h4>Sequences</h4>
+
+<h4>Repetition</h4>
+%= korap_tut_query poliqarp => '[base=der][][base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][]{2}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,3}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{2,}[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][]{,3}[base=Baum]'
+
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]?[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]*[base=Baum]'
+%= korap_tut_query poliqarp => '[base=der][tt/pos=ADJA]+[base=Baum]'
+
+<h4>Alternation</h4>
+
+<h4>Position Operators</h4>
+
+contains()
+startsWith()
+endsWith()
+
+<blockquote>
+ The KorAP implementation of Poliqarp also support the postfix <code>within</code> operator, that works similar to the <code>contains()</code>, but is not nestable.
+</blockquote>
+
+<h4>Class Operators</h4>
+
+{}
+focus()
+
+
+
+
+</section>
+
+% end
diff --git a/templates/tutorial/regular-expressions.html.ep b/templates/tutorial/regular-expressions.html.ep
new file mode 100644
index 0000000..1cce875
--- /dev/null
+++ b/templates/tutorial/regular-expressions.html.ep
@@ -0,0 +1,10 @@
+% contain main => begin
+<h2>KorAP-Tutorial: Regular Expressions</h2>
+
+The support for regular expressions in KorAP may be backend dependend. Below you can find the description for the respective backends.</p>
+
+<section name="lucene">
+<h3>Lucene</h3>
+</section>
+
+% end
