Minor responsive update
diff --git a/public/hint.css b/public/hint.css
index 6b1bc50..34ff9d9 100644
--- a/public/hint.css
+++ b/public/hint.css
@@ -2,6 +2,8 @@
position: absolute;
height: 0px;
margin-top: 1px;
+ white-space:nowrap;
+ overflow: show;
}
#searchMirror > span {
diff --git a/public/hint.js b/public/hint.js
index b79dcd5..a6beda6 100644
--- a/public/hint.js
+++ b/public/hint.js
@@ -224,6 +224,7 @@
// Initialize style
init();
+ window.onresize = init;
search.addEventListener("keyup", changed, false);
search.addEventListener("keydown", select, false);
qlField.addEventListener('change', qlSelect, false);
diff --git a/public/kwic-4.0.css b/public/kwic-4.0.css
index 84a32aa..bad538c 100644
--- a/public/kwic-4.0.css
+++ b/public/kwic-4.0.css
@@ -34,7 +34,7 @@
overflow: hidden;
white-space: no-wrap;
cursor: pointer;
- padding: 10px 0;
+ padding: 5pt 0 6pt 0;
text-indent: 0;
}
diff --git a/public/responsive.css b/public/responsive.css
index 80ba826..65096d3 100644
--- a/public/responsive.css
+++ b/public/responsive.css
@@ -17,6 +17,7 @@
top: 0;
border-width: 0;
padding: 0;
+ font-size: 9pt;
}
#tutorial > iframe {
@@ -68,8 +69,18 @@
display: none;
}
-#pagination {
- width: 100%;
- right: auto;
- margin: 0 auto;
+#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;
+}
+
+code.query.serial {
+ font-size: 10pt;
}
\ No newline at end of file
diff --git a/public/style.css b/public/style.css
index 31cbf45..925dae2 100644
--- a/public/style.css
+++ b/public/style.css
@@ -166,10 +166,27 @@
transition-duration: .3s;
}
+#sidebar:not(.active) > i.fa-bars {
+ opacity: 1;
+ background-color: #496000;
+ position: fixed;
+ font-size: 12pt;
+ width: 11pt;
+ height: 12pt;
+ padding: 4pt;
+ 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;
@@ -230,14 +247,23 @@
#tutorial {
position: fixed;
+ display: block;
z-index: 9999;
+ background-color: #496000;
+ border-radius: 15px;
+ padding: 5px;
top: 2%;
bottom: 2%;
left: 5%;
right: 5%;
- background-color: #496000;
- border-radius: 15px;
- padding: 5px;
+}
+
+#tutorial:not(.active) {
+ display: none;
+}
+
+#tutorial.active {
+ display: block;
}
#tutorial > i,
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index a483390..8dfb04c 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -15,18 +15,24 @@
</head>
<body>
+% my $search_route = url_for;
% unless (current_route 'tutorial') {
-<div id="tutorial" style="display: none">
+<div id="tutorial">
% my $tut_page = url_for(session('tutorial') || 'tutorial');
<a href="<%= $tut_page %>" target="_blank"><i title="Open in new tab" class="fa fa-external-link-square"></i></a>
<i onclick="closeTutorial()" title="close" class="fa fa-toggle-up"></i>
<iframe src="about:blank" data-src="<%= $tut_page->query([snippet => 1]) %>"></iframe>
</div>
+% }
+% else {
+% $search_route = url_for('index');
% };
<div id="top">
<a href="<%= url_for 'index' %>"><h1><span>KorAP- Korpusanalyseplattform der nächsten Generation</span></h1></a>
-%= form_for url_for() => begin
+
+
+%= 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'
@@ -108,6 +114,7 @@
<div id="sidebar" style="padding-top: 90px">
%= include 'collections'
+<i class="fa fa-bars"></i>
</div>
<div id="search">
@@ -155,14 +162,14 @@
function openTutorial (o) {
var tut = $("#tutorial");
- tut.slideDown();
+ tut.addClass("active");
var iframe = tut.children("iframe");
var src = iframe.attr("data-src");
iframe.attr("src", src);
};
function closeTutorial (o) {
- $("#tutorial").slideUp();
+ $("#tutorial").removeClass("active");
};
function useQuery (o) {
diff --git a/templates/layouts/snippet.html.ep b/templates/layouts/snippet.html.ep
index 1c3ef1c..77c50ba 100644
--- a/templates/layouts/snippet.html.ep
+++ b/templates/layouts/snippet.html.ep
@@ -3,7 +3,8 @@
<head>
<title><%= title %></title>
%= stylesheet '/style.css'
-%= stylesheet '/kwic-3.0.css'
+%= stylesheet '/kwic-4.0.css'
+%= stylesheet '/responsive.css'
%= stylesheet '/fontawesome/font-awesome.min.css'
%= javascript '/jquery-2.0.0.min.js'
<meta charset="utf-8" />