2 files changed, 81 insertions, 7 deletions

diff --git a/ext/mixed/css/display.css b/ext/mixed/css/display.css
index cdc1be8c..eadb9dae 100644
--- a/ext/mixed/css/display.css
+++ b/ext/mixed/css/display.css
@@ -46,6 +46,10 @@ hr {
     display: none;
 }
 
+.invisible {
+    visibility: hidden;
+}
+
 
 /*
  * Entries
@@ -88,6 +92,10 @@ hr {
     background-color: #5cb85c;
 }
 
+.tag-partOfSpeech {
+    background-color: #565656;
+}
+
 .actions .disabled {
     pointer-events: none;
     cursor: default;
@@ -118,21 +126,79 @@ hr {
     font-size: 24px;
 }
 
-.expression a {
+.expression .kanji-link {
     border-bottom: 1px #777 dashed;
     color: #333;
     text-decoration: none;
 }
 
+.expression-popular, .expression-popular .kanji-link {
+    color: #0275d8;
+}
+
+.expression-rare, .expression-rare .kanji-link {
+    color: #999;
+}
+
+.expression .peek-wrapper {
+    font-size: 14px;
+    white-space: nowrap;
+    display: inline-block;
+    position: relative;
+    width: 0px;
+    height: 0px;
+    visibility: hidden;
+}
+
+.expression .peek-wrapper .action-play-audio {
+    position: absolute;
+    left: 0px;
+    bottom: 10px;
+}
+
+.expression .peek-wrapper .tags {
+    position: absolute;
+    left: 0px;
+    bottom: -10px;
+}
+
+.expression .peek-wrapper .frequencies {
+    position: absolute;
+    left: 0px;
+    bottom: -30px;
+}
+
+.expression:hover .peek-wrapper {
+    visibility: visible;
+}
+
 .reasons {
     color: #777;
     display: inline-block;
 }
 
+.compact-info {
+    display: inline-block;
+}
+
 .glossary ol, .glossary ul {
     padding-left: 1.4em;
 }
 
+.glossary ul.compact-glossary {
+    display: inline;
+    list-style: none;
+    padding-left: 0px;
+}
+
+.glossary .compact-glossary li {
+    display: inline;
+}
+
+.glossary .compact-glossary li:not(:first-child):before {
+    content: " | ";
+}
+
 .glossary li {
     color: #777;
 }
@@ -141,6 +207,10 @@ hr {
     color: #000;
 }
 
+div.glossary-item.compact-glossary {
+    display: inline;
+}
+
 .glyph {
     font-family: kanji-stroke-orders;
     font-size: 120px;
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 302a6280..41fe85eb 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -71,8 +71,10 @@ class Display {
 
     onAudioPlay(e) {
         e.preventDefault();
-        const index = Display.entryIndexFind($(e.currentTarget));
-        this.audioPlay(this.definitions[index]);
+        const link = $(e.currentTarget);
+        const definitionIndex = Display.entryIndexFind(link);
+        const expressionIndex = link.closest('.entry').find('.expression .action-play-audio').index(link);
+        this.audioPlay(this.definitions[definitionIndex], expressionIndex);
     }
 
     onNoteAdd(e) {
@@ -183,7 +185,7 @@ class Display {
             80: /* p */ () => {
                 if (e.altKey) {
                     if ($('.entry').eq(this.index).data('type') === 'term') {
-                        this.audioPlay(this.definitions[this.index]);
+                        this.audioPlay(this.definitions[this.index], this.options.general.resultOutputMode === 'merge' ? 0 : -1);
                     }
 
                     return true;
@@ -234,8 +236,10 @@ class Display {
             const params = {
                 definitions,
                 addable: options.anki.enable,
-                grouped: options.general.groupResults,
+                grouped: options.general.resultOutputMode === 'group',
+                merged: options.general.resultOutputMode === 'merge',
                 playback: options.general.audioSource !== 'disabled',
+                compactGlossaries: options.general.compactGlossaries,
                 debug: options.general.debugInfo
             };
 
@@ -379,11 +383,11 @@ class Display {
         }
     }
 
-    async audioPlay(definition) {
+    async audioPlay(definition, expressionIndex) {
         try {
             this.spinner.show();
 
-            let url = await apiAudioGetUrl(definition, this.options.general.audioSource);
+            let url = await apiAudioGetUrl(expressionIndex === -1 ? definition : definition.expressions[expressionIndex], this.options.general.audioSource);
             if (!url) {
                 url = '/mixed/mp3/button.mp3';
             }