A bit of responsiveness
diff --git a/public/responsive.css b/public/responsive.css
new file mode 100644
index 0000000..80ba826
--- /dev/null
+++ b/public/responsive.css
@@ -0,0 +1,75 @@
+/*
+<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
+@media tv and (min-width: 700px) and (orientation: landscape) { ... }
+*/
+
+html, body {
+ font-size: 10pt;
+ margin: 0;
+ padding: 0;
+}
+
+#tutorial {
+ border-radius: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ top: 0;
+ border-width: 0;
+ padding: 0;
+}
+
+#tutorial > iframe {
+ border-radius: 0;
+}
+
+#top {
+ padding: 0 0 0 0;
+ height: 80px;
+}
+
+#top h1 {
+ margin: 5px;
+ height: 30px;
+ width: 80px;
+ background-size: 98% auto;
+}
+
+#sidebar {
+ margin-left: -260px;
+}
+
+#search {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+form {
+ margin-left: 0px;
+}
+
+#ql-field {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ margin-left: 100px;
+}
+
+#q-field {
+ width: 100%;
+}
+
+#button-right {
+ top: 7px;
+ right: 7px;
+}
+
+/* Temporary */
+#top form button {
+ display: none;
+}
+
+#pagination {
+ width: 100%;
+ right: auto;
+ margin: 0 auto;
+}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index bbb41f3..31cbf45 100644
--- a/public/style.css
+++ b/public/style.css
@@ -19,6 +19,12 @@
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;
@@ -278,3 +284,7 @@
h1 span {
margin-left: -3000px;
}
+
+main {
+ padding: 20px;
+}
\ No newline at end of file
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 5d18d45..a483390 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -7,6 +7,7 @@
%= stylesheet '/table.css'
%= stylesheet '/kwic-4.0.css'
%= stylesheet '/fontawesome/font-awesome.min.css'
+%= stylesheet '/responsive.css', media => '(max-width: 640px)'
%= javascript '/jquery-2.0.0.min.js'
%= javascript '/translateTable.js'
%= javascript '/hint.js'
diff --git a/templates/tutorial.html.ep b/templates/tutorial.html.ep
index 459572c..9caa15b 100644
--- a/templates/tutorial.html.ep
+++ b/templates/tutorial.html.ep
@@ -1,10 +1,13 @@
-<div style="padding: 20pt">
+<main>
-<p>Links to Blog, FAQ, About, Contact ...</p>
+%# Store the id of an active section in the session, so the system is able to directly scroll to the relevant section
+%# This should be stored when clicking on a specific query
+%# but the remembered section contains the id - not the query
<h2>KorAP-Tutorial</h2>
<!--
+<p>Links to Blog, FAQ, About, Contact ...</p>
<ul>
<li>Introduction to KorAP</li>
<li>How to use Poliqarp+ QL?</li>
@@ -13,6 +16,8 @@
</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>
@@ -21,53 +26,57 @@
%= korap_tut_query cosmas2 => 'der /w5 Baum'
<p>And here is a short cheat sheet for foundries and layers</p>
+</section>
-<ul>
- <li><strong>base</strong>
- <ul>
- <li>Supports two types of spans: <strong><s></strong> for sentences and <strong><p></strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
- </ul>
- </li>
- <li><strong>cnx</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leit" and "fähigkeit" - not by the lemma "leitfähigkeit"</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
- <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("PRES" ...), mode ("IND&qut;), number ("PL" ...) etc.</li>
- <li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case ("np")</li>
- </ul>
- </li>
- <li><strong>corenlp</strong>
- <ul>
- <li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like "I-PER", "I-ORG" etc. </li>
- <li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
- </ul>
- </li>
- <li><strong>tt</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. "Normalbedingung")</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- </ul>
- </li>
- <li><strong>mate</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. "buchstabenbezeichnung")</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("tense:pres" ...), mode ("mood:ind&qut;), number ("number:pl" ...), gender ("gender:masc" etc.</li>
- </ul>
- </li>
- <li><strong>opennlp</strong>
- <ul>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- </ul>
- </li>
- <li><strong>xip</strong>
- <ul>
- <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leiten" and "Fähigkeit" - and by a merged and pretty useless "leitenfähigkeit" (This is going to change)</li>
- <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
- <li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case ("NP", "NPA", "NOUN", "VERB", "PREP", "AP" ...)</li>
- </ul>
- </li>
-</ul>
+<section id="cheatsheet">
+ <h3>Cheatsheet</h3>
+ <ul>
+ <li><strong>base</strong>
+ <ul>
+ <li>Supports two types of spans: <strong><s></strong> for sentences and <strong><p></strong> for paragraphs - this will likely change in the next index version. These spans lack prefix information!</li>
+ </ul>
+ </li>
+ <li><strong>cnx</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leit" and "fähigkeit" - not by the lemma "leitfähigkeit"</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>syn</strong> (Token:Syntactical information): Includes token based information like @PREMOD, @NH, @MAIN ...</li>
+ <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("PRES" ...), mode ("IND&qut;), number ("PL" ...) etc.</li>
+ <li><strong>c</strong> (Span:Phrases): Only nominal phrases are available and all nominal phrases are written in lower case ("np")</li>
+ </ul>
+ </li>
+ <li><strong>corenlp</strong>
+ <ul>
+ <li><strong>ne_hgc_175m_600</strong> (Token:Named Entity): Contains named entities like "I-PER", "I-ORG" etc. </li>
+ <li><strong>ne_dewac_175_175m_600</strong> (Token:Named Entity): see above</li>
+ </ul>
+ </li>
+ <li><strong>tt</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita stay intact (e.g. "Normalbedingung")</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ </ul>
+ </li>
+ <li><strong>mate</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All lemmas are written in lower case. Composita stay intact (e.g. "buchstabenbezeichnung")</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>m</strong> (Token:Morphosyntactical information): Includes information about tense ("tense:pres" ...), mode ("mood:ind&qut;), number ("number:pl" ...), gender ("gender:masc" etc.</li>
+ </ul>
+ </li>
+ <li><strong>opennlp</strong>
+ <ul>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ </ul>
+ </li>
+ <li><strong>xip</strong>
+ <ul>
+ <li><strong>l</strong> (Token:Lemma): All non-noun lemmas are written in lower case, nouns are written upper case. Composita are split, e.g. the token "Leitfähigkeit" is matched by the lemmas "leiten" and "Fähigkeit" - and by a merged and pretty useless "leitenfähigkeit" (This is going to change)</li>
+ <li><strong>p</strong> (Token:Part of Speech): All pos infos are written in capital letters and are based on STTS</li>
+ <li><strong>c</strong> (Span:Phrases): Some phrases to create sentences, all upper case ("NP", "NPA", "NOUN", "VERB", "PREP", "AP" ...)</li>
+ </ul>
+ </li>
+ </ul>
+</section>
-</div>
+</main>