Optimized embedded tutorial for mobile
Change-Id: I0b345c75cbd68bd1f1205a313ddbb7ecd94b58c3
diff --git a/dev/scss/header/header.scss b/dev/scss/header/header.scss
index 98201e3..e7d14ac 100644
--- a/dev/scss/header/header.scss
+++ b/dev/scss/header/header.scss
@@ -69,6 +69,9 @@
margin: 0px;
position: relative;
}
+ .clear {
+ clear: both;
+ }
.button {
&.right {
diff --git a/dev/scss/media.scss b/dev/scss/media.scss
index ae6dad8..15888ae 100644
--- a/dev/scss/media.scss
+++ b/dev/scss/media.scss
@@ -114,6 +114,11 @@
width: 100%;
}
+ body.embedded aside > div {
+ top: 0;
+ transform: translateY(0);
+ }
+
aside {
&:not(:focus):not(.active) {
margin-left: -1 * $logo-left-distance;
@@ -127,7 +132,8 @@
font-size: 9pt;
line-height: 1em;
}
- &.active ~ main div.intro {
+ &.active ~ main div.intro,
+ &.active ~ main.tutorial {
margin-left: $standard-margin !important;
}
@@ -161,9 +167,15 @@
iframe {
border-radius: 0;
}
+ > ul.action.right {
+ height: 1.5em;
+ right: 20px;
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
}
main.tutorial {
- margin-right: 30px;
+ margin-right: 20px;
}
}
\ No newline at end of file
diff --git a/lib/Kalamar/Plugin/KalamarHelpers.pm b/lib/Kalamar/Plugin/KalamarHelpers.pm
index a091a28..855a92b 100644
--- a/lib/Kalamar/Plugin/KalamarHelpers.pm
+++ b/lib/Kalamar/Plugin/KalamarHelpers.pm
@@ -149,6 +149,7 @@
# Canonicalize (for empty scopes)
$url->path->canonicalize;
+ $url->fragment('tutorial-top');
};
my @classes;
diff --git a/templates/de/doc/api/koralquery.html.ep b/templates/de/doc/api/koralquery.html.ep
index 0df876a..2348cf9 100644
--- a/templates/de/doc/api/koralquery.html.ep
+++ b/templates/de/doc/api/koralquery.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: KoralQuery';
-<h2>KoralQuery</h2>
+<h2 id="tutorial-top">KoralQuery</h2>
<p><strong>Hauptentwickler:</strong> Nils Diewald, Joachim Bingel</p>
diff --git a/templates/de/doc/data/annotation.html.ep b/templates/de/doc/data/annotation.html.ep
index 4fcb2a1..4a7c2d7 100644
--- a/templates/de/doc/data/annotation.html.ep
+++ b/templates/de/doc/data/annotation.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Annotationen';
-<h2>Annotationen</h2>
+<h2 id="tutorial-top">Annotationen</h2>
<p>KorAP bietet Zugriff auf mehrere Ebenen von Annotationen, die aus mehreren Ressourcen stammen, so genannten <em>foundries</em>.</p>
diff --git a/templates/de/doc/korap/kalamar.html.ep b/templates/de/doc/korap/kalamar.html.ep
index b43d522..93f34c5 100644
--- a/templates/de/doc/korap/kalamar.html.ep
+++ b/templates/de/doc/korap/kalamar.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Kalamar';
-<h2>Kalamar</h2>
+<h2 id="tutorial-top">Kalamar</h2>
%= korap_overview 'kalamar'
diff --git a/templates/de/doc/korap/karang.html.ep b/templates/de/doc/korap/karang.html.ep
index 84dc66d..345b417 100644
--- a/templates/de/doc/korap/karang.html.ep
+++ b/templates/de/doc/korap/karang.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Karang';
-<h2>Karang</h2>
+<h2 id="tutorial-top">Karang</h2>
%= korap_overview 'karang'
diff --git a/templates/de/doc/korap/koral.html.ep b/templates/de/doc/korap/koral.html.ep
index ea90c03..5273106 100644
--- a/templates/de/doc/korap/koral.html.ep
+++ b/templates/de/doc/korap/koral.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Koral';
-<h2>Koral</h2>
+<h2 id="tutorial-top">Koral</h2>
%= korap_overview 'koral'
diff --git a/templates/de/doc/korap/krill.html.ep b/templates/de/doc/korap/krill.html.ep
index 39b6aec..ca497b4 100644
--- a/templates/de/doc/korap/krill.html.ep
+++ b/templates/de/doc/korap/krill.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Krill';
-<h2>Krill</h2>
+<h2 id="tutorial-top">Krill</h2>
%= korap_overview 'krill'
diff --git a/templates/de/doc/korap/kustvakt.html.ep b/templates/de/doc/korap/kustvakt.html.ep
index 8cc2d81..ab60f33 100644
--- a/templates/de/doc/korap/kustvakt.html.ep
+++ b/templates/de/doc/korap/kustvakt.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Kustvakt';
-<h2>Kustvakt</h2>
+<h2 id="tutorial-top">Kustvakt</h2>
%= korap_overview 'kustvakt'
diff --git a/templates/de/doc/ql/poliqarp-plus.html.ep b/templates/de/doc/ql/poliqarp-plus.html.ep
index 827ae01..757c407 100644
--- a/templates/de/doc/ql/poliqarp-plus.html.ep
+++ b/templates/de/doc/ql/poliqarp-plus.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Poliqarp+';
-<h2>Poliqarp+</h2>
+<h2 id="tutorial-top">Poliqarp+</h2>
<p>Das folgende Tutorial präsentiert alle Features, die unsere Version der Poliqarp Abfragesprache zur Verfügung stellt und enthält zusätzlich einige spezifische KorAP Erweiterungen.</p>
diff --git a/templates/doc/api.html.ep b/templates/doc/api.html.ep
index ea9c594..3b8842b 100644
--- a/templates/doc/api.html.ep
+++ b/templates/doc/api.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Application Programming Interface';
-<h2>Application Programming Interface</h2>
+<h2 id="tutorial-top">Application Programming Interface</h2>
<p>Internally the communication between the KorAP components is done using the <%= doc_link_to('KoralQuery', 'api', 'koralquery') %> protocol. The following endpoints make use of this protocol or establish additional mechanisms. All described endpoints are (more or lest) REST-ful web APIs.</p>
diff --git a/templates/doc/api/koralquery.html.ep b/templates/doc/api/koralquery.html.ep
index d29bc94..9d7640f 100644
--- a/templates/doc/api/koralquery.html.ep
+++ b/templates/doc/api/koralquery.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: KoralQuery';
-<h2>KoralQuery</h2>
+<h2 id="tutorial-top">KoralQuery</h2>
<p><strong>Main developer:</strong> Nils Diewald, Joachim Bingel</p>
diff --git a/templates/doc/api/match.html.ep b/templates/doc/api/match.html.ep
index 5de2210..5cd21b4 100644
--- a/templates/doc/api/match.html.ep
+++ b/templates/doc/api/match.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Match API';
-<h2>Match API</h2>
+<h2 id="tutorial-top">Match API</h2>
%= doc_uc
diff --git a/templates/doc/api/search.html.ep b/templates/doc/api/search.html.ep
index 5fc864d..6a83ce6 100644
--- a/templates/doc/api/search.html.ep
+++ b/templates/doc/api/search.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Search API';
-<h2>Search API</h2>
+<h2 id="tutorial-top">Search API</h2>
%= doc_uc
diff --git a/templates/doc/api/user.html.ep b/templates/doc/api/user.html.ep
index 12fa82e..0967a6d 100644
--- a/templates/doc/api/user.html.ep
+++ b/templates/doc/api/user.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: User API';
-<h2>User API</h2>
+<h2 id="tutorial-top">User API</h2>
%= doc_uc
diff --git a/templates/doc/contact.html.ep b/templates/doc/contact.html.ep
index 0874acc..411a8f8 100644
--- a/templates/doc/contact.html.ep
+++ b/templates/doc/contact.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Contact us!';
-<h2>KorAP: Contact us</h2>
+<h2 id="tutorial-top">KorAP: Contact us</h2>
<p>You can send us an email at <code>korap</code> at the domain <code>ids-mannheim.de</code>!</p>
diff --git a/templates/doc/data.html.ep b/templates/doc/data.html.ep
index 1892a3a..b589435 100644
--- a/templates/doc/data.html.ep
+++ b/templates/doc/data.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Data';
-<h2>Data</h2>
+<h2 id="tutorial-top">Data</h2>
<p>Under Construction</p>
diff --git a/templates/doc/data/annotation.html.ep b/templates/doc/data/annotation.html.ep
index 032375c..dbbd534 100644
--- a/templates/doc/data/annotation.html.ep
+++ b/templates/doc/data/annotation.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Annotations';
-<h2>Annotations</h2>
+<h2 id="tutorial-top">Annotations</h2>
<p>KorAP provides access to multiple levels of annotations originating from multiple resources, so called <em>foundries</em>.</p>
diff --git a/templates/doc/data/corpus.html.ep b/templates/doc/data/corpus.html.ep
index 17dbda0..973b728 100644
--- a/templates/doc/data/corpus.html.ep
+++ b/templates/doc/data/corpus.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Corpora';
-<h2>Corpora</h2>
+<h2 id="tutorial-top">Corpora</h2>
%= doc_uc
diff --git a/templates/doc/faq.html.ep b/templates/doc/faq.html.ep
index 72b9f22..e03ed3d 100644
--- a/templates/doc/faq.html.ep
+++ b/templates/doc/faq.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Frequently Asked Questions';
-<h2>Frequently Asked Questions</h2>
+<h2 id="tutorial-top">Frequently Asked Questions</h2>
<p>This document puts together the most frequent questions and issues that we have encountered so far. Please feel welcome to ask further questions via <%= mail_to_chiffre join('@', 'korap', 'ids-mannheim.de'), subject => 'Question via Kalamar', begin %>e-mail<% end %>.
diff --git a/templates/doc/korap.html.ep b/templates/doc/korap.html.ep
index 2f2a186..3219803 100644
--- a/templates/doc/korap.html.ep
+++ b/templates/doc/korap.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Overview';
-<h2>KorAP: An Overview</h2>
+<h2 id="tutorial-top">KorAP: An Overview</h2>
%= korap_overview 'korap'
diff --git a/templates/doc/korap/kalamar.html.ep b/templates/doc/korap/kalamar.html.ep
index 7c83214..f1f6256 100644
--- a/templates/doc/korap/kalamar.html.ep
+++ b/templates/doc/korap/kalamar.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Kalamar';
-<h2>Kalamar</h2>
+<h2 id="tutorial-top">Kalamar</h2>
%= korap_overview 'kalamar'
diff --git a/templates/doc/korap/karang.html.ep b/templates/doc/korap/karang.html.ep
index 67772a6..5c60d48 100644
--- a/templates/doc/korap/karang.html.ep
+++ b/templates/doc/korap/karang.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Karang';
-<h2>Karang</h2>
+<h2 id="tutorial-top">Karang</h2>
%= korap_overview 'karang'
diff --git a/templates/doc/korap/koral.html.ep b/templates/doc/korap/koral.html.ep
index d97e458..54539df 100644
--- a/templates/doc/korap/koral.html.ep
+++ b/templates/doc/korap/koral.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Koral';
-<h2>Koral</h2>
+<h2 id="tutorial-top">Koral</h2>
%= korap_overview 'koral'
diff --git a/templates/doc/korap/krill.html.ep b/templates/doc/korap/krill.html.ep
index 9e10159..c6898fc 100644
--- a/templates/doc/korap/krill.html.ep
+++ b/templates/doc/korap/krill.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Krill';
-<h2>Krill</h2>
+<h2 id="tutorial-top">Krill</h2>
%= korap_overview 'krill'
diff --git a/templates/doc/korap/kustvakt.html.ep b/templates/doc/korap/kustvakt.html.ep
index 5b084ae..a6be167 100644
--- a/templates/doc/korap/kustvakt.html.ep
+++ b/templates/doc/korap/kustvakt.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Kustvakt';
-<h2>Kustvakt</h2>
+<h2 id="tutorial-top">Kustvakt</h2>
%= korap_overview 'kustvakt'
diff --git a/templates/doc/ql.html.ep b/templates/doc/ql.html.ep
index a3ba1f9..ad1b176 100644
--- a/templates/doc/ql.html.ep
+++ b/templates/doc/ql.html.ep
@@ -6,7 +6,7 @@
%# This should be stored when clicking on a specific query
%# but the remembered section contains the id - not the query
-<h2>Query Languages</h2>
+<h2 id="tutorial-top">Query Languages</h2>
<section id="intro">
<h3>Frontend Features</h3>
diff --git a/templates/doc/ql/annis.html.ep b/templates/doc/ql/annis.html.ep
index f0198ef..376d450 100644
--- a/templates/doc/ql/annis.html.ep
+++ b/templates/doc/ql/annis.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Annis QL';
-<h2>Annis QL</h2>
+<h2 id="tutorial-top">Annis QL</h2>
%= doc_uc
diff --git a/templates/doc/ql/cosmas-2.html.ep b/templates/doc/ql/cosmas-2.html.ep
index 7ec7135..d358d21 100644
--- a/templates/doc/ql/cosmas-2.html.ep
+++ b/templates/doc/ql/cosmas-2.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Cosmas II';
-<h2>Cosmas II</h2>
+<h2 id="tutorial-top">Cosmas II</h2>
%= doc_uc
diff --git a/templates/doc/ql/cql.html.ep b/templates/doc/ql/cql.html.ep
index 4a14ef1..56c33cb 100644
--- a/templates/doc/ql/cql.html.ep
+++ b/templates/doc/ql/cql.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: CQL';
-<h2>CQL</h2>
+<h2 id="tutorial-top">CQL</h2>
%= doc_uc
diff --git a/templates/doc/ql/poliqarp-plus.html.ep b/templates/doc/ql/poliqarp-plus.html.ep
index 6aef4de..884f21a 100644
--- a/templates/doc/ql/poliqarp-plus.html.ep
+++ b/templates/doc/ql/poliqarp-plus.html.ep
@@ -1,6 +1,6 @@
% layout 'main', title => 'KorAP: Poliqarp+';
-<h2>Poliqarp+</h2>
+<h2 id="tutorial-top">Poliqarp+</h2>
<p>The following tutorial introduces all features provided by our version of the Poliqarp Query Language and some KorAP specific extensions.</p>
diff --git a/templates/doc/ql/regexp.html.ep b/templates/doc/ql/regexp.html.ep
index efbd41d..c92b158 100644
--- a/templates/doc/ql/regexp.html.ep
+++ b/templates/doc/ql/regexp.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Regular Expressions';
-<h2>Regular Expressions</h2>
+<h2 id="tutorial-top">Regular Expressions</h2>
%= doc_uc
diff --git a/templates/doc/ql/wildcards.html.ep b/templates/doc/ql/wildcards.html.ep
index 4ab29e2..3b4d80a 100644
--- a/templates/doc/ql/wildcards.html.ep
+++ b/templates/doc/ql/wildcards.html.ep
@@ -1,5 +1,5 @@
% layout 'main', title => 'KorAP: Wildcards';
-<h2>Wildcards</h2>
+<h2 id="tutorial-top">Wildcards</h2>
%= doc_uc
diff --git a/templates/partial/header.html.ep b/templates/partial/header.html.ep
index a81aebc..7deae57 100644
--- a/templates/partial/header.html.ep
+++ b/templates/partial/header.html.ep
@@ -33,5 +33,6 @@
<label for="q-cutoff-field" title="<%= loc('glimpse_desc') %>"><span></span><%= loc('glimpse') %></label>
<%= link_to 'doc_start', title => loc('tutorial'), class => "tutorial", id => "view-tutorial", tabindex => '-1', begin %><span><%= loc 'tutorial' %></span><% end %>
</div>
+ <div class="clear"></div>
</form>
</header>