Try to merge kwic test with real-css
Change-Id: I018524f221b9a7c07abb6e266172136b758419f9
diff --git a/dev/demo/css/kwic.css b/dev/demo/css/kwic.css
deleted file mode 100644
index 3942b54..0000000
--- a/dev/demo/css/kwic.css
+++ /dev/null
@@ -1,53 +0,0 @@
-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
index b7f87d2..a120055 100644
--- a/dev/demo/kwic.html
+++ b/dev/demo/kwic.html
@@ -2,31 +2,66 @@
<html>
<head>
<meta charset="utf-8">
- <link rel="stylesheet" href="css/kwic.css" />
+ <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 id="search">
+ <ol>
+ <li class="match">
+ <div class="meta">GOE/AAA/444</div>
+ <div class="meta">Goethe</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet">
+ <div class="flag"></div>
+ <span class="context-left">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><span class="match">Hey</span><span class="context-right">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>
+ <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</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>
+ </li>
+ <li class="match active">
+ <div class="meta">III/AAA/111</div>
+ <div class="meta">Schiller</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet">
+ <div class="flag"></div>
+ <span class="context-left">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><span class="match"><mark>Hey</mark></span><span class="context-right">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>
+ <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
</div>
</div>
- </div>
- </li>
- </ol>
+ </li>
+ <li class="match">
+ <div class="meta">III/AAA/111</div>
+ <div class="meta">Schiller</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet">
+ <span class="context-left">Der</span><mark>alte</mark><span class="context-right">Baum</span>
+ </div>
+ </div>
+ </div>
+ </li>
+ </ol>
+
+ <ol class="align-right">
+ <li class="match">
+ <div class="meta">GOE/AAA/444</div>
+ <div class="meta">Goethe</div>
+ <div class="match-main">
+ <div class="match-wrap">
+ <div class="snippet">
+ <div class="flag"></div>
+ <span class="context-left">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><span class="match">Hey</span><span class="context-right">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>
+ <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
+ </div>
+ </div>
+ </li>
+ </ol>
+
+ </div>
</body>
</html>