Update the way captions show up in packed-overlay and packed-hover

Instead of taking up the entire height of the thumbnail, this now
shows only the first line of the caption with ellipsis. The rest
of the caption can be seen by hovering over it.

This lets you click the image thumbnail, even when the caption is
too long, and also looks much neater in a gallery of lots of images
and long captions.

Bug: T93393
Change-Id: I6688e9574d72b2ea6acee729ecc1cb2f331cd0f8

diff --git a/resources/src/mediawiki/page/gallery.css b/resources/src/mediawiki/page/gallery.css
index 4d43e6a..3ed4870 100644 (file)
--- a/resources/src/mediawiki/page/gallery.css
+++ b/resources/src/mediawiki/page/gallery.css
@@ -90,10 +90,35 @@ ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapp
        bottom: 0;
        left: 0; /* Needed for IE */
        height: auto;
+       max-height: 40%;
+       overflow: hidden;
        font-weight: bold;
        margin: 2px; /* correspond to style on div.thumb */
 }
 
+ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper p,
+ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper p,
+ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper p {
+       text-overflow: ellipsis;
+       white-space: nowrap;
+       overflow: hidden;
+}
+
+ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover,
+ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover,
+ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover {
+       overflow: visible;
+       max-height: none;
+}
+
+ul.mw-gallery-packed-hover li.gallerybox div.gallerytextwrapper:hover p,
+ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper:hover p,
+ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper:hover p {
+       text-overflow: clip;
+       white-space: normal;
+       overflow: visible;
+}
+
 ul.mw-gallery-packed-hover,
 ul.mw-gallery-packed-overlay,
 ul.mw-gallery-packed {