Improve kwic view
Change-Id: I79e9970e4151b8b2ee510d6ba9c698eab428f339
diff --git a/dev/demo/css/kwic.css b/dev/demo/css/kwic.css
new file mode 100644
index 0000000..3942b54
--- /dev/null
+++ b/dev/demo/css/kwic.css
@@ -0,0 +1,53 @@
+ol {
+ overflow-x: hidden;
+ overflow-y: visible;
+ width: auto;
+ border: 1px solid black;
+ text-indent: 0;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+ol li {
+ display: table-row;
+}
+
+ol li div.left-col {
+ position: relative;
+ display: table-cell;
+ table-layout: fixed;
+ z-index: 5;
+ overflow-y: visible;
+ background-color: green;
+}
+
+div.main-col {
+ position: relative;
+ z-index: 4;
+ display: table-cell;
+}
+
+div.main-col div.snippet div.flag {
+ height: 100%;
+ margin-left: 50%;
+ position: absolute;
+ width: 11px;
+ background-color: red;
+}
+
+ol li div.main-col > div {
+ margin-left: -49999.5%;
+ width: 99999%;
+ overflow-x: hidden;
+ overflow-y: visible;
+ position: relative;
+ box-sizing: border-box;
+}
+
+div.snippet span.first {
+ display: inline-block;
+ width: 50.01%;
+ text-align: right;
+}
+
diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
new file mode 100644
index 0000000..b7f87d2
--- /dev/null
+++ b/dev/demo/kwic.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <link rel="stylesheet" href="css/kwic.css" />
+ </head>
+ <body>
+ <ol>
+ <li>
+ <div class="left-col">GOE/AAA/444</div>
+ <div class="main-col">
+ <div>
+ <div class="snippet">
+ <div class="flag"></div>
+ <span class="first">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><mark>Hey</mark><span class="second">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+ </div>
+ </div>
+ </div>
+ </li>
+ <li>
+ <div class="left-col">III/AAA/111</div>
+ <div class="main-col">
+ <div>
+ <div class="snippet">
+ <span class="first">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span><mark>Hey</mark><span class="second">Der Fehler unterläuft häufig bei der direkten Übersetzung aus dem Englischen, wenn im originalen Ausdruck die beiden Wortteile verschiedene Wörter sind und sich das Adjektiv wahlweise auf das erste oder zweite Wort bezieht. Ein Beispiel ist multiples Testproblem für multiple test problem.</span>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ol>
+ </body>
+</html>