Added flags to kwic-views
diff --git a/dev/demo/all.html b/dev/demo/all.html
index ff21908..d2fd6ce 100644
--- a/dev/demo/all.html
+++ b/dev/demo/all.html
@@ -82,8 +82,10 @@
data-text-id="03313"
data-match-id="p102-103"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
- id="WPD-WWW.03313-p102-103">
+ id="WPD-WWW.03313-p102-103"
+ class="marked">
<div>
+ <div class="flag"></div>
<div class="snippet startMore endMore"><span class="context-left">In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an die Funktion </span><mark><mark class="class-2 level-1">Dies </mark><mark class="class-1 level-0"><mark class="class-2 level-1"><mark class="class-3 level-2">ist</mark> ein</mark> Test</mark></mark><span class="context-right"> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>
<!-- only inject via javascript! -->
</div>
@@ -108,8 +110,10 @@
data-text-id="06056"
data-match-id="p2564-2565"
data-available-info="base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans"
- id="WPD-HHH.06056-p2564-2565">
+ id="WPD-HHH.06056-p2564-2565"
+ class="marked">
<div>
+ <div class="flag"></div>
<div class="snippet startMore endMore"><span class="context-left">HDTV Samples from European (and other) broadcasters and </span><span class="match">test</span><span class="context-right"> transmissions in Europe</span></div>
<div class="tokenInfo"></div>
</div>
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index 7284311..8e68fbf 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -23,6 +23,7 @@
border: 1px solid $kwic-border;
font-size: 10pt;
> li {
+ position: relative;
border: {
style: solid;
color: $dark-orange;
@@ -43,10 +44,12 @@
.matchinfo {
display: none;
}
- > div > div.snippet {
- text-overflow: ellipsis;
- text-indent: 0;
- text-shadow: $light-shadow;
+ > div {
+ > div.snippet {
+ text-overflow: ellipsis;
+ text-indent: 0;
+ text-shadow: $light-shadow;
+ }
}
}
> div {
@@ -127,21 +130,33 @@
&:not(.active):not(:target) p.ref {
display: none;
}
- &.active p.ref,
- &:target p.ref {
-// background-color: $dark-orange;
- color: white;
- padding: 3pt 10pt;
- padding-right: $right-match-distance;
- margin: 0pt;
- width: 100%;
- bottom: 0;
- z-index: 30;
+ &.active, &:target {
+ p.ref {
+ color: white;
+ padding: 3pt 10pt;
+ padding-right: $right-match-distance;
+ margin: 0pt;
+ width: 100%;
+ bottom: 0;
+ z-index: 30;
+ }
+ }
+ }
+ > li.marked:not(.active):not(:target) {
+ div.flag {
+ position: absolute;
+ background-color: $dark-orange;
+ top: 0;
+ width: 11px;
+ height: 100%;
+ margin-left: 50%;
+ border-right: 1px solid $light-orange;
}
}
}
}
+
ul.action {
// background-color: $dark-orange;
font-size: 12pt;