Improved siglen visualization

Change-Id: Id372d76ec91e873a8c0a11e8c6fa54d9a5b6e427
diff --git a/dev/scss/main/kwic-new.scss b/dev/scss/main/kwic-new.scss
index de6bcf3..20820d2 100644
--- a/dev/scss/main/kwic-new.scss
+++ b/dev/scss/main/kwic-new.scss
@@ -33,15 +33,20 @@
       z-index: 5;
       overflow-y: visible;
       white-space: nowrap;
-      background-color: $light-green;
-      // border-top: 1px solid lighten($light-green, 10%);
+      background-color: $middle-grey;
       border: {
-        color: $dark-green;
+        color: $dark-grey;
         style: solid;
-        width: 1px 0;
+        width: 2px 1px 0 0;
+      }
+      &:empty {
+        border-width: 0 1px 0 0;
+      }
+      &.flip {
+        background-color: lighten($middle-grey, 10%);
       }
       color: $nearly-white;
-      font-size: 80%;
+      font-size: 75%;
       padding: 0 5pt;
     }
     &:first-of-type div.meta {
diff --git a/lib/Kalamar/API.pm b/lib/Kalamar/API.pm
index 70bb97e..763c124 100644
--- a/lib/Kalamar/API.pm
+++ b/lib/Kalamar/API.pm
@@ -515,10 +515,10 @@
     # TODO: Check for ref!
     foreach (@$warnings) {
       $c->notify(
-	warn =>
-	  ($_->[0] ? $_->[0] . ': ' : '') .
-	    $_->[1]
-	  );
+        warn =>
+          ($_->[0] ? $_->[0] . ': ' : '') .
+          $_->[1]
+        );
     };
   };
 };
@@ -691,7 +691,7 @@
 
 =head1 COPYRIGHT AND LICENSE
 
-Copyright (C) 2015, L<IDS Mannheim|http://www.ids-mannheim.de/>
+Copyright (C) 2015-2017, L<IDS Mannheim|http://www.ids-mannheim.de/>
 Author: L<Nils Diewald|http://nils-diewald.de/>
 
 Kalamar is developed as part of the L<KorAP|http://korap.ids-mannheim.de/>
@@ -707,58 +707,3 @@
 L<BSD-2 License|https://raw.githubusercontent.com/KorAP/Kalamar/master/LICENSE>.
 
 =cut
-
-  # Temporary:
-  my $collection_query = {
-    '@type' => "koral:docGroup",
-    "operation" => "operation:or",
-    "operands" => [
-      {
-	'@type' => "koral:docGroup",
-	"operation" => "operation:and",
-	"operands" => [
-	  {
-	    '@type' => "koral:doc",
-	    "key" => "title",
-	    "match" => "match:eq",
-	    "value" => "Der Birnbaum",
-	    "type" => "type:string"
-	  },
-	  {
-	    '@type' => "koral:doc",
-	    "key" => "pubPlace",
-	    "match" => "match:eq",
-	    "value" => "Mannheim",
-	    "type" => "type:string"
-	  },
-	  {
-	    '@type' => "koral:docGroup",
-	    "operation" => "operation:or",
-	    "operands" => [
-	      {
-		'@type' => "koral:doc",
-		"key" => "subTitle",
-		"match" => "match:eq",
-		"value" => "Aufzucht oder Pflege",
-		"type" => "type:string"
-	      },
-	      {
-		'@type' => "koral:doc",
-		"key" => "subTitle",
-		"match" => "match:eq",
-		"value" => "Gedichte",
-		"type" => "type:string"
-	      }
-	    ]
-	  }
-	]
-      },
-      {
-	'@type' => "koral:doc",
-	"key" => "pubDate",
-	"match" => "match:geq",
-	"value" => "2015-03-05",
-	"type" => "type:date"
-      }
-    ]
-  };
diff --git a/lib/Kalamar/Apps/test_backend.pl b/lib/Kalamar/Apps/test_backend.pl
index c529c4c..9d851f1 100644
--- a/lib/Kalamar/Apps/test_backend.pl
+++ b/lib/Kalamar/Apps/test_backend.pl
@@ -223,3 +223,62 @@
 };
 
 app->start;
+
+
+__END__
+
+
+  # Temporary:
+  my $collection_query = {
+    '@type' => "koral:docGroup",
+    "operation" => "operation:or",
+    "operands" => [
+      {
+	'@type' => "koral:docGroup",
+	"operation" => "operation:and",
+	"operands" => [
+	  {
+	    '@type' => "koral:doc",
+	    "key" => "title",
+	    "match" => "match:eq",
+	    "value" => "Der Birnbaum",
+	    "type" => "type:string"
+	  },
+	  {
+	    '@type' => "koral:doc",
+	    "key" => "pubPlace",
+	    "match" => "match:eq",
+	    "value" => "Mannheim",
+	    "type" => "type:string"
+	  },
+	  {
+	    '@type' => "koral:docGroup",
+	    "operation" => "operation:or",
+	    "operands" => [
+	      {
+		'@type' => "koral:doc",
+		"key" => "subTitle",
+		"match" => "match:eq",
+		"value" => "Aufzucht oder Pflege",
+		"type" => "type:string"
+	      },
+	      {
+		'@type' => "koral:doc",
+		"key" => "subTitle",
+		"match" => "match:eq",
+		"value" => "Gedichte",
+		"type" => "type:string"
+	      }
+	    ]
+	  }
+	]
+      },
+      {
+	'@type' => "koral:doc",
+	"key" => "pubDate",
+	"match" => "match:geq",
+	"value" => "2015-03-05",
+	"type" => "type:date"
+      }
+    ]
+  };
diff --git a/templates/match.html.ep b/templates/match.html.ep
index 7979fbd..14a554a 100644
--- a/templates/match.html.ep
+++ b/templates/match.html.ep
@@ -12,7 +12,17 @@
     data-info="<%== b(encode_json(\%match_data))->decode->xml_escape %>"
     id="<%= $id %>"\
     <% if (current_route eq 'match') { %> class="active"<% } =%>>
-  <div class="meta"><%= $text_sigle %></div>
+
+%# This should be done using JavaScript
+% my ($show_sigle, $flip) = ('', stash('flip') // 'flip');
+% if ($text_sigle ne stash('last_sigle')) {
+%   $show_sigle = $text_sigle;
+%   stash(last_sigle => $text_sigle);
+%   $flip = $flip eq 'flip' ? 'flop' : 'flip'; 
+%   stash(flip => $flip);
+% }
+  
+  <div class="meta <%= $flip %>"><%= $show_sigle %></div>
   <div class="match-main">
     <div class="match-wrap">
 %# --- Snippet