Add support for inline markers

Change-Id: Ic365380fe3c6b2b8f68dcd7c0707878e6de26fab
KorAP · May 27, 2024 · 8681709 · 8681709
1 parent 3422d45
commit 8681709
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 8 deletions.
diff --git a/Changes b/Changes
@@ -1,4 +1,4 @@
-0.53 2024-05-14
+0.53 2024-05-27
         - Add openapi url to documentation. (hebasta)
         - Solve a potential timing issue in VC rendering. (diewald)
         - Update DeReKo link in corpus specific localization. (hebasta)
@@ -9,6 +9,7 @@
           method. (diewald)
         - Add configuration option for defaults: items_per_page, context.
           (diewald)
+        - Support for inline-markers in snippets. (see Krill #132; diewald)
 
 0.52 2023-11-29
         - Update Piwik dependency to point to matomo.js. (diewald)

diff --git a/dev/demo/all.html b/dev/demo/all.html
@@ -231,7 +231,7 @@ <h2>Einstellungen</h2>
         <div class="match-wrap">
 	        <div class="snippet startMore endMore">
 	          <div class="flag"></div>
-            <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>
+                                  <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"><span class="inline-marker" data-key="who" data-value="Mai Thi Nguyen-Kim"></span><span class="inline-marker" data-key="start" data-value="0:00"></span><span class="inline-marker" data-key="end" data-value="01:20"></span>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><!--<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>
       </div>

diff --git a/dev/demo/kwic.html b/dev/demo/kwic.html
@@ -14,7 +14,7 @@
             <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>
+                <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"><span class="inline-marker" data-key="who" data-value="Mai Thi Nguyen-Kim"></span><span class="inline-marker" data-key="start" data-value="0:00"></span><span class="inline-marker" data-key="end" data-value="01:20"></span>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>
             </div>
             <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>
@@ -27,7 +27,7 @@
             <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>
+                <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"><span class="inline-marker" data-key="who" data-value="Mai Thi Nguyen-Kim"></span><span class="inline-marker" data-key="start" data-value="0:00"></span><span class="inline-marker" data-key="end" data-value="01:20"></span>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>
             </div>
             <p class="ref"><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>

diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
@@ -162,7 +162,7 @@ div.snippet {
       right: 4pt;
     }
   }
-
+  
   &.startMore:before,
   &.endMore:after {
     content:       "…";
@@ -221,10 +221,41 @@ body.no-js #search > ol > li:active,
       display: inline !important;
     }
 
-	  > * {
-	    background-color: transparent;
-	  }
+    > * {
+      background-color: transparent;
+    }
+
+    span.inline-marker {
+      font-weight: normal;
+      color: $dark-grey;
+      &::before, &::after {
+        display: inline-block !important;
+        border-width: 2px;
+        border-radius: 0;
+        margin: 0 3pt;
+        padding:  0 4pt;
+      }
+      &::before {
+        color: white;
+        margin-right: 0;
+        border-top-left-radius: 5px;
+        border-bottom-left-radius: 5px;
+        border-width-right: 0;
+        background-color: $dark-orange  !important;
+        content: attr(data-key) ': ';
+      }
 
+      &::after {
+        border-width-left: 0;
+        margin-left: 0;
+        padding-left: 0;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        background-color: $dark-orange  !important;
+        content: attr(data-value);
+      }
+    }
+
     div.flag {
       display: none;
     }