Dictionary image display refactoring (#1687)

* Generalize image definition generation

* Enable optional aspect ratio

* Move styles

* Update styles

* Add more options for collapsing images

* Add image options for collapsing

* Improve layout for images that are collapsed

1 files changed, 42 insertions, 33 deletions

diff --git a/ext/css/display.css b/ext/css/display.css
index d9a2acd2..529e4249 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -1571,6 +1571,8 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 .gloss-image-link {
     cursor: inherit;
     color: inherit;
+    display: inline-block;
+    position: relative;
 }
 .gloss-image-link[href]:hover {
     cursor: pointer;
@@ -1588,7 +1590,7 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
     white-space: normal;
     color: var(--text-color-light3);
 }
-.gloss-item[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
+.gloss-image-link[data-has-image=true][data-image-load-state=load-error] .gloss-image-container-overlay::after {
     content: 'Image failed to load';
     display: table-cell;
     width: 100%;
@@ -1599,15 +1601,17 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
 }
 .gloss-image {
     display: inline-block;
+    vertical-align: top;
+    object-fit: contain;
+    border: none;
+    outline: none;
+}
+.gloss-image-link[data-has-aspect-ratio=true] .gloss-image {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
-    vertical-align: top;
-    object-fit: contain;
-    border: none;
-    outline: none;
 }
 .gloss-image:not([src]) {
     display: none;
@@ -1619,13 +1623,15 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
     image-rendering: pixelated;
     image-rendering: crisp-edges;
 }
-.gloss-image-aspect-ratio-sizer {
-    content: '';
+.gloss-image-link[data-has-aspect-ratio=true] .gloss-image-aspect-ratio-sizer {
     display: inline-block;
     width: 0;
     vertical-align: top;
     font-size: 0;
 }
+.gloss-image-link-text {
+    display: none;
+}
 .gloss-image-link-text::before {
     content: '[';
 }
@@ -1633,9 +1639,38 @@ button.definition-item-expansion-button:focus:focus-visible+.definition-item-con
     content: ']';
 }
 .gloss-image-description {
+    display: block;
     white-space: pre-line;
 }
 
+.gloss-image-link[data-collapsed=true] .gloss-image-container,
+:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-container {
+    display: none;
+    position: absolute;
+    left: 0;
+    top: 100%;
+    z-index: 1;
+}
+.entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsed=true] .gloss-image-container,
+:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-link[data-collapsible=true] .gloss-image-container {
+    bottom: 100%;
+    top: auto;
+}
+.gloss-image-link[data-collapsed=true]:hover .gloss-image-container,
+.gloss-image-link[data-collapsed=true]:focus .gloss-image-container,
+:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:hover .gloss-image-container,
+:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true]:focus .gloss-image-container {
+    display: block;
+}
+.gloss-image-link[data-collapsed=true] .gloss-image-link-text,
+:root[data-glossary-layout-mode=compact] .gloss-image-link[data-collapsible=true] .gloss-image-link-text {
+    display: inline;
+}
+.gloss-image-link[data-collapsed=true]~.gloss-image-description,
+:root[data-glossary-layout-mode=compact] .gloss-image-description {
+    display: inline;
+}
+
 
 /* Kanji */
 .kanji-glyph-container {
@@ -2110,32 +2145,6 @@ button.footer-notification-close-button {
     color: var(--text-color-light3);
 }
 
-:root[data-glossary-layout-mode=compact] .gloss-image-container {
-    display: none;
-    position: absolute;
-    left: 0;
-    top: 100%;
-    z-index: 1;
-}
-:root[data-glossary-layout-mode=compact] .entry:nth-last-of-type(1):not(:nth-of-type(1)) .gloss-image-container {
-    bottom: 100%;
-    top: auto;
-}
-:root[data-glossary-layout-mode=compact] .gloss-image-link {
-    position: relative;
-    display: inline-block;
-}
-:root[data-glossary-layout-mode=compact] .gloss-image-link:hover .gloss-image-container,
-:root[data-glossary-layout-mode=compact] .gloss-image-link:focus .gloss-image-container {
-    display: block;
-}
-:root:not([data-glossary-layout-mode=compact]) .gloss-image-link-text {
-    display: none;
-}
-:root:not([data-glossary-layout-mode=compact]) .gloss-image-description {
-    display: block;
-}
-
 :root[data-popup-display-mode=full-width] .frame-resizer-container {
     display: none;
 }