Merge pull request #89 from fgnt/viz-search

Various minor improvements to the visualization

.gitignore

@@ -7,7 +7,7 @@ example_files/viz
 !example_files/*.seglst.json
 
 # Created by pyodide
-.pyodide-xbuildenv
+.pyodide-xbuildenv*
 
 # Downloaded by the md_eval wrapper
 meeteval/der/md-eval-22.pl
@@ -159,4 +159,4 @@ cython_debug/
 .idea/
 
 # Some random folder
-junit/
+junit/

meeteval/viz/visualize.css

@@ -119,6 +119,10 @@ code {
     flex-wrap: wrap;
 }
 
+audio.info-value {
+    height: 1.5em;
+}
+
 .legend-element {
     margin: 0 3px 0 3px;
     padding: 0 0px 0 0;
@@ -129,6 +133,7 @@ code {
     display: inline-block;
     width: 10px;
     height: 10px;
+    border: 1px solid #aaa;
 }
 
 .legend-label {
@@ -164,6 +169,21 @@ i, .icon {
     margin-right: 0px;
 }
 
+/* Make copy button same height as text in the details preview and hide any fancy formatting.
+This prevents the view from jumping when a segment is selected*/
+.info-value .copybutton {
+    height: 1em;
+    padding: 0 5px;
+    margin: 0;
+    border: none;
+}
+
+.info-value .copybutton i {
+    margin-right: 0px;
+    height: 1em;
+    font-size: .75em;
+}
+
 /* Plot elements */
 .plot {
     position: relative;
@@ -440,6 +460,18 @@ wer table */
     touch-action: manipulation;
 }
 
+.search-bar button:disabled {
+    background-color: #ccc;
+    color: #666;
+    cursor: default;
+}
+
+/* Make italic and gray*/
+.search-bar .match-number {
+    /* font-style: italic; */
+    color: gray;
+}
+
 .clickable {
     cursor: pointer;
     text-decoration: underline;